/* Estilos de todo el sitio publico: la portada y las paginas de Aprende y Servicios.
   Las tres paginas legales llevan los suyos, a proposito: son documentos. */
/* ═══════════════════════════════════════════════════════════════════════════
   La paleta es la de la marca (app/templates/_paleta.html): verde pino, piedra
   calida, pizarra, ocre y rosa. Todo lo demas es de esta pagina: grotesca de
   titulares con caracter (Bricolage Grotesque), Geist para leer, secciones
   oscuras como tarjetas redondeadas, y una maquina en el hero que lee facturas
   delante del visitante. El porque de cada movimiento, en web/README.md.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme: only light;
  --ink-900:#0e2119; --ink-800:#163024; --ink-700:#204435; --ink-600:#2c5744; --ink-400:#7c8a83;
  --sig-50:#f0f5f1; --sig-100:#dae8dd; --sig-200:#bcd6c2; --sig-400:#5f9576;
  --sig-500:#417a58; --sig-600:#2f6244; --sig-700:#244e36;
  --sky-50:#eef2f7; --sky-100:#dbe3ee; --sky-200:#c2d0e2; --sky-400:#7a95b6; --sky-600:#455f80; --sky-800:#2c3b50;
  --st-50:#faf9f6; --st-100:#f2f0ea; --st-200:#e5e2d9; --st-300:#d2cec2;
  --st-400:#a9a394; --st-500:#847e70; --st-600:#635d52; --st-700:#4a453c; --st-800:#332f29;
  --am-50:#fdf6ec; --am-100:#f8e8cf; --am-200:#eed4a8; --am-300:#e0b877; --am-400:#cf9a4c; --am-600:#966224; --am-700:#7a4e20;
  --rose-50:#fdf1ee; --rose-200:#eebcae; --rose-500:#b4523a; --rose-700:#7a3425;
  --paper:#fffefa;

  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --logo:'Newsreader','Iowan Old Style',Georgia,serif;
  --wrap:1240px;
  --gut:clamp(16px,4vw,40px);

  /* Curvas propias: las de CSS por defecto no tienen empuje */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  --sombra:0 1px 2px rgba(14,33,25,.05),0 8px 24px -10px rgba(14,33,25,.16),0 32px 64px -32px rgba(14,33,25,.32);
  --sombra-o:0 2px 6px rgba(0,0,0,.18),0 40px 90px -30px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--st-50);color:var(--st-700);overflow-x:clip;
  font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.02;color:var(--ink-900);text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2.5px solid var(--sig-400);outline-offset:3px;border-radius:6px}
a,button,label,summary,input[type=range]{touch-action:manipulation}
.btn,.nav-login,summary,.mq-tabs button,.pr-tabs label,.elige a{-webkit-user-select:none;user-select:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.sec{padding-block:clamp(88px,11vw,152px)}
.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}
.mono{font-family:var(--mono)}
/* Toda rejilla arranca en una columna que puede encogerse: sin el minmax(0,…) una linea
   de factura sin cortes estira la columna y en movil la seccion se sale de la pantalla. */
.hero-grid,.mq-marco,.suena,.pasos-grid,.anatomia,.techo-cab,.techo-dos,.pr-panel,.garantias,.formatos,
.plans,.quien-in,.faq-grid,.cta-grid,.avisos,.bz-leer{grid-template-columns:minmax(0,1fr)}

/* Una seccion oscura es una tarjeta: se separa del borde y redondea las esquinas */
.oscuro{background:var(--ink-900);color:#b9cbc1;border-radius:clamp(22px,3vw,40px);margin-inline:clamp(6px,1vw,14px);position:relative;isolation:isolate;overflow:hidden}
.oscuro h2,.oscuro h3,.oscuro h4{color:#fff}

/* La palabra que importa del titular se subraya al aparecer, y se queda subrayada */
h1 em,h2 em,h3 em{font-style:normal;color:var(--sig-500);
  background:linear-gradient(currentColor,currentColor) 0 94%/0% .07em no-repeat;
  transition:background-size 1.1s var(--ease-in-out) .35s}
.oscuro h1 em,.oscuro h2 em,.oscuro h3 em{color:var(--sig-400)}
.visto em,html:not(.js) em{background-size:100% .07em}

/* ── Aparecer al entrar ──────────────────────────────────────────────────────
   Solo con .js (ver el guion del <head>). Sube, se enfoca y se ve; una vez. */
.js .rv{opacity:0;transform:translateY(28px);filter:blur(6px);
  transition:opacity .9s var(--ease-out) var(--d,0ms),transform .9s var(--ease-out) var(--d,0ms),filter .9s var(--ease-out) var(--d,0ms)}
.js .rv.visto{opacity:1;transform:none;filter:none}
/* El titular del hero entra palabra a palabra */
.js .partido .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.js .partido .w>span{display:inline-block;transform:translateY(108%);transition:transform 1s var(--ease-out) var(--d,0ms)}
.js .partido.visto .w>span{transform:none}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;
  font:600 16px/1 var(--sans);letter-spacing:-.01em;padding:15px 22px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .25s ease,transform .16s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn .i{width:17px;height:17px;transition:transform .3s var(--ease-out)}
.btn-primary{background:var(--sig-500);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px -10px rgba(65,122,88,.9)}
.btn-blanco{background:#fff;color:var(--ink-900);box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.btn-tinta{background:var(--ink-900);color:#fff}
.btn-ghost{background:transparent;color:var(--ink-900);border-color:var(--st-300)}
.btn-ghost-o{background:rgba(255,255,255,.04);color:#e3ede7;border-color:rgba(255,255,255,.2)}
.btn-sm{padding:10px 16px;font-size:14.5px}
.btn-lg{padding:18px 26px;font-size:17px}
.btn-full{width:100%}
@media (pointer:coarse){ .btn-sm,.nav-login{min-height:44px} }

/* ── Cabecera: una pastilla flotante ─────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;height:84px;margin-bottom:-84px;padding:12px 0 0;pointer-events:none}
.nav .wrap{pointer-events:none}
.nav-in{pointer-events:auto;position:relative;max-width:1160px;margin:0 auto;height:58px;display:flex;align-items:center;gap:20px;
  padding:0 8px 0 18px;border-radius:999px;background:rgba(255,254,250,.8);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  border:1px solid rgba(14,33,25,.08);box-shadow:0 1px 2px rgba(14,33,25,.05);
  transition:box-shadow .35s ease,background-color .35s ease}
.nav.pegada .nav-in{background:rgba(255,254,250,.92);box-shadow:0 14px 34px -14px rgba(14,33,25,.35)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:auto}
.brand svg{width:24px;height:24px;color:var(--sig-500);flex:none;transition:transform .8s var(--ease-out)}
.brand span{font-family:var(--logo);font-size:23px;font-weight:600;letter-spacing:-.02em;color:var(--ink-900)}
.brand .fy{color:var(--sig-500)}
.nav-links{display:none;gap:2px;align-items:center}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--st-600);text-decoration:none;padding:8px 12px;border-radius:999px;transition:background-color .2s ease,color .2s ease}
@media (min-width:1000px){ .nav-links{display:flex} }
.nav-cta{display:flex;align-items:center;gap:4px;flex:none}
.nav-login{font-size:14.5px;font-weight:500;color:var(--ink-900);text-decoration:none;padding:10px 14px;border-radius:999px;
  white-space:nowrap;display:inline-flex;align-items:center;transition:background-color .2s ease}
/* La barra de progreso de lectura: la dibuja el propio desplazamiento, sin guion */
.nav-prog{position:absolute;left:22px;right:22px;bottom:-1px;height:2px;border-radius:2px;background:var(--sig-400);
  transform-origin:left;transform:scaleX(0);opacity:0}
@supports (animation-timeline:scroll()){
  .nav-prog{opacity:1;animation:progreso linear both;animation-timeline:scroll(root)}
  @keyframes progreso{to{transform:scaleX(1)}}
}
@media (max-width:430px){
  .nav-in{padding:0 6px 0 14px;gap:8px}
  .brand span{font-size:20px} .brand svg{width:21px;height:21px}
  .nav-login{padding:10px 8px;font-size:14px} .nav-cta .btn-sm{padding:10px 13px;font-size:14px}
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{margin-inline:0;border-radius:0 0 clamp(26px,3.5vw,48px) clamp(26px,3.5vw,48px);
  padding:clamp(120px,12vw,150px) 0 clamp(64px,8vw,104px)}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 55% 35%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse 75% 65% at 55% 35%,#000 20%,transparent 78%)}
/* La aurora: tres luces que derivan despacio. Degradados, no desenfoques: no cuestan nada */
.aurora{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;will-change:transform;
  animation:deriva 24s var(--ease-in-out) infinite alternate}
.aurora i:nth-child(1){left:-25vmax;top:-35vmax;background:radial-gradient(closest-side,rgba(65,122,88,.55),transparent)}
.aurora i:nth-child(2){right:-30vmax;top:-10vmax;background:radial-gradient(closest-side,rgba(69,95,128,.42),transparent);animation-duration:30s;animation-delay:-9s}
.aurora i:nth-child(3){left:20%;bottom:-50vmax;background:radial-gradient(closest-side,rgba(207,154,76,.16),transparent);animation-duration:36s;animation-delay:-4s}
@keyframes deriva{to{transform:translate3d(9vmax,7vmax,0) scale(1.18)}}

.hero-grid{display:grid;gap:clamp(48px,6vw,72px);align-items:center}
@media (min-width:1080px){ .hero-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px} }
.hero .wrap{max-width:1360px}
.pill-ley{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:6px 14px 6px 6px;border-radius:999px;margin-bottom:28px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#dbe8e0;font-size:14px;line-height:1.35;text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease}
.pill-ley .dot{width:24px;height:24px;border-radius:50%;background:rgba(95,149,118,.22);display:grid;place-items:center;flex:none;position:relative}
.pill-ley .dot::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--sig-400)}
.pill-ley .dot::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--sig-400);animation:onda 2.4s var(--ease-out) infinite}
@keyframes onda{from{transform:scale(.4);opacity:1}to{transform:scale(1.5);opacity:0}}
.pill-ley b{font-weight:600;color:#fff}
.pill-ley .v{color:var(--sig-200);font-weight:600;white-space:nowrap}
@media (max-width:560px){ .pill-ley .largo{display:none} }
.hero h1{font-size:clamp(42px,4.8vw,72px);color:#fff;letter-spacing:-.045em;line-height:1;max-width:15ch}
.hero-lead{margin-top:28px;font-size:clamp(17.5px,1.55vw,20px);line-height:1.55;color:#a8bcb1;max-width:48ch}
.hero-lead b{color:#fff;font-weight:500}
.hero-cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin-top:24px;display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#88a093;max-width:48ch}
.hero-note .i{width:17px;height:17px;color:var(--sig-400);margin-top:3px}

/* ── La maquina del hero: una factura se lee y su cifra vuela al informe ── */
.maquina{position:relative;perspective:1600px}
.mq-marco{position:relative;display:grid;gap:12px;align-items:center;transform-style:preserve-3d;will-change:transform}
@media (min-width:640px){ .mq-marco{grid-template-columns:minmax(0,1fr) 40px minmax(0,1.08fr)} }
.mq-docs{display:grid;padding:26px 12px 18px}
.mq-fac{grid-area:1/1;align-self:end;background:#fff;border-radius:12px;box-shadow:var(--sombra-o);overflow:hidden;
  font-size:12px;color:var(--st-500);transform-origin:50% 100%;
  transition:transform .75s var(--ease-drawer),opacity .75s var(--ease-drawer),filter .75s var(--ease-drawer)}
.mq-fac[data-pos="0"]{z-index:3}
.mq-fac[data-pos="1"]{z-index:2;transform:translate(16px,-14px) rotate(4deg) scale(.94);opacity:.72;filter:brightness(.9)}
.mq-fac[data-pos="2"]{z-index:1;transform:translate(-16px,-24px) rotate(-5deg) scale(.89);opacity:.45;filter:brightness(.85)}
.mq-cab{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--st-100)}
.mq-logo{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.mq-logo .i{width:14px;height:14px;stroke-width:2.4}
.mq-cab b{display:block;font-size:13px;color:var(--ink-900);font-weight:600;line-height:1.2}
.mq-cab small{font-size:11px;color:var(--st-400)}
.mq-cab .pag{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--st-400);white-space:nowrap}
.mq-cuerpo{position:relative;padding:12px 14px 14px;font-family:var(--mono);line-height:2.05;isolation:isolate;overflow:hidden}
.mq-cuerpo p,.mq-cuerpo mark{display:flex;justify-content:space-between;gap:10px;white-space:nowrap}
.mq-cuerpo p span:last-child{color:var(--st-400)}
.mq-cuerpo mark{background:transparent;color:var(--ink-900);font-weight:500;margin:0 -6px;padding:1px 6px;border-radius:5px;
  transition:background-color .4s ease,box-shadow .4s ease}
.mq-fac.hallado mark,html:not(.js) .mq-fac[data-pos="0"] mark{background:var(--am-100);box-shadow:0 0 0 1.5px var(--am-300)}
.mq-scan{position:absolute;left:0;right:0;top:0;height:34px;pointer-events:none;opacity:0;z-index:-1;
  background:linear-gradient(180deg,rgba(95,149,118,0),rgba(95,149,118,.16) 70%,rgba(65,122,88,.45));border-bottom:1.5px solid var(--sig-500)}
.mq-fac.leyendo .mq-scan{animation:escanea .95s var(--ease-in-out) forwards}
@keyframes escanea{0%{opacity:0;transform:translateY(-34px)}15%,85%{opacity:1}100%{opacity:0;transform:translateY(160px)}}
.mq-pie{display:flex;gap:6px;align-items:center;margin-top:10px;padding-top:9px;border-top:1px dashed var(--st-200);
  font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--sig-700);white-space:normal;line-height:1.3;
  opacity:0;transform:translateY(4px);transition:opacity .4s ease .15s,transform .4s var(--ease-out) .15s}
.mq-pie .i{width:13px;height:13px;stroke-width:3;flex:none}
.mq-fac.hallado .mq-pie,html:not(.js) .mq-fac[data-pos="0"] .mq-pie{opacity:1;transform:none}

.mq-hilo{display:grid;place-items:center;color:var(--sig-400)}
.mq-hilo svg{width:40px;height:22px;overflow:visible}
.mq-hilo .hormigas{stroke-dasharray:4 5;animation:hormiga .9s linear infinite}
@keyframes hormiga{to{stroke-dashoffset:-9}}
@media (max-width:639px){ .mq-hilo svg{transform:rotate(90deg)} }

.mq-inf{position:relative;background:var(--paper);border-radius:14px;box-shadow:var(--sombra-o);overflow:hidden}
.mq-inf-top{padding:18px 120px 14px 20px;border-bottom:2px solid var(--ink-900)}
.mq-inf-top .k{font-family:var(--mono);font-size:10.5px;color:var(--sig-600);letter-spacing:.06em;text-transform:uppercase}
.mq-inf-top .tt{font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink-900);letter-spacing:-.03em;line-height:1.15;margin-top:3px}
.mq-inf-top .ss{font-size:12.5px;color:var(--st-500);margin-top:2px}
.mq-fila{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 20px;
  border-bottom:1px solid var(--st-100);transition:background-color .45s ease}
.mq-fila:last-of-type{border-bottom:0}
.mq-fila::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--sig-500);
  transform:scaleY(0);transition:transform .45s var(--ease-out)}
