/* =====================================================================
   RESTAURANTE INTELIGENTE — Sistema de diseño web (definitivo)
   Dirección: "Nombre, mesa y ticket". Un solo archivo para las 10 páginas.
   Mobile-first · sin dependencias · oscuro por marca · motion progresivo.

   ÍNDICE DE COMPONENTES (y para qué página sirven)
   01 tokens        variables de color/tipo/espacio          todas
   02 base          reset, enlaces, focus, selection          todas
   03 tipografía    h1–h4, .lede, .eyebrow, .tesis, .folio    todas
   04 layout        .wrap, .grid--2/3/4-8/7-5/8-4, .entry     todas
   05 skip + nav    .skip, .nav, .nav__menu, .nav__progreso   todas
   06 botones       .btn, --primario/--secundario/--sm        todas
   07 hero          .hero, .hero__ficha, .hero__folio, nota   home, interiores (hero--sm)
   08 ticket        .ticket (dl > div > dt/dd), .ticket__total home, /casos, /como-medimos, /precios
   09 cuenta        .cuenta (lista tipo cuenta sobre negro)   /precios, home
   10 logos         .logos > li > figure > img + figcaption   home, /casos
   11 flow          .flow cadena de atribución 01–05          home, /como-medimos
   12 pilares       .pilares > .pilar (01–05 en rojo)         home, /casos, /comparativa
   13 metric        .metrics > .metric (+ __fuente), .formula home, /como-medimos
   14 calc          .calc cadena de 6 pasos                   home, /como-medimos
   15 semáforo      .semaforo__escala + .semaforo (lista)     home, /como-medimos
   16 umbral        .umbrales > .umbral / .umbrales__o        home, /garantia
   17 steps         .steps > .step (+ .plazo)                 home, /garantia, /nosotros
   18 table         .table (+caption, th scope, .n)           /precios, /como-medimos, /comparativa
   19 card          .card, .card--acento, .lista-x/.lista-ok  todas
   20 equipo        .equipo > .persona > .monograma (--ceo)   home, /nosotros
   21 faq           .faq > details > summary + .faq__body     /preguntas-frecuentes
   22 pullquote     blockquote.pullquote                      todas
   23 comparativa   .comparativa (tabla con columna RI)       /comparativa
   24 pendiente     .pendiente, .tag, .tag--ia/--verde        /casos
   25 cta           .cta + .cta__inner                        todas
   26 contornos     .contours (+ --hero, --cierre)            home, cierres
   27 footer        .footer (+ address, __legal)              todas
   28 riel          .riel mini-ticket fijo (sólo desktop+JS)  home
   29 utilidades    .mt-*, .mb-0, .muted, .small, .medida…    todas
   30 motion        .reveal/[data-reveal], .is-visible, ticket que imprime,
                    flow que se enciende, semáforo que se llena, contornos
                    que respiran — todo bajo html.js y sin reduced-motion
   31 print         @media print
   32 interiores    .miga, .cita-contrato, .cuenta--datos + reglas por página (.e404-, .nosotros-, .precios-, .garantia-, .medir-, .casos-, .comp-, .preguntas-, .terminos-, .privacidad-)
   ===================================================================== */

/* ---------- 01. TOKENS (Brand Book v2.1) ---------- */
:root{
  --negro:#181818;          /* fondo de todo */
  --negro-puro:#000;        /* profundidad / degradados */
  --papel:#FAF6F4;          /* off-white cálido: texto y papel del ticket */
  --rojo:#FF3131;           /* acción, numeración, logo */
  --rojo-prof:#EB2411;      /* variante para cifras GRANDES sobre papel (≥24 px) */
  --rojo-tinta:#D9220F;     /* mismo rojo, apenas más profundo: texto pequeño sobre papel y fondo de banda roja (AA 4.67:1 con --papel) */
  --purpura:#8C52FF;        /* IA — sólo en etiquetas y texto grande */
  --verde:#7ED957;          /* positivo / dinero */
  --niebla:#9B9793;         /* texto secundario, pies */
  --linea:rgba(250,246,244,.14);
  --linea-fuerte:rgba(250,246,244,.3);
  --tinta:#181818;          /* texto sobre papel */
  --tinta-2:#5E5955;        /* secundario sobre papel (AA) */
  --tinta-linea:rgba(24,24,24,.4);
  --f-titulo:"Archivo",system-ui,sans-serif;
  --f-ui:"Poppins",system-ui,sans-serif;
  --t-display:clamp(2.875rem,6.4vw,5.25rem);   /* 46–84 px (brief) */
  --t-h2:clamp(1.9rem,4.2vw,3rem);            /* 30–48 px */
  --t-h3:clamp(1.25rem,2vw,1.5rem);
  --t-lede:clamp(1.0625rem,1.5vw,1.1875rem);  /* 17–19 px */
  --t-body:1rem;
  --t-small:.875rem;
  --t-eyebrow:.75rem;
  --lh-body:1.6;
  --track-display:-.02em;
  --track-eyebrow:.28em;
  --s-1:.5rem;--s-2:1rem;--s-3:1.5rem;--s-4:2rem;--s-5:3rem;--s-6:4rem;--s-7:6rem;--s-8:8rem;
  --gutter:1rem;--wrap:1180px;--medida:62ch;--radio:2px;--tap:44px;--nav-h:64px;
}
@media (min-width:768px){:root{--gutter:2rem}}

/* ---------- 02. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem);background:var(--negro)}
body{margin:0;background:var(--negro);color:var(--papel);font-family:var(--f-titulo);font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit;text-decoration-color:var(--rojo);text-underline-offset:.2em}
a:hover{color:var(--rojo)}
p{margin:0 0 var(--s-2)}
ul,ol{margin:0 0 var(--s-2);padding-left:1.2em}
dl{margin:0}
strong{font-weight:700}
hr{border:0;border-top:1px solid var(--linea);margin:var(--s-5) 0}
table{border-collapse:collapse;width:100%}
address{font-style:normal}
:focus-visible{outline:2px solid var(--rojo);outline-offset:3px;border-radius:var(--radio)}
main:focus-visible{outline:none}
.btn--primario:focus-visible{outline-color:var(--papel)}
::selection{background:var(--rojo);color:var(--papel)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- 03. TIPOGRAFÍA ---------- */
h1,h2,h3,h4{margin:0 0 var(--s-3);font-family:var(--f-titulo);line-height:1.02;text-wrap:balance}
h1,.display{font-size:var(--t-display);font-weight:900;text-transform:uppercase;letter-spacing:var(--track-display)}
h2{font-size:var(--t-h2);font-weight:800;text-transform:uppercase;letter-spacing:var(--track-display)}
h3{font-size:var(--t-h3);font-weight:700;line-height:1.2}
h4{font-size:1rem;font-weight:700}
.h2--sm{font-size:var(--t-h3);font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.tesis{font-family:var(--f-titulo);font-weight:900;text-transform:uppercase;letter-spacing:var(--track-display);font-size:clamp(1.75rem,3.6vw,2.5rem);line-height:1.05;margin:0;text-wrap:balance}
.lede{font-size:var(--t-lede);line-height:1.55;max-width:var(--medida)}
.medida{max-width:var(--medida)}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;margin:0 0 var(--s-2);font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--niebla)}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--rojo);flex:none}
.eyebrow--rojo{color:var(--rojo)}
.folio{font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--rojo);white-space:nowrap}
.folio span{color:var(--niebla)}
.num,.metric__valor,.ticket,.table,.semaforo,.calc,.flow,.cuenta,.umbral__valor,.hero__ficha{font-family:var(--f-ui);font-variant-numeric:tabular-nums lining-nums}
.muted{color:var(--niebla)}
.small{font-size:var(--t-small)}
.verde{color:var(--verde)}
.rojo{color:var(--rojo)}
.purpura{color:var(--purpura)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 04. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
.grid>*{min-width:0}
@media (min-width:768px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--7-5{grid-template-columns:7fr 5fr;align-items:center;gap:var(--s-6)}
  .grid--8-4{grid-template-columns:8fr 4fr;align-items:center;gap:var(--s-6)}
  .grid--4-8{grid-template-columns:4fr 8fr;gap:var(--s-6)}
}
/* Sección = "entrada" numerada del expediente: folio, hairline, pregunta como h2 */
.section{padding:var(--s-6) 0;overflow-x:clip}
@media (min-width:768px){.section{padding:var(--s-7) 0}}
.section--tight{padding:var(--s-5) 0}
.entry{border-top:1px solid var(--linea);padding-top:var(--s-3);margin-bottom:var(--s-5)}
.entry__meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-1) var(--s-2);margin-bottom:var(--s-3)}
.entry__meta .folio,.card .folio{white-space:normal}
.entry__head{display:grid;gap:var(--s-2)}
@media (min-width:900px){.entry__head{grid-template-columns:5fr 7fr;gap:var(--s-6);align-items:end}.entry__head h2{margin:0}}
.entry__head .lede{margin:0}

