/* ══════════════════════════════════════════════════════════════════════════
   LA LEY · web madre de VAO
   Es la PARTE 1 de 2-diseno/web-madre/PLAN-MAESTRO.md, escrita en CSS.
   No define NI UN color: los colores los pone paleta.css de cada página.
   Si algo no está aquí, no se hace.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1.1 · Tipografía ───────────────────────────────────────────────────── */
:root{
  --palo: Archivo, ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* La serif entra SÓLO en la rejilla de reconocimiento, que es un calco de la
     captura 18 y allí el titular y las cifras van en serif. Fuera de ese
     bloque no se usa: lo dice el PLAN MAESTRO §1.1. */
  --serif: Fraunces, ui-serif, Georgia, 'Times New Roman', serif;

  /* Lavados de hueso del calco: la captura no tiene el fondo plano. Van por
     ficha para que la segunda paleta los recalcule sola. */
  --lavado-1:     color-mix(in srgb, var(--tinta-clara) .65%, transparent);
  --lavado-2:     color-mix(in srgb, var(--tinta-clara) 1.4%, transparent);
  --lavado-3:     color-mix(in srgb, var(--tinta-clara) 2.8%, transparent);
  --lavado-trama: color-mix(in srgb, var(--tinta-clara) 2.4%, transparent);

  --t-portada: clamp(46px, 8.6vw, 132px);
  --t-seccion: clamp(32px, 4.6vw, 68px);
  --t-bloque:  clamp(21px, 2.2vw, 32px);
  --t-cuerpo:  clamp(16px, 1.2vw, 17px);
  --t-menudo:  14px;
  --t-rotulo:  11px;

  /* ── 1.2 · Rejilla ─────────────────────────────────────────────────── */
  --env:    1360px;
  --margen: clamp(20px, 4vw, 56px);
  --col:    24px;   /* hueco entre columnas */
  --fila:   48px;   /* hueco entre filas */

  /* ── 1.3 · Ritmo vertical · 8 16 32 48 80 160 ──────────────────────── */
  --a1: 8px; --a2: 16px; --a3: 32px; --a4: 48px; --a5: 80px; --a6: 160px;
  --franja:      clamp(52px, 5.6vw, 72px);
  --franja-peso: clamp(72px, 9.2vw, 132px);

  /* ── 1.7 · Movimiento ──────────────────────────────────────────────── */
  --micro: .18s; --medio: .34s; --largo: .62s; --cinema: .95s;
  --c-micro: cubic-bezier(.4,0,.2,1);
  --c-out:   cubic-bezier(.16,1,.3,1);
  --c-inout: cubic-bezier(.76,0,.24,1);

  --cab-alto: 84px;
  --cab-alto-2: 60px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--palo);font-size:var(--t-cuerpo);line-height:1.55;
  font-variation-settings:'wdth' 100;
  background:var(--papel);color:var(--tinta);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}

/* Los titulares: 760 de peso, 96 % de anchura. La corrección de Héctor. */
h1,h2,h3,h4{
  font-weight:760;font-stretch:96%;
  font-variation-settings:'wdth' 96;
  line-height:.98;letter-spacing:-.025em;text-wrap:balance;
}
h1{font-size:var(--t-portada);line-height:.92;letter-spacing:-.035em}
h2{font-size:var(--t-seccion)}
h3{font-size:var(--t-bloque);font-weight:700;font-variation-settings:'wdth' 92;
   line-height:1.08;letter-spacing:-.015em}
p{max-width:66ch;text-wrap:pretty}

/* ── 1.8 · Piezas de texto fijas ────────────────────────────────────────── */
.env{max-width:var(--env);margin-inline:auto;padding-inline:var(--margen)}

.rotulo{
  font-family:var(--mono);font-size:var(--t-rotulo);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  display:flex;align-items:center;gap:14px;
}
.rotulo::after{content:"";flex:1;height:1px;background:currentColor;opacity:.3}
.rotulo--solo::after{display:none}

.menudo{font-size:var(--t-menudo);line-height:1.5}
.cifra{font-family:var(--mono);font-variant-numeric:tabular-nums;
       letter-spacing:-.02em;font-weight:500}

