/* ============================================================
   Dr. Alejandro Enrique Leal Contreras — sistema de diseño.
   Una sola hoja para todas las páginas del sitio: cada estilo vive aquí,
   en una clase con nombre, y por eso las páginas se ven iguales entre sí.
   ============================================================ */

/* ============================================================
   TIPOGRAFÍA — servida desde este mismo dominio.

   La guía de marca del doctor fija tres familias y el papel exacto de cada
   una: CANELA para los títulos principales, NEUE HAAS GROTESK para
   subtítulos, textos y contenido, y DIDOT para acentos y detalles de lujo,
   con moderación. Las tres son de licencia comercial de pago, así que aquí
   va un sustituto por papel, elegido por parecido de forma —no de nombre—:
     · Playfair Display → el papel de Canela: didona editorial de alto
                          contraste, con cursiva verdadera para los énfasis
                          dentro de un titular.
     · Helvetica Neue   → el papel de Neue Haas Grotesk, que es literalmente
                          su antecesora: en Mac y iPhone entra la de sistema
                          y no pesa un solo byte. Inter queda de respaldo
                          servido para Windows y Android.
     · Bodoni Moda      → el papel de Didot (didona verdadera), reservado a
                          rótulos y cifras.
   Si el doctor compra las licencias originales, se cambian estas líneas y
   nada más del sitio se toca.

   Sin llamadas a terceros: en un sitio de salud la visita no tiene por qué
   pasar por servidores ajenos para leer una letra, y de paso se ahorra una
   conexión antes del primer pintado.
   Los archivos son variables: uno cubre todos los pesos de su familia.
   `swap` = el texto se lee de inmediato con la tipografía del sistema y
   cambia sola al llegar la buena. Nunca hay un hueco en blanco.
   ============================================================ */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/tucirujanoleal/assets/fonts/inter-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('/tucirujanoleal/assets/fonts/playfair-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:italic; font-weight:400 900; font-display:swap;
  src:url('/tucirujanoleal/assets/fonts/playfair-latin-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Bodoni Moda'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/tucirujanoleal/assets/fonts/bodoni-latin.woff2') format('woff2');
}

/* ============================================================
   Tres direcciones visuales; por defecto la A.
   ============================================================ */
:root,
[data-dir="a"]{
  color-scheme:dark;
  /* A · BISTURÍ — oscura, cinematográfica, cobre.
     La que mejor sostiene "cirugía mayor": íntima, seria, de quirófano. */
  --fondo:#0F1318;
  --fondo-2:#161B22;
  --fondo-3:#1E242D;
  --tinta:#F4F1EC;
  --tinta-2:rgba(244,241,236,.74);
  --tinta-3:rgba(244,241,236,.56);
  --linea:rgba(244,241,236,.13);
  --linea-2:rgba(244,241,236,.08);
  /* Las líneas de arriba son de separación: se leen como aire, y así deben
     quedarse. El borde de un control —el que dice dónde empieza y termina un
     campo, un chip o un botón de contorno— es información, no decoración, y
     tiene que verse: este llega a 3.28:1 contra el interior del campo y 3.30:1
     contra la página. */
  --linea-control:rgba(244,241,236,.40);
  --acento:#C08552;
  --acento-lt:#DCA97A;
  /* El acento que se pinta ENCIMA de la plancha (portada y franja de video),
     que es oscura en las tres direcciones. Es un token aparte del acento
     claro: lo que se lee sobre papel y lo que se lee sobre video no pueden
     ser el mismo color. */
  --acento-plancha:#E9C099;
  --acento-dk:#9A683C;
  /* El botón sólido usa una versión más honda del mismo cobre (5.2:1) para
     que la letra blanca del CTA principal quede legible. */
  --btn-solido:#96612E;
  --btn-solido-h:#7A4E23;
  --card:rgba(244,241,236,.045);
  --card-bd:rgba(244,241,236,.11);
  --campo-bg:rgba(244,241,236,.05);
  --nav-solida:rgba(15,19,24,.93);
  --sombra-m:0 14px 40px rgba(0,0,0,.42);
  --sombra-l:0 30px 80px rgba(0,0,0,.55);
  /* LA PLANCHA: el bloque de video (portada y franja). Es oscura siempre —
     encima va texto blanco— pero su tinta es la de CADA dirección, no un
     negro prestado de la A. El filo es el remate de abajo: en la A la
     plancha muere en su propia página y no necesita ninguno. */
  --plancha:#0F1318;
  --plancha-filo:transparent;
  /* Piso de lectura: el degradado corto que va DETRÁS del bloque de texto, y
     solo ahí. Techo duro .35 (ley del 12-ago-2026): el contraste se resuelve
     con composición y tipografía, nunca apagando la imagen. Antes llegaba a
     .90 y, sumado al velo general, dejaba el video en negro. */
  --piso-lectura:linear-gradient(180deg,rgba(8,11,15,0) 0%,rgba(8,11,15,.16) 42%,rgba(8,11,15,.34) 100%);
  /* El velo general ya no oscurece la pieza: solo sostiene la barra de arriba
     y el renglón de datos de abajo, y en medio deja el video a full color. */
  --velo:linear-gradient(180deg,rgba(15,19,24,.30) 0%,rgba(15,19,24,0) 22%,rgba(15,19,24,0) 60%,rgba(15,19,24,.32) 100%);
  --velo-franja:linear-gradient(180deg,rgba(10,14,18,0) 0%,rgba(10,14,18,0) 46%,rgba(10,14,18,.30) 100%);
}
[data-dir="b"]{
  color-scheme:light;
  /* B · CÁTEDRA — clara, editorial, borgoña. Papel de revista médica.
     Autoridad académica: la de quien publica y enseña. */
  --fondo:#FAF7F2;
  --fondo-2:#F1ECE3;
  --fondo-3:#E7E0D4;
  --tinta:#1A1614;
  --tinta-2:#4A423C;
  --tinta-3:#6A605A;
  --linea:rgba(26,22,20,.13);
  --linea-2:rgba(26,22,20,.07);
  --linea-control:rgba(26,22,20,.50);   /* 3.41:1 contra el campo, 3.28:1 contra el papel */
  --acento:#8A2F3F;
  --acento-lt:#B25464;   /* 4.52:1 sobre el papel — solo para contexto claro */
  /* Sobre la plancha el borgoña oscuro es ilegible, y un rosa pálido vestiría
     de cosmético el titular de un cirujano. Este es el mismo borgoña subido a
     tinta clara, de croma corto: 4.99:1 en la zona del titular y 8.03:1 en la
     banda de datos. */
  --acento-plancha:#DDBAB4;
  --acento-dk:#6B2131;
  --btn-solido:#8A2F3F;
  --btn-solido-h:#6B2131;
  --card:#FFFFFF;
  --card-bd:rgba(26,22,20,.1);
  --campo-bg:#FFFFFF;
  --nav-solida:rgba(250,247,242,.94);
  --sombra-m:0 14px 40px rgba(26,22,20,.1);
  --sombra-l:0 30px 80px rgba(26,22,20,.15);
  /* Plancha de tinta borgoña, no el gris azulado de la A. En una revista la
     foto a sangre es una plancha impresa: se cierra con un filo de color y
     —en la franja— el papel se disuelve dentro de la imagen por arriba, en
     vez de chocar contra ella. El velo es más cerrado que el de la A porque
     aquí sí hay que garantizar el texto blanco: 8.90:1 en el titular y
     6.40:1 en el párrafo, medidos contra el peor fotograma posible (blanco). */
  --plancha:#231A1D;
  --plancha-filo:var(--acento);
  /* Piso LOCAL, solo el alto del bloque de texto de la franja (en el héroe está
     apagado: ahí el papel manda). Arranca en CERO a propósito: mientras empezaba
     en .18 dibujaba un filo horizontal de lado a lado —la caja va absoluta, así
     que un degradado que nace opaco corta el video de tajo. Eso era el "filtro
     que parece que corta el video" del 13-ago. */
  --piso-lectura:linear-gradient(180deg,rgba(28,21,23,0) 0%,rgba(28,21,23,.20) 34%,rgba(28,21,23,.44) 72%,rgba(28,21,23,.54) 100%);
  --velo:linear-gradient(180deg,rgba(35,26,29,.76) 0%,rgba(35,26,29,.58) 30%,rgba(35,26,29,.84) 60%,rgba(35,26,29,.94) 100%);
  /* 13-ago-2026, orden de Alex: FUERA el desvanecido de papel de arriba. Ese
     gesto —el papel disolviendose dentro del video— es el "difuminado" que
     odia, y sus escalones intermedios eran la banda que "parece que corta el
     video". Queda una sola rampa limpia al pie, donde vive el texto: arriba el
     material se ve entero, sin nada encima. Tampoco queda ya la mancha de
     esquina: era una tercera capa sobre el mismo video. Medido contra el peor
     fotograma posible (blanco puro), a la altura donde vive el rótulo chico:
     esta rampa más el piso local dan ~4.96:1 con texto blanco, arriba del
     4.5:1 exigido; el titular, por grande, va muy sobrado. */
  --velo-franja:linear-gradient(180deg,rgba(35,26,29,0) 0%,rgba(35,26,29,0) 54%,rgba(35,26,29,.32) 100%);
}
[data-dir="c"]{
  color-scheme:light;
  /* C · CERCANÍA — cálida, arena, oliva profundo. La más humana:
     mucha cara, mucho aire. Autoridad amable, no distante. */
  --fondo:#F6F3ED;
  --fondo-2:#EDE7DB;
  --fondo-3:#E2DACB;
  --tinta:#20211C;
  --tinta-2:#4E5147;
  --tinta-3:#5A5D53;
  --linea:rgba(32,33,28,.13);
  --linea-2:rgba(32,33,28,.07);
  --linea-control:rgba(32,33,28,.54);   /* 3.60:1 contra el campo, 3.39:1 contra la arena */
  --acento:#5B6B3E;
  /* El oliva del hover: más claro que el acento base, que es lo que se le pide
     a un hover, pero sin borrarse contra la arena — 4.65:1. */
  --acento-lt:#647343;
  --acento-plancha:#C6D49C;   /* 8.70:1 en la banda de datos */
  --acento-dk:#41502A;
  --btn-solido:#5B6B3E;
  --btn-solido-h:#41502A;
  --card:#FFFFFF;
  --card-bd:rgba(32,33,28,.1);
  --campo-bg:#FFFFFF;
  --nav-solida:rgba(246,243,237,.94);
  --sombra-m:0 14px 40px rgba(32,33,28,.1);
  --sombra-l:0 30px 80px rgba(32,33,28,.16);
  /* Misma idea que la B con la tinta oliva de esta dirección: la arena entra
     en la franja por arriba y la plancha cierra con su filo. Texto blanco a
     8.53:1 en el titular, 6.16:1 en el párrafo, contra fotograma blanco. */
  --plancha:#1F211A;
  --plancha-filo:var(--acento);
  --piso-lectura:linear-gradient(180deg,rgba(24,26,20,0) 0%,rgba(24,26,20,.20) 34%,rgba(24,26,20,.44) 72%,rgba(24,26,20,.54) 100%);
  --velo:linear-gradient(180deg,rgba(31,33,26,.76) 0%,rgba(31,33,26,.58) 30%,rgba(31,33,26,.84) 60%,rgba(31,33,26,.94) 100%);
  --velo-franja:linear-gradient(180deg,rgba(31,33,26,0) 0%,rgba(31,33,26,0) 54%,rgba(31,33,26,.32) 100%);
}

:root{
  --ancho:1180px;
  --nav-h:74px;
  --r-s:10px;
  --r-m:16px;
  --r-l:22px;
  --ease:cubic-bezier(.22,.65,.2,1);
  --sombra-s:0 2px 10px rgba(0,0,0,.06);
  --ok:#37704F;
  --alerta:#A8402F;
}
[data-dir="a"]{ --ok:#6FB08C; --alerta:#D98878; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--fondo); }
/* La barra de arriba mide 74px y es fija: sin esto, un enlace de ancla deja
   el título del destino escondido debajo de ella. */
:target,[id]{ scroll-margin-top:90px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
  color:var(--tinta);
  background:var(--fondo);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--acento); color:#fff; }

h1,h2,h3,h4{
  font-family:'Playfair Display',Georgia,serif; font-weight:500;
  line-height:1.08; margin:0; letter-spacing:-.018em;
}
h1{ font-size:clamp(2.2rem,5.8vw,4.4rem); }
h2{ font-size:clamp(1.8rem,4vw,3.05rem); }
h3{ font-size:clamp(1.22rem,2.2vw,1.68rem); line-height:1.2; }
h4{ font-size:1.02rem; line-height:1.34; font-weight:600; font-family:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif; }
p{ margin:0; }
em{ font-style:italic; }

.serif{ font-family:'Playfair Display',Georgia,serif; }
.tabular{ font-variant-numeric:tabular-nums; }

/* ---------- utilidades de composición ---------- */
.wrap{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:20px; }
@media (min-width:768px){ .wrap{ padding-inline:34px; } }
.wrap-sm{ max-width:820px; }
.wrap-xs{ max-width:640px; }

.sec{ padding-block:clamp(54px,8vw,112px); }
.sec-sm{ padding-block:clamp(38px,5vw,68px); }

.tono-2{ background:var(--fondo-2); }
.tono-3{ background:var(--fondo-3); }

.rotulo{
  /* El acento de lujo: la didone solo en los rótulos y en las cifras. Es la
     letra de más contraste del sistema y por eso se usa con cuentagotas —
     nunca en un párrafo, nunca en un titular largo. */
  font-family:'Bodoni Moda',Didot,'Bodoni 72',Georgia,serif;
  font-size:12.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; color:var(--acento); margin-bottom:14px;
  /* balanceado: con tanto tracking, en teléfono dejaba una palabra
     sola colgando en el segundo renglón */
  text-wrap:balance;
}
.sub{ color:var(--tinta-2); font-size:clamp(15px,1.5vw,17.5px); line-height:1.7; }
/* Peldano intermedio: el primer parrafo de una seccion larga no debe pesar
   igual que el resto del cuerpo, o la pagina se lee como un muro. */
.entrada{ font-size:clamp(1.06rem,1.6vw,1.28rem); line-height:1.6; color:var(--tinta-2); max-width:56ch; }
.mini{ font-size:13.5px; line-height:1.55; color:var(--tinta-3); }
.mini-2{ font-size:12px; line-height:1.5; color:var(--tinta-3); }

.grid{ display:grid; gap:22px; }
.g2{ grid-template-columns:1fr; }
.g3{ grid-template-columns:1fr; }
@media (max-width:699px){
  /* Carrusel: corta el scroll monotono y avisa que hay mas tarjetas. */
  .g3.g-tira{ display:flex; overflow-x:auto; gap:14px; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; }
  .g3.g-tira::-webkit-scrollbar{ display:none; }
  .g3.g-tira > *{ flex:0 0 86%; scroll-snap-align:start; }
}
.g4{ grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .g2{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .g3{ grid-template-columns:repeat(3,1fr); } .g4{ grid-template-columns:repeat(4,1fr); } }
/* Ocho tarjetas: 2 columnas hasta 1199 y 4 desde 1200. Nunca deja celda vacia. */
@media (min-width:1000px){ .g3.g-4a{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .g3.g-4a{ grid-template-columns:repeat(4,1fr); } }

/* ---------- aparición al hacer scroll ----------
   Todo nace VISIBLE. Es el JS quien pone .js-rev en <html> y entonces
   —y solo entonces— esconde. Sin JS, la página se ve completa. */
.rev{ transition:opacity .62s var(--ease), transform .62s var(--ease); }
.js-rev .rev{ opacity:0; transform:translateY(20px); }
.js-rev .rev.vis{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js-rev .rev{ opacity:1!important; transform:none!important; } }

/* ============================================================
   BOTONES — piso de toque 50px. Quien llega a este sitio lo hace
   con una mano, con dudas y muchas veces desde la cama.
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:14px 27px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .2s, box-shadow .25s;
  white-space:nowrap; font-family:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
}
.btn:active{ transform:translateY(1px); }
/* En teléfono un botón largo desborda los 375: ahí se parte en dos
   renglones, centrado. */
@media (max-width:560px){
  .btn{ white-space:normal; text-align:center; line-height:1.35; }
}
.btn-1{ background:var(--btn-solido); color:#fff; box-shadow:0 6px 22px rgba(0,0,0,.18); }
.btn-1:hover{ background:var(--btn-solido-h); }
.btn-2{ background:transparent; color:var(--tinta); border-color:var(--linea-control); }
.btn-2:hover{ background:var(--tinta); color:var(--fondo); border-color:var(--tinta); }
.btn-3{ background:var(--tinta); color:var(--fondo); }
.btn-3:hover{ opacity:.86; }
.btn-wa{ background:#1f8a4c; color:#fff; }
.btn-wa:hover{ background:#186c3b; }
.btn-blk{ font-size:13.5px; display:flex; width:100%; }
/* sobre foto el borde tiene que verse contra cualquier fotograma */
.sobre-foto .btn-2{
  color:#fff; border-color:rgba(255,255,255,.72);
  /* el borde de un control es informacion: sobre un cuadro claro del video la
     linea de .42 se caia a 1.5:1. Con su propia base oscura se sostiene. */
  background:rgba(8,11,15,.34);
}
.sobre-foto .btn-2:hover{ background:#fff; color:#111; border-color:#fff; }

.enlace{
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  font-weight:700; font-size:13.5px; color:var(--acento); text-decoration:none;
  border-bottom:1.5px solid transparent; transition:color .2s, border-color .2s;
}
.enlace:hover{ color:var(--acento-lt); border-color:var(--acento-lt); }

/* ---------- píldoras ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.11em;
  padding:7px 14px; border-radius:999px;
  background:var(--fondo-2); color:var(--acento); border:1px solid var(--linea-2);
}
[data-dir="a"] .pill{ background:rgba(192,133,82,.13); border-color:rgba(192,133,82,.22); }
.pill-ok{ background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok);
          border-color:color-mix(in srgb, var(--ok) 24%, transparent); }
.pill-al{ background:color-mix(in srgb, var(--alerta) 11%, transparent); color:var(--alerta);
          border-color:color-mix(in srgb, var(--alerta) 22%, transparent); }
.pill-ink{ background:var(--fondo-3); color:var(--tinta-2); }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:200;
  transition:background .4s var(--ease), box-shadow .4s, backdrop-filter .4s;
}
/* Sin scrollear, la barra flota sobre el fotograma mas claro del video y la marca
   se cae a 2.6:1. Este piso solo vive mientras la barra es transparente. */
.nav::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,15,.35) 0%,rgba(8,11,15,.18) 62%,rgba(8,11,15,0) 100%);
  transition:opacity .4s var(--ease);
}
.nav.solida::after{ opacity:0; }
.nav.solida{ background:var(--nav-solida); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--linea); }
.nav-in{
  max-width:var(--ancho); margin-inline:auto; padding-inline:20px;
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:16px;
}
@media (min-width:768px){ .nav-in{ padding-inline:34px; } }

/* padding-block: sube el área tocable del lockup a 44px en teléfono sin mover el texto */
.marca{ display:flex; flex-direction:column; justify-content:center; gap:1px; text-decoration:none; flex:none; padding-block:3px; min-height:44px; }
.marca-txt{
  font-family:'Playfair Display',Georgia,serif; font-weight:500; font-size:20px;
  letter-spacing:.02em; color:#fff; transition:color .35s; line-height:1.1;
}
.nav.solida .marca-txt{ color:var(--tinta); }
/* El piso de esta línea son 12px: por debajo deja de leerse. A 12px con este
   tracking ya no cabe junto al menú en un teléfono, así que ahí no se pone
   chiquita — se quita, y el nombre carga solo. */
.marca-sub{ display:none; }
@media (min-width:620px){
  .marca-sub{
    display:block;
    font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
    color:rgba(255,255,255,.86); transition:color .35s;
  }
}
.nav.solida .marca-sub{ color:var(--tinta-3); }

.menu{ display:none; align-items:center; gap:2px; }
@media (min-width:1080px){ .menu{ display:flex; } }
.menu a{
  padding:10px 12px; border-radius:999px; text-decoration:none;
  font-size:13.2px; font-weight:500; color:rgba(255,255,255,.94);
  transition:background .2s, color .3s; white-space:nowrap;
}
.menu a:hover{ background:rgba(255,255,255,.13); color:#fff; }
.nav.solida .menu a{ color:var(--tinta-2); }
.nav.solida .menu a:hover{ background:var(--linea-2); color:var(--tinta); }
/* con la barra transparente el menú está sobre la plancha, no sobre papel */
.menu a.act{ color:var(--acento-plancha); }
.nav.solida .menu a.act{ color:var(--acento); }

.nav-der{ display:flex; align-items:center; gap:10px; }
.nav .btn{ min-height:44px; padding:11px 19px; font-size:12px; letter-spacing:.07em; }
/* Franja donde el menú ya salió pero la pantalla todavía no da: se aprieta
   para que el botón de valoración no quede cortado contra el borde. */
@media (min-width:1080px) and (max-width:1300px){
  .menu a{ padding:10px 8px; font-size:12.6px; }
  .nav-der{ gap:7px; }
  .nav .btn{ padding:11px 12px; font-size:12px; letter-spacing:.06em; }
}
.nav-cta{ display:none; }
@media (min-width:620px){ .nav-cta{ display:inline-flex; } }

.hamb{
  display:inline-flex; align-items:center; justify-content:center; flex-direction:column;
  width:46px; height:46px; border-radius:999px; border:1.5px solid rgba(255,255,255,.78);
  background:transparent; cursor:pointer; transition:all .3s; padding:0;
}
@media (min-width:1080px){ .hamb{ display:none; } }
.nav.solida .hamb{ border-color:var(--linea); }
.hamb span{ display:block; width:17px; height:1.8px; background:#fff; border-radius:2px; transition:background .3s; }
.hamb span + span{ margin-top:4.5px; }
.nav.solida .hamb span{ background:var(--tinta); }

/* cajón móvil */
.cajon{
  position:fixed; inset:0; z-index:210; background:var(--fondo); color:var(--tinta);
  transform:translateY(-100%); transition:transform .45s var(--ease), visibility .45s;
  overflow-y:auto;
  /* El iPhone se come el último renglón detrás de la barra de gestos. */
  padding:22px 20px calc(env(safe-area-inset-bottom, 0px) + 44px);
  /* Cerrado, el cajón sigue en pantalla (solo desplazado). Sin esto sus siete
     enlaces siguen siendo alcanzables con el tabulador aunque no se vean. */
  visibility:hidden;
}
.cajon.open{ visibility:visible; }
[data-dir="b"] .cajon,[data-dir="c"] .cajon{ background:var(--fondo); }
.cajon.open{ transform:none; }
.cajon-top{ display:flex; align-items:center; justify-content:space-between; height:52px; margin-bottom:24px; }
.cajon-x{
  width:46px; height:46px; border-radius:999px; border:1.5px solid var(--linea);
  background:transparent; color:var(--tinta); font-size:21px; cursor:pointer; line-height:1;
}
.cajon nav{ display:flex; flex-direction:column; }
.cajon nav a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 2px; min-height:56px; text-decoration:none; color:var(--tinta);
  font-family:'Playfair Display',Georgia,serif; font-weight:500; font-size:20px;
  border-bottom:1px solid var(--linea-2);
}
.cajon nav a span{ font-family:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif; font-size:12.5px; color:var(--tinta-3); font-weight:500; text-align:right; }
.cajon .btn{ margin-top:26px; }

/* ============================================================
   PORTADAS
   En COLUMNA, no en fila: .hero-cont y .hero-datos son hermanos y
   con display:flex a secas se reparten el ancho como dos columnas,
   lo que estruja el titular a 375px.
   ============================================================ */
.hero{
  position:relative; min-height:92svh; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:stretch; overflow:hidden; background:var(--plancha);
}
/* El filo: el remate de abajo de la plancha. En las direcciones claras la
   plancha termina contra papel, y sin este renglón de color el corte se lee
   como un descuido. Va absoluto a propósito: como pseudo-elemento en flujo
   se volvería un hijo más del flex y empujaría el contenido. */
.hero::after,.franja::after{
  content:''; position:absolute; inset-inline:0; bottom:0; height:3px;
  background:var(--plancha-filo); z-index:4; pointer-events:none;
}
.hero-sm{ min-height:58svh; }
.hero-media{ position:absolute; inset:0; }
/* ⛔ NADA de `filter:` sobre el material (orden de Alex, 13-ago-2026): «no sé
   quién te dijo que a las imágenes les pongas así el filtro de colores, esa
   regla quítala, se ve culerísima». El video se ve como se grabó. */
.hero-media img,.hero-media video{ width:100%; height:100%; object-fit:cover; }
/* el velo es tinta, NUNCA el color de marca: un velo del color de marca
   sobre foto se ve barato. */
.hero-velo{ position:absolute; inset:0; background:var(--velo); }
.hero-cont{ position:relative; z-index:3; width:100%; padding-block:116px 54px; }
/* Degradado corto y LOCAL: solo el alto del bloque de texto, nunca la pieza
   entera. Con el techo de .35 el contraste lo terminan de sostener la sombra
   del texto y la composicion. */
.hero-cont::before,.franja-cont::before{
  content:""; position:absolute; z-index:-1; inset:-40px 0 0 0;
  background:var(--piso-lectura); pointer-events:none;
}
.hero-cont,.franja-cont{ text-shadow:0 2px 18px rgba(6,9,12,.55); }
@media (min-width:768px){ .hero-cont{ padding-block:150px 74px; } }
.hero h1{ color:#fff; max-width:17ch; text-wrap:balance; }
.hero h1 em{ color:var(--acento-plancha); font-weight:400; }
/* El rótulo vive ARRIBA del bloque, donde el piso de lectura todavía vale casi
   cero: sobre un fotograma claro el oro se lava. Se sostiene con blanco y sombra
   de texto —tratamiento del texto, no capa sobre el video. */
.hero .rotulo{
  color:#fff;
  text-shadow:0 1px 2px rgba(8,11,15,.55), 0 0 14px rgba(8,11,15,.45);
}
.hero .sub{ color:rgba(255,255,255,.8); max-width:54ch; margin-top:20px; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ---------- franja de video: un respiro entre bloques ----------
   Ancho completo, una frase encima y nada más. Sin JS se ve la
   carátula fija; el archivo solo se pide al acercarse a pantalla. */
.franja{
  position:relative; overflow:hidden; background:var(--plancha);
  min-height:clamp(340px,62vw,520px); display:flex; align-items:flex-end;
}
.franja-media{ position:absolute; inset:0; }
.franja-media img,.franja-media video{ width:100%; height:100%; object-fit:cover; }
/* El velo vertical apagaba la franja completa para poder sostener dos renglones
   que viven abajo a la izquierda. Ahora el peso va en una mancha anclada a esa
   esquina y el eje vertical se aligera: el material se ve y el texto no pierde
   piso. Es mancha de esquina y no banda horizontal a proposito — en B y C la
   franja abre con un desvanecido de papel arriba, y una banda lo ensuciaria. */
/* Una sola rampa al pie y se acabó. La mancha de esquina que vivía aquí era
   una tercera capa sobre el mismo material —velo + mancha + piso de lectura— y
   se leía como una nube sucia en media franja. */
.franja-velo{ position:absolute; inset:0; background:var(--velo-franja); }
/* `--frio` y `--claro` ya no tiñen ni contrastan el material: teñir el video
   para «igualarlo a la marca» era justo la regla que Alex mandó borrar. Lo
   único que queda es el degradado local del pie, que sostiene el texto. */
.franja--claro .franja-velo{ background:linear-gradient(180deg,rgba(10,13,17,0) 0%,rgba(10,13,17,0) 52%,rgba(10,13,17,.34) 100%); }
.franja--centro{ align-items:center; }
.franja--centro .franja-cont{ text-align:center; }
.franja--centro .franja p{ margin-inline:auto; }
/* Franja muda: un respiro visual, sin texto que leer. */
.franja--muda{ min-height:clamp(220px,34vw,380px); }
.franja--muda .franja-cont{ display:none; }
.franja-cont{ position:relative; z-index:3; width:100%; padding-block:44px; }
@media (min-width:768px){ .franja-cont{ padding-block:64px; } }
.franja p{
  color:#fff; font-family:'Playfair Display',Georgia,serif; font-weight:400;
  font-size:clamp(1.32rem,3.2vw,2.15rem); line-height:1.28;
  max-width:22ch; text-wrap:balance; margin:0;
  text-shadow:0 2px 22px rgba(6,9,12,.72);
}
.franja p em{ color:var(--acento-plancha); font-style:normal; }
.franja-pie{
  color:rgba(255,255,255,.82); margin-top:14px; font-size:.9rem;
  letter-spacing:.09em; text-transform:uppercase;
  text-shadow:0 1px 14px rgba(6,9,12,.8);
}

/* ---------- recorrido por scroll ----------
   Una sola toma que avanza cuadro a cuadro con el dedo. La sección mide
   varias pantallas de alto y adentro va una capa pegada que no se mueve:
   el material se queda quieto en pantalla y lo que cambia es el momento.
   Sin JS, sin cuadros o con "menos movimiento" puesto, se cae a la
   carátula fija con los cuatro momentos apilados y legibles. */
.recorrido{ position:relative; background:var(--plancha); }
/* Cuatro momentos ≈ una pantalla de scroll cada uno. Solo cuando el motor
   ya tomó el mando: si no, la sección mide lo que mide su contenido. */
.recorrido.rec-viva{ height:420svh; }
.rec-fija{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:flex-end;
}
.rec-lienzo{ position:absolute; inset:0; }
.rec-lienzo img,.rec-lienzo canvas{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* La carátula solo sostiene el hueco hasta que pinta el primer cuadro. */
.recorrido.rec-viva .rec-fallback{ opacity:0; }
.rec-fallback{ position:absolute; inset:0; transition:opacity .5s var(--ease); }
.rec-canvas{ position:relative; z-index:1; }
/* Techo .35 y solo abajo, que es donde vive el texto. */
.rec-velo{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,15,.22) 0%,rgba(8,11,15,0) 24%,rgba(8,11,15,0) 40%,rgba(8,11,15,.35) 76%,rgba(8,11,15,.35) 100%);
}
.rec-pasos{ position:relative; z-index:3; width:100%; padding-block:0 96px; }
@media (min-width:768px){ .rec-pasos{ padding-block:0 118px; } }
.rec-paso{
  grid-area:1/1; opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  text-shadow:0 2px 20px rgba(6,9,12,.6); pointer-events:none;
}
.rec-pasos .wrap{ display:grid; }
.rec-paso.viva{ opacity:1; transform:none; pointer-events:auto; }
.rec-paso .rotulo{ color:var(--acento-plancha); }
.rec-paso h2{ color:#fff; max-width:15ch; text-wrap:balance; margin-top:10px; }
.rec-paso .sub{ color:rgba(255,255,255,.85); max-width:44ch; margin-top:14px; }
.rec-paso .btn{ margin-top:26px; }
/* Los cuatro rótulos del recorrido: se ve dónde vas y cuánto falta. */
.rec-marcas{
  /* Arriba del control flotante de movimiento (44px de alto a 18px del piso):
     a 34px el rótulo "Preparación" quedaba cortado por la pastilla. */
  position:absolute; z-index:4; inset-inline:0; bottom:78px;
  max-width:var(--ancho); margin-inline:auto; padding-inline:20px;
  display:flex; gap:18px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.rec-marcas span{ color:rgba(255,255,255,.42); transition:color .4s var(--ease); }
.rec-marcas span.viva{ color:var(--acento-plancha); }
.rec-barra{
  position:absolute; z-index:4; inset-inline:0; bottom:0; height:3px;
  background:rgba(255,255,255,.16);
}
.rec-barra i{
  display:block; height:100%; width:0; background:var(--acento-plancha);
  transform-origin:0 50%;
}
/* Escalón de seguridad: mientras el motor no toma el mando, la sección
   se comporta como un bloque normal y todo el texto se lee de corrido. */
.recorrido:not(.rec-viva) .rec-fija{ position:relative; height:auto; min-height:72svh; }
.recorrido:not(.rec-viva) .rec-canvas{ display:none; }
.recorrido:not(.rec-viva) .rec-pasos{ padding-block:120px 96px; }
.recorrido:not(.rec-viva) .rec-pasos .wrap{ display:block; }
.recorrido:not(.rec-viva) .rec-paso{
  opacity:1; transform:none; pointer-events:auto; margin-bottom:44px;
}
.recorrido:not(.rec-viva) .rec-marcas,
.recorrido:not(.rec-viva) .rec-barra{ display:none; }
@media (prefers-reduced-motion:reduce){
  .rec-paso{ transition:none; }
}
/* En teléfono, llenar 100svh con un cuadro apaisado obliga a recortar tanto
   que la toma se ve borrosa. Se le da una banda con su propia proporción
   —queda nítida— y el texto baja a piso sólido: ahí la lectura ya no
   necesita ningún velo encima de la imagen. */
@media (max-width:700px){
  .rec-lienzo{ inset:0 0 auto 0; height:64svh; }
  .rec-velo{ inset:0 0 auto 0; height:64svh;
    background:linear-gradient(180deg,rgba(8,11,15,.22) 0%,rgba(8,11,15,0) 30%,rgba(8,11,15,0) 74%,rgba(8,11,15,.35) 100%); }
  /* El texto se pega al filo de la banda: si se dejara alineado abajo, el
     momento con botón estira la caja y los otros tres abren un hueco. */
  .rec-pasos{ position:absolute; inset:64svh 0 auto 0; padding-block:30px 0; }
  .rec-paso h2{ margin-top:8px; }
  .rec-paso .sub{ margin-top:10px; }
  .rec-paso .btn{ margin-top:18px; }
  .rec-paso{ text-shadow:none; }
  /* Cuatro rótulos no caben en un renglón de 335px: se vuelven trazos. */
  .rec-marcas{ bottom:30px; gap:8px; }
  .rec-marcas span{
    flex:1; height:2px; font-size:0; overflow:hidden;
    background:rgba(255,255,255,.26); transition:background .4s var(--ease);
  }
  .rec-marcas span.viva{ background:var(--acento-plancha); }
  .rec-barra{ display:none; }
}
/* De 620 a 700px el control de movimiento todavia flota abajo a la izquierda:
   los trazos arrancan despues de el. Por debajo de 620 se sube a la barra de
   arriba y el hueco ya no hace falta. */
@media (min-width:620px) and (max-width:700px){
  .rec-marcas{ padding-left:68px; }
}

.hero-datos{
  position:relative; z-index:3; border-top:1px solid rgba(255,255,255,.15);
  display:grid; grid-template-columns:repeat(2,1fr);
}
/* Piso de lectura LOCAL de la banda de datos. Nació el 13-ago-2026, al cambiar
   la portada por un plano con luz de mañana: el peor caso del texto claro no es
   el fotograma negro, es el CLARO ([[reference-contraste-sobre-video-el-peor-caso-es-el-fotograma-claro]]).
   Va por debajo del techo de .35 y solo cubre el alto de la banda, nunca la pieza. */
.hero-datos::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:linear-gradient(180deg,rgba(8,11,15,.18) 0%,rgba(8,11,15,.34) 100%);
  pointer-events:none;
}
@media (min-width:820px){ .hero-datos{ grid-template-columns:repeat(4,1fr); } }
.hero-datos{ padding-bottom:44px; }  /* el chip flotante mide 44 de alto y vive en esta esquina */
.hero-datos div{ padding:18px 18px 20px; border-right:1px solid rgba(255,255,255,.11); }
@media (max-width:819px){ .hero-datos div:nth-child(2n){ border-right:none; } }
.hero-datos div:last-child{ border-right:none; }
/* La banda va a sangre, pero su texto pertenece a la reticula: sin esto la
   primera columna arranca en x=18 con el logo en 164. Solo se mueve el texto. */
@media (min-width:820px){
  .hero-datos > div:nth-child(1){ padding-left:max(34px, calc((100vw - var(--ancho))/2 + 34px)); }
  .hero-datos > div:nth-child(4){ padding-right:max(34px, calc((100vw - var(--ancho))/2 + 34px)); }
}
@media (min-width:768px) and (max-width:819px){
  .hero-datos > div:nth-child(odd){ padding-left:34px; }
  .hero-datos > div:nth-child(even){ padding-right:34px; }
}
@media (max-width:767px){
  .hero-datos > div:nth-child(odd){ padding-left:20px; }
  .hero-datos > div:nth-child(even){ padding-right:20px; }
}
.hero-datos b{
  display:block; font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.32rem,2.6vw,1.95rem);
  /* va sobre la plancha, no sobre papel: manda el acento de plancha */
  color:var(--acento-plancha); font-weight:500; line-height:1.05;
}
.hero-datos span{ display:block; font-size:13px; color:rgba(255,255,255,.78); line-height:1.44; margin-top:6px; }

/* ============================================================
   TARJETAS
   ============================================================ */
.card{
  background:var(--card); border:1px solid var(--card-bd); border-radius:var(--r-l);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
  text-decoration:none; color:inherit;
}
a.card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-m); border-color:var(--acento); }
.card-foto{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--fondo-2); flex:none; }
.card-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
a.card:hover .card-foto img{ transform:scale(1.045); }
.card-cuerpo{ padding:24px 24px 26px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; flex:1; }
.card-cuerpo h3{ font-size:1.28rem; }
.card-cuerpo p{ font-size:14.5px; color:var(--tinta-2); line-height:1.62; }
.card-pie{
  margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; font-size:13px; font-weight:700; color:var(--acento);
  text-transform:uppercase; letter-spacing:.09em;
}

/* Octava celda de la rejilla de procedimientos: mismo componente, tratamiento
   invertido. Cierra la ultima fila de la portada. */
.card-cta{ background:var(--card-cta-bg,rgba(192,133,82,.09)); border-color:var(--acento); }
.card-cta .card-cuerpo{ justify-content:center; gap:14px; }
.card-cta h3{ color:var(--acento); }
.card-cta .card-pie{ margin-top:0; padding-top:0; color:var(--tinta-3); letter-spacing:.06em; }
.card-flecha{ color:var(--acento); margin-top:auto; transition:transform .3s var(--ease); }
a.card-cta:hover .card-flecha{ transform:translateX(6px); }

/* Los diplomas van a color. Estaban en escala de grises "para igualar el peso
   optico" y eso es justo lo prohibido: el oro y el granate de una constancia
   son la prueba, y apagarlos es apagar el argumento. */
.doc-sello{ background:var(--fondo-3); }
/* El mismo retrato vive en dos paginas. Aqui se cierra el encuadre y se vuelve
   sello en gris que despierta al pasar: es reaparicion buscada, no copiar y pegar.
   El pie sobra porque la pagina entera ES la credencial. */
.retrato-sello img{ object-position:50% 22%; }
.retrato-sello .retrato-pie{ display:none; }

/* Version resumida de la linea de tiempo: la portada anuncia los pasos,
   /valoracion/ los desarrolla. Nunca el mismo texto dos veces. */
.linea-corta .linea-it h3{ font-size:1.14rem; }
.linea-corta .linea-it p{ font-size:14.4px; }

.caja{ background:var(--card); border:1px solid var(--card-bd); border-radius:var(--r-m); padding:26px; }
.caja-2{ background:var(--fondo-2); border-color:transparent; }

/* Acuse: lo que ve alguien cuando su solicitud sí quedó registrada.
   Tiene que verse distinto del formulario, no ser un renglón verde perdido. */
.acuse{
  margin-top:32px; padding:34px 28px 36px; border-radius:var(--r-l);
  background:var(--card); border:1px solid var(--ok);
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
/* El atributo hidden lo pone el HTML y lo quita el JS al recibir el acuse.
   Sin esta linea, el display:flex de arriba gana y el paciente lee
   "su solicitud quedo registrada" antes de escribir su nombre. */
.acuse[hidden]{ display:none; }
.acuse svg{ color:var(--ok); flex:none; }
.acuse h3{ font-size:1.42rem; }
.acuse p{ color:var(--tinta-2); line-height:1.65; }
.acuse .mini{ font-size:12.8px; color:var(--tinta-3); }
.err-form{ color:var(--alerta); font-size:13.5px; line-height:1.5; }

/* Paso numerado: un momento del proceso. El número es tipografía, no un adorno. */
.paso{
  background:var(--card); border:1px solid var(--card-bd); border-radius:var(--r-l);
  padding:28px 26px 30px; display:flex; flex-direction:column; gap:12px;
}
.paso-num{
  font-family:'Playfair Display',Georgia,serif; font-size:2rem; line-height:1;
  color:var(--acento); font-variant-numeric:tabular-nums;
}
.paso h3{ font-size:1.24rem; }
.paso p{ font-size:14.5px; color:var(--tinta-2); line-height:1.62; }

/* ============================================================
   CREDENCIALES — el corazón de este sitio.
   Cada tarjeta corresponde a un documento que existe y que se puede
   verificar. Si no hay documento, no hay tarjeta.
   ============================================================ */
.cred{
  display:grid; grid-template-columns:1fr; gap:0;
  background:var(--card); border:1px solid var(--card-bd);
  border-radius:var(--r-l); overflow:hidden;
}
@media (min-width:720px){ .cred{ grid-template-columns:minmax(0,260px) minmax(0,1fr); } }
.cred-doc{
  position:relative; background:var(--fondo-3); min-height:210px;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
@media (min-width:720px){ .cred-doc{ min-height:100%; } }
.cred-doc img{ width:100%; height:100%; object-fit:contain; border-radius:6px; }
.cred-doc .sin-doc{
  text-align:center; font-size:12px; color:var(--tinta-3); line-height:1.5;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.cred-doc .sin-doc svg{ opacity:.4; }
.cred-cuerpo{ padding:26px 26px 28px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.cred-cuerpo h3{ font-size:1.32rem; }
.cred-emisor{ font-size:13px; font-weight:600; color:var(--acento); }
.cred-meta{
  display:flex; flex-wrap:wrap; gap:8px 20px; padding-top:12px;
  border-top:1px solid var(--linea-2); font-size:12.5px; color:var(--tinta-3);
}
.cred-meta b{ color:var(--tinta-2); font-weight:600; }

/* El espacio reservado del diploma que todavía está en trámite: se ve como un lugar
   guardado, no como un documento. Borde punteado y el marcador en bajo contraste. */
.cred-pendiente{ border-style:dashed; background:transparent; }
.cred-doc-vacio{ color:var(--tinta-3); opacity:.5; background:var(--fondo-3); }

/* ============================================================
   LÍNEA DE TIEMPO — la trayectoria
   ============================================================ */
.linea{ display:flex; flex-direction:column; }
.linea-it{
  position:relative; padding:0 0 34px 30px;
  border-left:1.5px solid var(--linea);
}
.linea-it:last-child{ border-left-color:transparent; padding-bottom:0; }
.linea-it::before{
  content:''; position:absolute; left:-6.5px; top:6px;
  width:11px; height:11px; border-radius:999px;
  background:var(--acento); box-shadow:0 0 0 4px var(--fondo);
}
.linea-anio{
  font-family:'Bodoni Moda',Didot,'Bodoni 72',Georgia,serif;
  font-size:1.12rem; font-weight:600; letter-spacing:.02em;
  color:var(--acento); line-height:1; margin-bottom:6px; display:block;
}
.linea-it h3{ font-size:1.2rem; margin-bottom:7px; }
.linea-it p{ font-size:14.5px; color:var(--tinta-2); line-height:1.62; max-width:64ch; }

/* ---------- fila de dato duro ---------- */
.datos{ display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--r-m); overflow:hidden; }
@media (min-width:640px){ .datos-2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .datos-4{ grid-template-columns:repeat(4,1fr); } }
.datos > div{ background:var(--fondo); padding:22px 22px 24px; }
.datos b{
  display:block; font-family:'Playfair Display',Georgia,serif; font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--acento); line-height:1.05;
}
.datos span{ display:block; font-size:12.5px; color:var(--tinta-3); line-height:1.5; margin-top:8px; }

/* ---------- bloque de verificación pública ---------- */
.verif{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
  padding:20px 24px; border-radius:var(--r-m);
  background:var(--fondo-2); border:1px solid var(--linea-2);
}
.verif-txt{ flex:1 1 260px; font-size:13.6px; color:var(--tinta-2); line-height:1.6; }
.verif-txt b{ color:var(--tinta); font-weight:600; }

/* ---------- listas de sí / no ---------- */
.sino{ display:grid; gap:22px; }
@media (min-width:760px){ .sino{ grid-template-columns:repeat(2,1fr); } }
/* .lista-x aparece sola en el marcado, no siempre acompañada de .lista-check:
   por eso las dos se nombran en todas las reglas de abajo, incluida la que da
   el content del ícono. */
.lista-check,.lista-x{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.lista-check li,.lista-x li{ display:flex; gap:11px; font-size:14.5px; line-height:1.58; color:var(--tinta-2); }
/* El ✓ y la ✕ se dibujan con máscara, no con el color metido dentro del SVG:
   así toman --ok/--alerta de la dirección puesta, y un ícono no se queda con
   el color de otra paleta (sobre el fondo oscuro de la A eso da 2.83:1, por
   debajo del piso de 3:1 que pide un gráfico). Son dos capas de máscara: la
   primera, un plano al 15% de alpha, pinta el disco —el redondeo ya lo da
   border-radius—; la segunda recorta el glifo, que sale opaco. */
.lista-check li::before,.lista-x li::before{
  content:''; flex:none; width:20px; height:20px; border-radius:999px; margin-top:2px;
  background-color:var(--ok);
  --glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --disco:linear-gradient(rgba(255,255,255,.15) 0 100%);
  -webkit-mask-image:var(--disco),var(--glifo);
          mask-image:var(--disco),var(--glifo);
  -webkit-mask-size:100% 100%,12px;
          mask-size:100% 100%,12px;
  -webkit-mask-position:center,center;
          mask-position:center,center;
  -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat;
}
.lista-x li::before{
  background-color:var(--alerta);
  --glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --disco:linear-gradient(rgba(255,255,255,.13) 0 100%);
  -webkit-mask-size:100% 100%,11px;
          mask-size:100% 100%,11px;
}
/* Sin máscaras (navegador viejo) el ::before quedaría como un disco sólido de
   color, que se lee como un punto de lista: aceptable, pero se le baja el
   tono para que no grite. */
@supports not ((-webkit-mask-image:none) or (mask-image:none)){
  .lista-check li::before,.lista-x li::before{ opacity:.55; }
}

/* ---------- acordeón ---------- */
.faq{ border-top:1px solid var(--linea); }
.faq details{ border-bottom:1px solid var(--linea); }
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:20px 2px; min-height:60px; cursor:pointer; list-style:none;
  font-family:'Playfair Display',Georgia,serif; font-size:1.08rem; font-weight:500; line-height:1.38;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; flex:none; font-family:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif; font-size:22px; font-weight:300;
  color:var(--acento); line-height:1; transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > div{ padding:0 2px 22px; font-size:14.6px; line-height:1.7; color:var(--tinta-2); max-width:70ch; }

/* ---------- tablas ---------- */
.tabla-env{
  overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-m);
  border:1px solid var(--linea); background:var(--card);
}
table.t{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
table.t th{
  text-align:left; padding:14px 18px; background:var(--fondo-3); color:var(--tinta);
  font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; white-space:nowrap;
}
table.t td{ padding:14px 18px; border-bottom:1px solid var(--linea-2); color:var(--tinta-2); vertical-align:top; }
table.t tr:last-child td{ border-bottom:none; }
table.t td:first-child{ font-weight:600; color:var(--tinta); }

/* ---------- formularios ---------- */
.campo{ display:flex; flex-direction:column; gap:7px; }
/* La casilla del consentimiento. Se dibuja de 22px porque de otro modo se
   come el párrafo, pero el blanco que recibe el dedo mide 44 completos: el
   recuadro se estira con relleno invisible alrededor y el margen negativo
   devuelve el bloque a su sitio para que no se vea descuadrado. */
.consiento-fila{ display:flex; gap:2px; align-items:flex-start; }
.campo.consiento-fila{ flex-direction:row; }
.consiento-caja{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:-11px 0 -11px -11px;
}
.consiento-caja input{ width:22px; height:22px; margin:0; accent-color:var(--acento); }

.campo > label{ font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-2); }
.campo label .req{ color:var(--alerta); }
/* La ciudad es opcional a proposito: el rotulo lo dice, no solo el parrafo. */
.campo label .opc{ color:var(--tinta-3); font-weight:600; letter-spacing:.04em; text-transform:none; }
.campo input,.campo select,.campo textarea{
  /* min-width:0 para que un select con opciones largas obedezca a su columna */
  min-width:0; width:100%; font-family:inherit;
  font-size:16px; /* 16px o iOS hace zoom al enfocar. No bajar. */
  color:var(--tinta); background:var(--campo-bg); border:1.5px solid var(--linea-control);
  border-radius:var(--r-s); padding:14px 16px; min-height:52px;
  text-overflow:ellipsis;
  transition:border-color .2s, box-shadow .2s;
}
.campo textarea{ min-height:118px; resize:vertical; line-height:1.6; }
.campo select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:17px; padding-right:44px;
}
/* El outline:none solo vale para el foco de raton. Con teclado manda
   :focus-visible y su anillo, que aqui le ganaba en especificidad. */
.campo input:focus:not(:focus-visible),
.campo select:focus:not(:focus-visible),
.campo textarea:focus:not(:focus-visible){ outline:none; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--acento);
  /* el halo estaba cableado a cobre: en la B el sitio es borgona y en la C oliva */
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}
.campo .err{ font-size:13.5px; color:var(--alerta); font-weight:600; display:none; }
.campo.malo input,.campo.malo select,.campo.malo textarea{ border-color:var(--alerta); }
.campo .ayuda{ font-size:13.5px; color:var(--tinta-3); }
/* `.campo input` empataba en especificidad con `.consiento-caja input` y ganaba
   por orden: le imponia width:100% y min-height:52 a la casilla, que se dibujaba
   como un recuadro vacio de 43px y sin palomita. Va despues, y dibujada a mano
   para que la palomita se vea igual en las tres direcciones. El area tocable
   sigue siendo la caja de 44 que la envuelve. */
.campo.consiento-fila .consiento-caja input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px; min-width:0; min-height:0; flex:none;
  padding:0; margin:0;
  border:1.5px solid var(--linea-control); border-radius:5px;
  background:var(--campo-bg); cursor:pointer;
  transition:border-color .2s, background .2s;
}
.campo.consiento-fila .consiento-caja input[type="checkbox"]:hover{ border-color:var(--acento); }
.campo.consiento-fila .consiento-caja input[type="checkbox"]:checked{
  background:var(--acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 5'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--acento);
}
/* el chip de pausa es fijo abajo: que ningun enlace enfocado quede debajo */
html{ scroll-padding-bottom:96px; }
a:focus-visible,button:focus-visible{ scroll-margin-bottom:96px; }
.form-grid{ display:grid; gap:18px; }
@media (min-width:640px){ .form-grid-2{ grid-template-columns:repeat(2,1fr); } .col-2{ grid-column:span 2; } }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip-sel{
  position:relative; display:inline-flex; align-items:center; min-height:44px; padding:10px 17px;
  border-radius:999px; border:1.5px solid var(--linea-control); background:var(--campo-bg);
  font-size:13.5px; font-weight:500; cursor:pointer; transition:all .2s; user-select:none;
}
.chip-sel:hover{ border-color:var(--acento); }
.chip-sel.on{ background:var(--tinta); color:var(--fondo); border-color:var(--tinta); }
.chip-sel input{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ---------- avisos ---------- */
.aviso{ display:flex; gap:13px; border-radius:var(--r-m); padding:18px 20px; font-size:13.5px; line-height:1.6; }
.aviso svg{ flex:none; margin-top:2px; }
.aviso-legal{ background:var(--fondo-2); color:var(--tinta-2); border:1px solid var(--linea-2); }
.aviso-al{ background:color-mix(in srgb, var(--alerta) 9%, transparent); color:var(--alerta);
           border:1px solid color-mix(in srgb, var(--alerta) 20%, transparent); }
.aviso-ok{ background:color-mix(in srgb, var(--ok) 10%, transparent); color:var(--ok);
           border:1px solid color-mix(in srgb, var(--ok) 20%, transparent); }
.aviso b{ color:inherit; }

/* ---------- cita ---------- */
.cita{
  font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.4rem,2.8vw,2.15rem);
  line-height:1.34; font-weight:400; font-style:italic; text-wrap:balance;
}
.cita-pie{ display:flex; align-items:center; gap:12px; margin-top:22px; font-size:13px; color:var(--tinta-3); }
.cita-pie b{ color:var(--tinta); font-weight:600; }

/* ---------- retrato con marco ---------- */
.retrato{ position:relative; border-radius:var(--r-l); overflow:hidden; background:var(--fondo-2); }
.retrato img,
.retrato video{ width:100%; height:100%; object-fit:cover; display:block; }
/* Mismo ajuste que las franjas frias: la mitad del material salio teal. */
.retrato-pie{
  position:absolute; inset-inline:0; bottom:0; padding:26px 24px 20px;
  /* Techo .35: el pie se lee por tipografia y sombra, no apagando el retrato. */
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.14) 46%,rgba(0,0,0,.35) 100%);
  text-shadow:0 1px 10px rgba(6,9,12,.7);
  color:#fff; font-size:12.6px; line-height:1.5;
}

/* ---------- video embebido ---------- */
.yt{
  position:relative; aspect-ratio:16/9; border-radius:var(--r-m); overflow:hidden;
  background:#0F1318; cursor:pointer; display:block; border:none; padding:0; width:100%;
}
.yt img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity .3s; }
.yt:hover img{ transform:scale(1.04); opacity:.86; }
.yt::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:999px; background:rgba(255,255,255,.94);
  box-shadow:0 8px 30px rgba(0,0,0,.34); transition:transform .3s var(--ease);
}
.yt::before{
  content:''; position:absolute; left:50%; top:50%; z-index:2;
  transform:translate(-42%,-50%); border-style:solid; border-width:10px 0 10px 17px;
  border-color:transparent transparent transparent #0F1318;
}
.yt:hover::after{ transform:translate(-50%,-50%) scale(1.09); }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt.playing::after,.yt.playing::before{ display:none; }