.mq-fila.on{background:var(--sig-50)}
.mq-fila.on::before{transform:none}
.mq-fila .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--sig-50);color:var(--sig-600)}
.mq-fila .ic .i{width:15px;height:15px}
.mq-fila .et{font-size:13.5px;color:var(--st-600);line-height:1.3}
.mq-fila .et small{display:block;font-size:11.5px;color:var(--st-400)}
.mq-fila .vl{text-align:right;white-space:nowrap}
.mq-fila .n{display:inline-block;font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink-900);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mq-fila .u{font-size:12px;color:var(--st-400);margin-left:3px}
.mq-fila.suma .n{animation:salta .6s var(--ease-out)}
@keyframes salta{35%{transform:scale(1.1);color:var(--sig-600)}}
.mq-fila.total{background:var(--st-100)}
.mq-fila.total .n{font-size:26px}
.mq-inf-pie{display:flex;align-items:center;gap:9px;padding:11px 20px;background:var(--st-50);border-top:1px solid var(--st-200);font-size:12px;color:var(--st-500)}
.mq-inf-pie .i{width:14px;height:14px;color:var(--sig-500)}
.firma{position:absolute;right:16px;top:16px;transform:rotate(-8deg);border:2px solid var(--sig-500);color:var(--sig-600);
  border-radius:7px;padding:5px 10px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.85);line-height:1.25;text-align:center}
.firma b{display:block;font-size:12px;letter-spacing:.1em}
@media (max-width:480px){
  .mq-inf-top{padding-right:106px} .mq-inf-top .k{font-size:9.5px;letter-spacing:.04em}
  .firma{right:10px;top:14px;padding:4px 7px;font-size:8.5px} .firma b{font-size:10.5px}
  .mq-fila{padding-inline:14px;gap:10px}
}
.mq-chip{position:absolute;left:0;top:0;z-index:20;pointer-events:none;opacity:0;white-space:nowrap;
  font:500 12.5px/1 var(--mono);background:var(--sig-500);color:#fff;padding:7px 11px;border-radius:999px;
  box-shadow:0 0 0 4px rgba(95,149,118,.25),0 12px 26px -8px rgba(0,0,0,.6)}