/* ── 1.6 · Botones ─────────────────────────────────────────────────────── */
.boton{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding-inline:30px;border:0;border-radius:0;cursor:pointer;
  font:600 15px/1 var(--palo);letter-spacing:.005em;
  background:var(--rojo);color:#fff;text-decoration:none;white-space:nowrap;
  transition:background var(--micro) var(--c-micro);
}
.boton:hover{filter:brightness(1.14)}
/* 2-oct-2026 · Héctor: «hay algunos botones que están cortados, como "Ver la industria"». El filete era
   un `box-shadow: inset 0 0 0 1px`, y Safari lo pierde por un lado con zoom (80–90 %, pantalla 1x):
   medido en WebKit, 2–6 de 9 botones sin borde abajo, arriba o a la izquierda. Un `border` se ajusta
   al píxel y no desaparece a ningún zoom; con box-sizing:border-box el botón no cambia de tamaño. */
.boton--fantasma{
  background:transparent;color:currentColor;
  border:1px solid currentColor;
}
/* 2-oct-2026 · El hover de antes era `background:currentColor;color:var(--azul-hondo)`. `currentColor`
   toma el color NUEVO (azul hondo), así que fondo y texto salían iguales y el texto desaparecía al pasar
   el ratón. Ahora el texto no cambia y el fondo se tiñe con su propio color: se lee en claro y en oscuro. */
.boton--fantasma:hover{filter:none;background:color-mix(in srgb,currentColor 14%,transparent)}

/* Enlace con filete que se pinta. Se anima transform, nunca width. */
.fuga{position:relative;text-decoration:none;padding-bottom:2px}
.fuga::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--medio) var(--c-out);
}
.fuga:hover::after,.fuga:focus-visible::after{transform:scaleX(1)}

/* Foco visible de verdad */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--rojo-azul);outline-offset:3px;
}
.claro :focus-visible{outline-color:var(--rojo-papel)}

/* ── Franjas ───────────────────────────────────────────────────────────── */
.franja{padding-block:var(--franja)}
.franja--peso{padding-block:var(--franja-peso)}
.claro       {background:var(--papel);      color:var(--tinta)}
.claro-hondo {background:var(--papel-hondo);color:var(--tinta)}
.oscuro      {background:var(--azul);       color:var(--tinta-clara)}
.oscuro-hondo{background:var(--azul-hondo); color:var(--tinta-clara)}
.panel       {background:var(--gris-marcas);color:var(--tinta-clara)}
.claro .rotulo,.claro-hondo .rotulo{color:var(--tinta-2)}
.oscuro .rotulo,.oscuro-hondo .rotulo,.panel .rotulo{color:var(--tinta-clara-2)}

/* ── 1.7 · Revelado ────────────────────────────────────────────────────── */
.js .rev{opacity:0;transform:translateY(20px)}
.js .rev.visto{opacity:1;transform:none;
  transition:opacity var(--largo) var(--c-out),transform var(--largo) var(--c-out)}
.js .rev.visto{transition-delay:var(--d,0s)}

/* Partidor de líneas del titular (lo escribe vao.js: no existe SplitText libre) */
.linea{display:block;overflow:hidden}
.linea>span{display:block;transform:translateY(105%)}
.js .entrando .linea>span{
  transform:none;transition:transform var(--largo) var(--c-out);
  transition-delay:calc(.25s + var(--i,0)*.09s);
}
html:not(.js) .linea>span{transform:none}