/* ---------- migas ---------- */
.migas{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--tinta-3); }
/* El pulgar necesita 44px aunque la palabra mida 22. Se los damos hacia
   arriba y abajo para no separar visualmente la miga del ">". */
.migas a{
  text-decoration:none; color:var(--tinta-3); border-bottom:1px solid transparent;
  display:inline-flex; align-items:center; min-height:44px; padding:0 2px;
}
.migas a:hover{ color:var(--acento); border-color:var(--acento); }
.migas span{ opacity:.45; }

/* ---------- banda de confianza ---------- */
/* Componentes de la banda de confianza y del mapa de /contacto/. */
.banda{ display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:center; }
.banda div{ display:flex; align-items:center; gap:9px; font-size:12.4px; font-weight:500; color:var(--tinta-2); }
.banda svg{ flex:none; color:var(--acento); }

/* ---------- mapa ---------- */
.mapa-env{
  position:relative; border-radius:var(--r-m); overflow:hidden;
  border:1px solid var(--linea); background:var(--fondo-2); aspect-ratio:16/10;
}
@media (min-width:760px){ .mapa-env{ aspect-ratio:16/7; } }
.mapa-env iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.mapa-vacio{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center; padding:30px;
  font-size:13.5px; color:var(--tinta-3); line-height:1.6;
}

