:root{
  --navy:#0E1B33;
  --blue:#3355D8;
  --blue-soft:#EEF1F7;
  --gold:#C9A227;
  --text:#41506B;
  --text-mute:#54637E;
  --text-faint:#5B6A85;
  --border:#DDE2EE;
  --white:#FFFFFF;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:var(--blue); text-decoration:none;}
a:hover{color:var(--navy);}
img{max-width:100%; display:block;}
::selection{background:#CFE0FB; color:var(--navy);}

/* ===== Accesibilidad: foco visible y salto al contenido ===== */
:focus-visible{outline:3px solid var(--navy); outline-offset:3px;}
.cta-box :focus-visible, .confianza :focus-visible, .cookie-banner :focus-visible{outline-color:var(--white);}
.chat-panel-head :focus-visible{outline-color:var(--white); outline-offset:-3px;}
.faq-q:focus-visible{outline-offset:-3px;}
.skip-link{position:absolute; left:8px; top:-64px; z-index:100; background:var(--navy); color:var(--white); font-weight:600; padding:12px 18px; border-radius:10px;}
.skip-link:focus, .skip-link:hover{top:8px; color:var(--white);}

@keyframes sofiaIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
@keyframes sofiaPulse{0%,100%{opacity:.35;} 50%{opacity:1;}}
@keyframes sofiaPulseRing{
  0%{box-shadow:0 0 0 0 rgba(201,162,39,.55);}
  70%{box-shadow:0 0 0 8px rgba(201,162,39,0);}
  100%{box-shadow:0 0 0 0 rgba(201,162,39,0);}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation:none !important; transition:none !important;}
}

/* ===== Header ===== */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border);}
.nav-wrap{max-width:1200px; margin:0 auto; padding:0 20px; height:66px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:9px; min-height:44px; text-decoration:none;}
.brand .mark{display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:12px; background:var(--blue); color:var(--white); font-size:14px; font-weight:700;}
.brand .name{font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--navy);}
.nav-links{display:flex; align-items:center; gap:4px; margin-right:12px;}
.nav-links a{display:inline-flex; align-items:center; min-height:44px; font-size:16px; font-weight:500; color:var(--text); padding:8px 12px; border-radius:100px;}
.nav-links a:hover{background:var(--blue-soft); color:var(--blue);}
.nav-actions{display:flex; align-items:center; gap:8px;}
.btn-primary{background:var(--blue); color:var(--white); border:none; font-family:inherit; font-size:16px; font-weight:600; min-height:44px; padding:11px 18px; border-radius:100px; cursor:pointer;}
.btn-primary:hover{background:var(--blue); opacity:.92; color:var(--white);}
.nav-toggle{display:none; background:none; border:1px solid var(--border); border-radius:100px; min-width:44px; min-height:44px; padding:10px; cursor:pointer; gap:4px; flex-direction:column; align-items:center; justify-content:center;}
.nav-toggle span{display:block; width:16px; height:1.6px; border-radius:2px; background:var(--navy);}
.mobile-menu{display:none; border-top:1px solid var(--border); background:var(--white); padding:12px 20px 18px; gap:4px;}
.mobile-menu.open{display:grid;}
.mobile-menu a{display:flex; align-items:center; min-height:44px; font-size:17px; font-weight:500; color:var(--text); padding:12px 10px; border-radius:100px;}

@media (max-width:900px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
}

/* ===== Sections shell ===== */
section{border-bottom:1px solid var(--border);}
.wrap{max-width:1200px; margin:0 auto; padding:clamp(48px,6vw,80px) 20px;}
.eyebrow{font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:14px;}
h1,h2,h3{color:var(--navy); margin:0; letter-spacing:-.02em;}

