@font-face{font-family:'Outfit';font-weight:100 900;font-display:swap;
src:url(../fonts/outfit.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;
src:url(../fonts/inter.woff2) format('woff2')}
:root{
  --navy:#0E314D;--deep:#071C2E;--mid:#16456B;--navy-50:#EDF2F6;--navy-100:#DDE6ED;
  --sage:#89A694;--sage-br:#A7C4B2;--sage-dk:#4E7360;--sage-50:#EFF4F1;
  --paper:#F7F7F7;--white:#fff;--ink:#16232E;--grey:#69798A;--line:#DFE4E9;--alert:#C4553F;
  --disp:'Outfit',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy)}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.028em;line-height:1.08;font-weight:300;margin:0}
h1{font-size:clamp(34px,5vw,58px);font-weight:200;letter-spacing:-.038em}
h2{font-size:clamp(26px,3.4vw,40px);font-weight:200;letter-spacing:-.032em}
h3{font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.3}
h1 b,h2 b{font-weight:600;color:var(--navy)}
.inv h1 b,.inv h2 b{color:var(--sage-br)}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.eyebrow{font-weight:600;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sage-dk);margin:0 0 16px}
.inv .eyebrow{color:var(--sage)}
.lede{font-size:clamp(16px,1.25vw,18.5px);color:var(--grey);max-width:62ch;margin-top:16px}
.inv .lede{color:#93AABC}
section{padding:clamp(56px,8vw,104px) 0}
.sec-alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-navy{background:linear-gradient(150deg,#0E314D,#0a2740 55%,#071C2E);color:#E2ECF3}
.sec-deep{background:var(--deep);color:#E2ECF3}

/* barra superior */
.top{position:sticky;top:0;z-index:90;background:rgba(247,247,247,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.top .in{display:flex;align-items:center;gap:26px;height:64px}
.top .lg img{height:17px;width:auto}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{font-weight:600;font-size:13.5px;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.nav a:hover{color:var(--sage-dk)}
.nav a.cta{background:var(--navy);color:#fff;padding:10px 18px;border-radius:99px;transition:.18s}
.nav a.cta:hover{background:var(--mid);color:#fff}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.burger i{display:block;width:22px;height:2px;background:var(--navy);margin:5px 0;transition:.2s}
@media(max-width:880px){
  .burger{display:block}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;padding:14px 22px 20px;gap:2px;
    border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(7,28,46,.12)}
  .nav.open{display:flex}
  .nav a{padding:11px 4px;border-bottom:1px solid var(--navy-50)}
  .nav a.cta{margin-top:10px;text-align:center;border-bottom:0}
}

/* botones */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;
  text-decoration:none;padding:14px 24px;border-radius:99px;transition:.18s;border:1.5px solid transparent}
.btn.b1{background:var(--sage);color:var(--deep)}
.btn.b1:hover{background:var(--sage-br)}
.btn.b2{background:var(--navy);color:#fff}
.btn.b2:hover{background:var(--mid)}
.btn.b3{border-color:var(--navy);color:var(--navy);background:transparent}
.btn.b3:hover{background:var(--navy-50)}
.inv .btn.b3{border-color:rgba(167,196,178,.6);color:var(--sage-br)}
.inv .btn.b3:hover{background:rgba(137,166,148,.14)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* héroe */
.hero{position:relative;overflow:hidden;padding:clamp(64px,9vw,120px) 0}
.hero .emb{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(44vw,560px);
  opacity:.08;pointer-events:none}
.hero .in{position:relative;z-index:2;max-width:760px}
.hero .marcas{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hero .marcas span{border:1px solid rgba(167,196,178,.45);color:var(--sage-br);font-weight:600;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:99px}

/* tarjetas / rejillas */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,20px)}
@media(max-width:960px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);padding:clamp(20px,2.4vw,28px);
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);
  transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
a.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(7,28,46,.10)}
.card .num{font-family:var(--disp);font-weight:300;font-size:26px;color:var(--sage-dk)}
.card p{font-size:14.5px;color:var(--grey);line-height:1.65}
.card .mas{font-weight:600;font-size:13px;color:var(--sage-dk);margin-top:auto}
.card .embx{position:absolute;right:-36px;bottom:-36px;width:130px;opacity:.06;pointer-events:none}
.gap-t{margin-top:clamp(22px,3vw,38px)}

/* pasos */
.pasos{counter-reset:p}
.paso{background:#fff;border:1px solid var(--line);padding:20px 22px;counter-increment:p}
.sec-navy .paso,.sec-deep .paso{background:rgba(255,255,255,.04);border-color:rgba(167,196,178,.25)}
.paso::before{content:counter(p,decimal-leading-zero);font-family:var(--disp);font-weight:300;
  font-size:26px;color:var(--sage-dk);display:block;margin-bottom:8px}
.sec-navy .paso::before,.sec-deep .paso::before{color:var(--sage)}
.paso h3{margin-bottom:6px}
.paso p{font-size:14px;color:var(--grey)}
.sec-navy .paso p,.sec-deep .paso p{color:#93AABC}
.sec-navy .paso h3,.sec-deep .paso h3{color:#E2ECF3}

/* calculadora */
.calc{background:#fff;border:1px solid var(--line);padding:clamp(22px,2.8vw,34px)}
.calc .fila{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.calc label{font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.calc input[type=range]{flex:1;min-width:200px;accent-color:var(--sage-dk)}
.calc .docs{font-weight:600;font-size:13.5px;color:var(--navy);min-width:130px}
.calc .res{display:flex;align-items:baseline;gap:14px;margin-top:18px;flex-wrap:wrap}
.calc .res .h{font-family:var(--disp);font-weight:300;font-size:clamp(42px,5vw,68px);
  letter-spacing:-.035em;color:var(--navy);line-height:1}
.calc .res span{font-size:14px;color:var(--grey)}
.calc .nota{font-size:12.5px;color:var(--grey);margin-top:12px;border-top:1px solid var(--line);padding-top:10px}

/* planes */
.fase1{background:var(--navy);color:#E2ECF3;padding:clamp(18px,2.2vw,28px) clamp(20px,2.6vw,34px);
  display:flex;align-items:baseline;gap:clamp(16px,3vw,36px);flex-wrap:wrap}
.fase1 .lbl{font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-br)}
.fase1 .pr{font-family:var(--disp);font-weight:300;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em}
.fase1 p{font-size:13.5px;color:#A8BCCC;flex-basis:100%;margin:6px 0 0}
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,20px)}
@media(max-width:840px){.planes{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--line);padding:20px 22px;position:relative}
.plan.dest{background:var(--navy);border-color:var(--navy)}
.plan .tag{position:absolute;top:0;right:0;background:var(--sage);color:var(--deep);
  font-weight:600;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px}
.plan .k{font-weight:600;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.plan.dest .k{color:var(--sage-br)}
.plan .pr{font-family:var(--disp);font-weight:300;font-size:clamp(32px,3.4vw,46px);
  letter-spacing:-.03em;color:var(--navy);margin:6px 0 10px}
.plan.dest .pr{color:#fff}
.plan .pr small{font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--grey);letter-spacing:0}
.plan.dest .pr small{color:#A8BCCC}
.plan ul{margin:0;padding:0;list-style:none}
.plan li{font-size:13.5px;color:var(--grey);line-height:1.55;padding:5px 0 5px 17px;position:relative}
.plan.dest li{color:#C7D6E2}
.plan li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:50%;background:var(--sage)}

/* faq */
.faq .q{background:#fff;border:1px solid var(--line);margin-bottom:10px;overflow:hidden}
.faq .q>button{all:unset;cursor:pointer;display:flex;align-items:center;gap:14px;width:100%;
  padding:16px 20px;box-sizing:border-box}
.faq .q .tt{font-weight:600;font-size:15px;color:var(--navy);flex:1}
.faq .q .fl{width:9px;height:9px;border-right:1.5px solid var(--grey);border-bottom:1.5px solid var(--grey);
  transform:rotate(45deg);transition:.25s;flex:none;margin-right:4px}
.faq .q.on .fl{transform:rotate(-135deg)}
.faq .q .a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.2,.7,.3,1)}
.faq .q.on .a{max-height:400px}
.faq .q .a p{padding:0 20px 16px;font-size:14.5px;color:var(--grey);line-height:1.7}

/* club newsletter */
.club{position:relative;overflow:hidden}
.club .emb{position:absolute;left:-70px;bottom:-90px;width:340px;opacity:.09;pointer-events:none}
.club form{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;max-width:560px}
.club input{flex:1;min-width:220px;background:rgba(255,255,255,.07);border:1px solid rgba(167,196,178,.4);
  color:#E2ECF3;font:500 14.5px var(--body);padding:13px 16px;border-radius:99px;outline:none}
.club input::placeholder{color:#7E97AB}
.club input:focus{border-color:var(--sage)}
.club .ok{display:none;margin-top:14px;color:var(--sage-br);font-weight:600;font-size:14px}
.club .ok.si{display:block}

/* blog */
.post-card{background:#fff;border:1px solid var(--line);padding:22px 24px;display:flex;
  flex-direction:column;gap:9px;text-decoration:none;color:var(--ink);transition:.18s}
.post-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(7,28,46,.10)}
.post-card .meta{font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-dk)}
.post-card p{font-size:14px;color:var(--grey);line-height:1.65}
.post-card .mas{font-weight:600;font-size:13px;color:var(--sage-dk);margin-top:auto}

/* artículo */
.art{max-width:760px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.art .meta{font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-dk);margin-bottom:14px}
.art h1{font-size:clamp(30px,4.2vw,46px)}
.art .resumen{background:var(--sage-50);border-left:3px solid var(--sage);padding:16px 20px;
  margin:26px 0;font-size:15.5px;line-height:1.7}
.art h2{font-size:clamp(22px,2.6vw,30px);margin:38px 0 14px}
.art h3{margin:26px 0 10px}
.art p,.art li{color:#3d4c58;font-size:16px}
.art ul{padding-left:22px;margin:0 0 1em}
.art li{margin-bottom:6px}
.art .dato{background:#fff;border:1px solid var(--line);border-top:2px solid var(--navy);
  padding:16px 20px;margin:24px 0}
.art .dato b{font-family:var(--disp);font-weight:300;font-size:30px;color:var(--navy);
  display:block;letter-spacing:-.03em}
.art .dato span{font-size:13.5px;color:var(--grey)}
.miga{font-size:12.5px;color:var(--grey);padding:18px 0 0}
.miga a{color:var(--sage-dk);text-decoration:none;font-weight:600}
.rel{border-top:1px solid var(--line);margin-top:44px;padding-top:26px}

/* banda CTA */
.banda{position:relative;overflow:hidden}
.banda .emb{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:300px;opacity:.10;pointer-events:none}

/* pie */
footer{background:var(--deep);color:#93AABC;padding:clamp(44px,6vw,72px) 0 30px;font-size:14px}
footer .g4 a{color:#C7D6E2;text-decoration:none;display:block;padding:3px 0}
footer .g4 a:hover{color:var(--sage-br)}
footer .k{font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage);margin-bottom:10px}
footer .lg img{height:16px;width:auto;margin-bottom:12px}
footer .fin{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#61809A}
footer .fin a{color:#7E97AB}

/* util */
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--sage);color:var(--deep);
  font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;margin-bottom:16px}
.tabla-w{overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);font-size:14.5px}
table.cmp th,table.cmp td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left}
table.cmp th{font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
table.cmp td b{color:var(--navy)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border:2px solid var(--sage)}

/* ---- revelados al hacer scroll (solo con JS activo) ---- */
html.anim .rv{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
html.anim .in .rv{opacity:1;transform:none}
html.anim .in .rv.d1{transition-delay:.08s}html.anim .in .rv.d2{transition-delay:.16s}
html.anim .in .rv.d3{transition-delay:.24s}html.anim .in .rv.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){html.anim .rv{opacity:1!important;transform:none!important;transition:none!important}}

/* ---- banda de cifras ---- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
@media(max-width:840px){.cifras{grid-template-columns:1fr 1fr}}
.cifra{border-top:2px solid rgba(167,196,178,.55);padding-top:14px}
.cifra .n{font-family:var(--disp);font-weight:200;font-size:clamp(40px,4.6vw,64px);
  letter-spacing:-.035em;color:#F7F7F7;line-height:1}
.cifra .n small{font-size:.45em;font-weight:300;color:var(--sage-br)}
.cifra p{font-size:13.5px;color:#93AABC;margin-top:8px;line-height:1.6}

/* ---- flujo de un documento ---- */
.flujo{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:8px}
@media(max-width:840px){.flujo{grid-template-columns:1fr;gap:18px}}
.flujo .linea{position:absolute;top:26px;left:12%;right:12%;height:2px;background:var(--line);z-index:0}
.flujo .linea i{display:block;height:100%;width:0;background:var(--sage-dk)}
html.anim .in .flujo .linea i{width:100%;transition:width 2.2s cubic-bezier(.3,.6,.3,1) .3s}
@media(max-width:840px){.flujo .linea{display:none}}
.nodo{position:relative;z-index:1;text-align:center;padding:0 14px}
.nodo .pt{width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid var(--line);
  margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:300;font-size:19px;color:var(--sage-dk);transition:.3s}
html.anim .in .nodo .pt{border-color:var(--sage-dk);box-shadow:0 0 0 6px rgba(137,166,148,.15)}
html.anim .in .nodo:nth-child(2) .pt{transition-delay:.5s}
html.anim .in .nodo:nth-child(3) .pt{transition-delay:1.1s}
html.anim .in .nodo:nth-child(4) .pt{transition-delay:1.7s}
html.anim .in .nodo:nth-child(5) .pt{transition-delay:2.3s}
.nodo h3{font-size:16px;margin-bottom:6px}
.nodo p{font-size:13.5px;color:var(--grey);line-height:1.6}

/* ---- planes clicables ---- */
.plan{cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.plan:hover{transform:translateY(-3px)}
.plan.dest{transform:translateY(-5px);box-shadow:0 18px 44px rgba(14,49,77,.22)}

/* ---- burbuja de WhatsApp ---- */
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:150;display:flex;
  flex-direction:column;align-items:flex-end;gap:12px}
.wa-btn{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:var(--sage);color:var(--deep);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px rgba(7,28,46,.35);transition:.2s}
.wa-btn:hover{background:var(--sage-br);transform:translateY(-2px)}
.wa-pop{display:none;width:min(320px,84vw);background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(7,28,46,.25);padding:20px 22px;position:relative}
.wa-pop.abre{display:block;animation:wa-in .25s cubic-bezier(.2,.7,.3,1)}
@keyframes wa-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wa-pop .k{font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sage-dk);margin-bottom:8px}
.wa-pop p{font-size:13.8px;color:var(--grey);line-height:1.65;margin-bottom:14px}
.wa-pop .x{position:absolute;top:8px;right:10px;background:none;border:0;cursor:pointer;
  font-size:20px;color:var(--grey);line-height:1}

/* ---- podcast en portada/blog ---- */
.pod{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,44px);align-items:center}
@media(max-width:840px){.pod{grid-template-columns:1fr}}
.pod .eps{display:flex;flex-direction:column;gap:10px}
.pod .ep{background:rgba(255,255,255,.05);border:1px solid rgba(167,196,178,.25);
  padding:14px 18px;display:flex;gap:14px;align-items:center}
.pod .ep .pl{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--sage-br);
  flex:none;display:flex;align-items:center;justify-content:center;color:var(--sage-br)}
.pod .ep .pl::before{content:"";display:block;width:0;height:0;margin-left:3px;
  border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.pod .ep div b{display:block;font-size:14.5px;color:#E2ECF3;font-weight:600}
.pod .ep div span{font-size:12.5px;color:#93AABC}

/* ---- marquesina de tecnologías ---- */
.marq{overflow:hidden;background:var(--deep);border-top:1px solid rgba(137,166,148,.18);
  border-bottom:1px solid rgba(137,166,148,.18);padding:16px 0}
.marq .tira{display:flex;gap:0;width:max-content;animation:marq 26s linear infinite}
.marq:hover .tira{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq span{font-family:var(--disp);font-weight:300;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:#7E97AB;padding:0 26px;white-space:nowrap}
.marq span b{color:var(--sage-br);font-weight:500}
@media (prefers-reduced-motion:reduce){.marq .tira{animation:none}}

/* ---- comparador con/sin cuotas ---- */
.cmpq .conm{display:flex;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:5px;width:max-content;margin:0 auto}
.cmpq .conm button{all:unset;cursor:pointer;font-weight:600;font-size:13.5px;
  padding:10px 22px;border-radius:99px;color:var(--grey);transition:.2s}
.cmpq .conm button.on{background:var(--navy);color:#fff}
.cmpq .esc{position:relative;max-width:720px;margin:30px auto 0}
.cmpq .barra{display:grid;grid-template-columns:150px 1fr 90px;gap:14px;align-items:center;
  margin-bottom:14px}
.cmpq .barra .lb{font-weight:600;font-size:12.5px;color:var(--grey);text-align:right}
.cmpq .barra .tubo{height:26px;background:var(--navy-50);border-radius:99px;overflow:hidden}
.cmpq .barra .tubo i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--mid),var(--navy));transition:width .8s cubic-bezier(.2,.7,.3,1)}
.cmpq .barra.verde .tubo i{background:linear-gradient(90deg,var(--sage),var(--sage-dk))}
.cmpq .barra .val{font-family:var(--disp);font-weight:300;font-size:20px;color:var(--navy);
  letter-spacing:-.02em;white-space:nowrap}
.cmpq .pie-n{font-size:12.5px;color:var(--grey);text-align:center;margin-top:16px}

/* ---- casos ---- */
.caso{background:#fff;border:1px solid var(--line);border-top:2px solid var(--navy);
  padding:22px 24px;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.caso:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(7,28,46,.10)}
.caso .tag{display:inline-block;font-weight:600;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--sage-50);color:var(--sage-dk);
  padding:4px 10px;border-radius:99px;margin-bottom:12px}
.caso .kpi{display:flex;gap:18px;margin:12px 0 4px}
.caso .kpi div b{display:block;font-family:var(--disp);font-weight:300;font-size:26px;
  color:var(--navy);letter-spacing:-.025em}
.caso .kpi div span{font-size:11.5px;color:var(--grey)}
.caso .desp{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.7,.3,1)}
.caso.on .desp{max-height:300px}
.caso .desp p{font-size:13.8px;color:var(--grey);padding-top:10px;border-top:1px solid var(--line);margin-top:10px}
.caso .mas{font-weight:600;font-size:12.5px;color:var(--sage-dk);margin-top:10px;display:inline-block}
.nota-casos{font-size:13px;color:var(--grey);margin-top:18px;text-align:center}

/* ---- figura de casos ---- */
.figcasos{margin:34px 0 0;position:relative;overflow:hidden}
.figcasos img{display:block;width:100%;height:clamp(220px,32vw,380px);object-fit:cover;object-position:center 38%}
.figcasos::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,28,46,0) 55%,rgba(7,28,46,.55))}
.figcasos figcaption{position:absolute;left:22px;bottom:16px;z-index:2;color:#E2ECF3;
font-weight:600;font-size:13px;letter-spacing:.04em}

/* ---- héroe vivo ---- */
.hero{background:linear-gradient(140deg,#0E314D,#0a2740 42%,#071C2E 72%,#0d2f47);
  background-size:220% 220%;animation:respira 16s ease-in-out infinite alternate}
@keyframes respira{from{background-position:0% 0%}to{background-position:100% 100%}}
.hero .emb{opacity:.12}
.hero .vivo{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:16px;align-items:flex-end}
@media(max-width:1100px){.hero .vivo{display:none}}
.tarj{background:rgba(255,255,255,.055);border:1px solid rgba(167,196,178,.22);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:16px 22px;
  display:flex;flex-direction:column;gap:4px;animation:flota 6s ease-in-out infinite}
.tarj.t2{animation-delay:1.6s;margin-right:34px}
.tarj.t3{animation-delay:3.1s;flex-direction:row;align-items:baseline;gap:10px}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.hero{animation:none}.tarj{animation:none}}
.tarj .k{font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-br)}
.tarj .n{font-family:var(--disp);font-weight:200;font-size:44px;letter-spacing:-.03em;color:#F7F7F7;line-height:1.05}
.tarj .n2{font-family:var(--disp);font-weight:200;font-size:30px;letter-spacing:-.02em;color:#F7F7F7}
.tarj .s{font-size:12px;color:#93AABC}
.tarj .fl{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#DDE6ED;margin-top:2px}
.tarj .fl em{font-style:normal;color:#7E97AB}
.tarj .fl b{color:var(--sage-br)}
.tarj .fl i{width:8px;height:8px;border-radius:50%;background:var(--sage);display:inline-block;
  animation:late 2.4s infinite}
.tarj .fl i.p2{animation-delay:.8s}.tarj .fl i.p3{animation-delay:1.6s}
@keyframes late{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}

/* ---- botones resaltados ---- */
.btn.b1.destello{position:relative;overflow:hidden;animation:halo 3s ease-out infinite;
  transition:transform .18s,box-shadow .18s}
.btn.b1.destello:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(137,166,148,.35)}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(137,166,148,.45)}55%{box-shadow:0 0 0 14px rgba(137,166,148,0)}
100%{box-shadow:0 0 0 0 rgba(137,166,148,0)}}
.btn.b1.destello::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);animation:brillo 4.2s ease-in-out infinite}
@keyframes brillo{0%,64%{left:-70%}86%,100%{left:130%}}
.btn.b3.flecha span{display:inline-block;transition:transform .2s;margin-left:2px}
.btn.b3.flecha:hover span{transform:translateX(5px)}
.btn.b3.flecha:hover{border-color:var(--sage-br);color:#fff}
@media (prefers-reduced-motion:reduce){.btn.b1.destello,.btn.b1.destello::after{animation:none}}

/* ---- ajuste de aire: sección del flujo ---- */
.sec-flujo{padding:clamp(36px,5vw,64px) 0}
.sec-flujo .flujo{margin-top:clamp(44px,5.5vw,72px)}
/* ============================================================
   AUREA · Parche de accesibilidad y responsive · v2
   ------------------------------------------------------------
   CÓMO APLICAR
   Pegar este bloque AL FINAL de assets/css/aurea.css.
   Va después de todo para que gane por orden de cascada sin
   tocar ninguna regla existente.

   VERIFICADO sobre la web en producción, cargando el parche
   encima y comparando estilos calculados y geometría en
   360 / 390 / 768 / 1440 px:
     · scrollWidth sigue siendo igual a clientWidth
     · ningún texto se reduce de tamaño
     · textos por debajo de 12 px:  36 -> 0
     · areas tactiles por debajo de 40 px:  19 -> 0

   v2 respecto a v1: la primera version solo cubria los estilos
   genericos y dejaba fuera 20 textos pequenos y 7 areas tactiles
   con selectores mas especificos (.plan .k, .caso .tag,
   .post-card .meta, el enlace del logo, el deslizador de la
   calculadora). Estan todos incluidos ahora.
   ============================================================ */


/* ------------------------------------------------------------
   1 · LEGIBILIDAD — ningún texto por debajo de 12 px
   ------------------------------------------------------------
   Al subir el cuerpo se baja ligeramente el espaciado entre
   letras, para que los bloques en mayúsculas ocupen lo mismo
   y no se descuadre ninguna rejilla.
   ------------------------------------------------------------ */

/* Etiquetas genéricas: tarjetas del hero, pie, secciones */
.k{ font-size:12px; letter-spacing:.10em }
.tarj .k,
footer .k{ font-size:12px }

/* Eyebrows de sección */
.eyebrow{ font-size:12.5px }

/* Bloque de precios */
.plan .k{ font-size:12px; letter-spacing:.09em }
.fase1 .lbl{ font-size:12px; letter-spacing:.10em }

/* Distintivos: "El más elegido", "Caso tipo · Gestoría" */
.tag,
.plan .tag,
.caso .tag,
.pill{ font-size:12px; letter-spacing:.06em }

/* Calculadora de horas */
.calc label{ font-size:12px; letter-spacing:.09em }

/* Fichas de artículo del blog y del listado */
.post-card .meta{ font-size:12px; letter-spacing:.08em }

/* Indicadores de los casos tipo.
   Su regla es .caso .kpi div span (especificidad 0,2,2),
   así que hay que igualarla o no se aplica. */
.caso .kpi div span{ font-size:12.5px }

/* Burbuja de WhatsApp */
.wa-pop .k{ font-size:12px }

/* Cabecera de artículo del blog: "GUÍA · 9 DE JUNIO DE 2026" */
.art .meta{ font-size:12px; letter-spacing:.08em }

/* Cabeceras de las tablas comparativas de los artículos.
   Afecta a los dos idiomas por igual. */
.art table th,
table th{ font-size:12px; letter-spacing:.05em }

/* Textos pequeños sueltos */
.tarj .s,
.fin{ font-size:12.5px }

footer .g4 p{ font-size:13.5px !important; line-height:1.7 }


/* ------------------------------------------------------------
   2 · ÁREAS TÁCTILES — mínimo 44 px
   ------------------------------------------------------------
   Referencia: WCAG 2.2 criterio 2.5.8 pide 24 px; las guías de
   Apple y Android piden 44. Se llega a 44 con padding, sin
   tocar el tamaño de letra de ningún enlace.
   ------------------------------------------------------------ */

/* Enlace del logo en la cabecera: medía 88 × 17 px */
.lg{ display:inline-flex; align-items:center; min-height:44px }

/* Enlaces del pie: medían 30 px de alto */
footer .g4 a{ padding:11px 0; line-height:1.35 }

/* Aviso legal, privacidad y cookies: medían 15 px */
.fin a{ display:inline-block; padding:12px 4px }

/* Enlace de la política de privacidad bajo el formulario del club */
.club p a,
main p > a{ display:inline-block; padding:12px 0 }

/* Botón hamburguesa: medía 38 × 42 px */
.burger{ padding:11px; min-width:44px; min-height:44px }

/* Enlace de salto al contenido, visible solo al tabular */
.skip:focus{ padding:14px 18px; min-height:44px }

/* Campo de correo del club: la caja medía 16 px de alto.
   16 px de cuerpo es además el umbral por debajo del cual
   Safari en iPhone hace zoom automático al enfocar. */
#club-form input[type="email"],
.club input[type="email"],
input[type="email"],
input[type="text"]{ min-height:44px; padding:11px 14px; font-size:16px }

/* Deslizador de la calculadora: la zona sensible medía 16 px.
   El control es nativo con accent-color, así que darle alto
   amplía la zona de toque sin alterar su aspecto. */
.calc input[type=range]{ height:44px }

/* Migas de pan de los artículos: enlaces de 15 px de alto */
.art .miga a{ display:inline-block; padding:12px 2px }

/* Enlaces dentro de las cajas de dato destacado: medían 16 px.
   No son enlaces en prosa corrida, así que no les aplica la
   excepción de WCAG para enlaces en línea. */
.dato a{ display:inline-block; padding:12px 0 }

/* Navegación de escritorio: enlaces de 23 px de alto */
@media(min-width:841px){
  .nav a{ padding:11px 4px }
  .nav a.cta{ padding:12px 18px }
}


/* ------------------------------------------------------------
   3 · BOTÓN FLOTANTE DE WHATSAPP
   ------------------------------------------------------------
   En 390 px se solapa con la cifra "0 € por usuario y mes".
   Al ser position:fixed siempre tapará algo, así que se reduce
   en pantallas pequeñas, respeta el área segura del iPhone y
   se reserva hueco al final de la página.
   ------------------------------------------------------------ */

.wa-fab{ bottom:calc(18px + env(safe-area-inset-bottom, 0px)) }

@media(max-width:480px){
  .wa-btn{ width:52px; height:52px }
  .wa-pop{ max-width:calc(100vw - 32px) }
}

@media(max-width:840px){
  footer .fin{ padding-bottom:64px }
}


/* ------------------------------------------------------------
   4 · SÍMBOLO DECORATIVO
   ------------------------------------------------------------
   En 360, 390 y 768 px la marca de agua se sale del viewport
   por la derecha. No genera scroll porque queda recortada,
   pero se ve cortada a media letra.
   ------------------------------------------------------------ */

@media(max-width:840px){
  .hero .wrap{ overflow:hidden }
  .emb{ width:200px; right:-40px; opacity:.07 }
  .embx{ width:96px; right:-20px; bottom:-20px }
}


/* ------------------------------------------------------------
   4-bis · ENCABEZADO OCULTO PARA LECTORES DE PANTALLA
   ------------------------------------------------------------
   Cinco páginas saltan de H1 a H3 sin pasar por H2, y los
   lectores de pantalla usan la jerarquía como índice.

   NO se cambia el <h3> por <h2>: el CSS depende del nivel
   (.paso h3, .sec-deep .paso h3, .nodo h3) y hacerlo cambiaría
   tamaño, margen y color. Se inserta un <h2> con esta clase,
   que arregla la semántica sin tocar el diseño.

   Es la técnica estándar: fuera del viewport pero legible por
   el lector de pantalla. Nada de display:none ni de
   visibility:hidden, que lo ocultarían también a él.
   ------------------------------------------------------------ */

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/* ------------------------------------------------------------
   5 · FOCO VISIBLE PARA TECLADO
   ------------------------------------------------------------
   No existe un estilo de :focus-visible propio, así que la
   navegación por teclado depende del contorno azul por defecto
   del navegador. Se sustituye por el verde de marca.
   ------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--sage-dk);
  outline-offset:3px;
  border-radius:4px;
}

.inv a:focus-visible,
.inv button:focus-visible{ outline-color:var(--sage-br) }


/* ------------------------------------------------------------
   6 · ESTABILIDAD DE LAYOUT (CLS)
   ------------------------------------------------------------
   Complementa los atributos width/height del HTML: evita que
   un ancho declarado deforme la imagen.
   ------------------------------------------------------------ */

img{ height:auto; max-width:100% }

.figcasos img{ aspect-ratio:3 / 2; object-fit:cover }
/* ============================================================
   AUREA · Aviso de cookies + redes sociales en el pie
   ------------------------------------------------------------
   Pegar al final de assets/css/aurea.css, después del parche
   de accesibilidad (03-parche-aurea.css).

   Usa las variables de color que ya existen en :root, así que
   si cambia la paleta esto la sigue.
   ============================================================ */


/* ── 1 · Aviso de cookies ─────────────────────────────────────
   Barra inferior, no modal a pantalla completa: no bloquea la
   lectura y no obliga a decidir para poder navegar.
   ---------------------------------------------------------- */

.ck{
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index:300;
  background:var(--deep);
  color:#DCE7EF;
  border-top:3px solid var(--sage);
  transform:translateY(105%);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.ck.ck-ver{ transform:translateY(0) }

@media(prefers-reduced-motion:reduce){
  .ck{ transition:none }
}

.ck-in{
  max-width:var(--wrap);
  margin:0 auto;
  padding:20px 24px;
  display:flex;
  align-items:center;
  gap:28px;
}

.ck-txt{ flex:1; min-width:0 }

.ck-h{
  font-family:var(--disp);
  font-weight:600;
  font-size:16px;
  color:#fff;
  margin:0 0 4px;
}

.ck-txt p{
  font-size:14px;
  line-height:1.55;
  margin:0;
  color:#B4C8D6;
  max-width:74ch;
}

.ck-txt a{ color:var(--sage-br); text-decoration:underline }
.ck-txt a:hover{ color:#fff }

/* Los dos botones tienen el mismo tamaño y el mismo peso visual.
   La AEPD considera infracción que rechazar cueste más que
   aceptar, y es de lo que más se sanciona. */
.ck-btn{
  display:flex;
  gap:12px;
  flex-shrink:0;
}

.ck-btn button{
  font-family:var(--body);
  font-weight:600;
  font-size:14px;
  min-height:44px;
  min-width:132px;
  padding:12px 24px;
  border-radius:99px;
  cursor:pointer;
  transition:.18s;
  border:2px solid var(--sage-br);
}

.ck-btn .ck-no{
  background:transparent;
  color:var(--sage-br);
}
.ck-btn .ck-no:hover{
  background:rgba(167,196,178,.14);
  color:#fff;
}

.ck-btn .ck-si{
  background:var(--sage-br);
  color:var(--deep);
}
.ck-btn .ck-si:hover{
  background:#fff;
  border-color:#fff;
}

.ck-btn button:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

@media(max-width:760px){
  .ck-in{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    padding:18px 20px;
  }
  .ck-btn button{ flex:1; min-width:0 }
  .ck-txt p{ font-size:13.5px }
}

/* Cuando el aviso está abierto, el botón de WhatsApp se aparta
   para no quedar encima. */
.ck.ck-ver ~ .wa-fab{ bottom:calc(150px + env(safe-area-inset-bottom, 0px)) }
@media(max-width:760px){
  .ck.ck-ver ~ .wa-fab{ bottom:calc(210px + env(safe-area-inset-bottom, 0px)) }
}


/* ── 2 · Redes sociales en el pie ─────────────────────────────
   Iconos monocromos que heredan el color del pie. No se usan
   los colores de marca de cada red: rompen la paleta y obligan
   a mantener cinco archivos de imagen.
   ---------------------------------------------------------- */

.redes{
  display:flex;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}

.redes a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(199,214,226,.28);
  color:#C7D6E2;
  transition:.18s;
  padding:0;            /* anula el padding de footer .g4 a */
}

.redes a:hover{
  background:var(--sage-dk);
  border-color:var(--sage-dk);
  color:#fff;
}

.redes a:focus-visible{
  outline:3px solid var(--sage-br);
  outline-offset:3px;
}

.redes svg{
  width:19px;
  height:19px;
  fill:currentColor;
  display:block;
}

/* Placeholder para las redes que aún no existen: se ve el hueco
   en gris apagado y no es pulsable. Quitar la clase al publicar
   el perfil correspondiente. */
.redes .pendiente{
  opacity:.3;
  pointer-events:none;
  cursor:default;
}