/* ============================================================
   PIE
   ============================================================ */
.pie{
  background:var(--fondo-2); color:var(--tinta-2);
  padding-block:60px 32px; font-size:14px; border-top:1px solid var(--linea);
}

/* ---------- vigencia dibujada ----------
   Un dato que en texto se lee de pasada y dibujado se entiende de un golpe:
   la certificación corre hasta 2031. Sin JS la barra ya nace llena. */
.vigencia{ margin-top:34px; max-width:64ch; }
.vig-alto{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.vig-alto .rotulo{ color:var(--tinta-2); }
.vig-alto b{
  font-family:'Playfair Display',Georgia,serif; font-weight:400;
  font-size:clamp(1.6rem,4vw,2.4rem); color:var(--acento); line-height:1;
}
.vig-pista{
  margin-top:12px; height:6px; border-radius:99px;
  background:var(--linea); overflow:hidden;
}
.vig-pista i{
  display:block; height:100%; width:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--acento) 0%,var(--acento) 100%);
}
html.js-rev .vig-pista i{ width:0; transition:width 1.5s var(--ease); }
html.js-rev .vigencia.vis .vig-pista i{ width:100%; }
.vig-pies{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:10px; font-size:12.5px; color:var(--tinta-3);
}
@media (prefers-reduced-motion:reduce){
  html.js-rev .vig-pista i{ transition:none; width:100%; }
}