/* ===== Hero ===== */
.hero{background:linear-gradient(180deg,var(--blue-soft) 0%, var(--white) 100%);}
.hero .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(40px,5vw,64px); align-items:center; padding-top:clamp(40px,6vw,80px); padding-bottom:clamp(48px,6vw,88px);}
.badge-free{display:inline-flex; align-items:center; gap:8px; background:#DFE4F3; color:var(--blue); font-size:14px; font-weight:600; padding:7px 12px; border-radius:100px; margin-bottom:22px;}
.badge-free .dot{width:6px; height:6px; border-radius:50%; background:var(--blue); animation:sofiaPulse 2s ease-in-out infinite;}
.hero h1{font-size:clamp(32px,5vw,54px); font-weight:700; line-height:1.08; margin-bottom:18px;}
.hero p.lede{font-size:clamp(17px,2vw,19px); line-height:1.6; color:var(--text-mute); max-width:480px; margin:0 0 28px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px;}
.btn-lg{font-size:16px; font-weight:600; padding:16px 26px; border-radius:100px; cursor:pointer; border:none; font-family:inherit;}
.btn-lg.primary{background:var(--blue); color:var(--white); box-shadow:0 10px 24px rgba(51,85,216,.18);}
.btn-lg.ghost{display:flex; align-items:center; gap:8px; border:1px solid #C6CEE4; color:var(--blue); background:var(--white); padding:16px 24px;}
.btn-lg.ghost:hover{border-color:var(--blue);}
.trust-line{display:flex; flex-wrap:wrap; gap:8px 20px;}
.trust-line span{display:flex; align-items:center; gap:7px; font-size:15px; color:var(--text-mute);}
.trust-line .check{color:var(--gold); font-weight:700;}

/* Phone mockup */
.phone-col{display:flex; flex-direction:column; align-items:center; gap:18px;}
.tabs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.tab-btn{background:var(--white); color:#41506B; border:1px solid #C6CEE4; font-family:inherit; font-size:15px; font-weight:600; min-height:44px; padding:8px 14px; border-radius:100px; cursor:pointer;}
.tab-btn.active{background:var(--blue); color:var(--white); border-color:var(--blue);}
.phone-shell{position:relative; width:100%; max-width:322px; border-radius:44px; padding:11px; background:linear-gradient(160deg,#1B2A4C,var(--navy) 55%,#1B2A4C); box-shadow:0 30px 60px rgba(14,27,51,.28);}
.phone-screen{position:relative; border-radius:34px; background:var(--blue-soft); overflow:hidden; min-height:min(560px,78vh); display:flex; flex-direction:column;}
.phone-notch{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:82px; height:22px; border-radius:100px; background:var(--navy); z-index:3;}
.phone-header{background:var(--white); padding:38px 16px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-shrink:0;}
.phone-header .avatar{display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:12px; background:var(--blue); color:var(--white); font-size:14px; font-weight:700;}
.phone-header .title{font-size:16px; font-weight:700; color:var(--navy);}
.phone-header .status{display:flex; align-items:center; gap:6px; font-size:13px; color:#8A6F16;}
.phone-header .status .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); animation:sofiaPulse 1.8s ease-in-out infinite;}
.phone-body{flex:1; overflow:hidden; padding:16px 14px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px;}
.msg{display:flex; animation:sofiaIn .4s ease both;}
.msg.me{justify-content:flex-end;}
.msg.them{justify-content:flex-start;}
.bubble{max-width:82%; font-size:15px; line-height:1.5; padding:11px 13px;}
.msg.me .bubble{background:var(--blue); color:var(--white); border-radius:14px 14px 4px 14px;}
.msg.them .bubble{background:var(--white); color:#2B3A55; border-radius:14px 14px 14px 4px;}
.bubble .source{margin-top:9px; padding-top:8px; border-top:1px solid rgba(14,27,51,.1); font-size:13px; font-weight:600; color:var(--blue);}
.typing{display:flex; gap:5px; align-items:center; padding:10px 12px; background:var(--white); border-radius:12px; width:fit-content;}
.typing span{width:6px; height:6px; border-radius:50%; background:#9BB2D4; animation:sofiaPulse 1.2s ease-in-out infinite;}
.typing span:nth-child(2){animation-delay:.2s;}
.typing span:nth-child(3){animation-delay:.4s;}
.phone-footer{flex-shrink:0; background:var(--white); border-top:1px solid var(--border); padding:11px 14px 18px; display:flex; align-items:center; gap:10px;}
.phone-footer .placeholder{flex:1; font-size:14px; color:var(--text-faint);}
.phone-footer .send{display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:12px; background:var(--blue); color:var(--white); font-size:14px;}
.phone-caption{margin:0; font-size:14px; color:var(--text-faint); text-align:center;}

/* Sources bar */
.sources-bar .wrap{padding:28px 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 32px;}
.sources-bar .label{font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);}
.sources-bar .src{font-size:17px; font-weight:600; color:var(--text);}

/* Casos */
.casos{background:var(--blue-soft);}
.casos h2{font-size:clamp(24px,3vw,34px); font-weight:700; margin-bottom:36px; max-width:560px;}
.cards-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px;}
.card{background:var(--white); border:1px solid var(--border); border-radius:12px; padding:24px;}
.card .tag{font-size:15px; font-weight:700; color:var(--blue); margin-bottom:10px;}
.card p{margin:0; font-size:17px; line-height:1.6; color:var(--text-mute);}

/* Servicios */
.servicios h2{font-size:clamp(26px,3.2vw,38px); font-weight:700; margin-bottom:12px; max-width:620px;}
.servicios > .wrap > p{margin:0 0 40px; font-size:17px; line-height:1.6; color:var(--text-mute); max-width:620px;}
.cards-4{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px;}
.service-card{text-align:left; background:var(--white); border:1px solid var(--border); border-radius:12px; padding:26px 22px; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; gap:10px; transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease; width:100%;}
.service-card:hover{border-color:var(--blue); box-shadow:0 14px 30px rgba(51,85,216,.10); transform:translateY(-3px);}
.avatar-wrap{position:relative; width:40px; height:40px; margin-bottom:2px;}
.avatar-wrap .circle{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--white); font-weight:700; font-size:16px;}
.avatar-wrap .live{position:absolute; top:-2px; right:-2px; width:12px; height:12px; border-radius:50%; background:var(--gold); border:2px solid var(--white); animation:sofiaPulseRing 2s infinite;}
.service-card .title{font-size:19px; font-weight:700; color:var(--navy);}
.service-card .desc{font-size:17px; line-height:1.6; color:var(--text-mute); flex:1;}
.service-card .open{display:flex; align-items:center; gap:7px; font-size:16px; font-weight:600; color:var(--blue);}

/* Como funciona */
.como{background:var(--blue-soft);}
.como h2{font-size:clamp(26px,3.2vw,38px); font-weight:700; margin-bottom:40px; max-width:520px;}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:32px;}
.step .num{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--blue); color:var(--white); font-size:15px; font-weight:700; margin-bottom:16px;}
.step h3{font-size:19px; font-weight:700; margin-bottom:8px;}
.step p{margin:0; font-size:17px; line-height:1.6; color:var(--text-mute);}

/* Somos */
.somos h2{font-size:clamp(26px,3.2vw,38px); font-weight:700; margin-bottom:16px; max-width:640px;}
.somos > .wrap > p{font-size:17px; line-height:1.6; color:var(--text-mute); margin:0 0 26px; max-width:640px;}
.cards-si-no-despues{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;}
.si-box{background:#F2F8F4; border:1px solid #D6E7DB; border-radius:12px; padding:22px;}
.si-box .lbl{font-size:14px; font-weight:700; letter-spacing:.08em; color:#2F6B3D; margin-bottom:10px;}
.si-box p{margin:0; font-size:17px; line-height:1.6; color:#3A4C42;}
.neutral-box{background:var(--blue-soft); border:1px solid var(--border); border-radius:12px; padding:22px;}
.neutral-box .lbl{font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--text-faint); margin-bottom:10px;}
.neutral-box p{margin:0; font-size:17px; line-height:1.6; color:var(--text-mute);}

/* Confianza (dark) */
.confianza{background:var(--navy); border-bottom:none;}
.confianza .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:44px; align-items:center;}
.confianza .eyebrow{color:#79A8F0;}
.confianza h2{color:var(--white); font-size:clamp(24px,3vw,34px); font-weight:700; margin-bottom:14px; max-width:560px;}
.confianza p{margin:0; font-size:17px; line-height:1.65; color:#A9BDDC;}
.badges-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px;}
.badge-item{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:18px;}
.badge-item .t{font-size:17px; font-weight:700; color:var(--white); margin-bottom:4px;}
.badge-item .s{font-size:15px; color:#A9BDDC;}

/* FAQ */
.faq h2{font-size:clamp(26px,3.2vw,38px); font-weight:700; margin-bottom:32px;}
.faq-list{display:grid; gap:12px; max-width:900px; margin:0 auto;}
.faq-item{border:1px solid var(--border); border-radius:12px; background:var(--white); overflow:hidden;}
.faq-q{width:100%; background:none; border:none; cursor:pointer; padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:18px; text-align:left; font-family:inherit; font-size:17px; font-weight:600; color:var(--navy);}
.faq-q .sign{font-size:20px; font-weight:400; color:var(--blue); flex-shrink:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{margin:0; padding:0 22px 22px; font-size:17px; line-height:1.65; color:var(--text-mute);}
.faq-a a{text-decoration:underline;}
.faq .wrap{max-width:900px;}

/* CTA final */
.cta-final{border-bottom:none;}
.cta-box{background:var(--blue); border-radius:12px; padding:clamp(36px,5vw,64px) clamp(24px,4vw,48px); text-align:center;}
.cta-box h2{color:var(--white); font-size:clamp(26px,3.6vw,42px); font-weight:700; margin:0 auto 14px; max-width:620px;}
.cta-box p{margin:0 auto 28px; max-width:420px; font-size:17px; line-height:1.6; color:#D7E5FB;}
.cta-box .ctas{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.cta-box .btn-white{background:var(--white); color:var(--blue); border:none; font-family:inherit; font-size:16px; font-weight:600; padding:16px 28px; border-radius:100px; cursor:pointer;}
.cta-box .btn-outline{border:1px solid rgba(255,255,255,.75); color:var(--white); font-size:16px; font-weight:600; padding:16px 26px; border-radius:100px;}
.cta-box .btn-outline:hover{background:rgba(255,255,255,.12); color:var(--white);}

/* Footer */
footer{background:var(--blue-soft); border-top:1px solid var(--border); padding:52px 0 26px; border-bottom:none;}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:36px; margin-bottom:40px;}
.foot-brand .row{display:flex; align-items:center; gap:9px; margin-bottom:14px;}
.foot-brand .mark{display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:12px; background:var(--blue); color:var(--white); font-size:13px; font-weight:700;}
.foot-brand .name{font-size:18px; font-weight:700; color:var(--navy);}
.foot-brand p{margin:0; max-width:250px; font-size:16px; line-height:1.6; color:var(--text-faint);}
.foot-col .h{font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); margin-bottom:8px;}
.foot-col .links{display:grid; gap:0; font-size:16px;}
.foot-col .links a{display:flex; align-items:center; min-height:44px; color:var(--text-mute);}
.foot-col .links a:hover{color:var(--navy); text-decoration:underline;}
.foot-bottom{border-top:1px solid var(--border); padding-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:14px; color:var(--text-faint);}

/* Floating chat widget */
.float-wrap{position:fixed; right:16px; bottom:16px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
.to-top{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--white); border:1px solid var(--border); color:var(--blue); font-size:16px;}
.to-top:hover{background:var(--blue); color:var(--white);}
.chat-panel{display:none; width:min(320px,calc(100vw - 32px)); background:var(--white); border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.chat-panel.open{display:block;}
.chat-panel-head{display:flex; justify-content:space-between; align-items:center; padding:8px 8px 8px 18px; background:var(--navy);}
.chat-panel-head span{font-size:16px; font-weight:700; color:var(--white);}
.chat-panel-head button{background:none; border:none; cursor:pointer; font-size:17px; min-width:44px; min-height:44px; color:#A9BDDC;}
.chat-panel-body{padding:18px; display:grid; gap:8px;}
.chat-panel-body p{margin:0 0 4px; font-size:16px; line-height:1.5; color:var(--text-mute);}
.chat-option{display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; min-height:44px; background:var(--blue-soft); border:1px solid var(--border); border-radius:12px; padding:14px; cursor:pointer; font-family:inherit; font-size:16px; font-weight:600; color:var(--navy); text-align:left;}
.chat-option:hover{border-color:var(--blue);}
.chat-option .arrow{color:var(--blue);}
.chat-panel-note{margin:6px 0 0; font-size:14px; color:var(--text-faint);}
.chat-fab{display:flex; align-items:center; gap:10px; background:var(--blue); color:var(--white); border:none; border-radius:100px; min-height:44px; padding:15px 22px; font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; box-shadow:0 14px 30px rgba(51,85,216,.28);}
.chat-fab .dot{width:7px; height:7px; border-radius:50%; background:var(--gold);}
/* Los campos y botones del chat los genera script.js con estilos en línea (13.5px): se elevan aquí */
#chatMessages .bubble{font-size:16px;}
#chatInputArea input, #chatInputArea button{font-size:16px !important; min-height:44px;}

/* ===== Legal pages ===== */
.legal-doc{max-width:760px; margin:0 auto; padding:clamp(48px,6vw,80px) 20px;}
.legal-doc h1{font-size:clamp(28px,4vw,40px); font-weight:700; margin-bottom:8px;}
.legal-doc .updated{font-size:14px; color:var(--text-faint); margin-bottom:36px;}
.legal-doc h2{font-size:19px; font-weight:700; margin:32px 0 12px;}
.legal-doc p, .legal-doc li{font-size:17px; line-height:1.7; color:var(--text-mute);}
.legal-doc ul{padding-left:20px;}
.legal-doc .placeholder{color:#8A6F16; font-weight:600;}
.legal-doc a.back{display:inline-block; margin-top:40px; font-weight:600;}

/* ===== Banner de consentimiento de cookies ===== */
.cookie-banner{display:none; position:fixed; left:0; right:0; bottom:0; z-index:80; background:var(--navy); color:var(--white); padding:16px 20px; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; box-shadow:0 -8px 24px rgba(14,27,51,.18);}
.cookie-banner.open{display:flex;}
.cookie-text{margin:0; font-size:16px; line-height:1.5; color:var(--white);}
.cookie-actions{display:flex; gap:10px; flex-shrink:0;}
.cookie-btn{font-family:inherit; font-size:16px; font-weight:600; min-height:44px; padding:10px 18px; border-radius:10px; cursor:pointer;}
.cookie-btn.reject{background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.7);}
.cookie-btn.reject:hover{border-color:var(--white);}
.cookie-btn.accept{background:var(--gold); color:var(--navy); border:1px solid var(--gold);}
.cookie-btn.accept:hover{filter:brightness(1.08);}
@media (max-width:560px){
  .cookie-banner{flex-direction:column; align-items:stretch; text-align:center;}
  .cookie-actions{justify-content:center;}
}