/* ---------- 05. SKIP + NAV ---------- */
.skip{position:absolute;left:var(--gutter);top:-5rem;z-index:100;display:inline-flex;align-items:center;min-height:var(--tap);background:var(--rojo);color:var(--negro);padding:0 1rem;font-family:var(--f-ui);font-weight:600;text-decoration:none}
.skip:focus{top:.5rem}
.nav{position:sticky;top:0;z-index:50;background:rgba(24,24,24,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.nav__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:var(--nav-h);flex-wrap:wrap}
.nav__logo{display:inline-flex;align-items:center;min-height:var(--tap)}
.nav__logo img{width:93px;height:36px}
.nav__menu{display:flex;flex-wrap:wrap;gap:0 var(--s-2);list-style:none;margin:0;padding:0 0 var(--s-1);width:100%;font-family:var(--f-ui);font-size:var(--t-small);font-weight:500}
.nav__menu a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;color:var(--papel)}
.nav__menu a:hover,.nav__menu a[aria-current="page"]{color:var(--rojo)}
.nav .nav__cta{display:none}
.nav__toggle{display:none;align-items:center;gap:.5em;min-height:var(--tap);min-width:var(--tap);padding:0 var(--s-1);background:none;border:1px solid var(--linea-fuerte);border-radius:var(--radio);color:var(--papel);font-family:var(--f-ui);font-size:var(--t-small);font-weight:500;cursor:pointer}
/* Sin JS: el menú siempre visible, en línea. Con JS: se pliega en móvil */
html:not(.js) .nav__menu{display:flex;position:static}
.js .nav__toggle{display:inline-flex}
.js .nav__menu{display:none}
.js .nav__menu.is-open{display:flex;flex-direction:column;gap:0;padding-bottom:var(--s-2)}
@media (min-width:900px){
  .nav__bar{flex-wrap:nowrap}
  .nav__menu,.js .nav__menu{display:flex;flex-direction:row;width:auto;padding:0;gap:0 var(--s-3)}
  .js .nav__toggle{display:none}
  .nav .nav__cta{display:inline-flex}
}
/* Línea de progreso: 2 px rojos que avanzan con el scroll (el papel que se alimenta) */
.nav__progreso{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--rojo);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ---------- 06. BOTONES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:0 1.5rem;border-radius:var(--radio);font-family:var(--f-ui);font-size:.9375rem;font-weight:600;letter-spacing:.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn--primario{background:var(--rojo);color:var(--negro);border-color:var(--rojo)}
.btn--primario:hover{background:var(--papel);border-color:var(--papel);color:var(--negro)}
.btn--secundario{background:transparent;color:var(--papel);border-color:var(--linea-fuerte)}
.btn--secundario:hover{border-color:var(--papel);color:var(--papel)}
.btn--sm{min-height:var(--tap);padding:0 1rem;font-size:var(--t-small)}
.btn svg{width:18px;height:18px;flex:none}
.btn-group{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
.btn-group .btn{flex:1 1 auto}
@media (min-width:560px){.btn-group .btn{flex:0 0 auto}}
.enlace{font-family:var(--f-ui);font-weight:600;font-size:var(--t-small);text-decoration:none;display:inline-flex;align-items:center;gap:.4em;min-height:var(--tap);color:var(--papel)}
.enlace::after{content:"→";color:var(--rojo);transition:transform .15s}
.enlace:hover::after{transform:translateX(3px)}

/* ---------- 07. HERO ---------- */
.hero{position:relative;overflow:hidden;padding:var(--s-5) 0 var(--s-6)}
@media (min-width:900px){.hero{padding:var(--s-6) 0 var(--s-7)}}
.hero__inner{position:relative;z-index:1}
.hero__folio{display:flex;flex-wrap:wrap;gap:.4em 1.4em;margin:0 0 var(--s-4);font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--niebla)}
.hero__folio b{color:var(--rojo);font-weight:600}
.hero h1{margin-bottom:var(--s-3);font-size:clamp(2.875rem,5.6vw,5rem)}
.hero h1 .r{color:var(--rojo)}
.hero__promesa{margin:0 0 var(--s-2);max-width:var(--medida)}
.hero__promesa em{font-style:normal;color:var(--verde);font-weight:700}
.hero__garantia{display:flex;gap:.75em;align-items:flex-start;max-width:var(--medida);color:var(--niebla);font-size:var(--t-small);line-height:1.55;margin:0}
.hero__garantia svg{flex:none;width:16px;height:16px;margin-top:.2em;color:var(--papel)}
.hero__garantia a{color:var(--papel)}
.hero__nota{margin:var(--s-3) 0 0;max-width:var(--medida);font-family:var(--f-ui);font-size:var(--t-small);color:var(--niebla);padding-left:1rem;border-left:1px solid var(--rojo)}
.hero__col{position:relative;margin-top:var(--s-5)}
@media (min-width:900px){.hero__col{margin-top:0;justify-self:end;width:100%}}
/* Ficha de 4 cifras bajo el hero (de "manifiesto") */
.hero__ficha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-2);margin:var(--s-5) 0 0;padding-top:var(--s-3);border-top:1px solid var(--linea-fuerte);position:relative;z-index:1}
@media (min-width:768px){.hero__ficha{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}}
.hero__ficha div{min-width:0}
.hero__ficha dt{font-size:var(--t-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--niebla);font-weight:600;margin-bottom:.35rem}
.hero__ficha dd{margin:0;font-weight:600;font-size:clamp(1.5rem,2.4vw,2.125rem);line-height:1;letter-spacing:-.02em;color:var(--papel)}
.hero__ficha dd small{display:block;font-size:.8125rem;font-weight:500;color:var(--niebla);letter-spacing:0;margin-top:.35rem}
/* Hero compacto para interiores (sin ticket) */
.hero--sm{padding:var(--s-5) 0 var(--s-5)}
.hero--sm h1{font-size:clamp(2.25rem,5vw,3.75rem)}

/* ---------- 08. TICKET (el único objeto claro por pantalla) ----------
   Papel off-white, filos dentados, folio, líneas con puntos de guía
   (dt::after) y total en rojo profundo. HTML: <dl class="ticket__grupo">
   <div class="ticket__row ticket__linea"><dt>…</dt><dd>…</dd></div>.
   Añade data-imprime al <figure> para que se imprima línea por línea. */
.ticket{position:relative;width:100%;max-width:400px;margin-inline:auto;background:var(--papel);color:var(--tinta);padding:var(--s-4) var(--s-3);font-size:.9rem;line-height:1.5;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.ticket::before,.ticket::after{content:"";position:absolute;left:0;right:0;height:8px;background:linear-gradient(45deg,transparent 50%,var(--papel) 50%) 0 0/12px 8px repeat-x,linear-gradient(-45deg,transparent 50%,var(--papel) 50%) 0 0/12px 8px repeat-x}
.ticket::before{top:-8px;transform:scaleY(-1)}
.ticket::after{bottom:-8px}
.ticket--sm{max-width:340px;padding:var(--s-3)}
.ticket--ancho{max-width:560px}
.ticket p{margin:0}
.ticket__head{text-align:center;padding-bottom:var(--s-2);border-bottom:1px dashed var(--tinta-linea);margin-bottom:var(--s-2)}
.ticket__head img{margin:0 auto var(--s-1);width:30px;height:40px}
.ticket__marca{font-family:var(--f-titulo);font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:.9375rem}
.ticket__folio{color:var(--tinta-2);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin-top:.2em}
.ticket__grupo{margin:0;padding:0}
.ticket__row{display:flex;align-items:baseline;gap:.5em;padding:.32em 0}
.ticket__row dt{flex:1 1 auto;display:flex;align-items:baseline;gap:.5em;min-width:0;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:600;color:var(--tinta-2);white-space:nowrap}
.ticket__row dt::after{content:"";flex:1 1 auto;min-width:12px;border-bottom:1px dotted var(--tinta-linea);transform:translateY(-.3em)}
.ticket__row dd{flex:0 1 auto;min-width:0;margin:0;font-weight:500;text-align:right}
.ticket__sep{border:0;border-top:1px dashed var(--tinta-linea);margin:var(--s-2) 0}
.ticket__total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);padding:.4em 0}
.ticket__total .k{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:.9375rem}
.ticket__total .v{font-size:1.625rem;font-weight:600;color:var(--rojo-prof);letter-spacing:-.01em}
.ticket__nota{margin:var(--s-2) 0 0;color:var(--tinta-2);font-size:.75rem;line-height:1.45;text-align:center}
.ticket .dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;margin-right:.35em;vertical-align:middle;background:var(--verde)}
.ticket .dot--amarillo{background:transparent;border:1px solid var(--tinta)}
.ticket .dot--rojo{background:var(--rojo-prof)}

/* ---------- 09. CUENTA (ticket en negativo, sobre negro) ---------- */
.cuenta{list-style:none;margin:0;padding:0}
.cuenta li{display:flex;align-items:baseline;gap:.6em;padding:.75em 0;border-bottom:1px solid var(--linea)}
.cuenta .k{flex:1 1 auto;display:flex;align-items:baseline;gap:.6em;min-width:0;font-size:var(--t-small);color:var(--papel)}
.cuenta .k::after{content:"";flex:1 1 auto;min-width:16px;border-bottom:1px dotted var(--linea-fuerte);transform:translateY(-.35em)}
.cuenta .v{flex:0 0 auto;font-weight:600;text-align:right;color:var(--papel);white-space:nowrap}
.cuenta .v.verde{color:var(--verde)}
.cuenta li.total{border-bottom:0;border-top:1px solid var(--linea-fuerte);padding-top:1em}
.cuenta li.total .v{font-size:1.5rem}

/* ---------- 10. LOGOS (rejilla con nombre; revelado escalonado) ---------- */
.logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);list-style:none;margin:0;padding:0}
@media (min-width:640px){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:900px){.logos--6{grid-template-columns:repeat(6,minmax(0,1fr))}.logos--6 figure{min-height:128px}}
.logos li{background:var(--negro)}
.logos figure{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);min-height:150px;padding:var(--s-3) var(--s-2)}
.logos img{width:min(100%,140px);height:64px;object-fit:contain;filter:grayscale(1) brightness(1.4);opacity:.85;transition:opacity .2s,filter .2s}
.logos li:hover img{opacity:1;filter:none}
.logos figcaption{font-family:var(--f-ui);font-size:var(--t-eyebrow);letter-spacing:.06em;text-transform:uppercase;color:var(--niebla);text-align:center;line-height:1.4}
.logos__nota{margin-top:var(--s-3);color:var(--niebla);font-size:var(--t-small)}

/* ---------- 11. FLOW: cadena de atribución (01 anuncio → 05 venta) ----------
   <ol class="flow" data-flow> <li class="flow__nodo"> .flow__num .flow__nombre
   .flow__sub .flow__dato </li> … </ol>. Se enciende por pasos con .is-visible. */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.flow__nodo{position:relative;display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.2em var(--s-2);padding:var(--s-2) 0 var(--s-2) 0;align-items:start}
.flow__num{grid-row:1/span 3;width:2.5rem;height:2.5rem;border:1px solid var(--linea-fuerte);border-radius:var(--radio);display:grid;place-items:center;font-size:.75rem;font-weight:600;color:var(--rojo);background:var(--negro);position:relative;z-index:1;transition:border-color .3s,color .3s}
.flow__nombre{font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:var(--t-small);color:var(--papel)}
.flow__sub{font-family:var(--f-titulo);font-size:.8125rem;color:var(--niebla);line-height:1.4}
.flow__dato{font-size:var(--t-small);color:var(--papel);font-weight:500;margin-top:.2em}
.flow__dato.verde{color:var(--verde);font-weight:600;font-size:1.375rem;letter-spacing:-.01em}
.flow__nodo--fin .flow__num{border-color:var(--verde);color:var(--verde)}
/* conector: hairline gris + línea roja que se dibuja encima */
.flow__nodo::before,.flow__nodo::after{content:"";position:absolute;pointer-events:none}
.flow__nodo::before{left:calc(1.25rem - .5px);top:2.5rem;bottom:-.5rem;width:1px;background:var(--linea-fuerte)}
.flow__nodo::after{left:calc(1.25rem - .5px);top:2.5rem;bottom:-.5rem;width:1px;background:var(--rojo);transform-origin:top;opacity:.9}
.flow__nodo:last-child::before,.flow__nodo:last-child::after{display:none}
@media (min-width:900px){
  .flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3)}
  .flow__nodo{grid-template-columns:1fr;padding:var(--s-3) 0 0;gap:.25em}
  .flow__num{grid-row:auto;margin-bottom:var(--s-2)}
  .flow__nodo::before,.flow__nodo::after{left:2.5rem;right:calc(-1 * var(--s-3));top:calc(var(--s-3) + 1.25rem - .5px);bottom:auto;height:1px;width:auto;transform-origin:left}
}