/* ---------- barra de conversión en teléfono ----------
   Solo existe por debajo de 700px, donde el botón de la portada ya se fue
   de pantalla. Arriba de eso la barra de navegación ya lleva el suyo. */
.cta-fija{ display:none; }
@media (max-width:700px){
  .cta-fija{
    display:block; position:fixed; z-index:190;
    inset-inline:0; bottom:0;
    padding:10px 16px calc(env(safe-area-inset-bottom, 0px) + 10px);
    background:linear-gradient(180deg,rgba(10,13,17,0) 0%,rgba(10,13,17,.86) 40%,rgba(10,13,17,.96) 100%);
    transform:translateY(120%); opacity:0; pointer-events:none;
    transition:transform .45s var(--ease), opacity .45s var(--ease);
  }
  .cta-fija.vis{ transform:none; opacity:1; pointer-events:auto; }
  .cta-fija .btn{ display:flex; width:100%; justify-content:center; min-height:48px; }
  /* que el pie no quede debajo de la barra */
  body:has(.cta-fija) .pie{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 82px); }
}
@media (prefers-reduced-motion:reduce){
  .cta-fija{ transition:none; }
}
[data-dir="a"] .pie{ background:#0B0E12; }
.pie a{ color:var(--tinta-2); text-decoration:none; transition:color .2s; }
.pie a:hover{ color:var(--acento); }
.pie-grid{ display:grid; gap:34px; }
@media (min-width:760px){ .pie-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:38px; } }
.pie h3,.pie h2{
  font-family:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif; font-size:13.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acento); margin-bottom:15px;
}
.pie ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
/* 44px, no 40: es el mínimo del pulgar */
.pie ul a{ display:flex; align-items:center; padding:7px 0; min-height:44px; }
.pie-legal{
  margin-top:44px; padding-top:26px; border-top:1px solid var(--linea);
  display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between;
  font-size:12px; color:var(--tinta-3); line-height:1.6;
}
.pie-legal p{ max-width:72ch; }
.pie-dir{ font-size:13.4px; line-height:1.7; color:var(--tinta-2); }
.pie-dir b{ color:var(--tinta); font-weight:600; }

