/* EL ESTILO DE LA PROPUESTA · una sola hoja para la home y las cuatro páginas del menú.
   Estaba incrustado en index.html; al nacer consejo/puertas/mananas/plataforma habría que
   copiarlo cinco veces y mantenerlo cinco veces. Aquí vive una sola vez. */
/* NOTA · 29-oct. Aquí vivía una copia vieja de las reglas de las láminas, que el bloque
   de abajo —"las cuatro láminas de la home"— ya pisaba entera. No se notaba porque ganaba
   la de abajo, pero quien editara arriba no vería ningún cambio y creería que el archivo
   está embrujado. Se quitaron solo las que el bloque de abajo repite FUERA de @media: las
   que el de abajo solo redefine para celular se quedan aquí, que es donde viven las de
   escritorio. */


/* ══════════════════════════════════════════════════════════════════════════════
   v5. Se queda la estructura de v4 —foto que manda, rótulos chicos, paneles que son
   puertas— y se corrigen cuatro cosas:
     · MÁRGENES. Todo estaba pegado al filo. La foto del hero sí llega a la orilla,
       porque es la foto; todo lo demás entra a una calle generosa.
     · EL HERO CRECE. Me pasé de chico corrigiendo el exceso anterior.
     · LA FOTO ES NEUTRA. Una terraza con las mesas puestas, sin caras y sin luces de
       fiesta: dice dónde pasa esto sin pedirle nada al que llega.
     · EL BOTÓN NO ES NARANJA. Esto no es gusto, está escrito en SISTEMA.md §1:
       "La acción NO es naranja. Los botones son blancos sobre oscuro". El naranja
       sólo tiene tres trabajos —tiempo que corre, dato duro y el filete que abre—
       y en un cuarto deja de significar. Lo había puesto en el botón: mal. Ahora
       vive donde le toca, en la fecha de arranque, que es tiempo que corre.
   ══════════════════════════════════════════════════════════════════════════════ */
:root{
  --fondo:#121519; --panel:#0E1114; --filo:#262A2F;
  --reloj:#E0613A; --reloj-txt:#E86F46;
  --humo:#C2C7CD; --rot:#9AA1AB; --rotc:#5F646B; --dim:#434850;
  --carbon:#262A2F; --grisl:#F6F7F8; --laton:#0B0D10; --reloj-min:#B04418;
  --gut:clamp(24px,4.6vw,76px);
  --ser:'Gelasio',Georgia,serif; --san:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--fondo);color:#fff;font-family:var(--san);-webkit-font-smoothing:antialiased}
img{display:block}

/* Una sola graduación para toda la fotografía: carbón cálido, negros hundidos, un resto
   de color. Elegida comparando cinco tratamientos, no a ojo. */
.gr{filter:grayscale(.5) sepia(.18) saturate(1.15) contrast(1.16) brightness(.88)}

/* EL DEGRADADO CRECE PARA QUE QUEPA EL LOGO (Nabil, 29-oct). Son la misma pieza: el velo
   es el fondo de la barra, así que su altura la manda el padding. Sube de 22/36 a 30/58 y
   el logo de 110 a 136 en su tope. El velo se alarga en la misma proporción para que el
   logo no acabe pisando la foto sin nada que lo respalde. */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:30px var(--gut) 58px;
  background:linear-gradient(to bottom,rgba(10,12,14,.93) 0%,rgba(10,12,14,.86) 46%,
    rgba(10,12,14,.52) 72%,rgba(10,12,14,0) 100%)}
.bar img{width:clamp(102px,7.8vw,136px)}
.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,36px)}
.nav a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:#EDF0F3;text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--reloj-txt)}
.nav a.ac{border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:4px}

/* ── LA HAMBURGUESA ───────────────────────────────────────────────────────────
   En teléfono las cuatro ligas se escondían y la única salida era Acceso: para ir de Las
   puertas a Las mañanas había que volver al pie. Nabil, 1-nov.
   Va sin una línea de JavaScript —<details> abre y cierra solo—, así no hay nada que se
   pueda romper ni que cargar. Las tres rayas se vuelven una X al abrir. */
.ham{display:none}
.ham>summary{list-style:none;cursor:pointer;display:block;position:relative;width:24px;height:16px}
.ham>summary::-webkit-details-marker{display:none}
.ham>summary::before,.ham>summary::after,.ham>summary>i{
  content:"";position:absolute;left:0;right:0;height:1.5px;background:#EDF0F3;
  transition:transform .2s,opacity .2s}
.ham>summary::before{top:0}
.ham>summary>i{top:7.25px;display:block}
.ham>summary::after{bottom:0}
.ham[open]>summary::before{top:7.25px;transform:rotate(45deg)}
.ham[open]>summary::after{bottom:7.25px;transform:rotate(-45deg)}
.ham[open]>summary>i{opacity:0}
.hamm{position:absolute;right:0;top:30px;min-width:216px;background:#14171C;
  border:1px solid rgba(255,255,255,.13);padding:8px 0;
  box-shadow:0 26px 64px rgba(0,0,0,.55)}

/* ══ HERO ══ La foto llega al filo. El texto, no. ═════════════════════════════ */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#0A0C0E}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,12,14,.97) 0%,rgba(10,12,14,.93) 22%,
    rgba(10,12,14,.70) 38%,rgba(10,12,14,.28) 56%,rgba(10,12,14,.08) 74%,
    rgba(10,12,14,.30) 100%)}