/* ---------- 12. PILARES (01–05 en rojo) ---------- */
.pilares{list-style:none;margin:0;padding:0;counter-reset:pilar;border-top:1px solid var(--linea)}
.pilar{counter-increment:pilar;display:grid;gap:var(--s-1);padding:var(--s-3) 0;border-bottom:1px solid var(--linea)}
.pilar::before{content:"0" counter(pilar);font-family:var(--f-ui);font-size:var(--t-small);font-weight:600;letter-spacing:.1em;color:var(--rojo);line-height:1.6}
.pilar h3{margin:0;font-size:var(--t-h3);text-transform:uppercase;letter-spacing:-.01em}
.pilar p{margin:0;max-width:var(--medida);color:var(--niebla)}
.pilar p strong{color:var(--papel);font-weight:600}
.pilar__tag{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--niebla);margin-top:.4em}
@media (min-width:768px){
  .pilar{grid-template-columns:64px 4fr 7fr;gap:var(--s-4);align-items:start}
  .pilar::before{font-size:1.25rem;line-height:1.2}
  .pilar__tag{grid-column:3}
}
.nota-caja{border-left:2px solid var(--rojo);padding:var(--s-1) 0 var(--s-1) var(--s-3);margin-top:var(--s-4);max-width:var(--medida)}
.nota-caja p{margin:0 0 .5em}

/* ---------- 13. METRIC (cifra/concepto con fórmula y fuente) ---------- */
.metrics{display:grid;gap:var(--s-2);grid-template-columns:1fr}
@media (min-width:640px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}}
.metric{border-top:1px solid var(--linea-fuerte);padding-top:var(--s-2)}
.metric__label{display:block;font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--niebla);margin-bottom:.5em}
.metric__valor{display:block;font-size:clamp(1.625rem,3vw,2.25rem);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.metric__valor.verde{color:var(--verde)}
.metric__formula{display:block;margin-top:.5em;color:var(--niebla);font-size:var(--t-small)}
.metric__formula b{color:var(--papel);font-weight:500}
.metric__fuente{display:block;margin-top:.6em;padding-top:.6em;border-top:1px dashed var(--linea);font-family:var(--f-ui);font-size:.75rem;color:var(--niebla)}
.formula{font-family:var(--f-ui);font-weight:500;font-size:clamp(1rem,2.2vw,1.375rem);display:flex;flex-wrap:wrap;gap:.4em .6em;align-items:center;margin:var(--s-3) 0}
.formula .op{color:var(--rojo);font-weight:600}
.formula .res{color:var(--verde);font-weight:600}

/* ---------- 14. CALC: cadena de 6 pasos (ticket × comensales → meta) ---------- */
.calc{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.calc{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.calc{grid-template-columns:repeat(6,minmax(0,1fr))}}
.calc__paso{background:var(--negro);padding:var(--s-2) var(--s-2);display:grid;gap:.2em;align-content:start}
.calc__paso small{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--niebla);line-height:1.3}
.calc__paso b{font-weight:600;font-size:1.25rem;letter-spacing:-.01em}
.calc__paso b.verde{color:var(--verde)}
.calc__paso b.rojo{color:var(--rojo)}
.calc__paso--meta{background:var(--negro-puro)}

/* ---------- 15. SEMÁFORO (escala proporcional + lista de reglas) ----------
   Escala: verde 270 / amarillo 135 / rojo 220 (proporcional a $). El amarillo
   NO es ámbar: es hueco con borde off-white. Cursor = CPR que viaja a la meta. */
.semaforo__escala{position:relative;display:flex;height:2.75rem;border:1px solid var(--linea-fuerte);border-radius:var(--radio);overflow:hidden;margin:var(--s-3) 0 var(--s-2)}
.semaforo__banda{display:grid;place-items:center;font-family:var(--f-ui);font-size:.75rem;font-weight:600;letter-spacing:.06em;white-space:nowrap}
.semaforo__banda--verde{background:var(--verde);color:var(--negro);flex:270}
.semaforo__banda--amarillo{background:transparent;color:var(--papel);flex:135;box-shadow:inset 0 0 0 1px var(--linea-fuerte)}
.semaforo__banda--rojo{background:var(--rojo-tinta);color:var(--papel);flex:220}
.semaforo__cursor{position:absolute;inset:0;pointer-events:none}
.semaforo__cursor::before{content:"";position:absolute;top:0;bottom:0;left:43.2%;width:2px;background:var(--papel);box-shadow:0 0 0 1px var(--negro)}
.semaforo__cursor span{display:none;position:absolute;left:43.2%;top:50%;transform:translate(.6rem,-50%);font-family:var(--f-ui);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--papel);background:var(--negro);padding:.15em .4em;border:1px solid var(--linea-fuerte)}
@media (min-width:640px){.semaforo__cursor span{display:block}}
.semaforo__leyenda{display:flex;justify-content:space-between;font-family:var(--f-ui);font-size:.75rem;color:var(--niebla);margin-bottom:var(--s-3)}
.semaforo{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--linea)}
.semaforo li{background:var(--negro);padding:var(--s-2) var(--s-2) var(--s-2) 0;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--s-1) var(--s-2);align-items:start}
.semaforo .luz{width:12px;height:12px;border-radius:50%;margin-top:.45em;grid-column:1;grid-row:1/3;border:1px solid var(--papel)}
.semaforo .luz--verde{background:var(--verde);border-color:var(--verde)}
.semaforo .luz--amarillo{background:transparent;border-color:var(--papel)}
.semaforo .luz--rojo{background:var(--rojo);border-color:var(--rojo)}
.semaforo .t{grid-column:2;grid-row:1;display:block;font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;font-size:var(--t-small);letter-spacing:.04em}
.semaforo .d{grid-column:2;grid-row:2;display:block;color:var(--niebla);font-size:var(--t-small);font-family:var(--f-titulo)}
.semaforo .v{grid-column:3;grid-row:1/3;font-weight:600;font-size:1.125rem;text-align:right;white-space:nowrap}

/* ---------- 16. UMBRAL (garantía: Resultado A ≥130% / o / Resultado B ≥5×) ---------- */
.umbrales{display:grid;gap:var(--s-2)}
@media (min-width:768px){.umbrales{grid-template-columns:1fr auto 1fr;align-items:stretch;gap:var(--s-3)}}
.umbral{border:1px solid var(--linea);border-radius:var(--radio);padding:var(--s-3);display:grid;gap:.5em;align-content:start;background:var(--negro-puro)}
.umbral__letra{font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--rojo)}
.umbral__valor{font-weight:600;font-size:clamp(2.25rem,4vw,3rem);line-height:1;letter-spacing:-.02em;color:var(--verde)}
.umbral p{margin:0;color:var(--niebla);font-size:var(--t-small)}
.umbrales__o{display:grid;place-items:center;font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--niebla);padding:var(--s-1)}
.remedios{list-style:none;margin:var(--s-4) 0 0;padding:0;counter-reset:remedio;display:grid;gap:var(--s-2)}
@media (min-width:768px){.remedios{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}}
.remedios li{counter-increment:remedio;display:grid;grid-template-columns:auto 1fr;gap:var(--s-2);color:var(--niebla);font-size:var(--t-small);border-top:1px solid var(--linea);padding-top:var(--s-2)}
.remedios li::before{content:"Remedio " counter(remedio);font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo);white-space:nowrap;padding-top:.2em}
.remedios li strong{color:var(--papel);font-weight:600}

/* ---------- 17. STEPS (cómo arranca) ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:var(--s-3)}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}}
.step{counter-increment:step;border-top:2px solid var(--rojo);padding-top:var(--s-2)}
.step::before{content:"0" counter(step);display:block;font-family:var(--f-ui);font-weight:600;color:var(--rojo);letter-spacing:.1em;font-size:var(--t-small);margin-bottom:.5em}
.step h3{text-transform:uppercase;font-size:1.125rem;margin-bottom:.5em}
.step .plazo{display:block;font-family:var(--f-ui);font-weight:600;font-size:1.5rem;letter-spacing:-.02em;margin-bottom:.4em;font-variant-numeric:tabular-nums}
.step p{margin:0;color:var(--niebla);font-size:var(--t-small)}
.step p a{color:var(--papel)}

/* ---------- 18. TABLE ---------- */
.table{font-size:var(--t-small);margin:var(--s-3) 0}
.table caption{text-align:left;caption-side:top;font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding-bottom:var(--s-2);color:var(--niebla)}
.table th,.table td{text-align:left;padding:.75em .75em .75em 0;border-bottom:1px solid var(--linea);vertical-align:top}
.table thead th{font-weight:600;color:var(--niebla);letter-spacing:.06em;text-transform:uppercase;font-size:var(--t-eyebrow);border-bottom:1px solid var(--linea-fuerte)}
.table tbody th{font-family:var(--f-titulo);font-weight:600;color:var(--papel)}
.table td.n,.table th.n{text-align:right;padding-right:0;white-space:nowrap}
.table td.verde{color:var(--verde);font-weight:600}
.table tr.total th,.table tr.total td{border-top:1px solid var(--linea-fuerte);border-bottom:0;font-weight:600}
.table--scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table--scroll table{min-width:560px}

/* ---------- 19. CARD ---------- */
.card{border:1px solid var(--linea);padding:var(--s-3);display:flex;flex-direction:column;gap:var(--s-1);border-radius:var(--radio)}
.card--acento{border-color:var(--rojo)}
.card--fondo{background:var(--negro-puro)}
.card h3{margin:0}
.card p{margin:0;color:var(--niebla)}
.card .folio{margin-bottom:var(--s-1)}
.lista-x,.lista-ok{list-style:none;margin:0;padding:0}
.lista-x li,.lista-ok li{display:flex;gap:.7em;padding:.5em 0;color:var(--niebla)}
.lista-x li::before{content:"×";color:var(--rojo);font-weight:700;flex:none;font-family:var(--f-ui)}
.lista-ok li::before{content:"✓";color:var(--verde);font-weight:700;flex:none;font-family:var(--f-ui)}

/* ---------- 20. EQUIPO (monogramas tipográficos; listo para foto) ---------- */
.equipo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3) var(--s-2)}
@media (min-width:640px){.equipo{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){.equipo{grid-template-columns:repeat(7,1fr)}}
.persona{display:flex;flex-direction:column;gap:.4em}
.monograma{width:56px;height:56px;display:grid;place-items:center;border:1px solid var(--linea-fuerte);font-family:var(--f-titulo);font-weight:900;font-size:1.125rem;letter-spacing:-.02em;color:var(--papel);background:var(--negro-puro);object-fit:cover;overflow:hidden}
.monograma img{width:100%;height:100%;object-fit:cover}
.monograma--ceo{border-color:var(--rojo);color:var(--rojo)}
.persona b{font-weight:700;font-size:var(--t-small)}
.persona span{color:var(--niebla);font-size:.8125rem;line-height:1.4}
.persona--ceo b{color:var(--rojo)}
.equipo__nota{margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--linea);font-family:var(--f-ui);font-size:var(--t-small);color:var(--niebla)}
.equipo__nota strong{color:var(--papel);font-weight:500}

/* ---------- 21. FAQ (details nativo, legible sin JS) ---------- */
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s-2);padding:var(--s-2) 0;font-weight:700;min-height:var(--tap)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--rojo);font-family:var(--f-ui);font-weight:500;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .faq__body{padding:0 0 var(--s-3);color:var(--niebla);max-width:var(--medida)}
.faq .faq__body strong{color:var(--papel)}