/* la cédula, en el pie, en TODAS las páginas: es requisito legal, no adorno */
.pie-ced{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  padding:9px 15px; border-radius:999px; border:1px solid var(--linea);
  font-size:12.5px; font-weight:600; color:var(--tinta-2); letter-spacing:.02em;
}

/* ---------- redes ---------- */
.redes{ display:flex; gap:10px; margin-top:18px; }
.redes a{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:999px; border:1px solid var(--linea);
  transition:border-color .25s, background .25s, color .25s;
}
.redes a:hover{ border-color:var(--acento); color:var(--acento); background:var(--linea-2); }

/* ---------- volver ---------- */
.volver{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-size:13px; font-weight:600; color:var(--tinta-3); text-decoration:none;
}
.volver:hover{ color:var(--acento); }

/* ---------- accesibilidad ---------- */
.solo-lector{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* El "Saltar al contenido" solo sirve si aparece cuando el teclado lo enfoca. */
.solo-lector:focus{
  position:fixed; top:12px; left:12px; z-index:500;
  width:auto; height:auto; margin:0; padding:12px 18px;
  clip:auto; overflow:visible;
  background:#FFFFFF; color:#141414; border-radius:999px;
  font-size:14px; font-weight:600; text-decoration:none;
  box-shadow:0 8px 30px rgba(0,0,0,.28); outline:2px solid #141414; outline-offset:2px;
}
.oculto{ display:none!important; }
:focus-visible{ outline:2.5px solid var(--acento); outline-offset:3px; border-radius:4px; }
/* El anillo cae FUERA del control: sobre la plancha y sobre el video manda el
   acento de plancha, medido contra fotograma real (9.4:1 o mas en las tres). */
.hero :focus-visible,.franja :focus-visible,
.portada-p :focus-visible,.sobre-foto :focus-visible{ outline-color:var(--acento-plancha); }
/* Las migas van sobre el primer tercio del video. SIN scope este blanco ganaba
   tambien en el aviso de privacidad, que es fondo claro: medido 1.15:1. */
.hero .migas,.hero .migas a,
.franja .migas,.franja .migas a,
.portada-p .migas,.portada-p .migas a,
.sobre-foto .migas,.sobre-foto .migas a{ color:rgba(255,255,255,.92); }

/* ============================================================
   PARAR EL MOVIMIENTO
   El sitio se cuenta con video corriendo en bucle. Quien lo necesite quieto
   —porque marea, porque distrae, porque se lee mejor así— tiene que poder
   pararlo desde cualquier página y sin ir a buscarlo. Vive abajo a la
   izquierda: discreto, lejos del pulgar que navega, y por debajo del cajón
   del menú para no montarse sobre él.
   ============================================================ */
.mov{
  position:fixed; z-index:120;
  left:calc(env(safe-area-inset-left, 0px) + 12px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 18px);
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding:11px 16px 11px 13px;
  border-radius:999px; border:1px solid var(--linea-control);
  background:var(--nav-solida); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-family:inherit; font-size:12.5px; font-weight:600; line-height:1;
  color:var(--tinta-2); cursor:pointer;
  box-shadow:var(--sombra-m);
  transition:color .2s, border-color .2s;
}
/* Discreto por tamaño y por color, nunca a base de transparencia: un control
   desvanecido arrastra consigo su texto y su borde, y este existe justamente
   para quien necesita ayuda. En reposo el rótulo va a 7.32:1 en la dirección
   más floja y el borde a 3.30:1. */
.mov:hover,.mov:focus-visible{ color:var(--tinta); border-color:var(--acento); }
/* Dos barras cuando corre (pausar), un triángulo cuando está quieto (reanudar). */
.mov-i{
  flex:none; width:11px; height:12px;
  border-left:3.5px solid currentColor; border-right:3.5px solid currentColor;
}
.mov.quieto .mov-i{
  width:0; height:0; border:0;
  border-left:11px solid currentColor;
  border-top:6.5px solid transparent; border-bottom:6.5px solid transparent;
}
/* Flota fijo: se le hace lugar para que nunca tape la última línea del pie. */
body:has(.mov) .pie{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 76px); }
/* Vive fijo en la esquina inferior izquierda, así que siempre queda algo de
   contenido por debajo. Se resuelve con fondo propio y desenfoque —opaco— y no
   bajándole la opacidad: translúcido dejaba pasar la línea de atrás y se leían
   las dos cosas encimadas, que es justo lo que hay que evitar. */