.hz{position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:0 var(--gut) clamp(34px,5.2vh,62px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap}

/* LA CEJA, SÓLIDA. Nabil, 3-nov: "Consejo privado de empresarios, que se vea más sólida...
   ojo, NO bold, sino sólida la letra".
   No era cuestión de peso —ya iba en 700—: era el aire. Con .22em de espaciado las letras
   flotan separadas y la línea se lee como polvo, y el gris #BEC4CB la apagaba todavía más
   sobre la foto. Se cierra el espaciado, sube un punto el cuerpo y la tinta se va a casi
   blanco: la misma letra, plantada. */
.kick{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#EAEDF0}
.kcd{color:#AEB5BD;font-weight:600}
.hero h1{margin-top:clamp(14px,2vh,22px);font-family:var(--ser);font-weight:500;
  font-size:clamp(36px,5.1vw,72px);line-height:1.04;letter-spacing:-.024em}
.hero h1 em{font-style:normal;color:#A9AFB7}
.hero .sub{margin-top:clamp(16px,2vh,22px);font-size:clamp(15px,1.2vw,18px);line-height:1.55;
  color:var(--humo);max-width:42ch}
.hero .sub b{color:#fff;font-weight:700}
/* LA BAJADA GRANDE. Nabil, 5-nov. La .sub normal está calibrada para un renglón de datos
   —"cincuenta empresarios, uno por giro"—, letra de apoyo. Desde el 5-nov el renglón de
   abajo del hero es la única frase que dice QUÉ GANAS, y a 18px se leía como pie de foto.
   A 26px le peleaba el renglón al titular ("lo creciste mucho... le pega al título"); 21
   es el punto donde es segunda voz y no disputa nada. */
.hero .sub.grande{font-size:clamp(16px,1.4vw,21px);line-height:1.45;max-width:34ch}

/* EL BOTÓN VA BLANCO (SISTEMA.md §1). */
.bt{margin-top:clamp(22px,2.8vh,30px);display:inline-flex;align-items:center;gap:11px;
  background:#fff;color:#14171C;text-decoration:none;padding:17px 28px;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  transition:background .2s,color .2s}
.bt:hover{background:var(--reloj);color:#14171C}

/* EL PRECIO EN EL HERO. Va debajo del botón y en tinta apagada: es un dato que quita fricción
   al que llegó solo, no un argumento que compita con el titular. */

/* Y EL NARANJA SE VA A LA FECHA, que es uno de sus tres trabajos: tiempo que corre. */
/* EN ESCRITORIO LA PLACA NO EXISTE: su fecha vive en la banda del arranque, a la altura de
   Carlos. En el teléfono vuelve a encenderse —las reglas de abajo le dan display— porque
   allá la banda suelta su columna de fecha. */
.placa{text-align:right;display:none}
/* EL RÓTULO VA POR CLASE Y NO POR ETIQUETA. Como `.placa div` se llevaba las versalitas,
   el espaciado y el gris, y la placa que gira metió tres divs de armazón (.plw, .pl, .pli),
   el estilo del rótulo se derramaba sobre todo: el nombre del Consejero salía EN MAYÚSCULAS
   a .22em. Con clase sólo lo toma el rótulo, que es de quien era. */
.placa .plk{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:#8D949C}
.placa b{display:block;margin-top:8px;font-family:var(--ser);font-weight:500;
  font-size:clamp(17px,1.5vw,23px);letter-spacing:-.01em;color:var(--reloj-txt)}

/* ══ EL RIEL ══ Tres puertas, ahora con calle a los lados y aire entre ellas. ══ */
/* AIRE ENTRE EL HERO Y EL RIEL (Nabil, 30-oct: "está muy pegado"). Tenía 26px de tope y la
   foto del hero termina en negro, así que los cuatro paneles parecían la continuación de la
   portada en vez de la siguiente cosa. Sube a 64. */
.riel{padding:clamp(34px,5vh,64px) var(--gut) clamp(30px,5vh,64px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px)}
/* EL ENCUADRE DE CADA LÁMINA. Las fotos son horizontales y las láminas verticales: sin
   esto el recorte parte por el centro y se come lo que importa. */
/* LA CARA ESTABA DEMASIADO GRANDE. Nabil: "no sé si es que está muy grande la foto y su
   cara". Era eso: las otras tres láminas enseñan una escena —un lugar, un teléfono, un
   salón— y ésta enseñaba una cabeza a tamaño natural, cortada por arriba. Corriendo el
   encuadre a la izquierda entra la espalda del otro, así que se lee como conversación —que
   es de lo que habla la página— y la cara baja de tamaño. Y bajando el alto, la cabeza deja
   de salir cortada. */
.pan.charla>img{object-position:38% 15%}
/* LA LÁMINA DE EL CONSEJO ENSEÑA UN SALÓN, NO DOS CARAS. Estaban los dos de smoking y
   Nabil: "parece que el consejo son ellos dos". La tarjeta que lleva a la página del
   consejo tiene que enseñar un cuarto lleno. */
/* El recorte vertical de esta lámina no tiene juego: la foto es 3:2 y la lámina 0.46, así
   que el alto entra completo y lo único que se elige es POR DÓNDE cortar a lo ancho. Al 45%
   entra el grupo del centro con la barra al fondo; más a la derecha se vacía. */
.pan>img.salon{object-position:45% 50%}
.pan{position:relative;height:clamp(420px,58vh,580px);overflow:hidden;background:var(--panel);
  display:block;text-decoration:none;color:#fff}
.pan>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s}
.pan::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,12,14,.95) 0%,rgba(10,12,14,.74) 28%,
    rgba(10,12,14,.22) 56%,rgba(10,12,14,.06) 100%)}
.pan:hover>img{transform:scale(1.045);filter:grayscale(.28) sepia(.1) saturate(1.2) contrast(1.14) brightness(1.02)}
.pz{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(22px,2vw,32px)}
.pz h3{font-size:clamp(15px,1.15vw,18px);letter-spacing:.14em;text-transform:uppercase;
  font-weight:300;line-height:1.3}
.pz h3 b{font-weight:800}
/* "VER MÁS" EN NARANJA (Nabil, 3-nov). Ahora que las láminas se quedaron sólo con el título,
   el único texto blanco de la tarjeta era el rótulo y el único naranja no existía: nada decía
   dónde se pica. El acento marca la salida; al pasar encima se va a blanco, que es el cambio
   que confirma que es un botón. 6.3:1 contra el pie de la tarjeta. */
.mas{margin-top:16px;display:inline-flex;align-items:center;gap:9px;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--reloj-txt)}
.mas i{font-style:normal;transition:transform .3s}
.pan:hover .mas i{transform:translateX(5px)}
.pan:hover .mas{color:#fff}

/* ══════════════════════════════════════════════════════════════════════════════
   EL RESTO DE LA PÁGINA. Dos reglas que la sostienen:

   · TODO ES OSCURO, PERO NO ES EL MISMO OSCURO. Las láminas alternan entre el fondo
     (#121519) y el panel (#0E1114). Como ya no hay hojas blancas que marquen el
     cambio de tema, el corte lo hacen el tono y las bandas de foto. Eso es "jugar
     con tonalidades" en vez de prender y apagar la luz.
   · LAS SECCIONES MIDEN DISTINTO. Ninguna mide una pantalla exacta. Siete láminas
     de 100vh son siete diapositivas; esto es una página.
   ══════════════════════════════════════════════════════════════════════════════ */
.sec{padding:clamp(56px,9vh,116px) var(--gut)}
.sec.alt{background:var(--panel)}
/* El filete naranja que abre una lámina: el tercero y último de los tres trabajos
   que tiene el acento (SISTEMA.md §1). */
.ceja{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--rot)}
.ceja::before{content:"";display:block;width:38px;height:2px;background:var(--reloj);margin-bottom:16px}

/* ── C · LA FRASE Y LA TIRA DE CIFRAS ───────────────────────────────────────── */
.mix{font-family:var(--san);font-size:clamp(17px,2.2vw,30px);letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;line-height:1.5;max-width:24ch}
.mix i{font-family:var(--ser);font-style:italic;font-weight:500;text-transform:none;
  letter-spacing:-.01em;font-size:1.4em;color:#fff;padding:0 .04em}
.tira{margin-top:clamp(34px,5vh,60px);padding-top:clamp(22px,3vh,32px);
  border-top:1px solid rgba(255,255,255,.14);display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,56px)}
.tira em{display:block;font-style:normal;font-family:var(--ser);font-weight:500;
  font-size:clamp(34px,4vw,58px);line-height:1;letter-spacing:-.03em;color:var(--reloj)}
.tira b{display:block;margin-top:12px;font-size:clamp(13.5px,1.1vw,15.5px);font-weight:700}
.tira span{display:block;margin-top:5px;font-size:clamp(12.5px,1vw,14px);line-height:1.5;color:var(--rot)}

/* ── D · EL MENSAJE ─────────────────────────────────────────────────────────── */
.dos{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  gap:clamp(30px,5vw,88px);align-items:center}
.cab span{display:block;font-size:10.5px;color:#9AA1AB;margin-top:2px}

/* ── E · EL REGISTRO DE PUERTAS ─────────────────────────────────────────────── */
.reg{margin-top:clamp(30px,4.4vh,52px);border-top:2px solid var(--reloj)}
.r{display:grid;grid-template-columns:auto minmax(0,1fr) clamp(220px,24vw,330px);
  gap:clamp(14px,2.4vw,38px);align-items:baseline;padding:clamp(11px,1.5vh,17px) 0;
  border-bottom:1px solid rgba(255,255,255,.11)}
.r:last-child{border-bottom:0}
.r u{text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--rot);font-variant-numeric:tabular-nums;width:2em}
.r b{font-size:clamp(14.5px,1.35vw,18px);font-weight:600;line-height:1.3}
.r i{font-style:normal;font-size:clamp(13px,1.05vw,14.5px);line-height:1.4;color:var(--humo)}

/* ── F · LA BANDA DE FOTO ─────────────────────────────────────────────────────
   Foto a sangre entre dos láminas. HOY NO LA USA NADIE: se montó el 4-nov con la
   foto de los cuatro y Nabil la bajó el mismo día —"se ve terrible con el fondo
   que quitaste"—. El componente se queda porque la banda va a volver en cuanto
   haya una foto que aguante el ancho; lo que no aguantó fue la imagen.
   SIN VELO Y SIN TEXTO ENCIMA. La versión anterior de este componente traía un
   degradado a .95 abajo y una caja .bz para poner titular sobre la foto; nadie
   la usaba y la foto que entra ya viene con el fondo apagado y sólo la gente
   iluminada. Taparla otra vez sería apagar lo único que se ve. Si algún día hay
   que escribir encima, el velo y la caja vuelven, pero no antes.
   EL RECORTE DEL TELÉFONO ES OTRO ARCHIVO. Son cuatro de pie: a 390 de ancho
   caben tres, y el cuarto no se recorta por la mitad, se va. */
.banda{line-height:0;background:#0A0C0E}
.banda>picture{display:block}
.banda img{display:block;width:100%;height:clamp(300px,34vw,560px);object-fit:cover;
  object-position:50% 34%}
@media(max-width:860px){
  .banda img{height:clamp(260px,74vw,400px);object-position:50% 22%}
}

/* ── G · LAS CLÁUSULAS ──────────────────────────────────────────────────────── */
.cls{margin-top:clamp(28px,4vh,50px);border-top:2px solid var(--reloj)}
.c{display:grid;grid-template-columns:clamp(100px,11vw,164px) minmax(0,1fr);
  gap:clamp(18px,3vw,46px);align-items:start;padding:clamp(16px,2.2vh,26px) 0;
  border-bottom:1px solid rgba(255,255,255,.11)}
.c:last-child{border-bottom:0}
.c em{font-style:normal;font-family:var(--ser);font-weight:500;
  font-size:clamp(36px,4.4vw,60px);line-height:.92;letter-spacing:-.03em;color:var(--reloj);display:block}
.c em small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rot);
  font-family:var(--san);font-weight:700;display:block;margin-top:10px}
.c b{display:block;font-size:clamp(14.5px,1.35vw,18px);font-weight:600;line-height:1.3}
.c p{margin-top:7px;font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.55;color:var(--humo);max-width:62ch}
.golpe{margin-top:clamp(26px,3.6vh,42px);font-family:var(--ser);font-weight:500;
  font-size:clamp(19px,2vw,27px);line-height:1.3;max-width:34ch}
.golpe span{display:block;font-family:var(--san);font-weight:500;font-size:clamp(13.5px,1.1vw,15px);
  line-height:1.5;color:var(--rot);margin-bottom:10px}

/* ── H · EL FUNDADOR ────────────────────────────────────────────────────────── */
.fun{display:grid;grid-template-columns:minmax(0,30fr) minmax(0,70fr);
  gap:clamp(26px,4.4vw,64px);align-items:center}
.retrato{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panel)}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.quien b.n{display:block;font-family:var(--ser);font-weight:500;
  font-size:clamp(24px,2.8vw,38px);line-height:1.1;letter-spacing:-.02em}
.rol{margin-top:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--rot)}
.dice{margin-top:clamp(16px,2.2vh,24px);padding-left:clamp(16px,1.6vw,22px);
  border-left:2px solid var(--reloj);font-family:var(--ser);font-weight:500;
  font-size:clamp(18px,1.8vw,25px);line-height:1.34;max-width:30ch}
.tres{margin-top:clamp(22px,3vh,34px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,32px)}
.t{border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(13px,1.8vh,18px)}
.t:first-child{border-top-color:var(--reloj)}
.t strong{display:block;font-size:clamp(14px,1.2vw,16px);font-weight:700}
.t p{margin-top:6px;font-size:clamp(12.5px,.98vw,13.5px);line-height:1.5;color:var(--humo)}
.t a{display:inline-block;margin-top:9px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--reloj-txt);text-decoration:none;border-bottom:1px solid rgba(232,111,70,.4);padding-bottom:2px}
.t a:hover{border-bottom-color:var(--reloj-txt)}
.inst{margin-top:clamp(26px,3.6vh,42px);padding-top:clamp(18px,2.4vh,24px);
  border-top:1px solid rgba(255,255,255,.14);display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,60px)}
