@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root{
  --teal:#249B83;
  --teal-700:#187764;
  --teal-soft:#EAF6F2;
  --navy:#0B1F33;
  --navy-2:#132B43;
  --page:#F4F6F8;
  --card:#FFFFFF;
  --subtle:#F8FAFB;
  --text:#0B1F33;
  --secondary:#475467;
  --muted:#667085;
  --line:#E4E7EC;
  --line-strong:#D0D5DD;
  --success:#087A55;
  --warning:#9A6700;
  --danger:#B42318;
  --assistant:#7257D5;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --shadow:0 1px 2px rgba(11,31,51,.06);
  --shadow-float:0 20px 55px rgba(11,31,51,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--card);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img,svg{display:block}
.landing-shell{min-height:100vh;overflow:hidden}
.container{width:min(1180px,calc(100% - 32px));margin:0 auto}
.ui-icon{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(228,231,236,.82);
}
.header-inner{
  min-height:72px;display:flex;align-items:center;gap:22px
}
.brand{
  display:flex;align-items:center;gap:10px;margin-right:auto;min-width:max-content
}
.brand-logo{display:block;height:36px;width:auto;max-width:min(190px,44vw)}
.brand-symbol{display:none}
.brand-symbol::after{display:none}
.brand-copy{display:grid;line-height:1}
.brand-copy strong{font-size:18px;letter-spacing:-.5px}
.brand-copy small{font-size:9px;color:var(--muted);margin-top:4px;font-weight:700}
.desktop-nav{display:none;align-items:center;gap:24px;font-size:14px;font-weight:700;color:var(--secondary)}
.desktop-nav a:hover{color:var(--teal-700)}
.header-actions{display:flex;align-items:center;gap:8px}
.btn{
  min-height:44px;padding:10px 15px;border-radius:11px;border:1px solid var(--line-strong);
  background:#fff;color:var(--navy);font-weight:800;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:.18s ease;cursor:pointer
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.primary:hover{background:var(--teal-700)}
.btn.ghost{border-color:transparent;background:transparent}
.header-actions .login-link{display:none}

/* Hero */
.hero{
  position:relative;padding:62px 0 42px;
  background:
    radial-gradient(circle at 80% 10%,rgba(36,155,131,.12),transparent 30%),
    radial-gradient(circle at 10% 30%,rgba(11,31,51,.05),transparent 35%),
    linear-gradient(#fff,#fbfcfd);
}
.hero-grid{display:grid;gap:34px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;
  background:var(--teal-soft);color:var(--teal-700);border:1px solid #CDE7DF;
  padding:8px 11px;border-radius:999px;font-size:12px;font-weight:800
}
.hero h1{
  font-size:clamp(36px,8vw,66px);line-height:.99;letter-spacing:-2.6px;
  margin:18px 0;color:var(--navy);max-width:790px
}
.hero h1 span{color:var(--teal)}
.hero-lead{
  font-size:18px;line-height:1.65;color:var(--secondary);max-width:650px;margin:0
}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.hero-actions .btn{min-height:49px;padding-inline:18px}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:22px;
  color:var(--muted);font-size:12px;font-weight:700
}
.trust-item{display:flex;align-items:center;gap:6px}
.trust-dot{width:6px;height:6px;border-radius:50%;background:var(--teal)}

/* Product mock */
.product-stage{position:relative;min-width:0}
.product-glow{
  position:absolute;inset:10% 5% -2%;background:rgba(36,155,131,.13);
  filter:blur(50px);border-radius:40px
}
.browser{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow-float);overflow:hidden
}
.browser-top{
  height:45px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 13px;gap:7px;background:#fbfcfd
}
.browser-dot{width:8px;height:8px;border-radius:50%;background:#d7dce2}
.browser-address{
  height:25px;border:1px solid var(--line);border-radius:7px;background:#fff;
  margin-left:8px;flex:1;display:flex;align-items:center;padding:0 9px;
  color:#98A2B3;font-size:8px
}
.app-preview{display:grid;grid-template-columns:54px minmax(0,1fr);min-height:355px}
.preview-sidebar{
  background:var(--navy);padding:14px 10px;display:grid;align-content:start;gap:15px
}
.preview-brand{width:30px;height:30px;border-radius:8px;background:url("assets/cailisto-app-icon.png") center/contain no-repeat;margin-bottom:3px}
.preview-nav-icon{width:18px;height:18px;border-radius:5px;background:rgba(255,255,255,.13);margin:auto}
.preview-nav-icon.active{background:var(--teal)}
.preview-main{padding:16px;background:var(--page);min-width:0}
.preview-top{display:flex;justify-content:space-between;gap:10px;align-items:start}
.preview-title strong{font-size:13px}
.preview-title small{display:block;color:var(--muted);font-size:7px;margin-top:3px}
.preview-action{width:78px;height:25px;background:var(--teal);border-radius:7px}
.preview-alert{
  margin-top:12px;padding:8px 10px;background:#FFF8E7;border:1px solid #F3E3B3;
  border-radius:8px;font-size:7px;color:#76570A;display:flex;justify-content:space-between
}
.preview-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.preview-kpi{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px}
.preview-kpi small{display:block;color:var(--muted);font-size:6px}
.preview-kpi strong{display:block;font-size:12px;margin-top:4px}
.preview-chart{margin-top:9px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}
.chart-head{display:flex;justify-content:space-between;align-items:center}
.chart-head strong{font-size:8px}
.chart-head span{font-size:6px;color:var(--muted)}
.chart-bars{height:92px;display:flex;align-items:end;gap:7px;padding:12px 2px 0}
.chart-bars i{
  display:block;flex:1;background:linear-gradient(var(--teal),#72c7b5);border-radius:4px 4px 2px 2px
}
.chart-bars i:nth-child(1){height:42%}.chart-bars i:nth-child(2){height:67%}
.chart-bars i:nth-child(3){height:53%}.chart-bars i:nth-child(4){height:81%}
.chart-bars i:nth-child(5){height:62%}.chart-bars i:nth-child(6){height:90%}
.preview-row{display:grid;grid-template-columns:1.3fr .8fr;gap:8px;margin-top:9px}
.preview-list,.preview-cai{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px}
.preview-line{height:7px;background:#edf1f4;border-radius:4px;margin:8px 0}
.preview-line.short{width:62%}
.preview-cai{background:linear-gradient(145deg,#fff,#F7F4FF)}
.preview-cai-badge{font-size:6px;color:var(--assistant);font-weight:800}
.preview-cai strong{font-size:8px;display:block;margin:7px 0}
.preview-cai p{font-size:6px;line-height:1.4;color:var(--muted);margin:0}

/* Logos / positioning */
.value-strip{padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.value-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.value-item{display:flex;align-items:flex-start;gap:9px}
.value-icon{
  width:34px;height:34px;border-radius:10px;background:var(--teal-soft);
  color:var(--teal-700);display:grid;place-items:center;flex:0 0 auto
}
.value-icon .ui-icon{width:16px;height:16px}
.value-item strong{font-size:14px;display:block}
.value-item small{font-size:12px;color:var(--muted);line-height:1.5;display:block;margin-top:3px}

/* Sections */
.section{padding:72px 0}
.section.alt{background:var(--page)}
.section-heading{max-width:680px;margin:0 auto 34px;text-align:center}
.section-heading .eyebrow{margin:auto}
.section-heading h2{
  font-size:clamp(29px,6vw,45px);line-height:1.08;letter-spacing:-1.6px;
  margin:14px 0 10px;color:var(--navy)
}
.section-heading p{color:var(--secondary);font-size:16px;line-height:1.7;margin:0}
.feature-grid{display:grid;gap:12px}
.feature-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--shadow);min-height:190px
}
.feature-card.featured{
  background:linear-gradient(150deg,var(--navy),#123856);color:#fff;border-color:transparent
}
.feature-card .feature-icon{
  width:40px;height:40px;border-radius:11px;background:var(--teal-soft);
  color:var(--teal-700);display:grid;place-items:center
}
.feature-card.featured .feature-icon{background:rgba(255,255,255,.11);color:#fff}
.feature-card h3{font-size:18px;margin:18px 0 8px}
.feature-card p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}
.feature-card.featured p{color:#CED8E2}
.feature-tag{display:inline-flex;margin-top:14px;font-size:11px;font-weight:800;color:var(--teal-700)}
.feature-card.featured .feature-tag{color:#83D6C4}

/* Workflow */
.workflow{display:grid;gap:12px}
.step{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:19px;display:grid;grid-template-columns:auto 1fr;gap:13px
}
.step-number{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:var(--navy);font-size:11px;font-weight:800
}
.step h3{font-size:16px;margin:1px 0 6px}
.step p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}

/* Split product sections */
.split-section{display:grid;gap:30px;align-items:center}
.split-copy h2{
  font-size:clamp(28px,6vw,42px);line-height:1.08;letter-spacing:-1.4px;
  margin:13px 0 12px
}
.split-copy>p{color:var(--secondary);font-size:16px;line-height:1.7}
.check-list{display:grid;gap:11px;margin-top:20px}
.check-row{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--secondary);line-height:1.55}
.check-icon{
  width:21px;height:21px;border-radius:50%;background:var(--teal-soft);
  color:var(--teal-700);display:grid;place-items:center;flex:0 0 auto
}
.check-icon .ui-icon{width:12px;height:12px}
.phone-stage{
  max-width:315px;margin:auto;position:relative
}
.phone{
  border:8px solid var(--navy);border-radius:34px;background:var(--page);overflow:hidden;
  box-shadow:var(--shadow-float)
}
.phone-top{height:24px;background:var(--navy);position:relative}
.phone-top::after{
  content:"";position:absolute;width:74px;height:16px;border-radius:0 0 12px 12px;
  background:var(--navy);top:0;left:50%;transform:translateX(-50%)
}
.phone-body{padding:14px 12px 74px;min-height:510px;position:relative}
.mobile-brand{margin-bottom:14px}.mobile-brand img{display:block;height:24px;width:auto}
.mobile-card{
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:9px
}
.mobile-card small{font-size:7px;color:var(--muted)}
.mobile-card strong{display:block;margin-top:4px;font-size:14px}
.mobile-total{font-size:22px!important;color:var(--teal-700)}
.mobile-list-card{
  display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px;margin-top:8px
}
.mobile-avatar{width:34px;height:34px;border-radius:50%;background:var(--teal);color:white;display:grid;place-items:center;font-size:8px;font-weight:800}
.mobile-list-card b{font-size:8px}.mobile-list-card small{font-size:6px;display:block;margin-top:2px}
.mobile-amount{font-size:8px;color:var(--danger);font-weight:800}
.mobile-bottom{
  position:absolute;bottom:0;left:0;right:0;height:62px;background:#fff;
  border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:7px
}
.mobile-bottom span{display:grid;place-items:center;font-size:7px;color:var(--muted);font-weight:700}
.mobile-bottom span:nth-child(2){color:var(--teal-700)}

/* Cai */
.cai-wrap{
  background:linear-gradient(150deg,#F9F8FF,#fff);
  border:1px solid #E7E1FF;border-radius:22px;padding:22px
}
.cai-grid{display:grid;gap:24px;align-items:center}
.cai-orb{
  width:52px;height:52px;border-radius:16px;background:var(--assistant);
  color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px rgba(114,87,213,.22)
}
.cai-orb .ui-icon{width:25px;height:25px}
.chat-card{
  background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px;
  box-shadow:var(--shadow)
}
.chat-label{font-size:8px;color:var(--muted);font-weight:800;margin-bottom:6px}
.user-bubble{
  margin-left:15%;background:var(--navy);color:#fff;border-radius:13px 13px 4px 13px;
  padding:10px 11px;font-size:9px;line-height:1.5
}
.cai-bubble{
  margin-top:8px;margin-right:8%;background:#F6F3FF;border:1px solid #E5DFFF;
  border-radius:13px 13px 13px 4px;padding:11px;font-size:9px;line-height:1.5
}
.cai-result{
  margin-top:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px
}
.cai-result-row{display:flex;justify-content:space-between;gap:8px;padding:5px 0;font-size:8px}
.cai-result-row.total{border-top:1px solid var(--line);margin-top:4px;padding-top:8px;font-weight:800}
.cai-note{font-size:8px;color:var(--muted);margin-top:9px}

/* Pricing */
.pricing-grid{display:grid;gap:12px;max-width:830px;margin:auto}
.price-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:21px;position:relative
}
.price-card.recommended{border:2px solid var(--teal);box-shadow:0 14px 34px rgba(36,155,131,.12)}
.price-badge{
  position:absolute;top:14px;right:14px;background:var(--teal-soft);color:var(--teal-700);
  font-size:8px;font-weight:800;border-radius:999px;padding:6px 8px
}
.price-card h3{font-size:16px;margin:0}
.price-card>p{font-size:13px;color:var(--muted);line-height:1.6;min-height:32px}
.price{
  display:flex;align-items:end;gap:4px;margin:16px 0 4px
}
.price strong{font-size:30px;letter-spacing:-1px}
.price span{font-size:9px;color:var(--muted);padding-bottom:5px}
.price-note{font-size:8px!important;margin:0 0 16px!important}
.price-list{display:grid;gap:9px;margin:17px 0}
.price-list .check-row{font-size:10px}
.full{width:100%}

/* FAQ */
.faq-grid{display:grid;gap:9px;max-width:820px;margin:auto}
.faq-item{
  border:1px solid var(--line);border-radius:13px;background:#fff;padding:16px 17px
}
.faq-item summary{cursor:pointer;font-weight:800;font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:16px;color:var(--teal)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{color:var(--muted);font-size:13px;line-height:1.7;margin:12px 0 0}

/* CTA / footer */
.final-cta{padding:32px 0 72px}
.cta-panel{
  background:
    radial-gradient(circle at 85% 20%,rgba(36,155,131,.25),transparent 28%),
    linear-gradient(145deg,var(--navy),#133A59);
  color:#fff;border-radius:24px;padding:30px 22px;overflow:hidden;position:relative
}
.cta-panel h2{font-size:clamp(27px,6vw,42px);letter-spacing:-1.4px;line-height:1.08;margin:0 0 10px;max-width:600px}
.cta-panel p{font-size:12px;line-height:1.6;color:#CBD7E2;max-width:620px}
.cta-panel .btn{margin-top:10px}
.site-footer{border-top:1px solid var(--line);padding:28px 0 34px}
.footer-grid{display:grid;gap:20px}
.footer-brand p{font-size:9px;color:var(--muted);line-height:1.6;max-width:320px}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.footer-links strong{font-size:10px}
.footer-links a{display:block;font-size:9px;color:var(--muted);margin-top:8px}
.footer-bottom{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:8px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Tablet */
@media(min-width:700px){
  .container{width:min(1180px,calc(100% - 48px))}
  .header-actions .login-link{display:inline-flex}
  .hero{padding:86px 0 58px}
  .hero-grid{grid-template-columns:1.02fr .98fr;gap:44px}
  .preview-kpis{grid-template-columns:repeat(4,1fr)}
  .value-grid{grid-template-columns:repeat(4,1fr)}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .workflow{grid-template-columns:repeat(3,1fr)}
  .split-section{grid-template-columns:1fr 1fr;gap:60px}
  .cai-grid{grid-template-columns:.8fr 1.2fr}
  .pricing-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1.3fr 1fr}
}

/* Desktop */
@media(min-width:980px){
  .desktop-nav{display:flex}
  .feature-grid{grid-template-columns:repeat(4,1fr)}
  .section{padding:92px 0}
  .cta-panel{padding:44px 46px}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}


.footer-main .brand-logo{height:34px;max-width:170px}


/* Artes oficiales del prototipo público */
.product-stage-art{align-self:center}
.landing-art-frame{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow-float);
}
.landing-art-frame img{
  display:block;
  width:100%;
  height:auto;
}
.product-showcase-section{
  background:
    radial-gradient(circle at 90% 10%,rgba(36,155,131,.10),transparent 28%),
    #fff;
}
.showcase-art-card{
  max-width:1120px;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 22px 60px rgba(11,31,51,.10);
}
.showcase-art-card img{display:block;width:100%;height:auto}
.showcase-points{
  display:grid;
  gap:10px;
  margin:18px auto 0;
  max-width:980px;
}
.showcase-points>div{
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:13px 14px;
  box-shadow:var(--shadow);
}
.showcase-points strong{
  display:block;
  color:var(--navy);
  font-size:11px;
  margin-bottom:4px;
}
.showcase-points span{
  display:block;
  color:var(--muted);
  font-size:9px;
  line-height:1.5;
}
@media(min-width:700px){
  .showcase-points{grid-template-columns:repeat(3,1fr)}
}


/* ============================================================
   Landing v2 · artes sin estirar / cortar + tipografía legible
   ============================================================ */

.landing-art-frame{
  max-width:620px;
  margin:0 auto;
  padding:10px;
  background:#fff;
}
.landing-art-frame img,
.showcase-art-card img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}
.showcase-art-card{
  max-width:1040px;
  padding:12px;
}
.product-stage-art{min-width:0}

/* Un solo teléfono limpio en la sección mobile-first. */
.mobile-product-art{
  position:relative;
  display:grid;
  place-items:center;
  min-height:430px;
  padding:24px;
}
.mobile-art-backdrop{
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(36,155,131,.20),rgba(36,155,131,0) 70%);
}
.mobile-product-art img{
  position:relative;
  width:auto;
  height:auto;
  max-height:430px;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 22px 26px rgba(11,31,51,.18));
}

.showcase-points strong{font-size:14px}
.showcase-points span{font-size:12px}
.cai-bubble,.user-bubble{font-size:12px}
.cai-note,.chat-label{font-size:10px}
.cai-result-row{font-size:11px}
.price-list .check-row{font-size:13px}
.footer-brand p{font-size:12px}
.footer-links strong{font-size:12px}
.footer-links a{font-size:11px}
.footer-bottom{font-size:10px}

@media(max-width:699px){
  .hero{padding-top:44px}
  .hero h1{font-size:44px;letter-spacing:-1.8px}
  .hero-lead{font-size:17px}
  .value-grid{grid-template-columns:1fr}
  .feature-card{min-height:auto}
  .landing-art-frame{padding:7px}
  .showcase-art-card{padding:6px;border-radius:16px}
  .mobile-product-art{min-height:360px;padding:10px}
  .mobile-product-art img{max-height:350px}
}

@media(min-width:700px){
  .landing-art-frame{padding:12px}
}


/* ============================================================
   Integración final de artes HD · sin blur ni recortes raros
   ============================================================ */

.product-stage-art{
  display:flex;
  justify-content:center;
  align-items:center;
}
.product-stage-art .landing-art-frame{
  width:min(100%, 760px);
  margin-inline:auto;
  padding:14px;
  border-radius:28px;
  background:linear-gradient(180deg,#ffffff,#fbfcfd);
  box-shadow:0 24px 70px rgba(11,31,51,.12);
}
.product-stage-art .landing-art-frame img{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
}

.mobile-product-art{
  min-height:560px;
  padding:24px;
}
.mobile-art-backdrop{
  width:380px;
  height:380px;
  background:radial-gradient(circle, rgba(36,155,131,.24), rgba(36,155,131,0) 72%);
}
.mobile-product-art img{
  max-height:540px;
  max-width:min(100%, 460px);
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 28px 36px rgba(11,31,51,.18));
}

.showcase-art-card{
  max-width:1220px;
  padding:10px;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(11,31,51,.11);
}
.showcase-art-card img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
  border-radius:18px;
}

@media(max-width:699px){
  .product-stage-art .landing-art-frame{
    width:100%;
    padding:8px;
    border-radius:18px;
  }
  .product-stage-art .landing-art-frame img{border-radius:12px}
  .mobile-product-art{
    min-height:460px;
    padding:6px 0 0;
  }
  .mobile-art-backdrop{
    width:280px;
    height:280px;
  }
  .mobile-product-art img{
    max-height:430px;
    max-width:min(100%, 320px);
  }
  .showcase-art-card{
    padding:6px;
    border-radius:18px;
  }
  .showcase-art-card img{border-radius:12px}
}


/* Revisión final v4 · textos comerciales */
.price-badge{font-size:11px}
.price span{font-size:11px}
.price-note{font-size:12px!important}
.cta-panel p{font-size:14px;line-height:1.65}


/* ============================================================
   Adaptaciones de CaiListo sobre la landing del prototipo
   ------------------------------------------------------------
   Igual que en `globals.css`: lo del prototipo queda arriba sin
   tocar, y acá abajo sólo lo que hubo que corregir. Así la
   próxima revisión entra con una copia.
   ============================================================ */

/* En el teléfono la página se iba 53px de lado. Los hijos de una grilla traen
   `min-width:auto`, así que el ancho mínimo del contenido de UNA columna estira la
   pista y arrastra a las demás: los mockups y las tarjetas de chat llevaban al hero
   y a las secciones partidas 14 y 26px más allá del borde. */
.app-preview > *, .brand-copy > *, .cai-grid > *, .cai-result-row > *,
.chart-bars > *, .chart-head > *, .check-list > *, .check-row > *,
.faq-grid > *, .feature-grid > *, .footer-bottom > *, .footer-grid > *,
.footer-links > *, .header-actions > *, .hero-actions > *, .hero-grid > *,
.preview-kpis > *, .preview-row > *, .preview-top > *, .price-list > *,
.pricing-grid > *, .split-section > *, .trust-item > *, .value-grid > *,
.value-item > *, .workflow > * { min-width: 0; }

/* Ninguna imagen puede ser más ancha que su caja. El prototipo sólo lo declara
   dentro de `.landing-art-frame`, y hay artes fuera de él. */
img { max-width: 100%; height: auto; }


/* ============================================================
   Hero v4 · el único bloque que se rehízo
   ------------------------------------------------------------
   Viene de `home-v4.css`. Va al final para ganarle a las reglas
   `.hero*` de más arriba, que son del hero anterior y siguen
   sirviendo al resto de la página.

   El mockup de la derecha ya no es una imagen: es HTML y CSS.
   Pesa cero, se ve nítido en cualquier pantalla y las cifras se
   pueden corregir editando texto.
   ============================================================ */
.hero{
  position:relative;overflow:hidden;padding:76px 0 38px;
  background:
    radial-gradient(circle at 90% 8%,rgba(36,155,131,.12),transparent 25%),
    radial-gradient(circle at 8% 38%,rgba(11,31,51,.04),transparent 28%),
    linear-gradient(180deg,#fff,#fbfcfd)
}
.hero::before{
  content:"";position:absolute;left:-14%;bottom:28px;width:70%;height:260px;opacity:.65;
  background:repeating-radial-gradient(ellipse at center,transparent 0 13px,rgba(36,155,131,.12) 14px 15px,transparent 16px 28px);
  transform:rotate(-7deg) scaleY(.34);transform-origin:left bottom;pointer-events:none
}
.hero-grid{position:relative;display:grid;gap:48px;align-items:center}
.hero-copy{position:relative;z-index:1}
.hero h1{font-size:clamp(44px,7vw,72px);line-height:1.02;letter-spacing:-3.2px;margin:0 0 22px;max-width:720px}
.hero h1 span{color:var(--teal)}
.hero-lead{font-size:18px;line-height:1.65;color:#34485c;max-width:590px;margin:0 0 24px}
.hero-bullets{display:grid;gap:13px;margin:0 0 28px;padding:0;list-style:none}
.hero-bullets li{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:650;color:#24384c}
.bullet-icon{width:24px;height:24px;display:grid;place-items:center;color:var(--navy)}
.bullet-icon .ui-icon{width:18px;height:18px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-actions .btn{min-height:52px;padding-inline:22px}
.trial-note{display:flex;align-items:center;gap:7px;margin-top:14px;color:#66788a;font-size:11px;font-weight:700}
.trial-note .ui-icon{width:15px;height:15px;color:var(--teal)}

/* Crisp HTML dashboard mock */
.hero-product{position:relative;min-width:0}
.hero-product::before{
  content:"";position:absolute;inset:10% 2% -7% 8%;background:rgba(36,155,131,.17);filter:blur(48px);border-radius:40px
}
.dashboard-window{position:relative;background:#fff;border:1px solid #DDE5EB;border-radius:17px;box-shadow:var(--shadow);overflow:hidden;min-height:505px}
.dash-topbar{height:48px;display:flex;align-items:center;gap:8px;padding:0 15px;border-bottom:1px solid #E7EBEF;background:#fbfcfd}
.dot{width:8px;height:8px;border-radius:50%;background:#d9dee3}.dot:nth-child(1){background:#ff7064}.dot:nth-child(2){background:#f5b73b}.dot:nth-child(3){background:#35bf71}
.dash-shell{display:grid;grid-template-columns:112px minmax(0,1fr);min-height:457px}
.dash-side{border-right:1px solid #E6EBEF;padding:15px 10px;background:#fff}
.dash-logo{padding:2px 5px 15px}.dash-logo img{height:24px;width:auto;max-width:92px}
.dash-menu{display:grid;gap:5px}.dash-menu span{padding:8px 9px;border-radius:7px;font-size:8px;color:#516170;display:flex;align-items:center;gap:7px;font-weight:650}.dash-menu span.active{background:var(--teal);color:white}.dash-menu i{width:9px;height:9px;border:1.6px solid currentColor;border-radius:2px}
.dash-content{padding:18px 20px;background:#fff;min-width:0}
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.dash-head strong{font-size:16px}.dash-head small{display:block;color:#718096;margin-top:3px;font-size:8px}.dash-filter{font-size:8px;border:1px solid #DDE5EB;padding:7px 10px;border-radius:7px}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.dash-kpi{border:1px solid #E2E7EC;border-radius:9px;padding:11px;background:#fff}.dash-kpi small{font-size:7px;color:#5c6b79}.dash-kpi strong{font-size:14px;display:block;margin:5px 0 2px}.dash-kpi em{font-style:normal;color:#0c9a79;font-size:7px;font-weight:700}
.dash-main{display:grid;grid-template-columns:1.05fr .95fr;gap:10px;margin-top:10px}.dash-card{border:1px solid #E2E7EC;border-radius:9px;padding:11px;min-width:0}.dash-card-title{font-size:9px;font-weight:800;margin-bottom:8px}.bars{height:118px;display:flex;align-items:end;gap:8px;padding:12px 4px 7px;border-bottom:1px solid #edf0f3}.bars i{flex:1;background:linear-gradient(180deg,#45bda4,#188d76);border-radius:3px 3px 0 0}.bars i:nth-child(1){height:38%}.bars i:nth-child(2){height:55%}.bars i:nth-child(3){height:48%}.bars i:nth-child(4){height:69%}.bars i:nth-child(5){height:80%}.bars i:nth-child(6){height:91%}
.months{display:flex;justify-content:space-around;font-size:6px;color:#778593;padding-top:5px}
.doc-list{display:grid}.doc-row{padding:7px 0;border-bottom:1px solid #edf0f3;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;font-size:7px}.doc-row:last-child{border-bottom:0}.doc-row strong{font-size:7px}.doc-row span{color:#687787;margin-top:2px}.doc-amount{font-weight:800;color:#183248}
.growth-banner{margin-top:10px;border-radius:9px;background:linear-gradient(90deg,#F2FAF8,#E7F7F3);min-height:72px;padding:12px 120px 12px 14px;position:relative;overflow:hidden}.growth-banner strong{font-size:12px;line-height:1.35}.growth-banner strong span{color:var(--teal)}.growth-person{position:absolute;right:16px;bottom:0;width:86px;height:64px}.growth-person::before{content:"";position:absolute;right:20px;bottom:7px;width:43px;height:33px;background:#264a67;border-radius:4px;transform:skew(-7deg)}.growth-person::after{content:"";position:absolute;right:7px;bottom:18px;width:34px;height:43px;background:#29a98d;border-radius:40% 40% 20% 20%}

/* `--shadow` de la landing es sutil, de tarjeta. La ventana del mockup
   necesita la sombra profunda con la que fue diseñada. */
.dashboard-window{box-shadow:0 24px 70px rgba(11,31,51,.13)}

@media(min-width:760px){
  .hero{padding:88px 0 45px}
  .hero-grid{grid-template-columns:.96fr 1.04fr;gap:54px}
}
@media(max-width:759px){
  .hero{padding-top:52px}
  .hero h1{letter-spacing:-2px}
  .hero-product{margin-top:8px}
  .dash-shell{grid-template-columns:88px minmax(0,1fr)}
  .dash-content{padding:14px 12px}.dash-kpis{grid-template-columns:1fr 1fr}.dash-kpi:nth-child(3){display:none}.dash-main{grid-template-columns:1fr}.dash-card.docs{display:none}.growth-banner{padding-right:90px}
}
@media(max-width:480px){
  .hero h1{font-size:46px}.hero-lead{font-size:16px}.hero-bullets li{font-size:14px}.hero-actions{display:grid}.hero-actions .btn{width:100%}.dashboard-window{min-height:440px}.dash-shell{min-height:392px}.dash-side{display:none}.dash-main{margin-top:8px}.growth-banner{min-height:62px}
  /* Ocultar la barra lateral no borra su columna: `.dash-content` caía dentro de los
     88px que era la pista de la barra, y el mockup entero se veía aplastado contra la
     izquierda. Sin barra, una sola columna. Viene así del prototipo. */
  .dash-shell{grid-template-columns:minmax(0,1fr)}
}
/* El número y el cliente iban en la misma línea, pegados: `strong` y `span` son
   inline y el contenedor no los separa. Viene así del prototipo. */
.doc-row strong{display:block}

/* Un solo plan. El prototipo traía dos tarjetas y `.pricing-grid` se abre a `1fr 1fr`
   en tablet: con una sola quedaría una columna vacía al lado. `.single` la vuelve a
   una columna y le pone un ancho de lectura, para que no se estire a los 830 px. */
.pricing-grid.single{grid-template-columns:minmax(0,1fr);max-width:420px}
@media(min-width:640px){.pricing-grid.single{grid-template-columns:minmax(0,1fr)}}

/* La promesa de la prueba va pegada al botón, no suelta al pie de la sección: es lo
   que quita el miedo justo en el momento de pulsarlo. */
.price-foot{
  font-size:11px;color:var(--muted);text-align:center;margin:12px 0 0;line-height:1.5
}

/* Lo "a medida" es una línea, no un nivel del producto: publicar una tarjeta
   "Empresarial — cotización" invita a negociar en cada venta. */
.pricing-aside{
  font-size:12px;color:var(--muted);text-align:center;margin:18px auto 0;max-width:420px
}

/* Los `<strong>` dentro de la lista de la tarjeta heredaban el tamaño del check-row
   pero no su color, y el primer punto —el que más importa— se leía igual que el resto. */
.price-list .check-row strong{color:var(--text);font-weight:800}

/* ---------------------------------------------------------------------------
   Páginas legales (términos, privacidad)

   Comparten el armazón de la landing —cabecera, pie, variables— y sólo agregan
   una columna de lectura. No es un segundo diseño: son documentos que hay que
   poder leer enteros, así que lo único que cambia es el ancho y el ritmo del
   texto. `--legal-ancho` en ch y no en px porque lo que importa acá es cuántos
   caracteres entran por línea.
   ------------------------------------------------------------------------- */
.legal{--legal-ancho:70ch;padding:48px 0 72px}
.legal .container{max-width:var(--legal-ancho)}
.legal-head{margin:0 0 32px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.legal-head h1{font-size:clamp(26px,4vw,34px);margin:0 0 8px;letter-spacing:-.02em}
.legal-head .legal-meta{font-size:12px;color:var(--muted);margin:0}
.legal h2{
  font-size:17px;margin:36px 0 10px;letter-spacing:-.01em;
  /* El número de sección se dibuja solo: renumerar a mano un documento que se
     edita seguido es cómo se terminan teniendo dos "sección 7". */
  counter-increment:legal-sec
}
.legal h2::before{content:counter(legal-sec) ". ";color:var(--teal);font-weight:800}
.legal .container{counter-reset:legal-sec}
.legal h3{font-size:14px;margin:22px 0 6px}
.legal p,.legal li{font-size:14px;line-height:1.75;color:var(--text)}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:20px}
.legal li{margin:0 0 6px}
.legal strong{font-weight:700}
/* Lo que el lector tiene que poder encontrar sin leer todo: la regla que le
   cuesta plata o le cambia el acceso. */
.legal .destacado{
  border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:8px;
  background:var(--teal-soft);padding:14px 16px;margin:0 0 16px
}
.legal .destacado p:last-child{margin-bottom:0}
.legal-nav{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px}

/* El pie pasó de dos columnas a tres al sumar la columna Legal. Se declara con
   `auto-fit` y un mínimo en vez de un `1fr 1fr 1fr` fijo: así la cuarta columna
   que se agregue el día de mañana entra sola, y en teléfono siguen cayendo de a
   dos sin una media query más. */
.footer-links{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}

/* En teléfono el importe se partía en dos líneas ("L" arriba, "8,900.00" abajo)
   cuando la etiqueta de la izquierda ocupa dos renglones. La cifra es lo que se
   lee de un vistazo y no puede romperse; la etiqueta sí. */
.cai-result-row strong{white-space:nowrap}