.mov{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .mov{ transition:none; } }
/* En teléfono no hay margen lateral: cualquier control flotante en el cuerpo se
   monta sobre una línea de texto —y en contacto le recortaba la primera letra al
   botón de «Solicitar valoración»—. Encogerlo a un círculo bajó el daño pero no
   lo quitó, así que en teléfono el control se sube a la barra de arriba, que ya
   tiene su propio lugar reservado y nunca pisa contenido: queda a la izquierda
   del botón del menú, como un círculo de 44×44 (el mínimo tocable) solo con su
   glifo. El nombre accesible lo pone el guion en aria-label.
   z-index 201: por encima de la barra (200) y por debajo del cajón del menú
   abierto (210), para que al abrir el menú desaparezca con todo lo demás. */
@media (max-width:700px){
  .mov{ width:44px; padding:0; gap:0; justify-content:center; }
  .mov-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  body:has(.mov) .pie{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 70px); }
  /* Con las dos —control flotante y barra de conversión— gana la más alta. */
  body:has(.mov):has(.cta-fija) .pie{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 82px); }
}
/* Hasta 619px la barra solo lleva la marca y el botón del menú, así que el hueco
   a la izquierda del menú (20 de margen + 46 del botón + 10 de aire = 76) es
   suyo y no se disputa con nadie. De 620px en adelante ahí aparece el botón de
   valoración, y el control se queda flotando abajo como hasta ahora. */