/* ══ 1.10 · EL HEADER — capturas 16 y 17 de Héctor ══════════════════════ */
.cab{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;justify-content:center;
  padding:0;transition:padding var(--cinema) var(--c-inout);
  will-change:padding;
}
.cab__in{
  width:100%;max-width:100%;height:var(--cab-alto);
  display:flex;align-items:center;gap:var(--a3);
  padding-inline:var(--margen);
  border-bottom:1px solid var(--filete-cab);
  background:var(--cab-fondo);backdrop-filter:blur(14px);
  transition:max-width var(--cinema) var(--c-inout),
             height   var(--cinema) var(--c-inout),
             border-radius var(--cinema) var(--c-inout),
             background var(--medio) var(--c-micro),
             box-shadow var(--cinema) var(--c-inout);
}
.encogida .cab{padding:12px var(--margen)}
.encogida .cab__in{
  max-width:1120px;height:var(--cab-alto-2);border-radius:0;
  border-bottom-color:transparent;
  box-shadow:inset 0 0 0 1px var(--filete-cab-2);
  background:var(--cab-fondo-2);
}
.cab__logo{display:flex;align-items:center;color:var(--cab-tinta);flex:none}
.cab__logo svg{width:104px;height:auto}
.cab__nav{display:flex;gap:2px;margin-left:var(--a2)}
.cab__t{
  font:500 14px/1 var(--palo);letter-spacing:.005em;color:var(--cab-tinta);
  background:none;border:0;cursor:pointer;padding:10px 14px;
  display:flex;align-items:center;gap:7px;
  transition:opacity var(--micro) var(--c-micro);
}
.cab__t:hover{opacity:.62}
.cab__t i{display:block;width:5px;height:5px;border:1px solid currentColor;
  border-width:0 1px 1px 0;transform:rotate(45deg) translateY(-2px);
  transition:transform var(--medio) var(--c-out)}
.cab__t[aria-expanded="true"] i{transform:rotate(-135deg) translateY(-2px)}
.cab__d{margin-left:auto;display:flex;align-items:center;gap:var(--a3)}
.cab__tel{font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--cab-tinta);opacity:.72;text-decoration:none}
.cab__tel:hover{opacity:1}
.cab .boton{height:44px;padding-inline:22px;font-size:14px}
.encogida .cab .boton{height:38px;padding-inline:18px;font-size:13px}
@media(max-width:900px){.cab__nav,.cab__tel{display:none}}

/* ══ 1.11 · EL MEGA-MENÚ — capturas 01, 02 y 03 ═════════════════════════ */
.mm{
  position:fixed;inset:0 0 auto;z-index:55;
  background:var(--papel);color:var(--tinta);
  border-bottom:1px solid var(--filete-papel);
  padding:calc(var(--cab-alto) + 40px) 0 48px;
  clip-path:inset(0 0 100% 0);pointer-events:none;visibility:hidden;
  transition:clip-path var(--cinema) var(--c-inout),visibility 0s linear var(--cinema);
}
.mm[data-abierto]{clip-path:inset(0 0 0 0);pointer-events:auto;visibility:visible;
  transition:clip-path var(--cinema) var(--c-inout),visibility 0s}
.mm__g{display:grid;gap:1px;background:var(--filete-papel)}
.mm__g--3{grid-template-columns:repeat(3,1fr)}
.mm__g--2{grid-template-columns:repeat(2,1fr)}
.mm__g--r{grid-template-columns:1.1fr 1fr}
.mm__c{
  background:var(--papel);padding:28px;min-height:250px;
  display:flex;flex-direction:column;text-decoration:none;
  transition:background var(--medio) var(--c-out);
}
.mm__c:hover{background:var(--papel-hondo)}
.mm__c svg.ilu{width:100%;height:118px;margin-bottom:auto;color:var(--tinta-2);opacity:.85;
  transition:color var(--medio) var(--c-out),transform var(--medio) var(--c-out)}
.mm__c:hover svg.ilu{color:var(--rojo-papel);transform:translateY(-4px)}
.mm__c h3{margin:24px 0 6px}
.mm__c p{font-size:var(--t-menudo);color:var(--tinta-2);max-width:34ch}
.mm__lista{background:var(--papel);padding:24px 28px;display:grid;
  grid-template-columns:1fr 1fr;gap:0 var(--a4);align-content:start}
.mm__lista a{display:flex;justify-content:space-between;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--filete-papel);
  text-decoration:none;font-size:var(--t-menudo);font-weight:500}
.mm__lista a span{font-family:var(--mono);font-size:11px;color:var(--tinta-2);
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--micro) var(--c-micro),transform var(--micro) var(--c-micro)}
.mm__lista a:hover span{opacity:1;transform:none}
.mm__mapa{background:var(--azul-hondo);color:var(--tinta-clara);padding:28px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--a2)}
.mm__velo{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.42);
  opacity:0;pointer-events:none;transition:opacity var(--medio) var(--c-micro)}