/* ---------- 22. PULLQUOTE (frases de casa) ---------- */
.pullquote{margin:var(--s-5) 0;padding:var(--s-3) 0 0;border:0;border-top:1px solid var(--rojo);max-width:34ch}
.pullquote p{font-family:var(--f-titulo);font-weight:800;font-size:clamp(1.5rem,2.8vw,2.125rem);line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;margin:0;text-wrap:balance}
.pullquote footer{margin-top:var(--s-2);font-family:var(--f-ui);font-size:var(--t-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--niebla)}

/* ---------- 23. COMPARATIVA (tabla con columna RI destacada) ---------- */
.comparativa td.ri,.comparativa th.ri{background:rgba(255,49,49,.06);border-left:1px solid var(--rojo);border-right:1px solid var(--rojo);padding-left:.75em}
.comparativa thead th.ri{color:var(--rojo)}
.comparativa .si{color:var(--verde);font-weight:600}
.comparativa .no{color:var(--niebla)}

/* ---------- 24. PENDIENTE / TAG ---------- */
.pendiente{display:inline-block;font-family:var(--f-ui);font-size:.75rem;font-weight:500;color:var(--niebla);border:1px dashed var(--linea-fuerte);padding:.1em .5em;border-radius:var(--radio)}
.tag{display:inline-block;font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.35em .7em;border:1px solid currentColor;border-radius:var(--radio)}
.tag--ia{color:var(--purpura)}
.tag--verde{color:var(--verde)}
.tag--rojo{color:var(--rojo)}

/* ---------- 25. CTA DE CIERRE ---------- */
.cta{position:relative;overflow:hidden;padding:var(--s-7) 0 calc(var(--s-7) + 150px);border-top:1px solid var(--linea);background:linear-gradient(180deg,var(--negro) 0%,var(--negro-puro) 100%)}
@media (min-width:1100px){.cta{padding:var(--s-8) 0}}
.cta__inner{position:relative;z-index:1;max-width:760px}
.cta h2{margin-bottom:var(--s-2)}
.cta .lede{color:var(--niebla)}
.cta__contacto{margin-top:var(--s-3);font-family:var(--f-ui);font-size:var(--t-small);color:var(--niebla)}
.cta__contacto a{color:var(--papel)}

/* ---------- 26. CONTORNOS (firma visual: topografía roja, 1 px) ----------
   Nunca detrás del cuerpo de texto. --hero vive DENTRO de .hero__col, detrás
   del ticket; --cierre ocupa la franja inferior hasta 1099px y, desde 1100px,
   la franja a la derecha del bloque de texto (.cta__inner, 760px). El SVG llena la caja (preserveAspectRatio slice). */
.contours{position:absolute;pointer-events:none;z-index:0;overflow:hidden}
.contours svg{width:100%;height:100%}
.contours path{fill:none;stroke:var(--rojo);stroke-width:1;vector-effect:non-scaling-stroke}
.contours--hero{left:-18%;right:-18%;top:-6%;bottom:-6%}
@media (min-width:900px){.contours--hero{left:-22%;right:-26%;top:-18%;bottom:-18%}}
.hero__col .ticket{z-index:1}
.contours--cierre{left:-5%;right:-5%;bottom:-10px;top:auto;height:170px}
/* ≥1100: franja derecha que empieza 30px después del borde de .cta__inner (760px), medido desde el contenido del .wrap */
@media (min-width:1100px){.contours--cierre{left:calc(max(var(--gutter),(100% - var(--wrap)) / 2 + var(--gutter)) + 790px);right:-6%;top:-10%;bottom:-10%;height:auto}}

/* ---------- 27. FOOTER ---------- */
.footer{border-top:1px solid var(--linea);padding:var(--s-5) 0 var(--s-4);font-size:var(--t-small);color:var(--niebla);background:var(--negro-puro)}
.footer__grid{display:grid;gap:var(--s-4)}
@media (min-width:768px){.footer__grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer h3,.footer__titulo{font-family:var(--f-ui);font-size:var(--t-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--papel);font-weight:600;margin:0 0 var(--s-2);line-height:1.4}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{padding:0}
.footer a{text-decoration:none;color:var(--niebla);display:inline-flex;align-items:center;min-height:var(--tap)}
.footer a:hover{color:var(--papel)}
.footer address{line-height:1.6;margin-top:var(--s-2)}
.footer address b{color:var(--papel);font-weight:500}
.footer__legal{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-1) var(--s-3);font-size:.8125rem}
.footer__legal span{max-width:62ch}

/* ---------- 28. RIEL: mini-ticket fijo (sólo escritorio ancho + JS) ----------
   <nav class="riel" aria-label="Avance de lectura"><ol><li data-seccion="#id">…
   Cada línea se "imprime" (.is-impresa) cuando la sección entra en pantalla. */
.riel{display:none}
@media (min-width:1500px){
  .js .riel{display:block;position:fixed;right:1rem;top:50%;transform:translateY(-50%);z-index:40;width:8.75rem;background:var(--papel);color:var(--tinta);padding:.9rem .85rem .8rem;font-family:var(--f-ui);font-size:.75rem;line-height:1.4;box-shadow:0 20px 40px -24px rgba(0,0,0,.9)}
  .riel::before,.riel::after{content:"";position:absolute;left:0;right:0;height:6px;background:linear-gradient(45deg,transparent 50%,var(--papel) 50%) 0 0/9px 6px repeat-x,linear-gradient(-45deg,transparent 50%,var(--papel) 50%) 0 0/9px 6px repeat-x}
  .riel::before{top:-6px;transform:scaleY(-1)}
  .riel::after{bottom:-6px}
  .riel__titulo{font-family:var(--f-titulo);font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;padding-bottom:.4em;border-bottom:1px dashed var(--tinta-linea);margin:0 0 .4em}
  .riel ol{list-style:none;margin:0;padding:0}
  .riel li{display:flex;gap:.45em;padding:.18em 0;color:var(--tinta-2);opacity:0;visibility:hidden;transform:translateY(-4px)}
  .riel li.is-impresa{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease-out,transform .3s ease-out}
  .riel li b{color:var(--rojo-tinta);font-weight:600;flex:none}
  .riel a{text-decoration:none;color:inherit}
  .riel a:hover{color:var(--rojo-tinta)}
  .riel .riel__total{border-top:1px dashed var(--tinta-linea);margin-top:.4em;padding-top:.45em;color:var(--tinta);font-weight:600}
}

/* ---------- 29. UTILIDADES ---------- */
.no-list{list-style:none;margin:0;padding:0}
.mt-0{margin-top:0}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--s-2)}.mb-4{margin-bottom:var(--s-4)}
.centrado{text-align:center}
.razon{font-family:var(--f-ui);font-size:var(--t-small);color:var(--niebla);line-height:1.6}
.razon b{color:var(--papel);font-weight:500}

/* ---------- 30. MOTION (sólo bajo html.js y sin prefers-reduced-motion) ----------
   Reglas: visible por defecto; sólo opacity/transform; cero layout shift.
   Activación:
   · data-reveal            → el elemento entra con .is-visible (IO, motion.js)
   · data-reveal="grupo"    → sus hijos directos entran escalonados (60 ms)
   · .ticket[data-imprime]  → cada .ticket__linea se imprime (CSS, al cargar;
                              motion.js asigna --i); .ticket__total da el golpe
   · .flow[data-flow]       → nodos y líneas se encienden por pasos con .is-visible
   · .semaforo__escala[data-semaforo] → el cursor viaja de rojo a la meta
   · [data-valor="2700"]    → la cifra cuenta hasta su valor (texto real en HTML)
   · .contours svg          → respira 50–60 s
   · .nav__progreso         → scaleX con el scroll (motion.js)
   · Si motion.js no carga, el onerror del <script> quita html.js: nada queda oculto. */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .5s ease-out,transform .5s ease-out}
  .js [data-reveal].is-visible{opacity:1;transform:none}
  .js [data-reveal="grupo"]{opacity:1;transform:none;transition:none}
  .js [data-reveal="grupo"]>*{opacity:0;transform:translateY(14px);transition:opacity .45s ease-out,transform .45s ease-out}
  .js [data-reveal="grupo"].is-visible>*{opacity:1;transform:none}
  .js [data-reveal="grupo"].is-visible>:nth-child(2){transition-delay:.06s}
  .js [data-reveal="grupo"].is-visible>:nth-child(3){transition-delay:.12s}
  .js [data-reveal="grupo"].is-visible>:nth-child(4){transition-delay:.18s}
  .js [data-reveal="grupo"].is-visible>:nth-child(5){transition-delay:.24s}
  .js [data-reveal="grupo"].is-visible>:nth-child(6){transition-delay:.3s}
  .js [data-reveal="grupo"].is-visible>:nth-child(7){transition-delay:.36s}
  .js [data-reveal="grupo"].is-visible>:nth-child(8){transition-delay:.42s}
  .js [data-reveal="grupo"].is-visible>:nth-child(9){transition-delay:.48s}
  .js [data-reveal="grupo"].is-visible>:nth-child(10){transition-delay:.54s}
  .js [data-reveal="grupo"].is-visible>:nth-child(n+11){transition-delay:.6s}
  /* Ticket que se imprime línea por línea; el total da un golpe de impresora */
  .js .ticket[data-imprime] .ticket__linea{opacity:0;animation:ticket-print .3s ease-out forwards;animation-delay:calc(var(--i,0) * 110ms + 350ms)}
  .js .ticket[data-imprime] .ticket__total{animation-name:ticket-golpe;animation-duration:.5s}
  @keyframes ticket-print{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  @keyframes ticket-golpe{0%{opacity:0;transform:translateY(-10px) scale(1.04)}55%{opacity:1;transform:translateY(2px) scale(1)}100%{opacity:1;transform:none}}
  /* Cadena de atribución: se enciende por pasos; la línea roja recorre el conector */
  .js .flow[data-flow] .flow__nodo{opacity:.28;transition:opacity .4s ease-out}
  .js .flow[data-flow] .flow__nodo::after{transform:scaleY(0);transition:transform .5s linear}
  .js .flow[data-flow] .flow__num{border-color:var(--linea-fuerte);color:var(--niebla)}
  .js .flow[data-flow].is-visible .flow__nodo{opacity:1}
  .js .flow[data-flow].is-visible .flow__nodo::after{transform:none}
  .js .flow[data-flow].is-visible .flow__num{border-color:var(--rojo);color:var(--rojo)}
  .js .flow[data-flow].is-visible .flow__nodo--fin .flow__num{border-color:var(--verde);color:var(--verde)}
  .js .flow[data-flow].is-visible .flow__nodo:nth-child(2),.js .flow[data-flow].is-visible .flow__nodo:nth-child(2) .flow__num{transition-delay:.3s}
  .js .flow[data-flow].is-visible .flow__nodo:nth-child(3),.js .flow[data-flow].is-visible .flow__nodo:nth-child(3) .flow__num{transition-delay:.6s}
  .js .flow[data-flow].is-visible .flow__nodo:nth-child(4),.js .flow[data-flow].is-visible .flow__nodo:nth-child(4) .flow__num{transition-delay:.9s}
  .js .flow[data-flow].is-visible .flow__nodo:nth-child(5),.js .flow[data-flow].is-visible .flow__nodo:nth-child(5) .flow__num{transition-delay:1.2s}
  .js .flow[data-flow].is-visible .flow__nodo:nth-child(1)::after{transition-delay:.15s}
  .js .flow[data-flow].is-visible .flow__nodo:nth-child(2)::after{transition-delay:.45s}
  .js .flow[data-flow].is-visible .flow__nodo:nth-child(3)::after{transition-delay:.75s}
  .js .flow[data-flow].is-visible .flow__nodo:nth-child(4)::after{transition-delay:1.05s}
  @media (min-width:900px){.js .flow[data-flow] .flow__nodo::after{transform:scaleX(0)}.js .flow[data-flow].is-visible .flow__nodo::after{transform:none}}
  /* Semáforo: las bandas se encienden rojo → amarillo → verde y el cursor viaja a la meta */
  .js .semaforo__escala[data-semaforo] .semaforo__banda{opacity:.3;transition:opacity .4s ease-out}
  .js .semaforo__escala[data-semaforo].is-visible .semaforo__banda{opacity:1}
  .js .semaforo__escala[data-semaforo].is-visible .semaforo__banda--amarillo{transition-delay:.55s}
  .js .semaforo__escala[data-semaforo].is-visible .semaforo__banda--verde{transition-delay:1.1s}
  .js .semaforo__escala[data-semaforo] .semaforo__cursor{transform:translateX(56.8%);transition:transform 1.7s cubic-bezier(.2,.7,.15,1) .2s}
  .js .semaforo__escala[data-semaforo].is-visible .semaforo__cursor{transform:none}
  /* Contornos que respiran (lentísimo) */
  .js .contours svg{animation:contours-respira 52s ease-in-out infinite alternate}
  .js .contours--cierre svg{animation-duration:60s;animation-direction:alternate-reverse}
  @keyframes contours-respira{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2.5%,1.5%,0)}}
  /* Logos: rejilla escalonada (sin marquee) — usa data-reveal="grupo" en el <ul> */
  .js .nav__progreso{transition:transform .08s linear}
}