@media (max-width:619px){
  .mov{
    z-index:201;
    top:calc((var(--nav-h) - 44px) / 2);
    bottom:auto;
    left:auto;
    right:calc(env(safe-area-inset-right, 0px) + 76px);
  }
  /* El control ya no flota sobre el pie; la barra de conversión sí. */
  body:has(.mov) .pie{ padding-bottom:32px; }
  body:has(.cta-fija) .pie{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 82px); }
}

/* ============================================================
   PRIMERA PANTALLA — direcciones B y C
   Historia de dos regaños, en orden, porque el segundo corrige al primero:

   1) 13-ago, doce capturas: «quítale ese filtro blanco». Aquí vivía un lavado
      de papel ENCIMA del video para que el titular en tinta se leyera. Tapar
      la pieza no es componerla, así que el lavado se fue.
   2) Mismo día, sobre mi arreglo: «yo nada más te dije que quitaras el filtro
      del video, pero le quitaste el filtro, el video lo hiciste más chiquito
      arriba, y el título lo bajaste abajo sin nada… el chiste es de que en el
      título esté [dentro del video]». Textual, y con razón: yo había movido la
      composición sin que nadie me lo pidiera.

   Así que el héroe vuelve a ser lo que era —video a sangre, a toda pantalla,
   con el TÍTULO ADENTRO— y lo único que cambia respecto del original es que ya
   no lleva lavado de papel encima. El titular va en blanco, como manda un texto
   sobre material, sostenido por UNA sola rampa al pie (la misma que aceptó en
   las franjas): el material se ve limpio arriba y el texto se lee abajo. Las
   cédulas cierran en su banda de papel, que fue lo único de la versión de
   papel que él dio por bueno: «a lo mejor ya abajo pueden ir las cédulas».
   ============================================================ */