.mm__velo[data-abierto]{opacity:1;pointer-events:auto}
@media(max-width:900px){.mm{display:none}}

/* ══ B1 · LA CUADRÍCULA DE MARCAS — capturas 04, 05, 06 ═════════════════ */
.marcas{padding-block:56px}
.marcas__cab{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--a4);margin-bottom:var(--a4);flex-wrap:wrap}
.marcas__g{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  background:var(--filete-marcas)}
.marcas__c{
  background:var(--gris-marcas);height:142px;position:relative;
  display:flex;align-items:center;justify-content:center;padding:24px;
  text-decoration:none;transition:background var(--medio) var(--c-out);
}
.marcas__c img{height:38px;width:150px;max-width:100%;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.9;
  transition:transform var(--medio) var(--c-out),opacity var(--medio) var(--c-out)}
/* B&R es una caja naranja con las letras caladas: el filtro la convertiría en
   un bloque blanco. Va en gris sobre el archivo a color. */
.marcas__c--br img{filter:grayscale(1) brightness(1.75) contrast(1.02)}
.marcas__c[href]:hover{background:#1D2126}
.marcas__c[href]:hover img{transform:translateY(-2px);opacity:1}
/* La diagonal que pidió Héctor: sólo en las marcas con caso publicado. */
.marcas__c[href]::after{
  content:"";position:absolute;top:12px;right:12px;width:10px;height:10px;
  background:currentColor;color:var(--tinta-clara-2);opacity:.5;
  clip-path:polygon(0 0,100% 0,100% 100%,88% 100%,88% 22%,10% 100%,0 90%,78% 12%,0 12%);
  transition:opacity var(--micro) var(--c-micro),transform var(--medio) var(--c-out);
}
.marcas__c[href]:hover::after{opacity:1;color:var(--rojo-azul);transform:translate(2px,-2px)}
.marcas__c--rojo{grid-column:span 2;background:var(--rojo);align-items:flex-start;
  flex-direction:column;justify-content:center;gap:10px;text-align:left}
.marcas__c--rojo strong{font:760 21px/1.1 var(--palo);font-variation-settings:'wdth' 96;
  letter-spacing:-.02em;color:#fff}
.marcas__c--rojo span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.85)}
.marcas__nota{margin-top:var(--a3);font-size:12px;color:var(--tinta-clara-2);opacity:.75}
@media(max-width:1000px){.marcas__g{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.marcas__g{grid-template-columns:repeat(2,1fr)}
  .marcas__c{height:120px}}

/* ══ B2 · LOS OCHO PROGRAMAS — captura 07 ══════════════════════════════ */
.prog__cab{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--a4);margin-bottom:var(--a3);flex-wrap:wrap}
.prog__filtros{display:flex;gap:2px;flex-wrap:wrap}
.prog__f{
  font:500 var(--t-rotulo)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  padding:11px 16px;border:1px solid var(--filete-papel);background:transparent;
  color:var(--tinta-2);cursor:pointer;
  transition:background var(--micro) var(--c-micro),color var(--micro) var(--c-micro),
             border-color var(--micro) var(--c-micro);
}
.prog__f:hover{color:var(--tinta)}
.prog__f[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.prog__g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--filete-papel);border:1px solid var(--filete-papel)}
.prog__c{
  background:var(--papel);height:196px;padding:22px;
  display:flex;flex-direction:column;text-decoration:none;position:relative;
  transition:background var(--medio) var(--c-out),opacity var(--medio) var(--c-out),
             transform var(--medio) var(--c-out);
}
.prog__c:hover{background:var(--papel-hondo)}
.prog__c svg{width:24px;height:24px;color:var(--rojo-papel);
  transition:transform var(--medio) var(--c-out)}