/* ---------- 31. PRINT ---------- */
@media print{
  .nav,.skip,.riel,.contours,.cta .btn-group,.nav__progreso{display:none!important}
  html,body{background:#fff;color:#000}
  .ticket{box-shadow:none;border:1px solid #999}
  a{color:#000;text-decoration:underline}
  .section,.hero,.cta{padding:1.5rem 0;break-inside:avoid}
  [data-reveal],[data-reveal="grupo"]>*{opacity:1!important;transform:none!important}
}

/* ── Componentes de páginas interiores ── */
/* ---------- 32. COMPONENTES DE PÁGINAS INTERIORES ----------
   Reglas que vivían en <style> de cada interior (marca @mover-a-styles), ahora aquí,
   agrupadas por página. Lo que se repetía con otro nombre quedó unificado arriba:
   .miga (todas), .cita-contrato (/garantia, /terminos), .cuenta--datos (/nosotros, /privacidad). */

/* Compartido · Miga de pan bajo el nav (Inicio › Página). Marcado: nav.miga > .wrap > ol > li */
.miga{border-bottom:1px solid var(--linea);font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--niebla)}
.miga ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 .7em;min-height:var(--tap)}
.miga li{display:inline-flex;align-items:center;gap:.7em;min-height:var(--tap)}
.miga li+li::before{content:"›";color:var(--rojo);font-size:1rem;line-height:1}
.miga a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;color:var(--niebla)}
.miga a:hover,.miga [aria-current="page"]{color:var(--papel)}

/* Compartido · Cita literal del contrato: numeral en rojo, texto en papel, sobre negro puro */
.cita-contrato{margin:var(--s-4) 0 0;padding:var(--s-3);border:1px solid var(--linea);border-left:2px solid var(--rojo);background:var(--negro-puro);max-width:var(--medida)}
.cita-contrato .folio{display:block;margin-bottom:var(--s-2)}
.cita-contrato p{margin:0;font-size:var(--t-lede);line-height:1.5;color:var(--papel);text-wrap:pretty}
.cita-contrato p+p{margin-top:var(--s-2)}
.cita-contrato footer{margin-top:var(--s-2);font-family:var(--f-ui);font-size:var(--t-small);color:var(--niebla)}

/* Compartido · Datos de la sociedad como "cuenta": valores largos pueden partirse en móvil */
.cuenta--datos .v{white-space:normal;flex:1 1 60%;max-width:none;min-width:0}
.cuenta--datos a{text-decoration-color:var(--rojo)}

/* ── /404.html (prefijo .e404-) ── */
/* El código de error como folio grande, en rojo, arriba del h1 */
.e404-codigo{display:block;margin:0 0 var(--s-2);font-family:var(--f-ui);font-weight:600;font-size:var(--t-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--rojo)}

/* Las 7 páginas que sí existen: lista numerada 01–07 en rojo, dos columnas desde tablet */
.e404-rutas{list-style:none;margin:0;padding:0;counter-reset:ruta;display:grid;gap:0 var(--s-4);border-top:1px solid var(--linea)}
@media (min-width:640px){.e404-rutas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.e404-rutas li{counter-increment:ruta;border-bottom:1px solid var(--linea)}
.e404-rutas a{display:flex;align-items:baseline;gap:var(--s-2);min-height:var(--tap);padding:.7em 0;text-decoration:none;color:var(--papel)}
.e404-rutas a::before{content:counter(ruta,decimal-leading-zero);flex:none;font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.1em;color:var(--rojo)}
.e404-rutas a:hover{color:var(--rojo)}
.e404-rutas b{font-weight:700}
.e404-rutas span{display:block;font-size:var(--t-small);color:var(--niebla)}
.e404-rutas a:hover span{color:var(--papel)}

/* El ticket del 404 tacha el valor que no existe */
.e404-tachado{text-decoration:line-through;color:var(--tinta-2)}

/* ── /nosotros/ (prefijo .nosotros-) ── */
/* Línea de tiempo: de la mesa familiar a la sociedad (la línea roja se dibuja al entrar) */
.nosotros-linea{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:var(--s-4)}
.nosotros-linea::before,.nosotros-linea::after{content:"";position:absolute;left:calc(.5rem - .5px);top:.6rem;bottom:.6rem;width:1px;pointer-events:none}
.nosotros-linea::before{background:var(--linea-fuerte)}
.nosotros-linea::after{background:var(--rojo);transform-origin:top}
.nosotros-hito{position:relative;padding-left:var(--s-4);display:grid;gap:.3em}
.nosotros-hito::before{content:"";position:absolute;left:0;top:.15rem;width:1rem;height:1rem;border-radius:50%;border:1px solid var(--rojo);background:var(--negro);z-index:1}
.nosotros-hito--hoy::before{background:var(--rojo)}
.nosotros-hito__cuando{font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--rojo);line-height:1.4}
.nosotros-hito h3{margin:0;font-size:1.125rem;text-transform:uppercase;letter-spacing:-.01em}
.nosotros-hito p{margin:0;color:var(--niebla);font-size:var(--t-small);max-width:52ch}
.nosotros-hito p strong{color:var(--papel);font-weight:600}

/* Equipo en /nosotros: el CEO ocupa la fila completa; los seis van en rejilla de 3,
   todos colgados de la misma línea roja (una sola línea de reporte) */