.inst p{font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.6;color:var(--humo)}
.inst p b{color:#fff;font-weight:700}

/* ── I · EL CIERRE ──────────────────────────────────────────────────────────── */
.fin h2{max-width:17ch}
.rail{margin-top:clamp(38px,5.6vh,70px);padding-top:clamp(20px,2.6vh,28px);
  border-top:1px solid rgba(255,255,255,.16);display:grid;
  grid-template-columns:repeat(3,auto);justify-content:space-between;align-items:end;gap:24px}
.d span{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--rot);margin-bottom:8px}
.d strong{display:block;font-family:var(--ser);font-weight:500;font-size:clamp(16px,1.5vw,22px);letter-spacing:-.01em}
.d.t3 strong{color:var(--reloj-txt)}
.pieP{margin-top:clamp(34px,5vh,60px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.pieP img{width:90px;opacity:.9}
.pieP a{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--humo);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.26);padding-bottom:5px}
.pieP a:hover{color:#fff;border-bottom-color:var(--reloj)}

/* ══════════════════════════════════════════════════════════════════════════════
   LAS CUATRO LÁMINAS DE LA HOME, CON EL FORMATO DEL SITIO ORIGINAL.
   Lo que sobraba —las mañanas, por qué funciona, quién lo hace— se va a las páginas
   de los cuatro paneles: para eso están. La home se queda con lo que de verdad
   decide: qué compras, cómo entras, la prueba, y el paso siguiente.
   Las medidas, los colores y las rejas salen de nueva.css tal cual; el texto es el
   nuevo. Ritmo de fondos: oscuro, oscuro, BLANCO, oscuro, gris, BLANCO, pie.
   ══════════════════════════════════════════════════════════════════════════════ */
.sec{padding:clamp(58px,9vh,118px) var(--gut)}
.z{max-width:1180px;margin:0 auto}
.sec.blanca{background:#fff;color:var(--carbon)}
.sec.grisf{background:var(--grisl);color:var(--carbon)}
.sec.blanca h2,.sec.grisf h2{color:var(--carbon)}
.sec.blanca .ceja,.sec.grisf .ceja{color:var(--reloj-min)}
.sec.blanca .lead,.sec.grisf .lead{color:var(--dim)}

.ceja{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--rot)}
h2{margin-top:clamp(16px,2.2vh,24px);font-family:var(--ser);font-weight:500;
  font-size:clamp(28px,3.6vw,52px);line-height:1.05;letter-spacing:-.022em}
h2 em{font-style:normal;color:#A9AFB7}
.sec.blanca h2 em,.sec.grisf h2 em{color:var(--rotc)}
.lead{margin-top:clamp(16px,2.2vh,24px);font-size:clamp(15px,1.25vw,18px);line-height:1.6;
  color:var(--humo);max-width:52ch}
.lead b{color:#fff;font-weight:700}
.sec.blanca .lead b,.sec.grisf .lead b{color:var(--carbon)}

/* ── LA ARITMÉTICA, TAL CUAL EL ORIGINAL. Recuadro de carbón dentro de la lámina
   blanca. Las tres cifras en la MISMA línea de base: +600 mide el doble que 50 y, con
   los números pegados al techo de su celda, cada etiqueta caía a una altura distinta
   y el bloque se leía como escalera. Y las columnas no son iguales: la del inventario
   pesa más porque es la que se tiene que quedar. ── */
/* LAS CIFRAS, SOBRE BLANCO. Estaban dentro de un recuadro carbón en medio de una lámina
   blanca: una caja negra plantada a media página, que es justo lo que Nabil llamó
   "espantoso". El original no mete caja — pone las tres cifras al aire, separadas por
   filetes, y deja que el +600 cargue el peso. Sobre claro la tinta cambia: el numeral va
   en carbón y el naranja baja a --reloj-min, que es el único de los tres que lee sobre
   blanco (--reloj da 3.1 y reprueba). */
.arit{margin-top:clamp(30px,3.4vw,48px);
  padding:clamp(26px,3vw,38px) 0 0;border-top:1px solid rgba(38,42,47,.14);
  display:grid;grid-template-columns:.85fr .7fr 1.45fr;align-items:baseline;gap:clamp(14px,2vw,26px)}
.arp{text-align:center;padding:0 clamp(10px,1.8vw,28px);
  border-right:1px solid rgba(38,42,47,.12)}
.arp:last-child{border-right:0}
.arp em{display:block;font-style:normal;font-family:var(--ser);font-weight:500;
  font-size:clamp(34px,4.2vw,52px);line-height:1;color:var(--carbon)}
/* LOS RÓTULOS DE LAS CIFRAS, EN MINÚSCULAS (Nabil, 3-nov). En versalitas con .14em de
   espaciado competían con la cifra: dos piezas gritando en el mismo cuadro. En minúscula
   vuelven a ser lo que son —el pie de un número— y la cifra se queda sola arriba. Crecen un
   punto, porque la minúscula a 10.5px se lee más chica que la versalita del mismo cuerpo. */
.arp span{display:block;margin-top:10px;font-size:clamp(12px,1.05vw,14px);
  letter-spacing:0;color:var(--rotc);line-height:1.5}
.argr em{font-size:clamp(52px,7vw,88px);color:var(--reloj-min)}
.argr span{color:var(--rotc)}
/* EL PRECIO, UN PUNTO MÁS CHICO (Nabil, 30-oct). La cifra grande es la misma pieza que el
   "+600", pero ahí el número ES el argumento y aquí es el precio: a 88px gritaba. Sólo baja
   en la reja del dinero; el +600 se queda como está. */
.arit.dinero .argr em{font-size:clamp(42px,5.4vw,68px)}
/* LA NOTA RESPIRA. Nabil: "sepárala más de los costos, unos dos espacios más abajo". Pegada
   al último renglón de cifras se leía como el pie de ese renglón y no como lo que es: una
   condición que vale para los tres. En el teléfono, donde las cifras ya son una lista con
   filetes, hace falta más todavía. */
.arnota{margin-top:clamp(30px,2.8vw,36px);font-size:clamp(14.5px,1.3vw,16.5px);
  line-height:1.6;color:var(--dim);max-width:62ch}
.arnota b{color:var(--carbon);font-weight:600}

/* ── CÓMO ENTRAS. Se queda oscura: es la única lámina con una pantalla de teléfono
   adentro, y un teléfono encendido sobre papel blanco se lee como captura, no como
   mensaje. Además parte las dos blancas, que si no quedan pegadas. ── */
.dos h2{max-width:17ch}
.dos{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  gap:clamp(30px,5vw,88px);align-items:center}
/* AL REVÉS: el texto manda y la foto acompaña. El retrato pide la columna angosta, así que
   no basta con poner la imagen al final —se iría a la de 60fr y saldría enorme—: hay que
   voltear también las medidas. En celular se apilan solas y el texto queda arriba. */
.dos.volt{grid-template-columns:minmax(0,58fr) minmax(0,42fr)}
/* LA FOTO QUE ACOMPAÑA NO ES UN RETRATO. El 4:5 del retrato de Nabil mide aquí casi 600px de
   alto contra un texto de 140: la lámina se abre y queda medio metro de blanco a la izquierda.
   Cuadrada baja una quinta parte y las dos columnas se parecen. El encuadre sube al 34% para
   que las dos caras queden dentro. */
.acomp{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 34%;display:block}
.tel{justify-self:center;width:min(345px,94%);aspect-ratio:9/16;background:#05070A;
  border-radius:38px;padding:11px;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 44px 90px rgba(0,0,0,.55)}
.pant{height:100%;background:#1B1F25;border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
/* LA PANTALLA DEL TELÉFONO TRAE SU PROPIA TINTA. Antes heredaba el blanco de la lámina
   oscura donde vivía; al pasar esa lámina a blanco heredó carbón, y el carbón sobre la
   pantalla #1B1F25 daba 1.15 : 1 — el nombre del Consejero desaparecía. Un objeto oscuro
   que puede caer en cualquier fondo no puede depender de lo que hereda. */
.pant{color:#E8EBEF}
.pant b{color:#F2F4F7}
.pant em{color:#9AA1AB}
.pant .ini{color:#F2F4F7}  /* la inicial del avatar. El naranja encima del velo al 18%
   sobre la pantalla da 4.29 : 1 y a 10.5px el mínimo es 4.5: reprueba por poco. El blanco
   da 12.04 y además es como se veía cuando la lámina era oscura. */
.est{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 8px;
  color:#E8EBEF;font-size:12.5px;font-weight:700;letter-spacing:.01em}
.cab{display:flex;align-items:center;gap:10px;padding:8px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.ini{width:30px;height:30px;border-radius:50%;background:rgba(224,97,58,.18);
  border:1px solid rgba(224,97,58,.42);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--reloj-txt)}
.cab b{display:block;font-size:13.5px;font-weight:600;line-height:1.2}
.cab em{display:block;font-style:normal;font-size:10.5px;color:#9AA1AB;margin-top:2px}
/* ARRIBA, NO ABAJO. Un chat de WhatsApp con dos mensajes los apoya en el techo del hilo;
   pegados al piso dejaban media pantalla vacía y parecía un error de la maqueta. */
.hilo{flex:1;padding:16px 14px;display:flex;flex-direction:column;
  align-items:stretch;justify-content:flex-start;gap:7px}
.burb{width:100%;position:relative;background:#0E1114;border-radius:16px 16px 16px 4px;
  padding:14px 15px 24px;font-size:14px;line-height:1.5;color:#EDEFF2}
/* La que tú mandaste lleva la cola del otro lado. Antes todas tenían cola de mensaje
   entrante y palomitas de enviado a la vez. */
.burb.mia{border-radius:16px 16px 4px 16px}
.burb i{position:absolute;right:12px;bottom:7px;font-style:normal;font-size:10.5px;color:#7FB4D8}
.remate{margin-top:clamp(24px,3.2vh,34px);padding-top:clamp(18px,2.4vh,24px);
  border-top:2px solid var(--reloj);font-family:var(--ser);font-weight:500;
  font-size:clamp(19px,1.9vw,26px);line-height:1.32;max-width:32ch}
.remate span{color:#A9AFB7}
/* EL REMATE, SOBRE BLANCO. La lámina de "cómo entras" pasó de carbón a blanco (Nabil:
   "sección en blanco", como la equivalente de la home de hoy). Su filete y su primer
   renglón venían calculados contra fondo oscuro: sobre blanco el filete se borraba y
   el gris #A9AFB7 daba 2.0 : 1, ilegible. */
.sec.blanca .remate,.sec.grisf .remate{border-top-color:rgba(38,42,47,.16)}
.sec.blanca .remate span,.sec.grisf .remate span{color:var(--rotc)}

/* ── LAS PUERTAS, CON EL ACOMODO ORIGINAL. Dos columnas, filete arriba y abajo de
   cada asiento, el cargo en serif y la empresa en versalitas chicas. ── */
/* LA LÁMINA DE CARBÓN, CON SU FONDO PROPIO. Una .sec sin clase hereda el fondo del body,
   que es #121519 —casi negro, el tono del hero— y no el carbón #262A2F de la marca. Nabil
   lo cachó a ojo y tenía razón. Una lámina no debe depender de lo que haya debajo. */
.sec.carbon{background:var(--carbon);color:#F2F4F7}

/* LAS OCHO PUERTAS. Esta lista vive en dos fondos: carbón en el home y claro en las
   páginas de adentro. Los filetes y la tinta se escriben para OSCURO, que es el caso
   del home, y se vuelven a pintar para claro con .blanca/.grisf. Antes estaban en
   rgba(0,0,0,.14) a secas: sobre carbón no existían. */
.pts{margin-top:clamp(30px,3.4vw,46px);border-top:1px solid rgba(255,255,255,.10)}
.sec.blanca .pts,.sec.grisf .pts{border-top-color:rgba(0,0,0,.14)}
@media(min-width:800px){ .pts{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(44px,5vw,86px)} }
/* MÁS AIRE SOBRE CARBÓN (Nabil, 29-oct: "esa sección se ve muy cargada"). Tenía razón y
   el color era parte: la misma reja que respira sobre blanco se cierra sobre oscuro, porque
   el texto claro pesa más y los filetes se ven más duros. Sube el aire de 13 a 19 y los
   filetes bajan de .14 a .085. Sobre claro se quedan como estaban. */
.pt1{padding:19px 0;border-bottom:1px solid rgba(255,255,255,.085)}
.pt1:last-child{border-bottom:0}
.sec.blanca .pt1,.sec.grisf .pt1{padding:13px 0;border-bottom-color:rgba(0,0,0,.14)}
.sec.blanca .pt1:last-child,.sec.grisf .pt1:last-child{border-bottom:1px solid rgba(0,0,0,.14)}
.pt1 b{display:block;font-family:var(--ser);font-weight:500;font-size:clamp(18px,1.8vw,22px);line-height:1.2}
.pt1 i{display:block;margin-top:3px;font-style:normal;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rot)}
.sec.blanca .pt1 i,.sec.grisf .pt1 i{color:var(--rotc)}
.pts.bio .pt1 i,.sec.blanca .pts.bio .pt1 i,.sec.grisf .pts.bio .pt1 i{
  margin-top:7px;font-size:14px;line-height:1.6;letter-spacing:0;text-transform:none;color:var(--rotc)}
.sec.carbon .pts.bio .pt1 i{color:var(--humo)}

/* LA LÁMINA DE LO QUE TE PIDE. La única del sitio que lista obligaciones, y por eso es la
   única que no usa la reja de .pts: con ceja, titular y dos columnas como las cinco láminas
   de arriba, la página entera se leía como un pergamino (Nabil, 30-oct). Aquí el número manda
   —naranja, serif, grande— y el texto va en minúsculas, no en versalitas. */
.exig{margin-top:clamp(28px,3.2vw,44px);display:grid;grid-template-columns:1fr;
  gap:clamp(22px,2.6vw,34px)}
@media(min-width:800px){ .exig{grid-template-columns:1fr 1fr;column-gap:clamp(44px,5vw,80px)} }
.ex{display:flex;align-items:flex-start;gap:clamp(16px,1.8vw,24px)}
.ex em{flex:0 0 auto;font-style:normal;font-family:var(--ser);font-weight:500;
  font-size:clamp(40px,4.6vw,58px);line-height:.88;color:var(--reloj-min);
  min-width:1.7em;text-align:right}
.sec.carbon .ex em{color:var(--reloj)}
.ex b{display:block;font-family:var(--ser);font-weight:500;
  font-size:clamp(18px,1.8vw,22px);line-height:1.22;color:var(--carbon)}
.sec.carbon .ex b{color:#fff}
.ex i{display:block;margin-top:7px;font-style:normal;font-size:14px;line-height:1.6;
  color:var(--rotc)}
.sec.carbon .ex i{color:var(--humo)}

/* ── LA LÁMINA DEL PORQUÉ ──────────────────────────────────────────────────────
   La única del sitio con foto a sangre y texto centrado. Existe porque Nabil se perdía:
   "se ven igual todas las secciones". No es decoración —es el argumento que sostiene las
   mañanas, y necesitaba sonar distinto, no sólo decir algo distinto. */
.manif{background:var(--fondo);padding-bottom:clamp(56px,9vh,116px)}
.mban{width:100%;height:clamp(260px,42vw,560px);object-fit:cover;object-position:50% 12%}
/* La caja da para que el titular rompa en su <br> y no donde quepa: a 760 partía
   "...no te abre una / puerta." El párrafo sí se queda angosto, que es donde se lee. */
.mz{max-width:940px;margin:0 auto;padding:clamp(34px,5vh,58px) var(--gut) 0;text-align:center}
.mraya{display:block;width:44px;height:2px;background:var(--reloj);margin:0 auto}
.manif h2{margin-top:clamp(22px,3vh,32px);font-size:clamp(27px,3.4vw,44px);color:#fff}
.manif h2 em{font-style:normal;color:var(--reloj-txt)}
.manif p{max-width:640px;margin:clamp(18px,2.4vh,26px) auto 0;font-size:clamp(15px,1.25vw,18px);
  line-height:1.68;color:var(--humo)}
.manif p b{color:#fff;font-weight:600}

/* ── EL HERO DE LA PLATAFORMA ──────────────────────────────────────────────────
   Sin fotografía: la pantalla de acceso, dibujada. Es la única página que vende un
   producto y la ilustrábamos con gente en un coctel. Al estar en HTML no pixelea en
   ninguna pantalla, y el día que cambie el acceso se edita aquí. */
.hero.estudio{background:var(--carbon);padding:clamp(150px,20vh,200px) 0 clamp(44px,6vh,72px)}
.hero.estudio::after{background:
  radial-gradient(62% 78% at 79% 44%,rgba(224,97,58,.16) 0%,rgba(224,97,58,.05) 40%,rgba(224,97,58,0) 72%)}
.hero.estudio .hz{align-items:center}
/* El titular baja de cuerpo aquí y la columna crece: a 58px, "Dos decisiones que vas a
   tomar." partía antes de la última palabra, con la tarjeta al lado robándole el ancho. */
.hero.estudio .hz>div:first-child{flex:1 1 440px;max-width:760px}
.hero.estudio h1{font-size:clamp(31px,3.7vw,47px)}

.acceso{flex:0 0 auto;margin-right:clamp(0px,5vw,96px);width:min(312px,100%);background:#1E2227;
  border:1px solid rgba(255,255,255,.1);padding:30px 28px 32px;text-align:center}
.alogo{width:104px;margin:0 auto}
.araya{display:block;width:62px;height:1px;background:rgba(255,255,255,.26);margin:18px auto}
.akick{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--reloj-txt)}
.atit{margin-top:9px;font-family:var(--ser);font-weight:500;font-size:30px;
  line-height:1.1;letter-spacing:-.018em;color:#fff}
.atit em{font-style:normal;color:var(--reloj-txt)}
.asub{margin-top:13px;font-size:13px;line-height:1.5;color:var(--humo)}
.alab{margin-top:24px;text-align:left;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--rot)}
.acampo{margin-top:8px;background:#fff;border:1px solid var(--reloj-min);
  padding:13px;font-size:14px;color:#6E757E}
.abtn{margin-top:12px;background:#F2F3F5;padding:14px;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--carbon)}
@media(max-width:860px){
  .hero.estudio .hz{display:block}
  .acceso{width:100%;max-width:360px;margin-top:30px;margin-right:0}
}

/* ── LO QUE HACE SOLA ──────────────────────────────────────────────────────────
   Nabil, 30-oct: "está terrible, diséñala mejor, las letras chicas en minúscula, y mete
   la foto del panel". El panel manda y las seis quedan debajo en tres columnas angostas:
   son una lista de capacidades, no seis argumentos con el mismo peso que un titular. */
/* LA MAQUETA DE LA PLATAFORMA. Dibujada, no capturada: una captura con una cuenta regresiva
   envejece sola, y en pantalla grande se ve pixeleada. Es decorativa (aria-hidden): lo que
   dice está en el texto de la lámina, no aquí. */
.pmock{margin:clamp(28px,3.4vw,44px) auto 0;max-width:1000px;display:flex;
  background:#1A1D22;border:1px solid rgba(255,255,255,.1);overflow:hidden;
  font-size:13px;line-height:1.45}
.pm-lado{flex:0 0 168px;background:#15181C;border-right:1px solid rgba(255,255,255,.07);
  padding:22px 0 18px;display:flex;flex-direction:column}
.pm-marca{padding:0 20px;font-size:12px;letter-spacing:.3em;font-weight:600;color:#fff}
.pm-nav{margin-top:26px;display:flex;flex-direction:column}
.pm-nav span{padding:10px 20px;color:var(--rot);font-size:13px;display:flex;
  align-items:center;justify-content:space-between;gap:8px}
.pm-nav .on{color:#fff;border-left:2px solid var(--reloj);padding-left:18px;
  background:rgba(224,97,58,.07)}
.pm-nav i{font-style:normal;background:var(--reloj-min);color:#fff;font-size:10px;
  font-weight:700;border-radius:9px;padding:1px 7px}
.pm-pie{margin:auto 20px 0;border:1px solid rgba(255,255,255,.16);padding:10px 12px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--humo);display:flex;justify-content:space-between}
.pm-pie em{font-style:normal;color:var(--reloj-txt)}

.pm-cuerpo{flex:1;min-width:0;padding:20px clamp(18px,2.2vw,26px) 26px}
.pm-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;
  color:var(--rot);letter-spacing:.06em}
.pm-yo{display:flex;align-items:center;gap:7px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--humo)}
.pm-yo i{width:6px;height:6px;border-radius:50%;background:#5BBF7B;display:block}
.pm-tit{margin-top:18px;font-family:var(--ser);font-weight:500;font-size:26px;
  letter-spacing:-.016em;color:#fff}
.pm-sub{margin-top:5px;font-size:13px;color:var(--rot)}
.pm-rejilla{margin-top:20px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:820px){ .pm-rejilla{grid-template-columns:1.55fr .85fr;gap:18px} }
.pm-eti{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--rot);display:flex;justify-content:space-between;margin-bottom:10px}
.pm-eti em{font-style:normal}
.pm-tar{background:#20242A;border-left:2px solid var(--reloj);padding:14px 16px;
  margin-bottom:10px}
.pm-ceja{display:flex;justify-content:space-between;gap:10px;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--reloj-txt)}
.pm-ceja em{font-style:normal;color:var(--rot);flex:0 0 auto}
.pm-tar b{display:block;margin-top:7px;font-family:var(--ser);font-weight:500;
  font-size:17px;line-height:1.2;color:#fff}
.pm-tar p{margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--humo)}
.pm-acc{display:inline-block;margin-top:9px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--reloj-txt)}
.pm-riel{display:flex;flex-direction:column;gap:10px}
.pm-caja{background:#20242A;padding:14px 16px}
.pm-eti2{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--rot)}
.pm-caja>b{display:block;margin-top:7px;font-family:var(--ser);font-weight:500;
  font-size:17px;line-height:1.2;color:#fff}
.pm-caja>p{margin-top:4px;font-size:12px;color:var(--humo)}
.pm-cifra{display:flex;align-items:baseline;gap:12px;margin-top:12px}
.pm-cifra em{font-style:normal;font-family:var(--ser);font-weight:500;font-size:30px;
  line-height:1;color:var(--reloj);min-width:1.1em}
.pm-cifra b{display:block;font-size:12.5px;font-weight:700;color:#fff}
.pm-cifra p{font-size:11.5px;color:var(--rot)}
/* En celular el riel lateral sobra y la barra se acuesta: la maqueta es una idea, no un
   plano. Lo que no cabe, no se encoge hasta volverse ilegible — se va. */
@media(max-width:680px){
  .pmock{display:block}
  .pm-lado{display:flex;flex-direction:row;align-items:center;gap:14px;
    border-right:0;border-bottom:1px solid rgba(255,255,255,.07);padding:13px 16px}
  .pm-nav{margin:0;flex-direction:row;overflow:hidden}
  .pm-nav span{padding:0 10px;font-size:12px}
  .pm-nav .on{border-left:0;border-bottom:2px solid var(--reloj);padding:0 10px 4px;background:none}
  .pm-nav span:nth-child(n+3){display:none}
  .pm-pie{display:none}
  .pm-riel{display:none}
}
.seis{margin-top:clamp(28px,3.4vw,44px);display:grid;grid-template-columns:1fr;
  gap:0 clamp(32px,4vw,64px);border-top:1px solid rgba(255,255,255,.1)}
@media(min-width:720px){ .seis{grid-template-columns:1fr 1fr} }
@media(min-width:1040px){ .seis{grid-template-columns:1fr 1fr 1fr} }
.s1{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.085)}
.s1 b{display:block;font-family:var(--san);font-weight:700;font-size:14px;
  line-height:1.35;color:#fff}
.s1 i{display:block;margin-top:6px;font-style:normal;font-size:13.5px;line-height:1.55;
  letter-spacing:0;text-transform:none;color:var(--humo)}
.pmnota{margin-top:12px;text-align:center;font-size:11.5px;letter-spacing:.04em;color:var(--rot)}

/* ── EL CIERRE DE LAS INTERIORES ───────────────────────────────────────────────
   Mismo contenido, un tercio del peso. Con el titular a 52px competía con la lámina que
   acababa de terminar y la página parecía empezar otra vez. Un cierre se siente como
   cierre: menos aire arriba, titular chico, y el botón manda. */
/* La liga de cada empresa, dentro de su propia línea: se lee como un dato más, no como
   un botón. Naranja oscuro porque va sobre lámina clara. */
.pts.bio .pt1 i a{color:var(--reloj-min);text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(176,68,24,.3);white-space:nowrap}
.pts.bio .pt1 i a:hover{border-bottom-color:var(--reloj-min)}
.sec.carbon .pts.bio .pt1 i a{color:var(--reloj-txt);border-bottom-color:rgba(232,111,70,.35)}
.pieR{margin-top:clamp(26px,3.4vw,42px);display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:clamp(22px,4vw,56px)}
/* EL REMATE DEL PIE DE LAS PUERTAS. Sin filete arriba (Nabil, 29-oct: "la raya que está
   arriba de esto, quítala") y con tinta clara, porque la lámina del home es carbón. */
.pieR .remate{margin-top:0;padding-top:0;border-top:0;color:#F2F4F7}
.pieR .remate span{color:var(--rot)}
.sec.blanca .pieR .remate,.sec.grisf .pieR .remate{color:var(--carbon)}
.sec.blanca .pieR .remate span,.sec.grisf .pieR .remate span{color:var(--rotc)}
.nota{font-size:12.5px;line-height:1.55;color:var(--rot);max-width:30ch;text-align:right}
/* Cuando el pie se queda solo con el remate, deja de ser una reja de dos columnas. */
.pieR1{grid-template-columns:1fr}
.sec.blanca .nota,.sec.grisf .nota{color:var(--rotc)}
/* La lámina que ya no lleva ceja: sin ella, el título arranca la sección y no necesita
   el margen que lo separaba del rótulo. */
h2.sinceja{margin-top:0}

/* ── EL CIERRE, CON EL RECUADRO DEL ORIGINAL. ── */
/* EL CIERRE, CON EL FORMATO DEL SITIO ORIGINAL (Nabil, 29-oct: "deja los colores, solo el
   formato usa este, se siente más como el cierre"). Probé un panel de carbón y pesaba
   demasiado para un remate: un bloque macizo al final compite con el titular en vez de
   cerrarlo. El original lo resuelve al revés —dos filetes finos, la línea en Gelasio y un
   botón de marco—, en una columna angosta que lo hace leer como colofón. */
.wa{margin-top:44px;padding-top:28px;border-top:1px solid rgba(38,42,47,.18);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 26px;max-width:620px}
.wat b{display:block;font-family:var(--ser);font-weight:500;font-size:21px;
  line-height:1.35;color:var(--carbon)}
/* De marco y no relleno: un botón macizo aquí vuelve a pedir atención cuando el trabajo de
   esta lámina es soltarla. Sobre claro va grafito (SISTEMA.md §1), nunca naranja. */
.btg{display:inline-block;margin-top:0;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;background:#14171C;color:#FFFFFF;
  border:1px solid #14171C;padding:15px 24px;text-decoration:none;
  transition:background .2s,border-color .2s}
.btg:hover{background:var(--carbon);border-color:var(--carbon)}
@media(max-width:560px){ .wa{display:block} .btg{margin-top:18px;width:100%;text-align:center} }
/* LA FECHA, CON SU FILETE GRIS —no naranja (Nabil): el acento se queda para la cifra. */
/* LA PUERTA AL COSTO · SIN USO DESDE EL 5-NOV. Llevaba a /el-consejo#inversion, y ese día
   el precio salió del sitio público entero (Nabil: "si no hablas con nadie previo y ves
   costo, jamás llamas... en Luca no publicamos precio"). La regla se queda porque la clase
   puede volver a servir y borrarla no gana nada; lo que no puede volver es el enlace. */
.inver{display:inline-block;margin-top:26px;font-size:13px;letter-spacing:.01em;
  color:var(--carbon);text-decoration:none;border-bottom:1px solid rgba(38,42,47,.22);
  padding-bottom:3px;font-weight:600}
.inver span{color:#5C636B;font-weight:400}
.inver i{font-style:normal;color:var(--reloj-min)}
.inver:hover{border-bottom-color:var(--reloj-min)}

.fecha{margin-top:46px;max-width:620px}
.fecha i{display:block;font-style:normal;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;color:var(--rotc)}
.fecha b{display:block;margin-top:9px;font-family:var(--ser);font-weight:500;
  font-size:clamp(22px,2.4vw,34px);letter-spacing:-.016em;color:var(--reloj-min)}

/* ── EL PIE DEL ORIGINAL. Nabil: "los footers evocan que es real, mientras más datos,
   mejor". Mismo fondo, misma reja de cuatro. ── */
/* LA ESFERA DEL PIE (Nabil, 30-oct: "me falta color... es la esfera, la que gira").
   Primero puse un resplandor radial y era eso justamente lo que no era: "una bola de color
   ahí random". La esfera es la pieza que ya existe —bandas que orbitan y se cruzan, en
   blanco y naranja— y vive en /orbe.js. Va debajo del lema, en la columna de la marca.
   mix-blend-mode screen: el canvas es negro donde no hay banda, y sobre el pie oscuro eso
   lo borra. Sin blend se vería un cuadro negro. */
.pie{position:relative;background:#1E2227;
  border-top:1px solid rgba(255,255,255,.1);padding:clamp(36px,4.2vw,52px) var(--gut) 22px}
.pieorbe{display:block;pointer-events:none;margin:14px 0 0 -12px;
  width:clamp(104px,14vw,142px);aspect-ratio:1;mix-blend-mode:screen}
.piegrid{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:760px){ .piegrid{grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:34px} }
.pielogo{width:140px}
/* EL LEMA DEL PIE, EN GRIS (Nabil, 29-oct): "no en naranja". El pie no es un lugar donde
   haya que actuar, y el acento ahí solo competía con el logo. */
.pielema{margin-top:16px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--humo)}
.piedir{margin-top:16px;font-size:14px;line-height:1.75;color:var(--humo)}
.piedir:not(.ciudad){color:var(--humo);font-weight:400}
/* El domicilio, al mismo tamaño que el resto del pie (Nabil, 30-oct: "¿tiene el mismo
   tamaño de letra que los otros textos?" — no lo tenía, iba a 12.5 contra 14). La jerarquía
   la hace el color, no el tamaño: un punto más gris que la ciudad y ya. 6.1:1 sobre el pie. */
.piedom{margin-top:18px;font-size:14px;line-height:1.65;color:var(--rot)}
.piek{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:#fff;margin-bottom:12px}
.pie a{display:block;font-size:14px;line-height:1.5;color:var(--humo);padding:6px 0;text-decoration:none}
.pie a:hover{color:var(--reloj-txt)}
.piefin{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  margin-top:clamp(22px,2.6vw,32px);padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px;color:var(--rot)}

@media(max-width:860px){
  :root{--gut:22px}
  .bar{padding:15px var(--gut) 30px}
  .nav a{font-size:9.5px;letter-spacing:.12em}
  .nav a:not(.ac){display:none}
  .ham{display:block;position:relative}
  /* Las ligas del menú SON .nav a, así que la regla de arriba se las comía. Misma
     especificidad: gana ésta por ir después. */
  .nav .hamm a{display:block;padding:13px 22px;font-size:10.5px;letter-spacing:.16em;
    color:var(--humo)}
  .nav .hamm a:hover{color:var(--reloj-txt)}
  .hero>img{object-position:56% 54%}
  /* La ceja se parte en dos renglones a 430px y ensucia el arranque. En el teléfono
     sobra decir la ciudad: ya está en el pie y en El consejo. */
  .kcd{display:none}
  .hz{flex-direction:column;align-items:stretch;padding-bottom:34px}
  .hero h1{font-size:clamp(32px,8.6vw,44px)}
  .hero .sub{max-width:none}
  .bt{align-self:flex-start}
  .placa{text-align:left;display:flex;align-items:baseline;gap:13px;order:2;margin-top:22px;
    padding-top:18px;border-top:1px solid rgba(255,255,255,.16);width:100%}
  .placa .plk{color:#A6ACB4}
  .placa b{margin-top:0;font-size:17px}
  /* EL DINERO NO CABE EN TRES COLUMNAS. "$38,000 · $10,000 · $158,000" a 34px son 450px
     de cifras en una pantalla de 430, y la tercera se salía del cuadro. Se vuelve lista:
     la cifra y su etiqueta en el mismo renglón, una debajo de otra. Las otras aritméticas
     (50 · 1 · +600, 5 · 9 · 12) no se tocan: ésas sí caben y se ven bien en tres. */
  /* LAS ETIQUETAS SE ALINEAN ENTRE SÍ. Nabil: "lo que dice a un lado de los costos,
     alinéalos, se ve mal". Cada renglón era su propia caja flex, así que la etiqueta
     arrancaba pegada a su cifra y, como $38,000 y $158,000 no miden lo mismo, las tres
     empezaban en tres sitios distintos.
     Ahora la rejilla es UNA para los tres renglones —cada .arp se vuelve display:contents y
     sus dos piezas caen en las columnas de la madre—, así que la columna de la cifra mide lo
     que mide la más ancha y las etiquetas arrancan todas en la misma vertical. Sin número
     mágico: max-content lo calcula el navegador.
     El hueco entre columnas va de relleno y no de gap, o el filete de arriba se partiría
     en dos justo en medio del renglón. */
  /* align-items:stretch EXPLÍCITO: la regla base de .arit pone `baseline`, y con baseline
     cada celda se encoge a su contenido y se sienta en su línea, así que el filete de arriba
     salía escalonado —una rayita a una altura en la columna de la cifra y otra más abajo en
     la de la etiqueta—. Se ve al renderizar, no al leer la regla de aquí. */
  .arit.dinero{grid-template-columns:max-content minmax(0,1fr);gap:0;align-items:stretch}
  .arit.dinero .arp{display:contents}
  /* Las dos celdas se ESTIRAN a la altura del renglón —sin align-items y sin align-self—,
     que es lo único que mantiene el filete de arriba en una sola línea recta: en cuanto una
     de las dos se encoge a su contenido, el filete sale escalonado. El texto se acomoda
     DENTRO de la celda, con flex, no moviendo la celda. */
  .arit.dinero .arp em,.arit.dinero .arp span{padding:17px 0;
    border-top:1px solid rgba(38,42,47,.12);display:flex;flex-direction:column;
    justify-content:center;text-align:left}
  .arit.dinero .arp:first-child em,.arit.dinero .arp:first-child span{border-top:0;padding-top:0}
  .arit.dinero .arp em{font-size:34px}
  .arit.dinero .argr em{font-size:40px}
  .arit.dinero .arp span{margin-top:0;padding-left:18px}
  .arnota{margin-top:48px}
  .riel{grid-template-columns:1fr;gap:14px}
  .pan{height:clamp(300px,46vh,400px)}

  .mix{font-size:clamp(16px,5vw,21px);max-width:none;letter-spacing:.09em}
  .tira{grid-template-columns:1fr;gap:0}
  .tira>div{padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
  .tira>div:first-child{border-top:0;padding-top:0}
  .tira em{font-size:36px}
  .dos,.dos.volt{grid-template-columns:1fr;gap:26px}
  .tel{width:min(268px,74%);aspect-ratio:9/14}
  .remate{max-width:none;font-size:19px}
  /* El asiento se parte en dos: a tres columnas en 390px el cargo y la empresa se
     pelean el mismo renglón y los dos acaban en cuatro líneas. */
  .r{grid-template-columns:auto minmax(0,1fr);gap:4px 13px;padding:14px 0}
  .r b,.r i{grid-column:2}
  .pieR{grid-template-columns:1fr;gap:18px}
  .nota{text-align:left;max-width:none}
  .c{grid-template-columns:1fr;gap:10px;padding:19px 0}
  .c em{font-size:38px;display:flex;align-items:baseline;gap:11px}
  .c em small{margin-top:0;font-size:11.5px}
  .c p{max-width:none}
  .golpe{font-size:20px;max-width:none}
  .fun{grid-template-columns:1fr;gap:22px}
  /* Apagar el mínimo es obligatorio al cambiar la proporción: con los dos vivos el
     navegador saca el ANCHO del alto mínimo y la foto se sale de la pantalla. */
  .retrato{aspect-ratio:1/1;min-height:0}
  .dice{max-width:none;font-size:19px}
  .tres{grid-template-columns:1fr;gap:0}
  .t{padding:15px 0}
  .inst{grid-template-columns:1fr;gap:14px}
  .rail{grid-template-columns:1fr;justify-content:start;gap:17px}
  .pieP{margin-top:28px}
}


/* LA CIUDAD APARECE DOS VECES EN EL PIE Y NO VALEN LO MISMO (Nabil, 29-oct). La de la
   columna de contacto es un dato de dirección y va en blanco, junto a su correo. La de
   hasta abajo, debajo de la raya, es la firma del consejo: ésa sí en naranja, porque es
   el único dato del pie que cambia cuando abran Monterrey o Guadalajara. */
.pie .piedir.ciudad{color:#FFFFFF;font-weight:400}
.pie .piefin .ciudad{color:var(--reloj-txt);font-weight:400}

/* UNA CEJA SIN SU FILETE (Nabil, 29-oct: "la raya de arriba de cómo entras, quítala"). El
   rótulo se queda porque nombra la lámina; lo que sobraba era el acento repetido en cada
   una. El filete naranja queda para las que de verdad abren un tramo. */
.ceja.sinraya::before{display:none}
.ceja.sinraya{margin-top:0}


/* ══ LAS TRES CLASES QUE LAS PÁGINAS DE ADENTRO USABAN Y LA HOJA NO TENÍA ══════════════
   Las escribí al armar las páginas dando por hecho que existían. No rompían nada visible
   en consola —una clase inexistente no avisa— pero dejaban el retrato a tamaño natural
   (1300×1625, empujando la lámina a 1746px) y la pestaña activa sin marcar. */

/* EL HERO DE ADENTRO NO ES EL DEL HOME. El del home ocupa la pantalla entera porque su
   trabajo es detener a un desconocido. Aquí ya entró y viene por un tema: una portada de
   pantalla completa lo obliga a hacer scroll para empezar a leer lo que vino a buscar. */
.hero.hint{height:auto;min-height:0;padding:clamp(150px,22vh,210px) 0 clamp(44px,6vh,72px)}
.hero.hint .hz{position:relative;left:auto;right:auto;bottom:auto;padding:0 var(--gut)}
/* RELATIVE Y NO STATIC: el z-index solo cuenta en elementos posicionados. Con static, el
   .hz perdía su zíndice 4 y el velo del hero —que sí está posicionado— se pintaba encima
   del titular. El texto estaba ahí, blanco y medible; simplemente quedaba debajo. */
.hero.hint h1{font-size:clamp(34px,4.6vw,58px)}
/* SU PROPIO VELO. El del home va de oscuro abajo a limpio arriba, porque ahí el texto se
   apoya en el borde inferior de una portada de pantalla completa. Aquí el hero mide un
   tercio y el texto cae a media altura: con ese mismo velo queda sobre la parte clara de
   la foto y se pierde. Éste es parejo y más cerrado —la foto es atmósfera, no contenido. */
/* EL VELO DE ADENTRO BAJA. Nabil, 4-nov: "las fotos de los heros de las interiores no se
   ven en la computadora". Y no se veían: este velo cerraba al 94% por la izquierda, al 50%
   hasta en el filo derecho, y encima le sumaba una capa de arriba a abajo del 76% al 52%.
   Multiplicadas, en el lado derecho quedaba casi opaco —la foto era un rumor—.
   Baja de las dos: la izquierda sigue cerrada porque ahí vive el texto, y el lado derecho
   se abre de verdad. Medido en las tres páginas con foto. */
.hero.hint::after{background:
  linear-gradient(to right,rgba(8,10,12,.90) 0%,rgba(8,10,12,.80) 44%,rgba(8,10,12,.38) 74%,rgba(8,10,12,.14) 100%),
  linear-gradient(to bottom,rgba(8,10,12,.50) 0%,rgba(8,10,12,.20) 42%,rgba(8,10,12,.42) 100%)}

/* LAS TERRAZAS VAN A COLOR, y son la excepción a la graduación de carbón. Nabil, 30-oct:
   "me falta color". Son las dos fotos con atardecer —el Monumento a la Revolución en la
   portada, la azotea del Centro en Las puertas— y el tratamiento que sirve para la
   fotografía de gente se las comía enteras. La misma regla que ya rige en el deck: las
   fotos de terraza no se matan.
   El velo se abre hacia la derecha; el texto se queda sobre la zona cerrada de la izquierda
   y ahí sigue midiendo por encima de 4.5:1.
   EL PADDING ES DEL HERO DE ADENTRO, no de la portada: en la portada el .hz va absoluto y
   resuelve contra la caja de relleno, así que un padding aquí le levantaría el titular del
   filo inferior unos 80px. Por eso cuelga de .hint y no de .terraza a secas. */
.hero.hint.terraza{padding:clamp(172px,26vh,252px) 0 clamp(54px,7vh,86px)}
.hero.terraza>img{filter:grayscale(.12) sepia(.05) saturate(1.22) contrast(1.05) brightness(.9)}

/* ── LA PORTADA ──────────────────────────────────────────────────────────────
   LA FOTO ES DEL CLUB Y SALE NABIL. Se probó un corro de cinco conversando, técnicamente
   mejor —candente, luz de ventana, nadie posando—, y Nabil la bajó: "es fría y parece de
   stock, se ve aburrida". Ésta pesa por lo que no se ve en el pixel: es suya, sale él, y al
   lado está Juan Pablo Murguía. El nivel de la gente es el argumento.
   EL MURO DE PATROCINADORES SE APAGA CON SOMBRA, NO CON DESENFOQUE. Detrás había cuarenta
   logos de otras marcas y varios se leían. Se probó una profundidad de campo falsa y Nabil
   la bajó: "no me gusta con el desenfoque". Lo que lleva ahora es una viñeta —cierra arriba
   y en las orillas, que es donde están los logos— con una elipse que PROTEGE las caras de
   esa misma sombra. Vive en el archivo, no en CSS.
   El grado es el mismo de la casa: curva en S, piso de negro, luces cálidas y sombras frías.
   EL ENCUADRE SE CORRE A LA DERECHA DEL CUADRO (x alto) porque al centro se cortaba el
   hombro del de la orilla. La holgura total es de 116px a 1200 de ancho: la foto es 16:9 y
   el hero no, así que algo se pierde; lo que se elige es por dónde. */
/* A LA FOTO SE LE AÑADIÓ CIELO (110px arriba, estirando el fondo que ya iba desenfocado):
   sin eso las cabezas salían debajo de la barra. De paso la proporción se acerca a la del
   hero y a 1200 de ancho ya no se corta a nadie por los lados. */
.hero.club>picture{position:absolute;inset:0;z-index:0;display:block}
.hero.club img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 50%}
.hero.club::after{background:
  linear-gradient(to top,rgba(8,10,12,.95) 0%,rgba(8,10,12,.92) 16%,rgba(8,10,12,.86) 32%,
    rgba(8,10,12,.70) 48%,rgba(8,10,12,.26) 64%,rgba(8,10,12,.10) 80%,rgba(8,10,12,.42) 100%)}
/* En el teléfono el hero baja a 72svh —más que en el resto— porque con esta foto es lo que
   hace falta para que entren dos de ellos y no uno y medio: al escalar menos, los mismos
   390px de pantalla pasan de ver el 32% del cuadro a ver el 37%. */
@media(max-width:860px){
  .hero.club{height:72svh;min-height:580px}
  /* TRES Y NO DOS. Nabil: "en el cel necesito que se vean 3 personas". Tres enteros no
     caben —serían el 65% del cuadro y la pantalla sólo da el 40%—, así que el encuadre se
     corre para que entren uno de orilla cortado y dos completos: eso ya se lee como tres. */
  .hero.club img{object-position:50% 46%}
  .hero.club::after{background:
    linear-gradient(to top,rgba(8,10,12,.97) 0%,rgba(8,10,12,.95) 22%,rgba(8,10,12,.92) 42%,
      rgba(8,10,12,.86) 62%,rgba(8,10,12,.34) 76%,rgba(8,10,12,.08) 90%,rgba(8,10,12,.30) 100%)}
}

/* ── LA SALA · el hero de la portada (4-nov) ───────────────────────────────
   Después de la puerta de piedra y la puerta de lujo, Nabil trajo esto: la sala
   del consejo de noche, con la ciudad detrás. Dice lo que es la casa sin tener
   que explicarlo, y el ámbar ya viene en las lámparas.
   El velo es de DOS capas y la que manda es la horizontal: el titular vive en
   el tercio izquierdo, sobre los libreros, y ahí hay que oscurecer fuerte; la
   derecha —lámparas, ventana, ciudad— se deja casi limpia, que es lo que hay
   que ver. La vertical sólo apoya la barra arriba y el botón abajo. */
.hero.club.sala img{object-position:52% 46%}
.hero.club.sala::after{background:
  linear-gradient(to right,rgba(8,10,12,.90) 0%,rgba(8,10,12,.84) 26%,rgba(8,10,12,.52) 52%,
    rgba(8,10,12,.16) 76%,rgba(8,10,12,.06) 100%),
  linear-gradient(to top,rgba(8,10,12,.60) 0%,rgba(8,10,12,.30) 26%,rgba(8,10,12,.06) 54%,
    rgba(8,10,12,0) 78%,rgba(8,10,12,.34) 100%)}
@media(max-width:860px){
  /* En el teléfono el texto cruza todo el ancho: la capa horizontal no sirve de
     nada y manda la vertical. La luz se queda arriba, en las lámparas. */
  .hero.club.sala img{object-position:50% 38%}
  .hero.club.sala::after{background:
    linear-gradient(to top,rgba(8,10,12,.96) 0%,rgba(8,10,12,.95) 24%,rgba(8,10,12,.91) 46%,
      rgba(8,10,12,.76) 60%,rgba(8,10,12,.30) 76%,rgba(8,10,12,.10) 90%,rgba(8,10,12,.30) 100%)}
}

.hero.hint.terraza::after{background:
  linear-gradient(to right,rgba(8,10,12,.90) 0%,rgba(8,10,12,.76) 42%,rgba(8,10,12,.24) 72%,rgba(8,10,12,.06) 100%),
  linear-gradient(to bottom,rgba(8,10,12,.42) 0%,rgba(8,10,12,.14) 42%,rgba(8,10,12,.34) 100%)}
@media(max-width:760px){
  /* ── LA SOMBRA DE LOS HEROS DE ADENTRO, EN EL TELÉFONO ─────────────────────────
     Nabil, 3-nov: "los heros que tienen foto en el celular no tienen la sombra, póngasela,
     hace que se vea más PRO".
     Y es exacto: la portada sí la tiene —su velo cierra en .97 abajo, así que la foto se
     disuelve y el titular se apoya en negro— y los tres heros de adentro no. Los suyos
     oscurecían la foto PAREJO: la imagen quedaba sucia de arriba abajo, el texto flotaba
     encima sin apoyo y, al terminar la franja, la foto se cortaba en seco contra la lámina
     blanca de abajo. Eso es lo que se veía barato: no la falta de contraste —medía bien—,
     la falta de dirección.
     Este velo copia la forma del de la portada, comprimida al alto de estos heros: casi
     opaco abajo (donde vive el texto y donde está el corte), abierto a media altura (que es
     donde la foto tiene algo que enseñar) y medio cerrado otra vez arriba, para que el
     logo y ACCESO de la barra se sostengan sobre cualquier foto.
     Va para .terraza y .mesa juntos y no para .hint a secas, porque los velos de escritorio
     de esas dos clases viven fuera de esta media query y le ganarían por específicos. */
  .hero.hint.terraza::after,.hero.hint.mesa::after{background:
    linear-gradient(to top,rgba(8,10,12,.96) 0%,rgba(8,10,12,.92) 20%,
      rgba(8,10,12,.74) 36%,rgba(8,10,12,.42) 56%,rgba(8,10,12,.26) 76%,
      rgba(8,10,12,.46) 100%)}
}

/* EL RETRATO, RECORTADO. Tenía regla solo dentro del @media de celular, así que en
   escritorio salía a su tamaño natural y rompía la reja. 4:5 como en el sitio original. */
.retrato{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;display:block}

/* LA PESTAÑA DONDE ESTÁS. Sin esto las cinco páginas se ven iguales arriba y no sabes
   en cuál estás parado. */
.nav a.on{color:#fff;border-bottom:1px solid var(--reloj);padding-bottom:4px}


/* EL QUEMADO EN UN TROZO DE TITULAR. Es uno de los tres usos del acento: el relleno.
   SOBRE PAPEL BLANCO VA EL MISMO DEL +600 (--reloj-min, #B04418) y no el #E0613A. Nabil:
   "usaste un naranja raro, fluorescente". Y es exactamente eso: el E0613A está hecho para
   RELLENAR con tinta oscura encima, no para ser tinta sobre blanco —ahí da 3.54:1, se
   salva por el tamaño y se ve encendido—. El B04418 da 5.70:1 y es el que ya usa la
   cifra grande, así que el acento de la página es uno solo.
   Sobre carbón sube al tono claro, que ahí es el que se lee. */
.qm{color:var(--reloj-min)}
.sec.carbon .qm,.hero .qm{color:var(--reloj-txt)}

/* EN EL TELÉFONO EL TEXTO SE DESPEGA DEL TELÉFONO DIBUJADO. Nabil: "está muy pegado". La
   rejilla de dos columnas se apila y el hueco entre las dos se quedaba en los 30px del
   clamp, que entre una foto y un titular no es un respiro, es un roce. */
@media(max-width:680px){ .dos{row-gap:46px} }

/* EL SALTO QUE SÓLO EXISTE EN EL TELÉFONO. Un titular largo parte donde cabe, y donde cabe
   casi nunca es donde la frase respira. En escritorio estos <br> no existen. */
.cel{display:none}
@media(max-width:680px){ .cel{display:inline} }
/* Y su gemelo al revés: lo que SÓLO existe en escritorio. */
.esc{display:inline}
@media(max-width:680px){ .esc{display:none} }


/* EL CIERRE DEL SITIO, UN PUNTO MÁS CHICO. Nabil: "hazlo un poco más chico, porque es el
   cierre del sitio". Un titular de 52px al final de la página compite con el de arriba y
   grita en la puerta de salida; el cierre no necesita gritar, necesita quedar claro. */
.sinceja.cierre{font-size:clamp(25px,2.7vw,38px)}


/* EL HERO DE EL CONSEJO, SIN DECAPITAR. Nabil: "en la compu se corta la cabeza".
   La foto es 16:9 y la franja del hero mide la mitad de alto: con cover sólo se ve una banda
   de la mitad de la imagen, y el 52% de serie la dejaba cayendo en los hombros. Las dos caras
   viven entre el 10% y el 44% de la foto; con 18% la banda empieza en ~9% y termina en ~60%,
   así que entran enteras con aire arriba. La regla es más específica que el .hero>img de los
   bloques de abajo, así que no hay que acordarse del orden. */
.hero.hint.mesa>img{object-position:50% 18%}


/* ── EL CIERRE, UN SOLO ACOMODO ───────────────────────────────────────────────────
   Nabil, 3-nov: "esto igual en todos con el acomodo: DAVOS, un consejo para /
   empresarios y directores., esto en gris en la compu".
   Estuvo un rato partido distinto en cada pantalla —"…para empresarios / y directores."
   en la compu— y no valía la pena: el mismo corte en los dos sitios dice lo mismo y se
   escribe con un <br>, sin clases ni media query. El gris ya lo pone `.sec.blanca h2 em`. */

/* ── LA ESCALERA DE LAS DOCE PUERTAS ──────────────────────────────────────────────
   5 al entrar, 4 antes del mes 6, 3 antes de cerrar. Va como escalera de tres pasos y no
   como tres cifras sueltas, porque el dato no es cuántas son: es cuándo te las piden. */
@media(min-width:800px){ .ex.doce{grid-column:1/-1} }
.ex.doce{padding-bottom:clamp(20px,2.4vw,30px);border-bottom:1px solid rgba(255,255,255,.10)}
.sec.blanca .ex.doce,.sec.grisf .ex.doce{border-bottom-color:rgba(38,42,47,.14)}
.esca{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.10)}
.sec.blanca .esca,.sec.grisf .esca{border-top-color:rgba(38,42,47,.14)}
.esca>span{display:block;padding:14px 18px 0 0;font-size:14px;line-height:1.45;color:var(--humo)}
.sec.blanca .esca>span,.sec.grisf .esca>span{color:var(--rotc)}
.esca>span b{display:block;margin-bottom:5px;font-family:var(--ser);font-weight:500;
  font-size:clamp(24px,2.2vw,30px);line-height:1;color:var(--reloj-txt)}
.sec.blanca .esca>span b,.sec.grisf .esca>span b{color:var(--reloj-min)}
@media(max-width:680px){
  .esca>span{padding-right:11px;font-size:12.5px}
  .esca>span b{font-size:22px}
}
/* Las otras tres condiciones, en un renglón de tres. A dos columnas la cuarta se quedaba
   sola y dejaba un hueco del tamaño de media lámina a su derecha. */
@media(min-width:1000px){
  .exig{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(30px,3.2vw,52px)}
  .ex.doce{grid-column:1/-1}
}

/* EL HERO DE LAS PUERTAS, EN DOS RENGLONES EN EL TELÉFONO. Nabil, 3-nov: "en el cel trata de
   acomodarlo en 2 líneas". "Una puerta no es un contacto." mide 29 caracteres y a los 34px
   del hero de las demás páginas pide 462px: en una pantalla de 390 con 44 de margen se
   parte, y el titular salía en cuatro renglones.
   Dos renglones y 34px no caben los dos: cabe uno. Se elige el acomodo y el cuerpo baja a
   ~26px —6.6vw, medido para que la primera frase entre entera de 360 a 430px—. Es el único
   hero del sitio con este tamaño; si algún día se quiere a 34, son tres renglones. */
@media(max-width:680px){ .hero.terraza h1{font-size:clamp(23px,6.6vw,44px)} }

/* ── LAS TRES CIFRAS, CUADRADAS EN EL TELÉFONO ────────────────────────────────────
   Nabil, 3-nov: "en el cel se ve todo descuadrado, acomódalo bien".
   Dos cosas lo torcían. Una: las columnas son .85fr .7fr 1.45fr, un reparto pensado para
   escritorio, y en 390px eso da 84 · 92 · 143 —el grupo se ve recargado a la derecha y las
   tres etiquetas arrancan en vertícales distintas—. Dos: la cifra grande mide 52px y las
   otras 34, así que con las cajas pegadas al techo cada rótulo caía a una altura distinta.
   En el teléfono las columnas se reparten iguales y el contenido se ancla ABAJO: los
   rótulos quedan en el mismo renglón, que es lo que el ojo lee como cuadrado, y la cifra
   grande crece hacia arriba, que es para donde tiene que crecer.
   La reja del dinero no entra aquí: ésa ya es una lista de renglones con filetes. */
@media(max-width:680px){
  /* Las tres cifras pasan a ser UNA reja de dos renglones: las cifras arriba y los rótulos
     abajo, cada .arp repartiendo sus dos piezas con display:contents. Así los tres rótulos
     caen en el mismo renglón aunque la cifra grande mida 52px y las otras 34, y arrancan
     por su primera línea aunque uno tenga dos renglones y otro tres —la reja alinea por
     línea base, que es lo que falla cuando cada cifra vive en su propia caja—.
     El reparto es 1 · 1 · 1.3: iguales no sirve, porque "+600" a 52px mide 120px y se salía
     de una columna de 109. Los filetes verticales se caen en el teléfono: con alineación por
     línea base las celdas se encogen a su contenido y los filetes salen desparejos (la misma
     trampa que la reja del dinero), y a 390px tres rayitas son ruido —el hueco basta—. */
  /* grid-auto-flow:column, o la reja coloca en orden de documento —cifra, rótulo, cifra,
     rótulo— y sale el churro. Llenando por columnas, cada .arp deja su cifra en el renglón
     1 y su rótulo en el 2, sin tener que numerar nada con nth-child. */
  .arit:not(.dinero){grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);
    grid-template-rows:auto auto;grid-auto-flow:column;
    gap:11px clamp(10px,2.4vw,18px)}
  .arit:not(.dinero) .arp{display:contents}
  .arit:not(.dinero) .arp em,.arit:not(.dinero) .arp span{text-align:center;padding:0 4px}
  .arit:not(.dinero) .arp span{margin-top:0}
}


/* ── LA PLACA QUE GIRA ─────────────────────────────────────────────────────────────
   Las láminas se enciman en la MISMA celda de rejilla, no en absoluto: así la caja mide lo
   que mide la más alta y el hero no da un brinco cada seis segundos cuando entra una lámina
   de tres renglones después de una de dos. En absoluto habría que acordarse de una altura
   a mano, y se rompería el día que alguien escriba un cargo más largo.
   El cruce es sólo opacidad —nada se desliza—: un movimiento lateral en la esquina de una
   portada se lee como banner de publicidad, que es justo lo que esta pieza no es. */
.plw{display:grid}
/* NO ES UN CRUCE, ES UN RELEVO. Con las dos láminas encimadas y en transición a la vez se
   ve medio segundo de doble exposición —dos nombres uno encima del otro, ilegible—. La que
   sale se apaga en .45s y la que entra espera ese .45s antes de encender: nunca hay dos
   textos visibles al mismo tiempo. */
.plw>.pl{grid-area:1/1;opacity:0;transition:opacity .45s ease;pointer-events:none;
  display:flex;align-items:center;justify-content:flex-end;gap:16px}
.plw>.pl.on{opacity:1;pointer-events:auto;transition:opacity .45s ease .45s}
.placa .pl i{display:block;margin-top:6px;font-style:normal;
  font-size:12px;line-height:1.45;color:#A6ACB4;letter-spacing:.01em}
/* EL RETRATO, CON SOMBRA Y ARO. Nabil, 3-nov: "métele sombra o algo y del lado derecho la
   info". Una foto recortada a secas sobre una portada que YA es una foto se lee como
   calcomanía: se confunde con el fondo y parece pegada encima. La sombra honda la despega y
   el aro de un píxel le da el filo que el recorte circular pierde contra una imagen.
   object-position sube el encuadre: en el centro, un retrato de medio cuerpo deja la cara
   en el tercio de arriba y el círculo se llena de saco. */
.placa .plf{flex:0 0 auto;width:66px;height:66px;border-radius:50%;object-fit:cover;
  object-position:50% 14%;display:block;
  box-shadow:0 16px 34px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.18)}
.placa .pli{min-width:0}
/* EL NARANJA DE LA PLACA ES DE LA FECHA: ahí significa tiempo que corre (SISTEMA §2). Un
   nombre propio en ese color diría que el señor vence el jueves. La lámina con retrato lleva
   el nombre en blanco y deja el ámbar para la que sí cuenta días. */
.placa .con-f b{color:#fff}
/* Los guiones: la única señal de que hay más de una. Dos rayitas de 14px, la viva en ámbar.
   Ni bolitas ni flechas: en una esquina con un titular al lado, cualquier control pide turno. */
.plp{display:flex;gap:7px;justify-content:flex-end;margin-top:14px}
.plp span{display:block;width:16px;height:2px;background:rgba(255,255,255,.26);
  transition:background .4s ease}
.plp span.on{background:var(--reloj)}
@media(max-width:860px){
  /* La fila baja un nivel: la tenía .placa, y ahora .placa es la caja que apila las láminas
     y los guiones. Si se queda en flex, los guiones se sientan AL LADO del texto. */
  .placa{display:block}
  .plw>.pl{justify-content:flex-start;gap:14px}
  /* En el teléfono la lámina sin foto es una fila a la izquierda: el rótulo y el dato en la
     misma línea base, como estaba la placa de siempre. La que trae retrato NO: ahí el texto
     se apila al lado de la foto, o el rótulo y el nombre se pelean los 275px que quedan. */
  .placa .pl:not(.con-f) .pli{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 13px}
  .placa .pli i{margin-top:2px}
  .placa .plf{width:56px;height:56px}
  .plp{justify-content:flex-start;margin-top:12px}
}


/* ── LA BANDA DEL ARRANQUE ─────────────────────────────────────────────────────
   Reja de invitados: una columna con uno, dos en cuanto haya dos. auto-fit con minmax hace
   el reparto sin que nadie tenga que contar cuántos hay, y el min() evita que la columna
   de 360px desborde una pantalla de 390. */
.banq{background:#1A1E23;border-top:2px solid var(--reloj)}
/* LA BANDA SE ALINEA CON LAS CUATRO LÁMINAS DE ABAJO, no con el resto del sitio. Nabil,
   3-nov: "alinea a Carlos a la foto de abajo, y la fecha al límite del marco de mi foto".
   Y van por caminos distintos: el .z general es una caja de 1180px centrada —que a 1200
   arranca en 10px— y el riel de las cuatro es ancho completo con var(--gut) de margen, que
   a 1200 son 55. Por eso Carlos empezaba 45px antes que la primera foto.
   Aquí el .z suelta su tope de ancho y toma el MISMO margen que el riel, así que las dos
   verticales se amarran solas en cualquier pantalla: el retrato con el filo izquierdo de la
   primera lámina, y la fecha con el filo derecho de la última, la de Nabil. */
.banq .z{display:flex;align-items:center;gap:clamp(24px,3vw,44px);
  max-width:none;padding-left:var(--gut);padding-right:var(--gut);
  padding-top:clamp(26px,3.2vw,38px);padding-bottom:clamp(26px,3.2vw,38px)}
.banq-g{flex:1 1 auto;min-width:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:clamp(22px,2.6vw,38px)}
/* SIN FILETE A LA IZQUIERDA. Lo puse de separador y Nabil lo cachó: con la banda alineada
   al centro, la raya sólo medía lo que mide la fecha —dos renglones—, así que no separaba
   dos columnas, flotaba a media altura como un palito suelto. O va de arriba abajo o no va;
   y entre dos bloques que ya están en extremos opuestos con medio metro de aire en medio,
   no hace falta ninguna. */
.banq-d{flex:0 0 auto;text-align:right;padding-left:clamp(20px,2.6vw,36px)}
.banq-d span{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:#8D949C}
.banq-d b{display:block;margin-top:9px;font-family:var(--ser);font-weight:500;
  font-size:clamp(18px,1.5vw,22px);line-height:1.2;letter-spacing:-.01em;color:var(--reloj-txt)}
@media(max-width:860px){
  .banq .z{display:block}
  .banq-d{display:none}
}
.banq-u{display:flex;align-items:center;gap:clamp(18px,2.4vw,28px);min-width:0}
.banq-f{flex:0 0 auto;width:clamp(76px,7vw,98px);height:clamp(76px,7vw,98px);
  border-radius:50%;object-fit:cover;object-position:50% 14%;display:block;
  box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.16)}
.banq-t{min-width:0}
/* LA FECHA MANDA Y LO QUE HACE VA EN GRIS. En cuanto sean dos invitados, lo que el lector
   busca en este renglón es cuándo habla cada quien. */
.banq-k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--reloj-txt);line-height:1.55}
.banq-k em{font-style:normal;color:#8D949C}
.banq-t b{display:block;margin-top:9px;font-family:var(--ser);font-weight:500;
  font-size:clamp(23px,2.2vw,32px);line-height:1.1;letter-spacing:-.016em;color:#fff}
.banq-t i{display:block;margin-top:7px;font-style:normal;font-size:clamp(13px,1.05vw,14.5px);
  line-height:1.45;color:#A6ACB4}