.prog__c:hover svg{transform:translateY(-3px)}
.prog__c h3{margin:auto 0 8px;font-size:19px;line-height:1.15}
.prog__c p{font-size:13px;line-height:1.45;color:var(--tinta-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prog__c[hidden]{display:none}
.prog__c.fuera{opacity:0;transform:scale(.97)}
@media(max-width:1000px){.prog__g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.prog__g{grid-template-columns:1fr}.prog__c{height:auto;min-height:170px}}

/* ══ B3 · LA REJILLA DE RECONOCIMIENTO — capturas 18 y 19 ══════════════ */
.rec__g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--filete-azul);border:1px solid var(--filete-azul)}
.rec__c{background:var(--azul-hondo);padding:24px;min-height:178px;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--a2)}
.rec__c--alta{grid-row:span 2;min-height:0}
.rec__c--ancha{grid-column:span 2}
.rec__c--marca{align-items:center;justify-content:center;min-height:150px}
.rec__c--marca img{height:30px;width:130px;max-width:100%;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.78}
.rec__c--marca.br img{filter:grayscale(1) brightness(1.75) contrast(1.02)}
.rec__c--clara{background:var(--papel);color:var(--tinta);justify-content:flex-end}
.rec__c--clara .rotulo{color:var(--tinta-2)}
.rec__c--roja{background:var(--rojo);color:#fff}
.rec__c--roja .rotulo{color:rgba(255,255,255,.85)}
.rec__n{font-family:var(--mono);font-weight:500;font-size:clamp(34px,3.6vw,54px);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rec__q{font-size:var(--t-menudo);color:var(--tinta-clara-2);max-width:24ch}
.rec__c--clara .rec__q{color:var(--tinta-2)}
.rec__frase{font:700 20px/1.25 var(--palo);font-variation-settings:'wdth' 94;
  letter-spacing:-.015em;max-width:22ch}
@media(max-width:1000px){.rec__g{grid-template-columns:repeat(2,1fr)}
  .rec__c--alta{grid-row:auto}.rec__c--ancha{grid-column:span 2}}
@media(max-width:560px){.rec__g{grid-template-columns:1fr}
  .rec__c--ancha{grid-column:auto}}

/* ══ B4 · EL CARRUSEL DE PRUEBAS — capturas 20 y 21 ════════════════════ */
.pru__cab{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--a4);margin-bottom:var(--a4);flex-wrap:wrap}
.pru__ctrl{display:flex;gap:1px}
.pru__b{width:44px;height:44px;border:1px solid var(--filete-papel);background:transparent;
  color:var(--tinta);cursor:pointer;display:grid;place-items:center;
  transition:background var(--micro) var(--c-micro),color var(--micro) var(--c-micro)}
.pru__b:hover{background:var(--tinta);color:var(--papel)}
.pru__b[disabled]{opacity:.3;cursor:default}
.pru__b:hover[disabled]{background:transparent;color:var(--tinta)}
.pru__v{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;cursor:grab;margin-inline:calc(var(--margen)*-1);
  padding-inline:var(--margen)}
.pru__v::-webkit-scrollbar{display:none}
.pru__v.agarrando{cursor:grabbing;scroll-snap-type:none}
.pru__p{display:flex;gap:1px;width:max-content;background:var(--filete-papel)}
.pru__c{background:var(--papel);width:420px;min-height:290px;padding:30px;
  scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--a3);user-select:none}
.pru__c--cifra{background:var(--azul-hondo);color:var(--tinta-clara)}
.pru__c--cifra .rotulo{color:var(--tinta-clara-2)}
.pru__c blockquote{font:700 22px/1.3 var(--palo);font-variation-settings:'wdth' 94;
  letter-spacing:-.015em;max-width:26ch}
.pru__barra{height:2px;background:var(--filete-papel);margin-top:var(--a4);position:relative}
.pru__barra i{position:absolute;inset:0 auto 0 0;background:var(--rojo-papel);
  width:100%;transform-origin:left;transform:scaleX(.2);
  transition:transform var(--medio) var(--c-out)}
@media(max-width:560px){.pru__c{width:min(84vw,420px);padding:24px}}