.equipo.nosotros-equipo{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-3);position:relative;padding-top:var(--s-4);border-top:1px solid var(--linea-fuerte)}
.equipo.nosotros-equipo::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--rojo);transform-origin:left;pointer-events:none}
@media (min-width:640px){.equipo.nosotros-equipo{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nosotros-equipo .monograma{width:72px;height:72px;font-size:1.375rem;transition:border-color .2s,color .2s}
.nosotros-equipo .persona:hover .monograma{border-color:var(--rojo);color:var(--rojo)}
.nosotros-equipo .persona b{font-size:1rem}
.nosotros-equipo .nosotros-rol{color:var(--papel);font-family:var(--f-ui);font-weight:500;font-size:var(--t-small);line-height:1.4}
.nosotros-equipo .nosotros-hace{font-size:var(--t-small);line-height:1.5;max-width:32ch;margin-top:.2em}
.nosotros-equipo .persona--ceo{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3em var(--s-3);align-items:start;padding-bottom:var(--s-4);border-bottom:1px solid var(--linea)}
.nosotros-equipo .persona--ceo .monograma{width:96px;height:96px;font-size:2rem;grid-row:1/span 3}
.nosotros-equipo .persona--ceo b{font-family:var(--f-titulo);font-size:var(--t-h3);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
.nosotros-equipo .persona--ceo .nosotros-hace{max-width:var(--medida);font-size:var(--t-body);color:var(--niebla)}

/* Motion propio de la página: sólo bajo html.js y sin reduced-motion; sólo transform */
@media (prefers-reduced-motion:no-preference){
  .js .nosotros-linea[data-reveal]::after{transform:scaleY(0);transition:transform 1.5s linear .15s}
  .js .nosotros-linea[data-reveal].is-visible::after{transform:none}
  .js .nosotros-linea.is-visible>:nth-child(1){transition-delay:0s}
  .js .nosotros-linea.is-visible>:nth-child(2){transition-delay:.3s}
  .js .nosotros-linea.is-visible>:nth-child(3){transition-delay:.6s}
  .js .nosotros-linea.is-visible>:nth-child(4){transition-delay:.9s}
  .js .nosotros-linea.is-visible>:nth-child(5){transition-delay:1.2s}
  .js .nosotros-equipo[data-reveal]::after{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.15,1) .1s}
  .js .nosotros-equipo[data-reveal].is-visible::after{transform:none}
}

/* ── /precios/ (prefijo .precios-) ── */
/* El hero de precios lleva la ficha de cifras y el ticket: se recorta el aire superior para que la miga quede pegada al nav */
.precios-hero{padding-top:var(--s-3)}
@media (min-width:900px){.precios-hero{padding-top:var(--s-4)}}
/* Rejilla de 3 umbrales (6 meses · 0% · +$5,000) sin la "o" del componente de garantía */
.precios-condiciones{display:grid;gap:var(--s-2)}
@media (min-width:768px){.precios-condiciones{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}}
@media (min-width:1100px){.precios-condiciones{grid-template-columns:repeat(4,minmax(0,1fr))}}
.precios-condiciones .umbral__valor.rojo{color:var(--rojo)}
.precios-condiciones .umbral__valor.papel{color:var(--papel)}

/* ── /garantia/ (prefijo .garantia-) ── */
/* Elección al tercer mes: dos caminos, la letra grande en rojo */
.garantia-opcion{display:grid;gap:var(--s-2)}
@media (min-width:768px){.garantia-opcion{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}}
.garantia-opcion .card{position:relative;padding-top:var(--s-5)}
.garantia-opcion .card::before{content:attr(data-letra);position:absolute;top:var(--s-2);right:var(--s-3);font-family:var(--f-ui);font-weight:600;font-size:2rem;line-height:1;letter-spacing:-.02em;color:var(--rojo)}
.garantia-opcion .card p strong{color:var(--papel)}
/* Lista de condiciones (6.5) sobre dos columnas desde tablet */
@media (min-width:768px){.garantia-condiciones{columns:2;column-gap:var(--s-5)}.garantia-condiciones li{break-inside:avoid}}
/* Firmas: el "acta" en el ticket admite valores con signo ≥ más chicos que el total */
.garantia-ticket .ticket__row dd b{font-weight:600;color:var(--rojo-tinta)}

/* ── /como-medimos/ (prefijo .medir-) ── */
/* Índice de la página (10 entradas) */
.medir-indice{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);counter-reset:idx;position:relative;z-index:1}
@media (min-width:768px){.medir-indice{grid-template-columns:repeat(5,minmax(0,1fr))}}
.medir-indice li{background:var(--negro);counter-increment:idx}
.medir-indice a{display:flex;gap:.6em;align-items:baseline;padding:.6rem var(--s-2);min-height:var(--tap);text-decoration:none;font-family:var(--f-ui);font-size:.8125rem;font-weight:500;color:var(--papel);line-height:1.3}
.medir-indice a::before{content:counter(idx,decimal-leading-zero);color:var(--rojo);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.1em;flex:none}
.medir-indice a:hover{color:var(--rojo)}
/* Las tres fórmulas del semáforo, en fila */
.medir-formulas{display:grid;gap:var(--s-2);margin:0 0 var(--s-4)}
.medir-formulas .formula{margin:0;padding:var(--s-2) 0;border-top:1px solid var(--linea);font-size:clamp(.9375rem,1.8vw,1.125rem)}
/* Escalones de presupuesto (+25%, cerrados al número redondo) */
.medir-escalones{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s-1);align-items:end;height:240px;border-bottom:1px solid var(--linea-fuerte)}
@media (min-width:768px){.medir-escalones{gap:var(--s-2);height:300px}}
.medir-escalon{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.medir-escalon b{font-family:var(--f-ui);font-weight:600;font-size:clamp(.6875rem,1.6vw,1rem);letter-spacing:-.01em;color:var(--papel);text-align:center;margin-bottom:.4em;white-space:nowrap}
.medir-escalon__barra{background:rgba(250,246,244,.08);border-top:2px solid var(--verde);transform-origin:bottom}
.medir-escalon:first-child .medir-escalon__barra{border-top-color:var(--linea-fuerte)}
.medir-escalon:nth-child(1) .medir-escalon__barra{height:25%}
.medir-escalon:nth-child(2) .medir-escalon__barra{height:31.25%}
.medir-escalon:nth-child(3) .medir-escalon__barra{height:37.5%}
.medir-escalon:nth-child(4) .medir-escalon__barra{height:50%}
.medir-escalon:nth-child(5) .medir-escalon__barra{height:62.5%}
.medir-escalon:nth-child(6) .medir-escalon__barra{height:75%}
.medir-escalon:nth-child(7) .medir-escalon__barra{height:100%}
.medir-escalon small{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--niebla);text-align:center;padding-top:.5em;line-height:1.3}
.medir-escalon:first-child small{color:var(--niebla)}
/* Cadena de 4 pasos (reputación) */
@media (min-width:640px){.calc.medir-calc-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Tope: 1 de cada 5 reservas */
.medir-tope{display:flex;gap:.35em;margin:.6em 0 0}
.medir-tope span{width:1.1rem;height:1.1rem;border:1px solid var(--linea-fuerte);border-radius:var(--radio)}
.medir-tope span.v{background:var(--verde);border-color:var(--verde)}
/* Cita textual del contrato */
.medir-cita{margin:var(--s-3) 0 0;padding:0 0 0 var(--s-3);border-left:2px solid var(--rojo);max-width:var(--medida)}
.medir-cita p{font-family:var(--f-titulo);font-size:var(--t-lede);line-height:1.5;margin:0 0 .5em}
.medir-cita footer{font-family:var(--f-ui);font-size:var(--t-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--niebla)}
/* Motion propio: barras que crecen (sólo con JS y sin reduced-motion) */
@media (prefers-reduced-motion:no-preference){
  .js .medir-escalones[data-reveal="grupo"] .medir-escalon__barra{transform:scaleY(0);transition:transform .7s cubic-bezier(.2,.7,.15,1)}
  .js .medir-escalones[data-reveal="grupo"].is-visible .medir-escalon__barra{transform:none}
  .js .medir-escalones.is-visible .medir-escalon:nth-child(2) .medir-escalon__barra{transition-delay:.12s}
  .js .medir-escalones.is-visible .medir-escalon:nth-child(3) .medir-escalon__barra{transition-delay:.24s}
  .js .medir-escalones.is-visible .medir-escalon:nth-child(4) .medir-escalon__barra{transition-delay:.36s}
  .js .medir-escalones.is-visible .medir-escalon:nth-child(5) .medir-escalon__barra{transition-delay:.48s}
  .js .medir-escalones.is-visible .medir-escalon:nth-child(6) .medir-escalon__barra{transition-delay:.6s}
  .js .medir-escalones.is-visible .medir-escalon:nth-child(7) .medir-escalon__barra{transition-delay:.72s}
}
@media print{.medir-escalon__barra{transform:none!important}}

/* ── /casos/ (prefijo .casos-) ── */
/* Pila de tickets del hero: tres talones apilados, uno por expediente */
.casos-pila{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:var(--s-2) 0}
.casos-pila .ticket{--fan:rotate(-2deg);transform:var(--fan);transform-origin:50% 100%}
.casos-pila .ticket+.ticket{margin-top:-10px}
@media (max-width:559px){.casos-pila .ticket{max-width:100%}.ticket__row dt{white-space:normal}}
.casos-pila .ticket:nth-child(2){--fan:rotate(1.5deg);z-index:2}
.casos-pila .ticket:nth-child(3){--fan:rotate(-1deg);z-index:3}
.casos-pila .ticket__nota a{color:var(--rojo-tinta);font-weight:600;text-decoration-color:var(--rojo-tinta);display:inline-block;padding:.4em 0}
/* Logos numerados como expediente (01–08) */
.casos-logos{counter-reset:logo}
.casos-logos li{position:relative;counter-increment:logo}
.casos-logos li::before{content:"0" counter(logo);position:absolute;top:.6rem;left:.75rem;font-family:var(--f-ui);font-size:.6875rem;font-weight:600;letter-spacing:.12em;color:var(--niebla)}
/* Expediente por caso: texto pegado a la izquierda, ticket ancho a la derecha */
@media (min-width:768px){.casos-caso__texto{position:sticky;top:calc(var(--nav-h) + var(--s-3));align-self:start}}
.casos-caso__texto p{color:var(--niebla)}
.casos-caso__texto p strong{color:var(--papel);font-weight:600}
.casos-caso .ticket{margin-inline:auto}
@media (min-width:768px){.casos-caso .ticket{margin-inline:0 auto}}
.casos-caso .ticket__row{flex-wrap:wrap}
.casos-caso .ticket .pendiente{color:var(--tinta-2);border-color:var(--tinta-linea);text-align:left}
.casos-caso .ticket__total .v{text-align:right}
.casos-ticket__titulo{display:flex;align-items:center;gap:.6em;margin:var(--s-2) 0 .3em;font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:var(--tinta)}
.casos-ticket__titulo::after{content:"";flex:1 1 auto;border-top:1px solid var(--tinta-linea)}
.casos-pilares{list-style:none;margin:0;padding:0;counter-reset:cp}
.casos-pilares li{counter-increment:cp;display:grid;grid-template-columns:2em minmax(0,1fr);gap:.1em .5em;padding:.3em 0;font-size:.8125rem;line-height:1.4}
.casos-pilares li::before{content:"0" counter(cp);font-family:var(--f-ui);font-size:.75rem;font-weight:600;letter-spacing:.08em;color:var(--rojo-tinta);padding-top:.1em}
.casos-pilares b{display:block;font-family:var(--f-titulo);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;font-weight:700;color:var(--tinta)}
.casos-pilares span{grid-column:2;color:var(--tinta-2)}
/* Sello: la ausencia de cifra se declara, no se esconde */
.casos-sello{display:block;width:max-content;max-width:100%;margin:var(--s-3) auto 0;padding:.4em .8em;border:2px solid var(--rojo-tinta);border-radius:var(--radio);color:var(--rojo-tinta);font-family:var(--f-ui);font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-align:center;line-height:1.3;transform:rotate(-4deg)}
/* Motion propio de /casos: sólo con JS y sin reduced-motion; nada queda oculto sin ellos */
@media (prefers-reduced-motion:no-preference){
  .js .casos-pila .ticket{animation:casos-cae .6s cubic-bezier(.2,.7,.15,1) both}
  .js .casos-pila .ticket:nth-child(1){animation-delay:.15s}
  .js .casos-pila .ticket:nth-child(2){animation-delay:1.25s}
  .js .casos-pila .ticket:nth-child(3){animation-delay:2.35s}
  .js .casos-pila .ticket:nth-child(2) .ticket__linea{animation-delay:calc(var(--i,0) * 110ms + 1450ms)}
  .js .casos-pila .ticket:nth-child(3) .ticket__linea{animation-delay:calc(var(--i,0) * 110ms + 2550ms)}
  @keyframes casos-cae{from{opacity:0;transform:translateY(-28px) rotate(0)}to{opacity:1;transform:var(--fan)}}
  /* Los tickets de cada expediente se imprimen al entrar en pantalla, no al cargar */
  .js .casos-caso .ticket[data-reveal]{opacity:1;transform:none;transition:none}
  .js .casos-caso .ticket[data-imprime] .ticket__linea{animation-play-state:paused;animation-delay:calc(var(--i,0) * 80ms + 150ms)}
  .js .casos-caso .ticket[data-imprime].is-visible .ticket__linea{animation-play-state:running}
  .js .ticket[data-imprime] .casos-sello{animation-name:casos-sello-golpe;animation-duration:.45s}
  @keyframes casos-sello-golpe{0%{opacity:0;transform:rotate(-4deg) scale(1.8)}70%{opacity:1;transform:rotate(-4deg) scale(.96)}100%{opacity:1;transform:rotate(-4deg)}}
}
@media print{.casos-caso .ticket__linea,.casos-pila .ticket,.casos-pila .ticket__linea{opacity:1!important;animation:none!important}.casos-caso__texto{position:static}}

/* ── /comparativa/ (prefijo .comp-) ── */
/* Tabla de 4 caminos: columna de criterios fija al hacer scroll horizontal */
.comp-tabla table{min-width:960px;table-layout:fixed}
.comp-tabla th[scope="col"]:first-child{width:150px}
.comp-tabla tbody th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--negro);padding-right:var(--s-2)}
.comp-tabla tbody th[scope="row"] small{display:block;font-family:var(--f-ui);font-weight:400;font-size:.75rem;color:var(--niebla);margin-top:.25em}
.comp-tabla td{color:var(--niebla);font-family:var(--f-titulo);line-height:1.5}
.comp-tabla td strong{color:var(--papel);font-weight:600}
.comp-tabla td.ri{color:var(--papel)}
.comp-tabla thead th.ri{position:relative}
.comp-tabla thead th.ri::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--rojo);transform-origin:left}
.comp-tabla tbody tr:last-child td.ri{border-bottom:1px solid var(--rojo)}
.comp-tabla__pista{display:none;font-family:var(--f-ui);font-size:.75rem;color:var(--niebla);margin:0 0 var(--s-1)}
@media (max-width:999px){.comp-tabla__pista{display:block}}
/* Veredicto por camino: gana / pierde */
.comp-veredicto{display:grid;gap:var(--s-3)}
@media (min-width:768px){.comp-veredicto{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}}
@media (min-width:1100px){.comp-veredicto{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}}
.comp-veredicto .card h3{text-transform:uppercase;font-size:1.125rem;letter-spacing:-.01em}
.comp-veredicto .card .eyebrow{margin:var(--s-2) 0 .25em}
.comp-veredicto .card .eyebrow--rojo{color:var(--rojo)}
.comp-veredicto .card .eyebrow--verde{color:var(--verde)}
.comp-veredicto .card .eyebrow--verde::before{background:var(--verde)}
/* La cuenta del equipo interno: renglones en blanco para que el lector sume */
.comp-blanco{display:inline-block;width:5.5em;height:1em;border-bottom:1px solid var(--linea-fuerte);vertical-align:baseline}
.comp-cuenta .cuenta li.total .v{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;font-size:1rem;letter-spacing:.02em;color:var(--rojo)}
/* Motion propio (sólo bajo html.js y sin reduced-motion): filas que entran en fundido, la línea roja de la columna RI se dibuja */
@media (prefers-reduced-motion:no-preference){
  .js .comp-tabla tbody[data-reveal="grupo"]>tr{transform:none}
  .js .comp-tabla thead[data-reveal] th.ri::after{transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.15,1) .3s}
  .js .comp-tabla thead[data-reveal].is-visible th.ri::after{transform:none}
}