.mq-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}
.mq-tabs p{width:100%;text-align:center;font-size:12.5px;color:#7f968a;font-family:var(--mono);margin-bottom:2px}
.mq-tabs button{display:inline-flex;align-items:center;gap:8px;font:500 14px/1 var(--sans);color:#b9cbc1;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 15px;min-height:40px;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .16s var(--ease-out)}
.mq-tabs button .i{width:15px;height:15px}
.mq-tabs button:active{transform:scale(.96)}
.mq-tabs button[aria-pressed="true"]{background:#fff;color:var(--ink-900);border-color:#fff}
html:not(.js) .mq-tabs{display:none}

/* ── La cinta de papeles que lee ─────────────────────────────────────────── */
.lee{padding-block:clamp(36px,5vw,56px) clamp(28px,4vw,44px)}
.lee-t{text-align:center;font-size:14px;font-weight:600;color:var(--ink-900);margin-bottom:20px;padding-inline:var(--gut)}
.lee-t small{display:block;font-weight:400;color:var(--st-500);font-size:13.5px;margin-top:2px}
.carril{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.pista{display:flex;gap:10px;padding-right:10px;flex:none;animation:desfila 42s linear infinite}
.carril:hover .pista{animation-play-state:paused}
@keyframes desfila{to{transform:translateX(-100%)}}
.pista li{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-size:15px;font-weight:500;color:var(--st-700);
  background:#fff;border:1px solid var(--st-200);border-radius:999px;padding:10px 18px 10px 12px;box-shadow:0 1px 2px rgba(14,33,25,.04)}
.pista li .i{width:28px;height:28px;padding:6px;border-radius:50%;background:var(--sig-50);color:var(--sig-600)}

/* ── Cabecera de seccion ─────────────────────────────────────────────────── */
.sh{max-width:880px;margin-bottom:clamp(44px,6vw,80px)}
.sh.c{text-align:center;margin-inline:auto}
.sh.c h2,.sh.c .l{margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  color:var(--st-600);border:1px solid var(--st-300);border-radius:999px;padding:5px 12px 5px 5px;margin-bottom:22px;background:rgba(255,255,255,.5)}
.eyebrow b{font-weight:500;background:var(--ink-900);color:#fff;border-radius:999px;padding:4px 8px}
.oscuro .eyebrow{color:#a9bdb2;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.oscuro .eyebrow b{background:var(--sig-400);color:var(--ink-900)}
.sh h2{font-size:clamp(38px,5.4vw,74px);letter-spacing:-.045em;max-width:17ch}
.sh .l{margin-top:22px;font-size:clamp(17px,1.6vw,19.5px);color:var(--st-600);max-width:58ch}
.oscuro .sh .l{color:#a8bcb1}
.enlace{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink-900);text-decoration:none;
  background:linear-gradient(var(--sig-400),var(--sig-400)) 0 100%/100% 1.5px no-repeat;padding-bottom:3px;
  transition:color .2s ease,background-size .35s var(--ease-out)}
.enlace .i{width:16px;height:16px;transition:transform .3s var(--ease-out)}
.oscuro .enlace{color:#fff}

/* ── 01 · El buzon: los avisos llegan como notificaciones ────────────────── */
.suena{display:grid;gap:clamp(40px,5vw,72px);align-items:start}
@media (min-width:1000px){ .suena{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)} .suena .sh{position:sticky;top:120px;margin-bottom:0} }
.porque{margin-top:26px;font-size:17px;color:var(--st-600);max-width:52ch}
.porque b{color:var(--ink-900);font-weight:600}
.suena-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.buzon{border-radius:24px;background:var(--st-100);border:1px solid var(--st-200);padding:clamp(12px,1.6vw,18px)}
.bz-barra{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;font-size:13px;font-weight:600;color:var(--st-600)}
.bz-barra .cnt{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:500 12px/1 var(--mono);background:var(--rose-500);color:#fff;border-radius:999px;padding:6px 10px}
.bz-barra .cnt b{font-weight:500;min-width:1ch;text-align:right}
.avisos{display:grid;gap:10px}
.aviso{background:#fff;border:1px solid var(--st-200);border-radius:16px;padding:16px 18px;box-shadow:0 1px 2px rgba(14,33,25,.04);
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 14px;transition:transform .3s var(--ease-out),box-shadow .3s ease}
.js .aviso.rv{transform:translateY(-18px) scale(.97)}
.js .aviso.rv.visto{transform:none}
.bz-av{grid-row:span 2;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff}
.bz-de{display:flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink-900);line-height:1.3}
.bz-de small{font-weight:400;color:var(--st-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bz-de .cu{margin-left:auto;font:400 11px var(--mono);color:var(--st-400);white-space:nowrap}
.bz-as{font-size:14.5px;color:var(--st-600);line-height:1.5}
.bz-as b{color:var(--ink-900);font-weight:600}
.aviso.abierto{border-color:var(--sig-200);box-shadow:0 0 0 4px var(--sig-50),var(--sombra)}
.bz-leer{grid-column:1/-1;margin-top:12px;padding-top:14px;border-top:1px dashed var(--st-200);display:grid;gap:12px}
.bz-leer .txt{font-size:15.5px;color:var(--st-700);line-height:1.6}
.bz-leer .txt mark{background:var(--am-100);color:var(--ink-900);font-weight:600;padding:0 3px;border-radius:3px}
.bz-adj{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 9px;border:1px solid var(--st-200);border-radius:10px;padding:9px 12px;width:max-content;max-width:100%;
  font-size:13px;color:var(--st-600);background:var(--st-50)}
.bz-adj .i{color:var(--rose-500);width:16px;height:16px}
.bz-adj b{color:var(--ink-800);font-weight:600;word-break:break-all}
.bz-resp{margin-top:12px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  background:var(--ink-900);color:#c9d8d0;border-radius:16px;padding:16px 18px}
.bz-resp p{font-size:14.5px;max-width:36ch}
.bz-resp p b{color:#fff}

/* ── 02 · Como funciona: pasos que se leen al bajar ──────────────────────── */
.como{background:var(--paper);border-block:1px solid var(--st-200)}
.pasos-grid{display:grid;gap:40px}
@media (min-width:980px){ .pasos-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:start} }
.pasos{position:relative;padding-left:60px;--p:0}
.pasos::before,.pasos::after{content:'';position:absolute;left:19px;top:20px;bottom:20px;width:2px;border-radius:2px;background:var(--st-200)}
.pasos::after{background:var(--sig-500);transform-origin:top;transform:scaleY(calc((var(--p) + 1) / 3));transition:transform .7s var(--ease-out)}
html:not(.js) .pasos::after{transform:none}
.paso{position:relative;padding:0 0 56px}
.paso:last-child{padding-bottom:0}
.paso-n{position:absolute;left:-60px;top:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;z-index:1;
  background:var(--paper);border:2px solid var(--st-300);font:600 17px var(--display);color:var(--st-500);
  transition:background-color .4s ease,border-color .4s ease,color .4s ease,transform .4s var(--ease-out)}
.paso.activo .paso-n,html:not(.js) .paso-n{background:var(--sig-500);border-color:var(--sig-500);color:#fff}
.paso.activo .paso-n{transform:scale(1.08)}
.quien{display:inline-block;font:500 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;border-radius:999px;padding:6px 10px;margin:8px 0 12px}
.quien.tu{color:var(--am-700);background:var(--am-50);border:1px solid var(--am-200)}
.quien.no{color:var(--sig-700);background:var(--sig-50);border:1px solid var(--sig-200)}
.paso h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.04em}
.paso > p{margin-top:12px;color:var(--st-600);font-size:16.5px;max-width:44ch}
.paso .pantalla{margin-top:24px}
@media (min-width:980px){
  .js .paso{min-height:64vh;opacity:.32;transition:opacity .5s ease}
  .js .paso.activo{opacity:1}
  .js .paso .pantalla{display:none}
}
.pasos-escena{display:none}
@media (min-width:980px){ .js .pasos-escena{display:grid;position:sticky;top:max(120px,calc(50vh - 230px))} }
.pasos-escena .pantalla{grid-area:1/1;opacity:0;transform:translateY(18px) scale(.97);filter:blur(5px);pointer-events:none;
  transition:opacity .55s var(--ease-out),transform .7s var(--ease-out),filter .55s ease}
.pasos-escena .pantalla.activo{opacity:1;transform:none;filter:none}

.pantalla{background:#fff;border:1px solid var(--st-200);border-radius:20px;box-shadow:var(--sombra);overflow:hidden}
.pt-barra{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--st-100);background:var(--st-50)}
.pt-barra i{width:9px;height:9px;border-radius:50%;background:var(--st-300)}
.pt-barra span{margin:0 auto;font:400 11.5px var(--mono);color:var(--st-500);background:#fff;border:1px solid var(--st-200);border-radius:999px;padding:3px 12px}
.pt-c{padding:clamp(18px,2.4vw,28px);min-height:300px;display:flex;flex-direction:column;gap:14px}
.suelta{border:1.5px dashed var(--sig-400);border-radius:14px;background:var(--sig-50);padding:26px 14px;text-align:center;
  font-size:14px;color:var(--sig-700);font-weight:600;display:grid;justify-items:center;gap:8px}
.suelta .i{width:26px;height:26px}
.pantalla.activo .suelta .i{animation:bota 1.6s var(--ease-in-out) infinite}
@keyframes bota{50%{transform:translateY(-5px)}}
.fichas{display:flex;flex-wrap:wrap;gap:8px}
.ficha{display:inline-flex;align-items:center;gap:7px;font:400 12.5px var(--mono);color:var(--st-700);background:#fff;
  border:1px solid var(--st-200);border-radius:8px;padding:7px 10px;box-shadow:0 1px 2px rgba(14,33,25,.05)}
.ficha .i{width:14px;height:14px;color:var(--st-400)}
.pantalla.activo .ficha{animation:cae .6s var(--ease-out) both;animation-delay:calc(var(--i) * 130ms + 250ms)}
@keyframes cae{from{opacity:0;transform:translateY(-22px) scale(.94)}}
.leido{position:relative;font:400 12.5px/2 var(--mono);color:var(--st-400);background:var(--st-50);border:1px solid var(--st-100);border-radius:12px;padding:12px 14px;overflow:hidden;isolation:isolate}
.leido p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leido mark{background:transparent;color:var(--ink-900);font-weight:500;padding:1px 4px;border-radius:4px}
.leido::after{content:'';position:absolute;left:0;right:0;top:0;height:30px;z-index:-1;opacity:0;
  background:linear-gradient(180deg,rgba(95,149,118,0),rgba(95,149,118,.2));border-bottom:1.5px solid var(--sig-500)}
.pantalla.activo .leido::after{animation:escanea 1.1s var(--ease-in-out) .3s both}
.pantalla.activo .leido mark{animation:resalta .4s ease 1.2s both}
@keyframes resalta{to{background:var(--am-100);box-shadow:0 0 0 1.5px var(--am-300)}}
html:not(.js) .leido mark{background:var(--am-100)}
.hallado-b{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--st-600);border:1px solid var(--sig-200);background:var(--sig-50);border-radius:12px;padding:12px 14px}
.hallado-b .ok{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--sig-500);border-radius:999px;padding:6px 9px}
.hallado-b .ok .i{width:12px;height:12px;stroke-width:3}
.hallado-b b{margin-left:auto;font:600 22px var(--display);letter-spacing:-.03em;color:var(--ink-900)}
.pantalla.activo .hallado-b{animation:asoma .5s var(--ease-out) 1.45s both}
@keyframes asoma{from{opacity:0;transform:translateY(8px) scale(.97)}}
.firmar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--st-200);border-radius:12px;overflow:hidden}
.firmar > div{padding:12px 14px}
.firmar > div + div{border-left:1px solid var(--st-200);background:var(--st-50)}
.firmar .k{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--st-400)}
.firmar .v{font:600 24px var(--display);letter-spacing:-.03em;color:var(--ink-900)}
.firmar .c{font:400 11.5px/1.55 var(--mono);color:var(--st-600)}
.firmar .c mark{background:var(--am-100);color:var(--ink-900)}
.botones{display:flex;gap:8px;margin-top:auto}
.botones span{flex:1;text-align:center;font-size:13.5px;font-weight:600;border-radius:999px;padding:11px 8px;border:1px solid var(--st-300);color:var(--st-600)}
.botones span.si{background:var(--sig-500);border-color:var(--sig-500);color:#fff}
.pantalla.activo .botones span.si{animation:pulsa .5s var(--ease-out) 1.1s}
@keyframes pulsa{45%{transform:scale(.94)}}
.firmado{align-self:center;display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--sig-700);border:2px solid var(--sig-500);border-radius:8px;padding:8px 12px;transform:rotate(-4deg)}
.firmado .i{width:14px;height:14px;stroke-width:3}
.pantalla.activo .firmado{animation:estampa .5s var(--ease-out) 1.5s both}
@keyframes estampa{from{opacity:0;transform:rotate(-4deg) scale(1.5)}}
.pasos-pie{margin-top:clamp(48px,6vw,72px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
  border-radius:20px;background:var(--st-100);padding:22px 26px}
.pasos-pie p{font-size:17px;color:var(--st-600);max-width:60ch}
.pasos-pie b{color:var(--ink-900);font-weight:600}

/* ── 03 · El alivio: la lista se tacha sola ──────────────────────────────── */
.alivio{padding-block:clamp(88px,11vw,152px)}
.alivio::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,rgba(180,82,58,.14),transparent 70%)}
.tachas{max-width:980px;margin:0 auto;counter-reset:t}
/* El numero va en absoluto y no en una rejilla: dentro de una rejilla el texto tachado
   se vuelve un bloque y la raya cruzaba todo el ancho en vez de las palabras. */
.tachas li{position:relative;padding:clamp(16px,2vw,24px) 0 clamp(16px,2vw,24px) 60px;
  border-bottom:1px solid rgba(255,255,255,.1);font:500 clamp(22px,3.1vw,38px)/1.2 var(--display);letter-spacing:-.03em;color:#fff}
.tachas li::before{counter-increment:t;content:counter(t,decimal-leading-zero);position:absolute;left:0;top:calc(clamp(16px,2vw,24px) + .55em);font:500 13px/1 var(--mono);letter-spacing:0;color:var(--sig-400)}
.tachas s{text-decoration:none;background:linear-gradient(var(--rose-500),var(--rose-500)) 0 52%/0% .08em no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .9s var(--ease-in-out) calc(var(--d,0ms) + 250ms),color .6s ease calc(var(--d,0ms) + 700ms)}
.tachas .visto s,html:not(.js) .tachas s{background-size:100% .08em;color:#6f857a}
.queda{max-width:980px;margin:clamp(40px,5vw,64px) auto 0;display:flex;gap:18px;align-items:center;
  border-radius:22px;padding:22px 26px;background:rgba(95,149,118,.14);border:1px solid rgba(95,149,118,.35)}
.queda .i{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--sig-400);color:var(--ink-900);flex:none}
.queda p{font:500 clamp(19px,2vw,24px)/1.3 var(--display);letter-spacing:-.02em;color:#fff}
.alivio .sh .l{max-width:62ch}

/* ── 04 · Que recibes: la anatomia, enlazada ─────────────────────────────── */
.anatomia{display:grid;gap:clamp(28px,3vw,40px);align-items:center}
@media (min-width:1180px){ .anatomia{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr)} }
@media (min-width:760px) and (max-width:1179px){ .anatomia{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)} .anatomia .doc{grid-row:1/3} }
.notas{display:grid;gap:10px}
.nota{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border-radius:16px;border:1px solid transparent;cursor:default;
  transition:background-color .3s ease,border-color .3s ease,opacity .3s ease}
.nota .b{width:34px;height:34px;border-radius:50%;background:var(--ink-900);color:#fff;display:grid;place-items:center;font:600 15px var(--display);transition:background-color .3s ease}
.nota h3{font-family:var(--sans);font-size:16.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.nota p{font-size:15px;color:var(--st-600);margin-top:3px;line-height:1.5}
.doc{position:relative;background:#fff;border:1px solid var(--st-200);border-radius:20px;box-shadow:var(--sombra);padding:clamp(20px,2.6vw,30px);margin:0}
.doc::after{content:'';position:absolute;left:14px;right:14px;bottom:-10px;height:10px;background:#fff;border:1px solid var(--st-200);border-top:0;border-radius:0 0 16px 16px;z-index:-1}
.doc-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:2px solid var(--ink-900);padding-bottom:14px}
.doc-cab .k{font:500 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--sig-600)}
.doc-cab h3{font-size:clamp(22px,2vw,26px);margin-top:4px}
.doc-cab p{font-size:12.5px;color:var(--st-500);margin-top:4px}
.doc-cab .qr{width:48px;height:48px;flex:none;border:1px solid var(--st-200);border-radius:8px;padding:4px;color:var(--ink-900)}
.doc-bloque{padding:12px 8px;margin:0 -8px;border-radius:10px;border-bottom:1px solid var(--st-100);display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;
  transition:background-color .3s ease,opacity .3s ease}
.doc-bloque .b{width:24px;height:24px;border-radius:50%;background:var(--ink-900);color:#fff;display:grid;place-items:center;font:600 12px var(--display);transition:background-color .3s ease}
.doc-bloque .et{font-size:14px;color:var(--st-600);line-height:1.3}
.doc-bloque .et small{display:block;font-size:11.5px;color:var(--st-400)}
.doc-bloque .n{font:600 24px var(--display);letter-spacing:-.03em;color:var(--ink-900);white-space:nowrap;font-variant-numeric:tabular-nums}
.doc-bloque .n small{font:400 12px var(--sans);color:var(--st-400);margin-left:3px;letter-spacing:0}
.barra{grid-column:2/-1;height:8px;border-radius:4px;overflow:hidden;display:flex;background:var(--st-100)}
.barra i{display:block;height:100%;transform-origin:left;transition:transform 1.1s var(--ease-out) calc(var(--j,0) * 120ms + 300ms)}
.js .doc:not(.visto) .barra i{transform:scaleX(0)}
.doc-pie{margin-top:12px;padding:12px 8px 0;margin-inline:-8px;border-top:1px dashed var(--st-300);display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--st-500);border-radius:10px;transition:background-color .3s ease}
.doc-pie .i{width:14px;height:14px;color:var(--sig-500)}
.doc-pie b{color:var(--ink-800);font-weight:600}
/* Pasar por una nota enciende su bloque en el informe, y al reves */
.anatomia[data-foco] .nota,.anatomia[data-foco] .doc-bloque,.anatomia[data-foco] .doc-pie{opacity:.4}
.anatomia[data-foco="1"] [data-k="1"],.anatomia[data-foco="2"] [data-k="2"],.anatomia[data-foco="3"] [data-k="3"],
.anatomia[data-foco="4"] [data-k="4"],.anatomia[data-foco="5"] [data-k="5"],.anatomia[data-foco="6"] [data-k="6"]{opacity:1;background:var(--sig-50)}
.anatomia[data-foco="1"] [data-k="1"] .b,.anatomia[data-foco="2"] [data-k="2"] .b,.anatomia[data-foco="3"] [data-k="3"] .b,
.anatomia[data-foco="4"] [data-k="4"] .b,.anatomia[data-foco="5"] [data-k="5"] .b,.anatomia[data-foco="6"] [data-k="6"] .b{background:var(--sig-500)}
.anatomia[data-foco] .nota[data-k]{border-color:transparent}

.formatos{margin-top:clamp(56px,7vw,88px);display:grid;gap:12px}
@media (min-width:820px){ .formatos{grid-template-columns:repeat(3,minmax(0,1fr))} }
.formato{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--st-200);border-radius:20px;padding:22px;
  transition:transform .35s var(--ease-out),box-shadow .35s ease}
.formato .ext{font:500 12px var(--mono);border-radius:10px;padding:10px 9px;flex:none;color:#fff}
.formato h3{font-family:var(--sans);font-size:16.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.formato p{font-size:15px;color:var(--st-600);margin-top:3px}

/* El techo, con una regla para mover */
.techo{margin-top:clamp(56px,7vw,88px);border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--st-200);box-shadow:var(--sombra)}
.techo-cab{padding:clamp(24px,3.4vw,40px);display:grid;gap:14px 48px}
@media (min-width:900px){ .techo-cab{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:end} }
.techo-cab h3{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.04em}
.techo-cab p{font-size:16px;color:var(--st-600)}
.techo-cab p b{color:var(--ink-900);font-weight:600}
.tc{padding:0 clamp(24px,3.4vw,40px) clamp(22px,3vw,32px)}
html:not(.js) .tc{display:none}
.tc-fila{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tc-l{font-size:14.5px;font-weight:600;color:var(--ink-900)}
.tc output{margin-left:auto;font:600 clamp(24px,2.6vw,32px)/1 var(--display);letter-spacing:-.03em;color:var(--ink-900)}
.tc output small{font:400 14px var(--sans);color:var(--st-500);margin-left:6px;letter-spacing:0}
.regla{--p:14.3%;-webkit-appearance:none;appearance:none;width:100%;height:30px;margin:14px 0 10px;background:transparent;cursor:pointer}
.regla::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--sig-500) var(--p),var(--st-200) var(--p))}
.regla::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--sig-500) var(--p),var(--st-200) var(--p))}
.regla::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:#fff;border:2px solid var(--sig-500);
  box-shadow:0 4px 14px -4px rgba(14,33,25,.45);transition:transform .16s var(--ease-out)}
.regla::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--sig-500);box-shadow:0 4px 14px -4px rgba(14,33,25,.45)}
.regla:active::-webkit-slider-thumb{transform:scale(1.12)}
.tc-gente{display:grid;grid-template-columns:repeat(50,minmax(0,1fr));gap:3px;align-items:end;height:30px}
.tc-gente i{height:55%;border-radius:3px;background:var(--st-200);transform-origin:bottom;
  transition:background-color .25s ease,height .3s var(--ease-out)}