/* ══ B5 · EL FAQ A DOS COLUMNAS — capturas 22 y 23 ═════════════════════ */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--a5)}
.faq__izq{position:sticky;top:calc(var(--cab-alto) + 40px);align-self:start;
  display:flex;flex-direction:column;gap:var(--a3)}
.faq__d{border-top:1px solid var(--filete-azul)}
.faq__d:last-child{border-bottom:1px solid var(--filete-azul)}
.faq__d summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font:700 18px/1.35 var(--palo);font-variation-settings:'wdth' 94;letter-spacing:-.01em;
  transition:opacity var(--micro) var(--c-micro);
}
.faq__d summary::-webkit-details-marker{display:none}
.faq__d summary:hover{opacity:.7}
.faq__d summary::before,.faq__d summary::after{
  content:"";position:absolute;right:6px;top:34px;width:15px;height:1px;
  background:currentColor;transition:transform var(--medio) var(--c-out)}
.faq__d summary::after{transform:rotate(90deg)}
.faq__d[open] summary::before{transform:rotate(45deg)}
.faq__d[open] summary::after{transform:rotate(-45deg)}
.faq__r{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--medio) var(--c-out)}
.faq__d[open] .faq__r{grid-template-rows:1fr}
.faq__r>div{overflow:hidden}
.faq__r p{padding-bottom:26px;color:var(--tinta-clara-2);max-width:60ch}
@media(max-width:900px){.faq{grid-template-columns:1fr;gap:var(--a4)}
  .faq__izq{position:static}}

/* ══ B6 · LA CALCULADORA — capturas 14 y 15 ════════════════════════════ */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;
  background:var(--filete-azul);border:1px solid var(--filete-azul)}
.calc__l,.calc__r{background:var(--azul-hondo);padding:36px}
.calc__r{background:var(--azul-medio);display:flex;flex-direction:column;justify-content:space-between;gap:var(--a4)}
.calc__campo{margin-bottom:var(--a3)}
.calc__campo:last-child{margin-bottom:0}
.calc__lab{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--a2);margin-bottom:12px}
.calc__lab b{font:500 var(--t-rotulo)/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-clara-2)}
.calc__lab output{font-family:var(--mono);font-size:17px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--tinta-clara)}
.calc__campo input[type=range]{width:100%;height:2px;-webkit-appearance:none;appearance:none;
  background:var(--filete-azul-fuerte);cursor:pointer}
.calc__campo input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:18px;height:18px;background:var(--rojo-azul);border-radius:50%;cursor:grab}
.calc__campo input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;
  background:var(--rojo-azul);border-radius:50%;cursor:grab}
.calc__res{font-family:var(--mono);font-weight:500;font-size:clamp(38px,5vw,68px);
  line-height:1;letter-spacing:-.035em;color:var(--rojo-azul);font-variant-numeric:tabular-nums}
.calc__pie{font-size:12px;color:var(--tinta-clara-2);max-width:44ch}
.calc__mail{display:flex;gap:1px;margin-top:var(--a3)}
.calc__mail input[type=email]{flex:1;min-width:0;height:52px;padding-inline:16px;
  border:1px solid var(--filete-azul-fuerte);background:transparent;color:var(--tinta-clara);
  font:400 15px/1 var(--palo)}
.calc__mail input::placeholder{color:var(--tinta-clara-2);opacity:.7}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
/* Móvil: correo (199 px intrínsecos) + botón nowrap (187) no caben en una fila.
   Sumaban 387 + 72 de padding y la pista 1fr crecía a 459 px: página de 480. */
@media(max-width:560px){.calc__l,.calc__r{padding:24px}
  .calc__lab output{white-space:nowrap}
  .calc__lab b,.calc__r .rotulo{line-height:1.3}
  .calc__mail{flex-wrap:wrap}
  .calc__mail input[type=email]{flex-basis:200px}
  .calc__mail .boton{flex-grow:1}}

/* ══ B7 · LAS TRES PUERTAS — captura 13 ═══════════════════════════════ */
.puertas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filete-papel)}
.puerta{background:var(--papel);padding:30px;display:flex;flex-direction:column;
  gap:var(--a3);min-height:400px}