/* ── /preguntas-frecuentes/ (prefijo .preguntas-) ── */
/* Índice de bloques del FAQ: cuatro anclas con folio rojo, en línea desde tablet */
.preguntas-indice{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-1)}
@media (min-width:768px){.preguntas-indice{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}}
.preguntas-indice a{display:flex;align-items:baseline;gap:.6em;min-height:var(--tap);padding:var(--s-1) 0;border-top:1px solid var(--linea);text-decoration:none;font-family:var(--f-ui);font-weight:600;font-size:var(--t-small);color:var(--papel)}
.preguntas-indice a:hover{color:var(--rojo)}
.preguntas-indice b{font-weight:600;color:var(--rojo)}
.preguntas-indice small{font-weight:500;color:var(--niebla)}
/* Dentro de cada respuesta, el enlace a la página que amplía va al final, como pie */
.preguntas-amplia{display:block;margin-top:var(--s-1)}
/* Una pregunta puede llevar lista corta (numeral 8); hereda el gris de la respuesta */
.faq .faq__body ul,.faq .faq__body ol{margin:0 0 var(--s-2);padding-left:1.2em}
.faq .faq__body li{margin-bottom:.25em}

/* ── /terminos/ (prefijo .terminos-) ── */
/* Índice de la página: lista numerada en dos columnas desde tablet */
.terminos-indice{list-style:none;margin:0;padding:0;counter-reset:cl;display:grid;gap:0 var(--s-4)}
@media (min-width:768px){.terminos-indice{grid-template-columns:repeat(2,minmax(0,1fr))}}
.terminos-indice li{counter-increment:cl;border-bottom:1px solid var(--linea)}
.terminos-indice a{display:flex;align-items:center;gap:var(--s-2);min-height:var(--tap);padding:.4em 0;text-decoration:none;color:var(--papel)}
.terminos-indice a::before{content:counter(cl,decimal-leading-zero);font-family:var(--f-ui);font-size:var(--t-small);font-weight:600;letter-spacing:.1em;color:var(--rojo);flex:none}
.terminos-indice a:hover{color:var(--rojo)}
/* Lista de entregables del numeral 8: numerada 01–10, dos columnas desde tablet */
.terminos-entrega{list-style:none;margin:0;padding:0;counter-reset:ent;display:grid;gap:var(--s-2) var(--s-4)}
@media (min-width:768px){.terminos-entrega{grid-template-columns:repeat(2,minmax(0,1fr))}}
.terminos-entrega li{counter-increment:ent;display:grid;grid-template-columns:auto 1fr;gap:var(--s-2);border-top:1px solid var(--linea);padding-top:var(--s-2);color:var(--niebla);font-size:var(--t-small)}
.terminos-entrega li::before{content:counter(ent,decimal-leading-zero);font-family:var(--f-ui);font-weight:600;letter-spacing:.1em;color:var(--rojo);padding-top:.15em}
.terminos-entrega li strong{color:var(--papel);font-weight:600}
/* Ficha del prestador: datos fiscales en rejilla dt/dd */
.terminos-ficha{display:grid;gap:var(--s-3);margin:0}
@media (min-width:768px){.terminos-ficha{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}}
.terminos-ficha div{border-top:1px solid var(--linea);padding-top:var(--s-2)}
.terminos-ficha dt{font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--niebla);margin-bottom:.4em}
.terminos-ficha dd{margin:0;color:var(--papel);line-height:1.5}
.terminos-ficha dd a{color:var(--papel)}
/* Aviso de borrador al final: tarjeta con borde rojo y texto en papel */
.terminos-aviso{margin-top:var(--s-6);max-width:var(--medida)}
.terminos-aviso p{color:var(--papel)}
.terminos-aviso p span{color:var(--niebla)}

/* ── /privacidad/ (prefijo .privacidad-) ── */
/* Ficha del aviso en el hero (ticket en negativo): valores largos pueden partirse en móvil */
.privacidad-ficha{position:relative;z-index:1;border:1px solid var(--linea);background:var(--negro-puro);padding:var(--s-3)}
.privacidad-ficha .cuenta .v{white-space:normal;flex:0 1 auto;max-width:62%;text-align:right;font-size:var(--t-small)}
.privacidad-ficha .cuenta li:last-child{border-bottom:0}
.privacidad-ficha__titulo{margin:0 0 var(--s-2);font-family:var(--f-ui);font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--rojo)}

/* Cuerpo legal: listas con aire, definiciones en llano */
.privacidad-lista{margin:0 0 var(--s-2);padding-left:1.2em;color:var(--niebla);max-width:var(--medida)}
.privacidad-lista li{margin-bottom:.5em}
.privacidad-lista li::marker{color:var(--rojo)}
.privacidad-lista strong{color:var(--papel);font-weight:600}
.privacidad-def{margin:0 0 var(--s-3);max-width:var(--medida);display:grid;gap:.9em}
.privacidad-def div{display:grid;gap:.15em}
.privacidad-def dt{font-family:var(--f-ui);font-weight:600;color:var(--papel)}
.privacidad-def dt b{color:var(--rojo);font-weight:600;margin-right:.4em}
.privacidad-def dd{margin:0;color:var(--niebla);font-size:var(--t-small)}
.privacidad-table td{color:var(--niebla)}
.privacidad-table td strong{color:var(--papel);font-weight:600}

/* Aviso de borrador al final (sello en rojo, borde punteado) */
.privacidad-borrador{margin-top:var(--s-5);padding:var(--s-3);border:1px dashed var(--rojo);max-width:var(--medida);display:grid;gap:var(--s-1)}
.privacidad-borrador p{margin:0;color:var(--niebla);font-size:var(--t-small)}
.privacidad-borrador p strong{color:var(--papel);font-weight:600}