.tc-gente i.on{height:100%;background:var(--ink-700)}
.tc-gente[data-tramo="b"] i.on{background:var(--sig-500)}
/* La frontera de la ley: a partir del undecimo trabajador cambia lo que te pueden pedir */
.tc-gente i:nth-child(11){box-shadow:-3px 0 0 -1px var(--am-400)}
.tc-marca{position:relative;height:18px;font:400 11.5px var(--mono);color:var(--st-400);margin-top:8px}
.tc-marca span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.tc-marca span:first-child{transform:none}
.tc-marca span:last-child{transform:translateX(-100%)}
.techo-dos{display:grid;border-top:1px solid var(--st-200)}
@media (min-width:760px){ .techo-dos{grid-template-columns:1fr 1fr} }
.tramo{padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:10px;transition:opacity .4s ease,background-color .4s ease}
.tramo + .tramo{border-top:1px solid var(--st-200)}
@media (min-width:760px){ .tramo + .tramo{border-top:0;border-left:1px solid var(--st-200)} }
.tramo .tag{align-self:flex-start;font:500 11.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:6px 10px;background:var(--st-100);color:var(--st-600)}
.tramo h4{font-size:24px;letter-spacing:-.03em}
.tramo p{font-size:15.5px;color:var(--st-600)}
.tramo .plan-tag{margin-top:auto;padding-top:6px}
.techo-dos[data-tramo="a"] .tramo[data-t="a"],.techo-dos[data-tramo="b"] .tramo[data-t="b"]{background:var(--sig-50)}
.techo-dos[data-tramo="a"] .tramo[data-t="a"] .tag,.techo-dos[data-tramo="b"] .tramo[data-t="b"] .tag{background:var(--sig-500);color:#fff}
.techo-dos[data-tramo="a"] .tramo[data-t="b"],.techo-dos[data-tramo="b"] .tramo[data-t="a"]{opacity:.45}

/* ── Que recibes: las tres ventajas de tener el informe en la plataforma ──── */
.ventajas{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:clamp(48px,6vw,72px)}
@media (min-width:820px){ .ventajas{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ventaja{background:var(--ink-900);color:#a8bcb1;border-radius:22px;padding:24px}
.ventaja h3{font-size:22px;color:#fff;letter-spacing:-.03em;margin:16px 0 6px}
.ventaja p{font-size:15px;line-height:1.55}
.vt-i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(95,149,118,.22);color:var(--sig-200)}
.anat-t{font:500 12.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--st-500);margin-bottom:22px}

/* ── 05 · La huella: la cuenta, a la vista ───────────────────────────────── */
.huella{background:var(--paper);border-block:1px solid var(--st-200)}
.huella-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:center}
@media (min-width:1000px){ .huella-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.huella .sh{margin-bottom:32px}
.hu-puntos{display:grid;gap:14px}
.hu-puntos li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--st-600)}
.hu-puntos li .i{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--sig-500);color:#fff;stroke-width:3;margin-top:2px}
.hu-puntos b{color:var(--ink-900);font-weight:600}
.calculo{margin:0;background:#fff;border:1px solid var(--st-200);border-radius:26px;box-shadow:var(--sombra);padding:clamp(20px,2.6vw,30px)}
.calc-t{display:flex;justify-content:space-between;align-items:center;font:600 20px var(--display);letter-spacing:-.03em;color:var(--ink-900);padding-bottom:14px;border-bottom:2px solid var(--ink-900)}
.calc-t .mono{font:400 12px var(--mono);color:var(--st-500);letter-spacing:0}
.calc-fila{padding:18px 0;border-bottom:1px solid var(--st-100)}
.calc-k{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-900)}
.calc-k .i{width:16px;height:16px;color:var(--sig-600)}
.calc-k span{margin-left:auto;font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--sig-700);background:var(--sig-50);border:1px solid var(--sig-200);border-radius:999px;padding:5px 8px}
.calc-op{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-top:12px;font:600 clamp(22px,2.4vw,28px)/1.1 var(--display);letter-spacing:-.03em;color:var(--ink-900)}
.calc-op small{font:400 12px var(--sans);letter-spacing:0;color:var(--st-500)}
.calc-op .x{color:var(--st-400);font-weight:400}
.calc-op .f{background:var(--am-100);border-radius:8px;padding:2px 8px;box-shadow:0 0 0 1.5px var(--am-300)}
.calc-op .r{color:var(--sig-600)}
.calc-s{margin-top:8px;font:400 12px var(--mono);color:var(--st-500)}
.calc-sello{margin-top:18px;display:flex;gap:14px;align-items:flex-start;background:var(--ink-900);color:#a8bcb1;border-radius:18px;padding:18px;font-size:14px;line-height:1.5}
.calc-sello .i{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--sig-400);color:var(--ink-900)}
.calc-sello b{display:block;color:#fff;font-weight:600;font-size:15px;margin-bottom:2px}
/* La cuenta se hace delante: el factor y el resultado entran uno detras de otro */
.js .calculo .calc-op > span{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js .calculo.visto .calc-op > span{opacity:1;transform:none}
.js .calculo.visto .calc-op > span:nth-child(2){transition-delay:.25s}
.js .calculo.visto .calc-op > span:nth-child(3){transition-delay:.45s}
.js .calculo.visto .calc-op > span:nth-child(4){transition-delay:.7s}
.js .calculo.visto .calc-op > span:nth-child(5){transition-delay:.9s}
.js .calculo.visto .calc-fila + .calc-fila .calc-op > span:nth-child(1){transition-delay:1.1s}
.js .calculo.visto .calc-fila + .calc-fila .calc-op > span:nth-child(2){transition-delay:1.3s}
.js .calculo.visto .calc-fila + .calc-fila .calc-op > span:nth-child(3){transition-delay:1.5s}
.js .calculo.visto .calc-fila + .calc-fila .calc-op > span:nth-child(4){transition-delay:1.7s}
.js .calculo.visto .calc-fila + .calc-fila .calc-op > span:nth-child(5){transition-delay:1.9s}

/* ── 06 · La prueba: segmentado sin JS, con indicador que se desliza ─────── */
.prueba::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 60% at 85% 20%,rgba(65,122,88,.35),transparent 70%)}
.pr input{position:absolute;opacity:0;pointer-events:none}
.pr-tabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);margin-bottom:clamp(28px,4vw,44px)}
.pr-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:999px;background:#fff;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);transition:transform .5s var(--ease-drawer)}
#pr-gas:checked ~ .pr-tabs .pr-ind{transform:translateX(100%)}
#pr-agua:checked ~ .pr-tabs .pr-ind{transform:translateX(200%)}
.pr-tabs label{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 10px;
  font-size:14.5px;font-weight:600;color:#b9cbc1;cursor:pointer;border-radius:999px;transition:color .3s ease}
.pr-tabs label .i{width:16px;height:16px}
@media (max-width:440px){ .pr-tabs label .i{display:none} .pr-tabs label{font-size:14px} }
#pr-luz:checked ~ .pr-tabs label[for=pr-luz],#pr-gas:checked ~ .pr-tabs label[for=pr-gas],#pr-agua:checked ~ .pr-tabs label[for=pr-agua]{color:var(--ink-900)}
#pr-luz:focus-visible ~ .pr-tabs label[for=pr-luz],#pr-gas:focus-visible ~ .pr-tabs label[for=pr-gas],#pr-agua:focus-visible ~ .pr-tabs label[for=pr-agua]{outline:2.5px solid var(--sig-400);outline-offset:2px}
.pr-panel{display:none;gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:960px){ .pr-panel{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)} }
#pr-luz:checked ~ .pr-vista .pr-luz,#pr-gas:checked ~ .pr-vista .pr-gas,#pr-agua:checked ~ .pr-vista .pr-agua{display:grid;animation:entra-panel .45s var(--ease-out)}
@keyframes entra-panel{from{opacity:0;transform:translateY(10px)}}
.pr-dato .k{font:500 12.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#88a093}
.pr-dato .v{margin-top:8px;font:600 clamp(56px,8vw,104px)/.95 var(--display);letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-dato .v small{font-size:.3em;letter-spacing:-.01em;color:var(--sig-200);margin-left:8px}
.pr-dato .s{margin-top:12px;font-size:15px;color:#a8bcb1}
.pr-dato .flecha{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font:500 13px var(--mono);color:var(--sig-200)}
.pr-dato .flecha .i{width:16px;height:16px}
@media (max-width:959px){ .pr-dato .flecha .i{transform:rotate(90deg)} }
.pr-papel{background:var(--paper);color:var(--st-700);border-radius:18px;overflow:hidden;box-shadow:var(--sombra-o)}
.pr-papel .cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:13px 18px;background:var(--st-100);border-bottom:1px solid var(--st-200);font-size:13px;color:var(--st-500)}
.pr-papel .cab .i{width:15px;height:15px;color:var(--rose-500)}
.pr-papel .cab b{color:var(--ink-800);font-weight:600}
.pr-papel .cab .pag{margin-left:auto;font:400 11.5px var(--mono);background:var(--ink-900);color:#fff;border-radius:999px;padding:4px 10px}
.pr-papel .cuerpo{padding:18px 20px;font:400 13px/2.1 var(--mono);overflow-x:auto;overscroll-behavior-x:contain}
.pr-papel .cuerpo p{white-space:nowrap}
.pr-papel .cuerpo .gris{color:var(--st-400)}
.pr-papel .cuerpo mark{background:var(--am-100);color:var(--ink-900);font-weight:500;padding:2px 6px;border-radius:4px;box-shadow:0 0 0 2px var(--am-300)}
.pr-panel .cuerpo mark{animation:resalta-o 1.2s ease .35s both}
@keyframes resalta-o{0%{box-shadow:0 0 0 2px var(--am-300),0 0 0 0 rgba(224,184,119,.7)}60%{box-shadow:0 0 0 2px var(--am-300),0 0 0 12px rgba(224,184,119,0)}}
.pr-papel .pie{display:flex;align-items:flex-start;gap:10px;padding:14px 20px;border-top:1px dashed var(--st-300);font-size:14px;color:var(--st-600);background:#fff}
.pr-papel .pie .i{color:var(--sig-500);margin-top:3px}
.garantias{margin-top:clamp(56px,7vw,88px);display:grid;gap:12px}
@media (min-width:820px){ .garantias{grid-template-columns:repeat(3,minmax(0,1fr))} }
.garantia{border-radius:20px;padding:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.garantia .i{width:40px;height:40px;padding:9px;border-radius:12px;background:rgba(95,149,118,.2);color:var(--sig-200);margin-bottom:16px}
.garantia h3{font-family:var(--sans);font-size:17px;font-weight:600;color:#fff;letter-spacing:-.01em;margin-bottom:6px}
.garantia p{font-size:15px;color:#a8bcb1;line-height:1.55}

/* ── 06 · Comparativa ────────────────────────────────────────────────────── */
.tabla{border-radius:24px;border:1px solid var(--st-200);background:#fff;overflow-x:auto;overscroll-behavior-x:contain;box-shadow:var(--sombra)}
.tabla table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px}
.tabla th,.tabla td{text-align:left;padding:18px 20px;border-bottom:1px solid var(--st-100);font-size:15.5px;vertical-align:top;color:var(--st-600)}
.tabla tr:last-child > *{border-bottom:0}
.tabla thead th{font:600 20px var(--display);letter-spacing:-.03em;color:var(--ink-900);padding-block:22px}
.tabla tbody th{font-weight:600;color:var(--ink-900);font-size:15px;width:24%}
.tabla .mio{background:var(--ink-900);color:#dbe8e0;font-weight:500;border-bottom-color:rgba(255,255,255,.08)}
.tabla thead .mio{color:#fff;position:relative}
.tabla thead .mio::after{content:'';position:absolute;left:20px;right:20px;bottom:10px;height:2px;border-radius:2px;background:var(--sig-400)}
.tabla td .i{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.tabla .si{color:var(--sig-400)}
.tabla .nop{color:var(--rose-500)}
/* La tabla entra entera (es un .rv), no fila a fila: Safari pinta mal las filas de una
   tabla animadas con transform u opacidad, y se quedaban invisibles dejando un hueco */
.desliza{display:none;font-size:13px;color:var(--st-500);margin-top:12px}
@media (max-width:720px){
  .desliza{display:block}
  .tabla table{min-width:600px}
  .tabla th,.tabla td{padding:14px 12px;font-size:14.5px}
  .tabla thead th{font-size:17px}
  .tabla tbody th,.tabla thead th:first-child{position:sticky;left:0;z-index:1;background:#fff;width:128px;box-shadow:1px 0 0 var(--st-200)}
}

/* ── 07 · Precio ─────────────────────────────────────────────────────────── */
.precio{background:var(--st-100);border-block:1px solid var(--st-200)}
.elige{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:clamp(28px,4vw,44px)}
.elige a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:1px solid var(--st-300);border-radius:999px;padding:10px 12px 10px 16px;
  font-size:14.5px;color:var(--st-600);background:rgba(255,255,255,.6);
  transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.elige a:active{transform:scale(.97)}
.elige a b{color:var(--ink-900);font-weight:600}
.elige a .flecha{font:500 12px var(--mono);color:#fff;background:var(--ink-900);border-radius:999px;padding:5px 9px;white-space:nowrap}
.elige a[aria-current="true"]{border-color:var(--sig-500);background:var(--sig-50)}
.plans{display:grid;gap:14px;align-items:stretch}
@media (min-width:960px){ .plans{grid-template-columns:repeat(3,minmax(0,1fr))} }
.plan{--x:50%;--y:0%;position:relative;padding:clamp(26px,3vw,34px);display:flex;flex-direction:column;gap:20px;scroll-margin-top:110px;
  background:#fff;border:1px solid var(--st-200);border-radius:26px;isolation:isolate;overflow:hidden;
  transition:transform .45s var(--ease-out),box-shadow .45s ease,border-color .3s ease,opacity .3s ease}
.plan::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(420px circle at var(--x) var(--y),rgba(95,149,118,.16),transparent 45%)}
.plan.feat{background:var(--ink-900);color:#b9cbc1;border-color:var(--ink-900);box-shadow:0 30px 60px -30px rgba(14,33,25,.8)}
.plan.feat::before{background:radial-gradient(420px circle at var(--x) var(--y),rgba(95,149,118,.3),transparent 45%)}
@media (min-width:960px){ .plan.feat{transform:translateY(-12px)} }
.plans[data-elegido] .plan{opacity:.55}
.plans[data-elegido] .plan.elegido{opacity:1;border-color:var(--sig-500);box-shadow:0 0 0 4px rgba(95,149,118,.25),var(--sombra)}
.plan .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan h3{font-size:30px;letter-spacing:-.04em}
.plan.feat h3{color:#fff}
.rib{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--sig-400);color:var(--ink-900)}
.modulo{font:400 11.5px var(--mono);color:var(--st-500);border:1px solid var(--st-200);border-radius:999px;padding:5px 9px;white-space:nowrap}
.plan .para{font-size:15px;color:var(--st-500);margin-top:-10px}
.plan.feat .para{color:#a8bcb1}
.price{display:flex;align-items:baseline;gap:8px;padding-bottom:20px;border-bottom:1px solid var(--st-200)}
.plan.feat .price{border-color:rgba(255,255,255,.12)}
.price .n{font:600 56px/1 var(--display);letter-spacing:-.05em;color:var(--ink-900)}
.plan.feat .price .n{color:#fff}
.price .per{font-size:15px;color:var(--st-500)}
.plan.feat .price .per{color:#a8bcb1}
.plan ul{display:grid;gap:12px}
.plan li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:var(--st-600);line-height:1.45}
.plan.feat li{color:#c9d8d0}
.plan li .i{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--sig-50);color:var(--sig-600);margin-top:2px;stroke-width:3}
.plan.feat li .i{background:rgba(95,149,118,.25);color:var(--sig-200)}
.plan li b{color:var(--ink-900);font-weight:600}
.plan.feat li b{color:#fff}
.plan-cta{margin-top:auto;display:grid;gap:9px;padding-top:6px}
.soon{display:inline-block;margin-left:7px;font:500 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  background:var(--am-50);color:var(--am-700);border:1px solid var(--am-200);border-radius:999px;padding:4px 7px;vertical-align:1px}
.plans-note{margin-top:22px;text-align:center;font-size:14.5px;color:var(--st-500)}

/* ── 08 · Quien ──────────────────────────────────────────────────────────── */
.quien-in{display:grid;gap:clamp(36px,5vw,80px);align-items:center}
@media (min-width:900px){ .quien-in{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)} }
.retrato{margin:0;position:relative;max-width:360px;transform:rotate(-2.5deg);transition:transform .6s var(--ease-out)}
.retrato img{border-radius:24px;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;box-shadow:var(--sombra)}
.retrato figcaption{position:absolute;left:-14px;bottom:24px;background:#fff;border-radius:14px;padding:11px 15px;font-size:13px;color:var(--st-500);line-height:1.4;box-shadow:var(--sombra);transform:rotate(2.5deg);transition:transform .6s var(--ease-out)}
.retrato figcaption b{display:block;color:var(--ink-900);font-weight:600;font-size:15px}
@media (max-width:480px){ .retrato{max-width:280px} .retrato figcaption{left:10px} }
.cita{font:500 clamp(30px,4.2vw,58px)/1.06 var(--display);letter-spacing:-.04em;color:var(--ink-900);max-width:20ch}
.cita::before{content:'«';color:var(--sig-500)}
.cita::after{content:'»';color:var(--sig-500)}
.quien-texto{display:grid;gap:14px;margin-top:28px;font-size:17px;color:var(--st-600);max-width:62ch}
.quien-texto b{color:var(--ink-900);font-weight:600}
.quien-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:30px}
.aval{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.aval li{font:500 12.5px/1 var(--mono);color:var(--sig-700);background:var(--sig-50);border:1px solid var(--sig-200);border-radius:999px;padding:8px 12px}
.linkedin{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--sky-600);text-decoration:none}
.linkedin svg{width:18px;height:18px}

/* ── 09 · Preguntas ──────────────────────────────────────────────────────── */
.faq-grid{display:grid;gap:40px}
@media (min-width:980px){ .faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start} .faq-grid .sh{position:sticky;top:120px;margin-bottom:0} }
.faq{display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--st-200);border-radius:18px;transition:border-color .3s ease,box-shadow .3s ease}
.faq details[open]{border-color:var(--sig-200);box-shadow:var(--sombra)}
.faq summary{cursor:pointer;list-style:none;padding:20px 22px;font:500 clamp(18px,1.8vw,21px)/1.3 var(--display);letter-spacing:-.02em;
  color:var(--ink-900);display:flex;align-items:center;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;margin-left:auto;width:34px;height:34px;border-radius:50%;background:var(--st-100) center/14px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23417a58' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 1v12M1 7h12'/%3E%3C/svg%3E");
  transition:transform .35s var(--ease-out),background-color .3s ease}
.faq details[open] summary::after{transform:rotate(135deg);background-color:var(--sig-100)}
.faq .r{padding:0 22px 22px;font-size:16.5px;color:var(--st-600);max-width:66ch}
.faq .r b{color:var(--ink-900);font-weight:600}
.faq details[open] .r{animation:asoma .35s var(--ease-out)}

/* ── 10 · Demo ───────────────────────────────────────────────────────────── */
.cta::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 10% 100%,rgba(65,122,88,.4),transparent 70%),radial-gradient(40% 40% at 100% 0%,rgba(69,95,128,.3),transparent 70%)}
.cta-grid{display:grid;gap:clamp(40px,5vw,72px);align-items:start}
@media (min-width:980px){ .cta-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)} }
.cta h2{font-size:clamp(38px,5vw,66px);letter-spacing:-.045em;max-width:13ch}
.cta-copy .l{margin-top:22px;font-size:17.5px;color:#a8bcb1;max-width:46ch}
.agenda{margin-top:34px;display:grid;gap:0;position:relative}
.agenda::before{content:'';position:absolute;left:7px;top:14px;bottom:14px;width:2px;background:rgba(255,255,255,.12)}
.agenda li{position:relative;display:grid;gap:2px;padding:10px 0 10px 34px;font-size:15.5px;color:#c9d8d0}
.agenda li::before{content:'';position:absolute;left:0;top:16px;width:16px;height:16px;border-radius:50%;background:var(--ink-900);border:2px solid var(--sig-400)}
.agenda li b{font:500 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--sig-200)}
.demo{background:var(--paper);color:var(--st-800);border-radius:26px;padding:clamp(24px,3vw,36px);display:grid;gap:16px;box-shadow:var(--sombra-o)}
.demo .dt{font:600 28px var(--display);letter-spacing:-.035em;color:var(--ink-900)}
.demo .dt small{display:block;font:400 14.5px var(--sans);color:var(--st-500);letter-spacing:0;margin-top:4px}
.fgrid{display:grid;gap:16px}
@media (min-width:560px){ .fgrid.dos{grid-template-columns:1fr 1fr} }
.campo{display:grid;gap:7px}
.campo label{font-size:13.5px;font-weight:600;color:var(--st-700)}
.campo label span{font-weight:400;color:var(--st-400)}
.campo input,.campo select,.campo textarea{width:100%;background:#fff;border:1px solid var(--st-300);border-radius:12px;
  padding:14px 15px;color:var(--ink-900);font-family:var(--sans);font-size:16px;transition:border-color .2s ease,box-shadow .2s ease}
.campo textarea{min-height:92px;resize:vertical}
.campo select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635d52' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:42px}
.campo input::placeholder,.campo textarea::placeholder{color:var(--st-400)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--sig-500);box-shadow:0 0 0 4px var(--sig-100)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--st-500);line-height:1.5}
.consent input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--sig-500)}
.consent a{color:var(--sig-700)}
.fmsg{font-size:14.5px;min-height:1.2em;color:var(--sig-700)}
.fmsg.err{color:var(--rose-500)}

/* ── Cierre y pie ────────────────────────────────────────────────────────── */
.closer{position:relative;isolation:isolate;text-align:center;padding-block:clamp(96px,12vw,168px)}
.closer::before{content:'';position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:1;z-index:-1;pointer-events:none;
  transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(95,149,118,.2),transparent)}
.closer h2{font-size:clamp(40px,6.4vw,92px);letter-spacing:-.05em;max-width:16ch;margin-inline:auto;line-height:.98}
.closer .hero-cta{justify-content:center;align-items:center;margin-top:40px}
.foot{background:var(--ink-900);color:#a8bcb1;border-radius:clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0 0;margin-inline:clamp(6px,1vw,14px);
  padding-top:clamp(40px,5vw,64px);overflow:hidden;padding-bottom:env(safe-area-inset-bottom,0px)}
.foot-in{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.foot .brand span{color:#fff}
.foot .brand .fy,.foot .brand svg{color:var(--sig-400)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot nav a{font-size:14.5px;color:#a8bcb1;text-decoration:none;transition:color .2s ease}
.foot-legal{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:#7f968a;max-width:86ch;line-height:1.6}
.gigante{font:600 clamp(80px,21vw,340px)/.8 var(--logo);letter-spacing:-.05em;text-align:center;margin-top:clamp(32px,5vw,56px);
  color:transparent;-webkit-text-stroke:1px rgba(95,149,118,.35);transform:translateY(12%);user-select:none;white-space:nowrap}
.gigante span{-webkit-text-stroke:0;color:rgba(95,149,118,.22)}

/* La barra de abajo del movil: aparece al dejar atras el hero y se va al llegar a la demo */
.barra-movil{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:70;display:none;
  align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;background:rgba(14,33,25,.92);color:#dbe8e0;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 16px 40px -14px rgba(0,0,0,.6);
  transform:translateY(calc(100% + 24px));transition:transform .45s var(--ease-drawer)}
.barra-movil p{font-size:13.5px;line-height:1.25;flex:1}
.barra-movil p b{color:#fff;display:block}
.barra-movil.ve{transform:none}
@media (max-width:760px){ .js .barra-movil{display:flex} }

/* ── Hover, solo donde hay raton ─────────────────────────────────────────────
   En un movil el primer toque aplica :hover y lo deja puesto. Todo :hover vive aqui;
   la respuesta al dedo la da :active, que va en cada componente. */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--sig-600)}
  .btn-blanco:hover{background:var(--sig-50)}
  .btn-tinta:hover{background:var(--ink-700)}
  .btn-ghost:hover{border-color:var(--ink-900)}
  .btn-ghost-o:hover{border-color:rgba(255,255,255,.5);color:#fff}
  .btn:hover .i{transform:translateX(3px)}
  .btn:hover .i.baja{transform:translateY(3px)}
  .brand:hover svg{transform:rotate(60deg)}
  .nav-links a:hover{background:var(--st-100);color:var(--ink-900)}
  .nav-login:hover{background:var(--st-100)}
  .pill-ley:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
  .enlace:hover .i{transform:translateX(3px)}
  .enlace:hover .i.baja{transform:translateY(3px)}
  .enlace:hover{color:var(--sig-600)}
  .oscuro .enlace:hover{color:var(--sig-200)}
  .aviso:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
  .mq-tabs button:hover{border-color:rgba(255,255,255,.35);color:#fff}
  .mq-tabs button[aria-pressed="true"]:hover{color:var(--ink-900)}
  .pr-tabs label:hover{color:#fff}
  #pr-luz:checked ~ .pr-tabs label[for=pr-luz]:hover,#pr-gas:checked ~ .pr-tabs label[for=pr-gas]:hover,#pr-agua:checked ~ .pr-tabs label[for=pr-agua]:hover{color:var(--ink-900)}
  .formato:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
  .nota:hover{border-color:var(--st-200)}
  .elige a:hover{border-color:var(--sig-500);background:#fff}
  .plan:hover::before{opacity:1}
  .plan:hover{box-shadow:var(--sombra)}
  .retrato:hover{transform:rotate(0)}
  .retrato:hover figcaption{transform:none}
  .faq summary:hover::after{background-color:var(--sig-100)}
  .foot nav a:hover{color:#fff}
  .linkedin:hover{text-decoration:underline}
  .tramo .plan-tag:hover{color:var(--sig-600)}
}

/* ── Menos movimiento ────────────────────────────────────────────────────────
   Quien lo pide no ve nada desplazarse: se queda solo el cambio de opacidad, que
   ayuda a entender que algo ha cambiado sin mover la pantalla. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important}
  .js .rv,.js .aviso.rv{transform:none;filter:none;transition:opacity .4s ease}
  .js .partido .w>span{transform:none;transition:none}
  .pista{flex-wrap:wrap;justify-content:center;animation:none}
  .pista[aria-hidden]{display:none}
  .carril{-webkit-mask-image:none;mask-image:none;padding-inline:var(--gut)}
  .mq-marco{transform:none !important}
  .js .calculo .calc-op > span{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   CABECERA CON DESPLEGABLES · Servicios y Aprende llevan a otras paginas
   ══════════════════════════════════════════════════════════════════════════ */
.menu{position:relative}
.menu-b{display:inline-flex;align-items:center;gap:4px;font:500 14.5px var(--sans);color:var(--st-600);background:none;border:0;
  padding:8px 10px 8px 12px;border-radius:999px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.menu-b .i{width:14px;height:14px;transition:transform .25s var(--ease-out)}
.menu.abierto .menu-b{background:var(--st-100);color:var(--ink-900)}
.menu.abierto .menu-b .i{transform:rotate(180deg)}
/* El panel sale DEL boton (origen arriba), rapido al abrir y mas rapido al cerrar */
.menu-p{position:absolute;top:calc(100% + 16px);left:50%;width:370px;margin-left:-185px;z-index:5;
  background:#fff;border:1px solid var(--st-200);border-radius:22px;box-shadow:0 24px 60px -24px rgba(14,33,25,.45);padding:8px;
  transform-origin:50% 0;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);
  transition:opacity .15s ease,transform .15s var(--ease-out),visibility 0s .15s}
.menu.abierto .menu-p{opacity:1;visibility:visible;transform:none;
  transition:opacity .2s ease,transform .22s var(--ease-out),visibility 0s}
.menu-p::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px}
.menu-i{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:14px;text-decoration:none;transition:background-color .15s ease}
.menu-i b{display:block;font-size:14.5px;font-weight:600;color:var(--ink-900);line-height:1.3}
.menu-i small{display:block;font-size:13px;color:var(--st-500);line-height:1.4;margin-top:1px}
.menu-ic{width:36px;height:36px;border-radius:11px;background:var(--sig-50);color:var(--sig-600);display:grid;place-items:center;flex:none}
.menu-ic .i{width:17px;height:17px}
.menu-todo{display:block;margin:4px 4px 0;padding:12px 8px 8px;border-top:1px solid var(--st-100);font-size:13.5px;font-weight:600;color:var(--sig-700);text-decoration:none}
.nav-links{gap:0}

/* El menu del movil: una hoja que sale de la cabecera */
.nav-menu{display:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--st-100);cursor:pointer;flex:none;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:2px;transition:background-color .2s ease}
.nav-menu span{display:block;width:16px;height:1.8px;border-radius:2px;background:var(--ink-900);transition:transform .3s var(--ease-out)}
.nav-menu[aria-expanded="true"] span:first-child{transform:translateY(3.4px) rotate(45deg)}
.nav-menu[aria-expanded="true"] span:last-child{transform:translateY(-3.4px) rotate(-45deg)}
.nav-menu:active{transform:scale(.94)}
@media (max-width:999px){ .nav-menu{display:inline-flex} }
@media (max-width:520px){ .nav-alta{display:none} }
.hoja{position:fixed;left:10px;right:10px;top:78px;z-index:65;pointer-events:auto;display:none;
  max-height:calc(100dvh - 96px);overflow:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid var(--st-200);border-radius:24px;box-shadow:0 24px 60px -20px rgba(14,33,25,.5);padding:10px}
.hoja.abierta{display:block;animation:hoja-entra .24s var(--ease-out)}
@keyframes hoja-entra{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.hoja-links{display:grid;padding:4px 0 8px;border-bottom:1px solid var(--st-100)}
.hoja-links a{padding:12px;font:600 18px var(--display);letter-spacing:-.02em;color:var(--ink-900);text-decoration:none;border-radius:12px}
.hoja-links a:active,.hoja .menu-i:active{background:var(--st-50)}
.hoja-t{font:500 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--st-500);padding:18px 12px 8px}
.hoja .btn{margin-top:12px}
@media (min-width:1000px){ .hoja,.hoja.abierta{display:none} }

/* Pie con columnas */
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;margin-top:32px}
.foot-cols nav{display:grid;gap:8px;align-content:start}
.foot-cols p{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#6f857a;margin-bottom:4px}
.foot-cols a{font-size:14.5px;color:#a8bcb1;text-decoration:none;transition:color .2s ease}

/* ══════════════════════════════════════════════════════════════════════════
   PAGINAS INTERIORES · cabecera, guia, cierre
   ══════════════════════════════════════════════════════════════════════════ */
.pg-hero{margin-inline:0;border-radius:0 0 clamp(26px,3.5vw,48px) clamp(26px,3.5vw,48px);padding:clamp(130px,13vw,172px) 0 clamp(56px,7vw,92px)}
.pg-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 30% 30%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 30% 30%,#000 15%,transparent 75%)}
.miga{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:500 12.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#88a093;margin-bottom:24px}
.miga a{color:#c9d8d0;text-decoration:none}
.pg-hero h1{font-size:clamp(40px,5.6vw,80px);color:#fff;letter-spacing:-.045em;line-height:1;max-width:17ch}
.pg-hero .lead{margin-top:26px;font-size:clamp(17.5px,1.6vw,20.5px);line-height:1.55;color:#a8bcb1;max-width:58ch}
.pg-meta{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.pg-meta span{font:500 12.5px/1 var(--mono);color:#c9d8d0;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);border-radius:999px;padding:8px 12px}

.guia{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:1000px){ .guia{grid-template-columns:230px minmax(0,1fr);gap:80px} }
.indice{display:none}
@media (min-width:1000px){ .indice{display:block;position:sticky;top:112px;align-self:start} }
.indice p{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--st-500);margin-bottom:12px}
.indice a{display:block;padding:9px 0 9px 16px;border-left:2px solid var(--st-200);font-size:14.5px;color:var(--st-500);text-decoration:none;
  transition:color .25s ease,border-color .25s ease}
.indice a.activo{color:var(--ink-900);border-color:var(--sig-500);font-weight:500}
.texto{max-width:740px;min-width:0}
.texto h2{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.04em;margin:72px 0 18px;scroll-margin-top:112px}
.texto > h2:first-of-type{margin-top:8px}
.texto p{font-size:17.5px;line-height:1.72;color:var(--st-700);margin-bottom:18px}
.texto p b,.texto li b{color:var(--ink-900);font-weight:600}
.texto p a:not(.enlace),.texto li a{color:var(--sig-700);text-decoration-color:var(--sig-200);text-underline-offset:3px}
.lista{display:grid;gap:12px;margin:0 0 22px}
.lista li{position:relative;padding-left:26px;font-size:17px;line-height:1.65;color:var(--st-700)}
.lista li::before{content:'';position:absolute;left:5px;top:.66em;width:8px;height:8px;border-radius:50%;background:var(--sig-500)}
.corto{background:var(--sig-50);border:1px solid var(--sig-200);border-radius:24px;padding:24px 26px;margin-bottom:56px}
.corto .t{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--sig-700);margin-bottom:14px}
.corto ul{display:grid;gap:12px}
.corto li{position:relative;padding-left:34px;font-size:16.5px;line-height:1.5;color:var(--st-700)}
.corto li .i{position:absolute;left:0;top:1px;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--sig-500);color:#fff;stroke-width:3}
.nota-ley{border-left:3px solid var(--am-400);background:var(--am-50);border-radius:0 16px 16px 0;padding:18px 22px;margin:26px 0}
.nota-ley p{font-size:16px;margin:0}
.fuente{font:400 12.5px/1.6 var(--mono)!important;color:var(--st-500)!important;margin-top:10px}

/* VSME: los dos modulos como fichas */
.modulos{display:grid;gap:12px;margin:28px 0}
.modulo-c{border-radius:22px;background:#fff;border:1px solid var(--st-200);padding:18px}
.modulo-c.completo{background:var(--ink-900);border-color:var(--ink-900)}
.modulo-t{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px;margin:2px 4px 14px!important}
.modulo-t b{font:600 20px var(--display);letter-spacing:-.03em;color:var(--ink-900)!important}
.modulo-t span{font:400 12px var(--mono);color:var(--st-500)}
.completo .modulo-t b{color:#fff!important}
.completo .modulo-t span{color:#88a093}
.fichas-m{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.ficha-m{display:flex;gap:10px;align-items:flex-start;background:var(--st-50);border:1px solid var(--st-100);border-radius:14px;padding:10px 12px}
.ficha-m b,.texto .ficha-m b{font:500 12px/1 var(--mono);background:var(--ink-900);color:#fff;border-radius:999px;padding:5px 7px;flex:none;margin-top:1px}
.ficha-m span{font-size:14px;font-weight:600;color:var(--ink-900);line-height:1.3}
.ficha-m small{display:block;font-size:12.5px;font-weight:400;color:var(--st-500);margin-top:2px}
.completo .ficha-m{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.completo .ficha-m b,.texto .completo .ficha-m b{background:var(--sig-400);color:var(--ink-900)}
.completo .ficha-m span{color:#fff}
.completo .ficha-m small{color:#88a093}

/* VSME: la tabla del techo */
.techo-t{border:1px solid var(--st-200);border-radius:22px;overflow:hidden;background:#fff;margin-top:8px;box-shadow:var(--sombra)}
.techo-t table{width:100%;border-collapse:collapse}
.techo-t th,.techo-t td{padding:13px 16px;border-bottom:1px solid var(--st-100);text-align:left;font-size:15px;vertical-align:middle}
.techo-t tbody tr:last-child > *{border-bottom:0}
.techo-t thead th{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--st-500);background:var(--st-50)}
.techo-t thead th + th,.techo-t td{text-align:center;width:22%}
.techo-t tbody th{font-weight:500;color:var(--ink-900)}
.techo-t tbody th small{font:400 11.5px var(--mono);color:var(--st-400);margin-left:4px}
.techo-t td.si .i{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--sig-500);color:#fff;stroke-width:3;vertical-align:middle}
.techo-t td.no{color:var(--st-300);font-size:22px;line-height:1}
.js .techo-t tbody tr{opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js .techo-t.visto tbody tr{opacity:1;transform:none}
.js .techo-t.visto tbody tr:nth-child(n+5){transition-delay:.35s}
@media (max-width:560px){ .techo-t th,.techo-t td{padding:11px 10px;font-size:14px} .techo-t thead th{font-size:10.5px} }

/* Por que: de donde viene la pregunta */
.flujo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0}
.flujo-c{display:grid;gap:6px;justify-items:start;background:#fff;border:1px solid var(--st-200);border-radius:18px;padding:16px}
.flujo-c b{font-size:15px;color:var(--ink-900)}
.flujo-c small{font-size:13px;color:var(--st-500);line-height:1.4}
.flujo-flecha{grid-column:1/-1;display:grid;place-items:center;color:var(--sig-500)}
.flujo-flecha .i{width:26px;height:26px}
.flujo-tu{grid-column:1/-1;background:var(--ink-900);color:#a8bcb1;border-radius:18px;padding:18px 20px;text-align:center}
.flujo-tu b{display:block;font:600 22px var(--display);letter-spacing:-.03em;color:#fff}
.flujo-tu small{font-size:14px}
@media (max-width:620px){ .flujo{grid-template-columns:minmax(0,1fr)} }
.pasos-g{counter-reset:pg;display:grid;gap:10px;margin:8px 0 24px}
.pasos-g li{counter-increment:pg;position:relative;padding:16px 18px 16px 62px;background:#fff;border:1px solid var(--st-200);border-radius:18px;font-size:16.5px;line-height:1.6;color:var(--st-700)}
.pasos-g li::before{content:counter(pg);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--sig-500);color:#fff;display:grid;place-items:center;font:600 15px var(--display)}

/* Huella: los tres alcances */
.alcances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0}
@media (max-width:760px){ .alcances{grid-template-columns:minmax(0,1fr)} }
.alcance{position:relative;display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--st-200);border-radius:20px;padding:20px}
.alcance b{font:600 19px/1.2 var(--display);letter-spacing:-.03em;color:var(--ink-900)}
.alcance p{font-size:14.5px!important;line-height:1.55!important;margin:0!important;color:var(--st-600)!important}
.al-n{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--ink-900);color:#fff;font:600 20px var(--display)}
.al-t{margin-top:auto;align-self:flex-start;font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:6px 9px;background:var(--st-100);color:var(--st-600)}
.al-t.si{background:var(--sig-50);color:var(--sig-700);border:1px solid var(--sig-200)}
.texto .calculo{margin:28px 0}

/* Sigue leyendo */
.relacionadas{margin-top:80px;padding-top:32px;border-top:1px solid var(--st-200)}
.rel-t{font:500 12px var(--mono)!important;text-transform:uppercase;letter-spacing:.06em;color:var(--st-500)!important}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.rel{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--st-200);border-radius:20px;padding:20px;text-decoration:none;
  transition:transform .35s var(--ease-out),box-shadow .35s ease,border-color .3s ease}
.rel:active{transform:scale(.98)}
.rel b{margin-top:8px;font:600 20px/1.2 var(--display);letter-spacing:-.03em;color:var(--ink-900)}
.rel small{font-size:14px;color:var(--st-500)}
.rel-f{margin-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--sig-700)}
.rel-f .i{width:15px;height:15px;transition:transform .3s var(--ease-out)}

/* El cierre de cada pagina */
.pg-cierre{padding-top:0}
.pg-cta{border-radius:32px;margin:0;padding:clamp(32px,5vw,64px);display:grid;gap:28px;align-items:center}
@media (min-width:980px){ .pg-cta{grid-template-columns:minmax(0,1.2fr) auto} }
.pg-cta::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 80% at 0% 100%,rgba(65,122,88,.45),transparent 70%)}
.pg-cta h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.045em;max-width:16ch}
.pg-cta p{margin-top:14px;color:#a8bcb1;font-size:17px;max-width:48ch}
.pg-cta-b{display:flex;flex-wrap:wrap;gap:12px}

/* ══════════════════════════════════════════════════════════════════════════
   SERVICIOS
   ══════════════════════════════════════════════════════════════════════════ */
.servicio{padding-block:clamp(64px,8vw,112px);border-bottom:1px solid var(--st-200)}
.servicio:nth-of-type(even){background:var(--paper)}
.sv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center}
@media (min-width:980px){ .sv-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} .servicio.inv .sv-txt{order:2} }
.sv-txt h2{font-size:clamp(34px,4.4vw,58px);letter-spacing:-.045em;max-width:15ch}
.sv-txt .l{margin-top:18px;font-size:clamp(17px,1.5vw,19px);color:var(--st-600);max-width:54ch}
.sv-lista{display:grid;gap:12px;margin-top:26px}
.sv-lista li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55;color:var(--st-700)}
.sv-lista .i{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--sig-50);color:var(--sig-600);stroke-width:3;border:1px solid var(--sig-200)}
.sv-vis{display:grid;place-items:center}
.sv-card{width:min(440px,100%);background:#fff;border:1px solid var(--st-200);border-radius:26px;box-shadow:var(--sombra);padding:22px;display:grid;gap:16px}
.sv-card-t{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink-900);padding-bottom:14px;border-bottom:1px solid var(--st-100)}
.sv-card-t .i{width:18px;height:18px;color:var(--sig-600)}
.sv-card-t span{margin-left:auto;font:400 11.5px var(--mono);color:var(--st-500)}
.sv-mini{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--st-500)}
.sv-mini .i{width:15px;height:15px;color:var(--sig-500);stroke-width:3}
.sv-gen{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sv-btn{background:var(--sig-500);color:#fff;font-weight:600;font-size:14.5px;border-radius:999px;padding:11px 18px}
.sv-ok{display:inline-flex;gap:6px;align-items:center;font:500 12px var(--mono);color:var(--sig-700);background:var(--sig-50);border:1px solid var(--sig-200);border-radius:999px;padding:7px 10px}
.sv-ok .i{width:13px;height:13px;stroke-width:3}
.sv-formatos{display:flex;gap:8px}
.sv-formatos span{font:500 13px var(--mono);color:#fff;border-radius:12px;padding:14px 16px}
.sv-lineas{font:400 13px/2 var(--mono);color:var(--st-400);background:var(--st-50);border:1px solid var(--st-100);border-radius:14px;padding:12px 14px}
.sv-lineas .m{color:var(--ink-900)}
.sv-lineas mark{background:var(--am-100);color:var(--ink-900);padding:1px 5px;border-radius:4px;box-shadow:0 0 0 1.5px var(--am-300)}
.sv-cifra{font:600 56px/1 var(--display);letter-spacing:-.05em;color:var(--ink-900)}
.sv-cifra small{font:400 15px var(--sans);letter-spacing:0;color:var(--st-500)}
.sv-barra{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--st-100)}
.sv-barra i{display:block;height:100%;transform-origin:left;transition:transform 1.1s var(--ease-out) .3s}
.js .sv-vis:not(.visto) .sv-barra i{transform:scaleX(0)}
.sv-ley{display:grid;gap:6px;font-size:13px;color:var(--st-600)}
.sv-ley span{display:flex;gap:8px;align-items:center}
.sv-ley i{width:10px;height:10px;border-radius:3px}
.sv-sello{justify-items:center;text-align:center}
.sv-sello-i{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--sig-500);color:#fff;box-shadow:0 0 0 8px var(--sig-50)}
.sv-sello-i .i{width:32px;height:32px}
.sv-sello-t{font:600 22px var(--display);letter-spacing:-.03em;color:var(--ink-900)}
.sv-pasos{display:grid;gap:8px;width:100%;text-align:left}
.sv-pasos li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--st-600);background:var(--st-50);border-radius:12px;padding:10px 12px}
.sv-pasos li::before{content:'';width:18px;height:18px;border-radius:50%;border:2px solid var(--st-300);flex:none}
.sv-pasos li.hecho{color:var(--ink-900)}
.sv-pasos li.hecho::before{background:var(--sig-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;border-color:var(--sig-500)}
.sv-agenda{display:grid;gap:8px}
.sv-agenda li{display:flex;gap:12px;align-items:center;font-size:14.5px;color:var(--st-700);background:var(--st-50);border-radius:12px;padding:12px 14px}
.sv-agenda b{font:500 12px var(--mono);text-transform:uppercase;color:#fff;background:var(--ink-900);border-radius:8px;padding:5px 7px}
.tabla td.tx{font-weight:500;color:var(--ink-900)}
.tabla td.si .i{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--sig-50);color:var(--sig-600);stroke-width:3;margin:0}
.tabla td.no{color:var(--st-300);font-size:22px;line-height:1}
.tabla .precio-f > *{background:var(--st-50);font-weight:600}

/* Hover de lo nuevo, solo con raton */
@media (hover:hover) and (pointer:fine){
  .menu-b:hover{background:var(--st-100);color:var(--ink-900)}
  .menu-i:hover{background:var(--st-50)}
  .menu-i:hover .menu-ic{background:var(--sig-100)}
  .menu-todo:hover{color:var(--sig-500)}
  .nav-menu:hover{background:var(--st-200)}
  .foot-cols a:hover{color:#fff}
  .miga a:hover{color:#fff}
  .indice a:hover{color:var(--ink-900)}
  .rel:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--sig-200)}
  .rel:hover .rel-f .i{transform:translate(2px,-2px)}
}
@media (prefers-reduced-motion:reduce){
  .js .techo-t tbody tr{transform:none}
  .menu-p,.menu.abierto .menu-p{transform:none}
}
/* En el movil los botones del cierre ocupan el ancho y pueden partir su texto:
   «Enséñamelo con mis facturas» no cabe en una linea a 360 px y se salia de la tarjeta */
@media (max-width:560px){ .pg-cta-b .btn{width:100%;white-space:normal;text-align:center} .hero-cta .btn{white-space:normal;text-align:center} }

/* ── Como lo hacemos: los tres pilares de la lectura con IA ──────────────── */
.ia{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:clamp(56px,7vw,88px)}
@media (min-width:820px){ .ia{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ia-c{position:relative;overflow:hidden;isolation:isolate;background:var(--ink-900);color:#a8bcb1;border-radius:22px;padding:24px}
.ia-c::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 60% at 100% 0%,rgba(95,149,118,.3),transparent 70%)}
.ia-c h3{font-size:22px;color:#fff;letter-spacing:-.03em;margin:16px 0 8px}
.ia-c p{font-size:15px;line-height:1.55}
.ia-i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--sig-400);color:var(--ink-900)}
.ia-nota{margin-top:14px;font-size:14px;color:var(--st-500);display:flex;gap:8px;align-items:flex-start}
.ia-nota::before{content:'';flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--sig-500)}

/* ── Servicios: que va en cada plan, compacto ─────────────────────────────── */
.sec-matriz{padding-block:clamp(64px,8vw,104px)}
.sec-matriz .sh{margin-bottom:clamp(28px,4vw,44px)}
.matriz{max-width:920px;margin:0 auto;background:#fff;border:1px solid var(--st-200);border-radius:22px;overflow:hidden;box-shadow:var(--sombra)}
.matriz table{width:100%;border-collapse:collapse;table-layout:fixed}
.matriz th,.matriz td{padding:9px 16px;font-size:14.5px;line-height:1.35;text-align:center;vertical-align:middle;border-bottom:1px solid var(--st-100)}
.matriz tbody th{text-align:left;font-weight:500;color:var(--ink-900);width:46%}
.matriz thead th{padding:16px 12px 14px;border-bottom:1px solid var(--st-200);background:var(--st-50)}
.matriz thead th:first-child{width:46%}
.matriz thead b{display:block;font:600 17px/1.15 var(--display);letter-spacing:-.03em;color:var(--ink-900)}
.matriz thead small{display:block;margin-top:3px;font:400 12px var(--mono);color:var(--st-500)}
.matriz thead .mio{background:var(--ink-900)}
.matriz thead .mio b{color:#fff}
.matriz thead .mio small{color:var(--sig-200)}
.matriz tbody td:nth-child(3){background:var(--sig-50)}
.matriz tr.grupo th{padding:14px 16px 6px;text-align:left;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.07em;
  color:var(--sig-700);background:#fff;border-bottom:0}
.matriz tbody tr:last-child > *{border-bottom:0}
.matriz td .i{width:20px;height:20px;padding:3.5px;border-radius:50%;background:var(--sig-500);color:#fff;stroke-width:3;vertical-align:middle}
.matriz td.no{color:var(--st-300);font-size:20px;line-height:1}
.matriz td.tx{font-size:13.5px;font-weight:500;color:var(--ink-900)}
@media (max-width:640px){
  .matriz th,.matriz td{padding:8px 6px;font-size:13px}
  .matriz tbody th,.matriz thead th:first-child{width:40%;padding-left:12px}
  .matriz thead th{padding:12px 4px}
  .matriz thead b{font-size:13.5px}
  .matriz thead small{font-size:10.5px}
  .matriz td.tx{font-size:12px}
  .matriz tr.grupo th{padding-left:12px}
}