/* Una sola rampa al pie, arrancando en cero para no dibujar filo. Medida contra
   el peor fotograma posible (blanco puro): 4.79:1 con texto blanco a la altura
   del párrafo chico, arriba del 4.5:1 exigido; el titular va sobradísimo. */
[data-dir="b"] .hero .hero-velo{
  background:linear-gradient(180deg,rgba(35,26,29,0) 0%,rgba(35,26,29,0) 20%,rgba(35,26,29,.62) 60%,rgba(35,26,29,.72) 100%);
}
[data-dir="c"] .hero .hero-velo{
  background:linear-gradient(180deg,rgba(31,33,26,0) 0%,rgba(31,33,26,0) 20%,rgba(31,33,26,.62) 60%,rgba(31,33,26,.72) 100%);
}
/* La rampa de arriba ya sostiene el texto. Este segundo piso local, apilado
   sobre el mismo video, era capa de más. */
[data-dir="b"] .hero .hero-cont::before,
[data-dir="c"] .hero .hero-cont::before{ background:none; }
/* El rótulo chico vive arriba, donde la rampa vale cero y el video se ve limpio:
   ahí lo único que puede sostenerlo es la TIPOGRAFÍA. Sombra pegada a la letra,
   no capa sobre el material — que es justo lo que manda la ley de Alex. */
[data-dir="b"] .hero .hero-cont,[data-dir="c"] .hero .hero-cont{
  text-shadow:0 1px 2px rgba(18,12,14,.9),0 2px 20px rgba(18,12,14,.65);
}

/* Las cédulas cierran el héroe en papel sólido: un filo limpio y se acabó, en
   vez del filo de plancha que traía el original. */
[data-dir="b"] .hero::after,[data-dir="c"] .hero::after{ display:none; }
[data-dir="b"] .hero-datos,[data-dir="c"] .hero-datos{
  background:var(--fondo); border-top:3px solid var(--acento);
}
[data-dir="b"] .hero-datos::before,
[data-dir="c"] .hero-datos::before{ background:none; }
[data-dir="b"] .hero-datos div,[data-dir="c"] .hero-datos div{ border-right-color:var(--linea); }
[data-dir="b"] .hero-datos b,[data-dir="c"] .hero-datos b{ color:var(--acento-dk); }
[data-dir="b"] .hero-datos span,[data-dir="c"] .hero-datos span{ color:var(--tinta-2); }
/* La sombra de tinta es para texto sobre video; sobre papel ensucia. */
[data-dir="b"] .hero-datos,[data-dir="c"] .hero-datos{ text-shadow:none; }

/* Con "menos movimiento" activado el cajon aparece sin desplazamiento. */
@media (prefers-reduced-motion:reduce){ .cajon{ transition:visibility .45s; } }

/* Area tactil comoda en el menu de escritorio. */
@media (min-width:960px){ .menu a{ padding-block:11px; } }

/* ============================================================
   BARRA SOBRE PAPEL
   ============================================================ */

/* Paginas sin portada de video: la barra va solida sobre papel, con la
   letra en tinta. Las tres negaciones cubren las tres formas de portada
   del sitio: `.hero`, `.portada-p` y `.sobre-foto`. */
body:not(:has(.hero)):not(:has(.portada-p)):not(:has(.sobre-foto)) .nav{
  background:var(--nav-solida); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--linea);
}
body:not(:has(.hero)):not(:has(.portada-p)):not(:has(.sobre-foto)) .nav::after{ opacity:0; }
body:not(:has(.hero)):not(:has(.portada-p)):not(:has(.sobre-foto)) .nav .marca-txt{ color:var(--tinta); }
body:not(:has(.hero)):not(:has(.portada-p)):not(:has(.sobre-foto)) .nav .marca-sub{ color:var(--tinta-3); }
body:not(:has(.hero)):not(:has(.portada-p)):not(:has(.sobre-foto)) .nav .menu a{ color:var(--tinta-2); }
body:not(:has(.hero)):not(:has(.portada-p)):not(:has(.sobre-foto)) .nav .menu a:hover{ background:var(--linea-2); color:var(--tinta); }
body:not(:has(.hero)):not(:has(.portada-p)):not(:has(.sobre-foto)) .nav .menu a.act{ color:var(--acento-dk); }
body:not(:has(.hero)):not(:has(.portada-p)):not(:has(.sobre-foto)) .nav .hamb{ border-color:var(--linea); }
body:not(:has(.hero)):not(:has(.portada-p)):not(:has(.sobre-foto)) .nav .hamb span{ background:var(--tinta); }

/* Ocho titulares dejaban una palabra sola en el ultimo renglon. El h1 ya lo
   traia; el h2 no. Donde no hay soporte degrada al comportamiento de hoy. */
h2{ text-wrap:balance; }

/* Cuatro medidas de linea pasaban de 85 caracteres. En `ch` solo encoge:
   no puede provocar desbordamiento horizontal. */
.mini{ max-width:68ch; }
.cred-cuerpo > p{ max-width:70ch; }
.verif-txt{ max-width:70ch; }