/* ── Tabulador del semáforo (home, /como-medimos) ── */
.calc-form{margin-top:var(--s-5);border:1px solid var(--linea-fuerte);background:var(--negro-puro);padding:var(--s-4);display:grid;gap:var(--s-4)}
@media (min-width:900px){.calc-form{grid-template-columns:5fr 7fr;grid-template-areas:"head salida" "campos salida"}.calc-form__head{grid-area:head}.calc-form__campos{grid-area:campos}.calc-form__salida{grid-area:salida}}
.calc-form h3{margin:var(--s-1) 0}
.calc-form__campos{display:grid;gap:var(--s-2)}
.calc-form__campos label{display:grid;gap:4px;font-family:var(--f-ui);font-size:var(--t-small);color:var(--niebla)}
.calc-form__campos input,.calc-form__campos select{font:500 1.05rem var(--f-ui);color:var(--papel);background:var(--negro);border:1px solid var(--linea-fuerte);padding:10px 12px;min-height:44px;width:100%;border-radius:4px}
.calc-form__campos input:focus-visible,.calc-form__campos select:focus-visible{outline:2px solid var(--rojo);outline-offset:1px}
.calc-form__salida{display:grid;gap:var(--s-3);align-content:start}
.calc-form__cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin:0}
.calc-form__cifras dt{font-family:var(--f-ui);font-size:var(--t-eyebrow);letter-spacing:.08em;text-transform:uppercase;color:var(--niebla)}
.calc-form__cifras dd{margin:2px 0 0;font:600 1.35rem var(--f-ui);color:var(--papel)}
.calc-form__cifras dd.verde{color:var(--verde)}.calc-form__cifras dd.rojo{color:var(--rojo)}
.calc-form__escala{position:relative;display:flex;height:34px;border:1px solid var(--linea-fuerte);font:600 .72rem var(--f-ui);text-transform:uppercase;letter-spacing:.06em;margin-top:var(--s-2)}
.calc-form__banda{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;padding:0 6px}
.calc-form__banda--verde{flex:270;background:var(--verde);color:var(--negro)}
.calc-form__banda--amarillo{flex:135;background:transparent;color:var(--papel);border-left:1px solid var(--linea-fuerte);border-right:1px solid var(--linea-fuerte)}
.calc-form__banda--rojo{flex:220;background:var(--rojo-tinta,#D9220F);color:var(--papel)}
.calc-form__cursor{position:absolute;top:-8px;bottom:-8px;left:82%;width:2px;background:var(--papel);transition:left .4s}
.calc-form__cursor span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 .7rem var(--f-ui);color:var(--papel);background:var(--negro-puro);padding:1px 6px;border:1px solid var(--linea-fuerte)}
.calc-form__estado{display:flex;align-items:center;gap:var(--s-1);margin:var(--s-3) 0 0;font-size:var(--t-body)}
.calc-form__mesa{border-top:1px solid var(--linea-fuerte);padding-top:var(--s-3);display:grid;gap:4px}
.calc-form__mesa-label{font-family:var(--f-ui);font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--rojo)}
.calc-form__mesa-valor{font:900 clamp(2.4rem,6vw,3.6rem)/1 var(--f-titulo);color:var(--rojo);letter-spacing:-.02em}
.calc-form__mesa-sub{font-family:var(--f-ui);color:var(--niebla)}.calc-form__mesa-sub b{color:var(--papel)}
/* ── Testimonios (home) ── */
.testimonios{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
@media (min-width:768px){.testimonios{grid-template-columns:repeat(3,minmax(0,1fr))}}
.testimonio{background:var(--negro);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.testimonio blockquote{margin:0;font-size:var(--t-body);line-height:1.6}
.testimonio blockquote::before{content:"\201C";display:block;font:900 3rem/1 var(--f-titulo);color:var(--rojo)}
.testimonio footer{display:flex;align-items:center;gap:var(--s-2);margin-top:auto;font-family:var(--f-ui);font-size:var(--t-small)}
.testimonio footer b{display:block;color:var(--papel)}.testimonio footer span{color:var(--niebla)}
.testimonio .monograma{width:40px;height:40px;font-size:.8rem}

/* ── Home simple (24 oct, v2) ── */
.centrado{text-align:center}.medida-c{max-width:46rem;margin-left:auto;margin-right:auto}
.display-c{font-size:clamp(2.2rem,5vw,4rem)}
.section--fondo{background:var(--negro-puro)}
.hero__chips{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-family:var(--f-ui);font-size:var(--t-small);color:var(--niebla)}
.hero__chips b{color:var(--papel);font-weight:600}
.hero__chips li{position:relative;padding-left:14px}.hero__chips li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--rojo)}
.pilares--simple{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
@media (min-width:768px){.pilares--simple{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pilares--simple .pilar{border:1px solid var(--linea);padding:var(--s-3);border-radius:var(--radio)}
.pilares--simple .pilar h3{font-size:1.1rem;margin-top:var(--s-2)}
.pilares--simple .pilar p{font-size:var(--t-small);color:var(--niebla);margin:0}
.steps{margin-top:var(--s-5)}
.flow{margin-top:var(--s-5)}
.cta h2{text-wrap:balance}
/* tarjetas simples: anulan la rejilla en línea del pilar de expediente */
.pilares--simple{border-top:0}
.pilares--simple .pilar,.pilares--simple .pilar{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3);border-bottom:0;border:1px solid var(--linea);min-width:0}
.pilares--simple .pilar::before{font-size:1.25rem;line-height:1.2;grid-column:auto}
.pilares--simple .pilar p{max-width:none}
@media (min-width:768px){.pilares--simple .pilar{grid-template-columns:none}}

.pilares--detalle{margin-top:var(--s-5)}
.pilares--detalle .pilar p{max-width:none}

/* ── Experiencia "Así lo vive tu cliente" (/como-trabajamos) ── */
.exp{margin-top:var(--s-5);display:grid;gap:var(--s-4);align-items:start}
@media (min-width:900px){.exp{grid-template-columns:400px minmax(0,1fr);gap:var(--s-5)}}
.exp__tel{background:#0b0b0b;border:1px solid var(--linea-fuerte);border-radius:28px;padding:10px;display:flex;flex-direction:column;min-height:560px;max-height:640px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.exp__tel-top{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--linea);font-family:var(--f-ui)}
.exp__tel-top b{display:block;color:var(--papel);font-size:.95rem}.exp__tel-top span{color:var(--verde);font-size:.75rem}
.exp__tel-avatar{width:36px;height:36px;border-radius:50%;background:var(--rojo);color:var(--negro);display:grid;place-items:center;font:900 1.1rem var(--f-titulo)}
.exp__anuncio{margin:14px 10px;background:var(--negro);border:1px solid var(--linea-fuerte);border-radius:14px;padding:var(--s-3);font-family:var(--f-ui)}
.exp__anuncio-tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--niebla)}
.exp__anuncio-marca{font-weight:600;color:var(--papel);margin:6px 0 4px}
.exp__anuncio p{color:var(--niebla);margin:0 0 var(--s-2);line-height:1.45;font-size:.92rem}
.exp__cta{width:100%;min-height:46px;background:var(--rojo);color:var(--negro);border:0;border-radius:8px;font:600 1rem var(--f-ui);cursor:pointer}
.exp__cta:hover{background:var(--rojo-prof);color:var(--papel)}
.exp__anuncio-nota{font-size:.75rem!important;text-align:center;margin:10px 0 0!important}
.exp__chat{flex:1;overflow:auto;padding:12px 10px;display:flex;flex-direction:column;gap:8px;font-family:var(--f-ui);font-size:.9rem;scroll-behavior:smooth}
.exp.is-js .exp__chat:empty{display:none}
.exp__msg{max-width:86%;padding:10px 14px;border-radius:16px;line-height:1.45;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.exp__msg.is-in{opacity:1;transform:none}
.exp__msg--in{align-self:flex-end;background:#1f5c3a;color:var(--papel);border-bottom-right-radius:4px}
.exp__msg--out{align-self:flex-start;background:var(--papel);color:var(--negro);border-bottom-left-radius:4px}
.exp__msg--sys{align-self:center;background:transparent;color:var(--niebla);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;max-width:100%;text-align:center}
.exp__msg--typing{display:flex;gap:4px;padding:12px 14px}
.exp__msg--typing span{width:7px;height:7px;border-radius:50%;background:#777;animation:exp-punto 1s infinite}
.exp__msg--typing span:nth-child(2){animation-delay:.15s}.exp__msg--typing span:nth-child(3){animation-delay:.3s}
@keyframes exp-punto{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
.exp__msg--card{align-self:flex-start;background:var(--papel);color:var(--negro);width:86%;padding:12px 14px}
.exp__card-t,.exp__registro-t,.exp__resena-t{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--rojo-tinta,#D9220F);margin-bottom:6px}
.exp__msg--card dl{margin:0;display:grid;gap:4px}.exp__msg--card dl div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted rgba(0,0,0,.25);padding-bottom:3px;font-size:.85rem}
.exp__msg--card dt{color:#5E5955}.exp__msg--card dd{margin:0;font-weight:600;text-align:right}
.exp__card-f{display:block;margin-top:8px;font-size:.78rem;color:#5E5955}
.exp__opciones{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.exp__opciones button{background:transparent;border:1px solid var(--verde);color:var(--verde);border-radius:999px;padding:8px 14px;font:500 .85rem var(--f-ui);cursor:pointer;min-height:40px}
.exp__opciones button:hover{background:var(--verde);color:var(--negro)}
.exp__fin{margin:10px;padding:var(--s-3);border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--f-ui);font-size:.9rem;color:var(--niebla)}
.exp__fin p{margin:0;flex:1 1 100%}.exp__fin b{color:var(--papel)}
.exp__otra{background:transparent;border:1px solid var(--linea-fuerte);color:var(--papel);border-radius:6px;padding:10px 14px;font:500 .85rem var(--f-ui);cursor:pointer;min-height:44px}
.exp__etapas{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.exp__etapa{background:var(--negro);display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s-2);padding:var(--s-3);opacity:.45;transition:opacity .4s,background .4s}
.exp__etapa.is-hecha{opacity:.8}.exp__etapa.is-activa{opacity:1;background:var(--negro-puro);box-shadow:inset 3px 0 0 var(--rojo)}
.exp:not(.is-js) .exp__etapa{opacity:1}
.exp__num{font:600 .8rem var(--f-ui);letter-spacing:.12em;color:var(--rojo);padding-top:4px}
.exp__etapa b{display:block;color:var(--papel);font-family:var(--f-ui);font-size:1rem}
.exp__etapa p{margin:4px 0 0;color:var(--niebla);font-size:var(--t-small)}
.exp__etapa-vivo{margin-top:8px;font-family:var(--f-ui);font-size:.85rem;color:var(--papel);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.exp__etapa-vivo.is-in{opacity:1;transform:none}.exp__etapa-vivo b{display:inline;color:var(--verde);font-size:.85rem}
.exp__registro{background:var(--negro);border:1px solid var(--linea-fuerte);border-radius:8px;padding:10px 12px;margin-top:4px}
.exp__registro dl{margin:0;display:grid;gap:3px}.exp__registro dl div{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;border-bottom:1px dotted var(--linea);padding-bottom:2px}
.exp__registro dt{color:var(--niebla)}.exp__registro dd{margin:0;color:var(--papel);text-align:right;min-height:1.2em}
.exp__registro dd.is-cursor::after{content:"▍";color:var(--verde);animation:exp-cursor .8s steps(2) infinite}
@keyframes exp-cursor{to{opacity:0}}
.exp__registro-ok{display:block;margin-top:8px;color:var(--verde);font-size:.8rem;opacity:0;transition:opacity .4s}.exp__registro-ok.is-in{opacity:1}
.exp__registro-ok b{color:var(--verde);display:inline;font-size:.8rem}
.exp__resena{background:var(--papel);color:var(--negro);border-radius:8px;padding:10px 12px;margin-top:4px}
.exp__resena p{color:var(--negro);margin:0;font-size:.85rem;line-height:1.45}
.exp__resena-ia{margin-top:8px!important;padding-top:8px;border-top:1px dotted rgba(0,0,0,.3);color:#5E5955!important;font-style:italic}
.exp__resena+.exp__registro-ok{color:var(--verde)}
@media (prefers-reduced-motion:reduce){.exp__msg,.exp__etapa-vivo,.exp__etapa{transition:none}.exp__msg--typing span,.exp__registro dd.is-cursor::after{animation:none}}
.exp__fin[hidden]{display:none}
.exp__anuncio[hidden]{display:none}

/* 36 prueba (testimonio en video + prensa)  home · /nosotros */
.prueba{display:grid;gap:var(--s-4);align-items:start}
@media (min-width:900px){.prueba{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.prueba__video{margin:0}
.prueba__video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--negro-puro);border:1px solid var(--linea-fuerte)}
.prueba__video figcaption{display:flex;flex-direction:column;gap:.15em;margin-top:var(--s-2);font-family:var(--f-ui);font-size:var(--t-small)}
.prueba__video figcaption b{color:var(--papel)}.prueba__video figcaption span{color:var(--niebla)}
.prueba__prensa{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--linea);color:inherit;text-decoration:none;transition:border-color .2s}
.prueba__prensa:hover,.prueba__prensa:focus-visible{border-color:var(--rojo)}
.prueba__prensa img{width:100%;height:auto;border:1px solid var(--linea-fuerte)}
.prueba__prensa>div{display:flex;flex-direction:column;gap:var(--s-2);font-family:var(--f-ui);font-size:var(--t-small)}
.prueba__prensa b{font-family:var(--f-titulo);font-size:1.25rem;line-height:1.2;color:var(--papel)}
.prueba__fuente{color:var(--rojo);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;font-weight:600}
.prueba__sub{color:var(--niebla)}
.prueba__prensa .enlace{margin-top:auto}
.prensa__pagina{display:block;justify-self:center;max-width:420px;border:1px solid var(--linea-fuerte);transition:border-color .2s}
.prensa__pagina:hover,.prensa__pagina:focus-visible{border-color:var(--rojo)}
.prensa__pagina img{display:block;width:100%;height:auto}

/* 36b prueba: rejilla de videos + referencia */
.prueba--videos{grid-template-columns:1fr}
@media (min-width:700px){.prueba--videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prueba--abajo{margin-top:var(--s-5)}
@media (min-width:900px){.prueba--abajo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.referencia{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--rojo);background:var(--negro-puro)}
.referencia img{width:100%;height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.9;align-self:start}
.referencia>div{display:flex;flex-direction:column;gap:var(--s-2);font-family:var(--f-ui);font-size:var(--t-small)}
.referencia b{font-family:var(--f-titulo);font-size:1.25rem;line-height:1.2;color:var(--papel)}
.referencia .enlace{margin-top:auto}