.puerta svg{width:100%;height:150px;color:var(--tinta-2);opacity:.9}
.puerta__n{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--rojo-papel)}
.puerta p{font-size:var(--t-menudo);color:var(--tinta-2)}
.puerta a{margin-top:auto}
@media(max-width:900px){.puertas{grid-template-columns:1fr}}

/* ══ B8 · EL BLOG ASIMÉTRICO — capturas 08–11 ══════════════════════════ */
.blog__t{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1px;
  background:var(--filete-papel);border:1px solid var(--filete-papel)}
.blog__d{background:var(--papel);display:flex;flex-direction:column;text-decoration:none}
.blog__d .ilu{width:100%;height:300px;background:var(--azul-hondo);color:var(--tinta-clara-2)}
.blog__d__tx{padding:28px;display:flex;flex-direction:column;gap:12px}
.blog__col{background:var(--papel);display:flex;flex-direction:column}
.blog__i{padding:22px 26px;border-bottom:1px solid var(--filete-papel);
  text-decoration:none;display:flex;flex-direction:column;gap:8px;flex:1;
  justify-content:center;transition:background var(--medio) var(--c-out)}
.blog__i:last-child{border-bottom:0}
.blog__i:hover{background:var(--papel-hondo)}
.blog__i h3{font-size:17px}
.blog__g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--filete-papel);border:1px solid var(--filete-papel);margin-top:1px}
.blog__correo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--a5);align-items:center}
@media(max-width:900px){.blog__t,.blog__g,.blog__correo{grid-template-columns:1fr}}

/* ══ El método · el cierre · el pie ════════════════════════════════════ */
.met{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--filete-papel);
  border:1px solid var(--filete-papel)}
.met__p{background:var(--papel-hondo);padding:26px;min-height:214px;
  display:flex;flex-direction:column;gap:12px}
.met__p b{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--rojo-papel)}
.met__p p{font-size:var(--t-menudo);color:var(--tinta-2)}
@media(max-width:900px){.met{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.met{grid-template-columns:1fr}}

.cierre{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:var(--a5);align-items:end}
.cierre__p{color:var(--tinta-clara-2);font-size:var(--t-cuerpo)}
.cierre__acc{display:flex;gap:var(--a2);flex-wrap:wrap;margin-top:var(--a3)}
@media(max-width:900px){.cierre{grid-template-columns:1fr;gap:var(--a4)}}

.pie{background:var(--azul-hondo);color:var(--tinta-clara);padding-block:var(--a4) var(--a3)}
.pie__g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--a4);
  padding-bottom:var(--a4);border-bottom:1px solid var(--filete-azul)}
.pie__g h4{font-family:var(--mono);font-size:var(--t-rotulo);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-clara-2);margin-bottom:var(--a2)}
.pie__g a{display:block;padding:5px 0;font-size:var(--t-menudo);text-decoration:none}
.pie__g a:hover{color:var(--rojo-azul)}
.pie__logo svg{width:132px;height:auto;color:var(--tinta-clara)}
.pie__b{display:flex;justify-content:space-between;gap:var(--a3);flex-wrap:wrap;
  padding-top:var(--a3);font-size:12px;color:var(--tinta-clara-2)}
@media(max-width:900px){.pie__g{grid-template-columns:1fr 1fr}}

/* ══ Portada · lo común a las cuatro ═══════════════════════════════════ */
.port{position:relative;min-height:100svh;display:flex;flex-direction:column;
  overflow:hidden;background:var(--azul-hondo);color:var(--tinta-clara)}
.port__tx{position:relative;z-index:3;margin-top:auto}
.port h1{max-width:16ch}
.port__pie{position:relative;z-index:3;display:flex;align-items:center;
  justify-content:space-between;gap:var(--a4);flex-wrap:wrap;
  padding-block:var(--a3);border-top:1px solid var(--filete-azul)}

/* ── Accesibilidad ─────────────────────────────────────────────────── */
.saltar{position:absolute;left:-9999px;top:0;z-index:99;background:var(--rojo);
  color:#fff;padding:12px 18px}
.saltar:focus{left:8px;top:8px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .js .rev{opacity:1;transform:none}
  .linea>span{transform:none!important}
}