/* =========================================================
FLORES SERNA GROUP
Editorial · Tinta / Papel crema / Dorado
========================================================= */
:root{
/* Ink */
--ink: #100f0d;
--ink-2: #171613;
--ink-soft: #26241f;
/* Paper */
--paper: #f4efe3;
--paper-2: #ece4d2;
--paper-3: #e3d9c2;
/* Gold */
--gold: #b9974f;
--gold-lt: #d8b381;
--gold-dk: #9a7a37;
/* Oro de TEXTO sobre papel. El de marca no llega: --gold da 2.4:1 contra el
crema y --gold-dk 3.5:1, que alcanza para un titular pero no para un rótulo
chico, que pide 4.5:1. Éste da 5.2:1 sobre --paper y 4.75:1 sobre
--paper-2. Va sólo en texto chico y en anillos de foco sobre papel; los
filetes, lo que va sobre tinta y los titulares siguen en el oro de marca. */
--gold-txt: #7a5f26;
/* El anillo de foco: tinta sobre papel, oro dentro de los contenedores de
tinta (más abajo, junto a :focus-visible). */
--focus: var(--ink);
--sala: #06060a;
--proyeccion: #ece6d9;
/* Text roles */
--on-ink: #efe9db;
--on-ink-mut: #a49d8c;
--on-paper: #1b1915;
--on-paper-mut:#6a6355;
--line-ink: rgba(239,233,219,.14);
--line-paper: rgba(27,25,21,.14);
--wrap: 1240px;
--pad: clamp(20px, 5vw, 72px);
--ff-display: "Manrope", system-ui, -apple-system, Segoe UI, sans-serif;
--ff-body: "Manrope", system-ui, -apple-system, Segoe UI, sans-serif;
--ff-mono: "Space Mono", ui-monospace, Menlo, monospace;
--ease: cubic-bezier(.22,.61,.36,1);
}
/* ---------- Fuentes ----------
Alojadas en assets/fonts/ en vez de pedirse a Google Fonts: una conexión
menos a otro dominio antes de pintar, y ningún dato del visitante sale a un
tercero. Son el subconjunto latin, con el mismo unicode-range que sirve
Google, así que las flechas (← → ↗) siguen cayendo en la fuente del sistema,
como antes. Manrope es la variable completa de 400 a 800; el HTML la
precarga. Space Mono no se precarga: sólo la usan rótulos. */
@font-face{
font-family:"Manrope";src:url("../fonts/manrope-latin.woff2") format("woff2");
font-weight:400 800;font-style:normal;font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:"Space Mono";src:url("../fonts/spacemono-400-latin.woff2") format("woff2");
font-weight:400;font-style:normal;font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:"Space Mono";src:url("../fonts/spacemono-700-latin.woff2") format("woff2");
font-weight:700;font-style:normal;font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding: el nav es fijo, así que un ancla (#contacto, los legales, el
enlace «saltar») caería debajo de él. 96px = el nav sin elevar (81) y aire. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
/* ===== Justificado del texto corrido, en todo el sitio =====
hyphens:none va aquí arriba y no en cada regla: es un candado. Ningún
navegador debe partir una palabra con guion en ninguna parte, ni aunque el
usuario tenga la partición activada.
La contra del justificado sin guiones es que el sobrante de cada renglón se
reparte entre los espacios, y en medida corta eso abre ríos blancos. Por eso
varios párrafos subieron de medida al justificarse — están anotados uno por
uno donde viven. Debajo de ~45 caracteres por renglón el justificado no se
sostiene: si algún bloque baja de ahí, hay que ensancharlo o dejarlo en
bandera.
Quedan FUERA a propósito: los titulares y la cita de las páginas de división
(tipografía de despliegue: justificarla la rompe), los rótulos en versalitas
monoespaciadas, las migas, los índices y **las direcciones postales**, que no
son prosa — estirar «Calzada Lázaro Cárdenas 3454, Col.» a lo ancho de la
columna se lee como un error, no como una caja. */
html{hyphens:none;-webkit-hyphens:none}
.reel__lede,
.grupo__right p,
.gptw__text > p,
.divisiones__intro,
.index__desc,
.visor__desc,
.pres-lead,
.post__excerpt,
.susc__note,
.cta__lede,
.footer__tag,
.dhero__lede,
.dsec__body p,
.legal p,
.legal li{text-align:justify}
body{
font-family:var(--ff-body);
background:var(--paper);
color:var(--on-paper);
line-height:1.6;
font-size:clamp(16px,1.05vw,17px);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
overflow-x:clip;
}
/* height:auto porque las ![]()
llevan width/height para reservar su caja: sin él,
el atributo height gana y anula los aspect-ratio del CSS (las miniaturas del
índice llegaron a medir 1125px de alto). */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--gold);color:var(--ink)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
/* El ritmo vertical. Cada costura paga DOS rellenos, uno de cada sección, así
que el número de aquí se lee siempre al doble: 150px por lado eran 300px de
nada entre Medios y Boletines, casi un tercio de pantalla dos veces seguidas.
La tinta lleva MENOS relleno que el papel, no más. Va contra la intuición de
la escala —lo oscuro pesa, luego dale aire— pero es al revés: un hueco negro
se lee más vacío que uno crema, porque el papel tiene textura de página y el
negro no tiene nada. Hasta septiembre de 2026 era 170 contra 150 y las
costuras de tinta eran justo las que marketing señaló. */
.section{padding-block:clamp(56px,7vw,96px)}
.section--ink{background:var(--ink);color:var(--on-ink);padding-block:clamp(52px,6.4vw,88px)}
.section--paper2{background:var(--paper-2);padding-block:clamp(56px,7vw,96px)}
/* Dos secciones de tinta seguidas no tienen ni cambio de fondo que las separe,
así que la costura se cierra a un relleno y medio en vez de dos. */
.section--ink:has(+ .section--ink){padding-bottom:clamp(36px,4.5vw,64px)}
.section--ink + .section--ink{padding-top:clamp(36px,4.5vw,64px)}
/* La placa hereda las dos reglas de arriba, una por lado, porque no es una
.section pero se comporta como si lo fuera en las dos costuras.
Arriba: la sección que la precede casi no lleva pie, porque la placa ARRANCA
en papel y su rampa es la continuación de esa sección, no una sección nueva.
Sumarle el relleno completo ponía 308px entre el último renglón del bloque
GPTW y el rótulo «Una firma».
Abajo: la placa CIERRA en tinta sólida y Divisiones es section--ink, así que
es una costura de tinta contra tinta —la única del sitio en que los dos lados
son el mismo negro— y le toca el mismo cierre que a --ink + --ink. Sin esto
quedaban 168px en que nada separa a las dos secciones, ni siquiera un cambio
de fondo, y se leían como hueco. */
.section:has(+ .breaker){padding-bottom:clamp(24px,3vw,40px)}
.breaker:has(+ .section--ink){padding-bottom:clamp(36px,4.5vw,64px)}
.breaker + .section--ink{padding-top:clamp(36px,4.5vw,64px)}
.skip-link{
position:fixed;top:-100px;left:16px;z-index:2000;
background:var(--ink);color:var(--on-ink);
padding:12px 18px;border-radius:2px;font-weight:600;
transition:top .2s var(--ease);
}
.skip-link:focus{top:16px}
/* El anillo de foco va en tinta sobre papel: el oro da 2.4:1 contra el crema
y un indicador de foco pide 3:1 (WCAG 1.4.11). Dentro de los contenedores de
tinta —y en el nav mientras va transparente sobre el hero— vuelve al oro,
que ahí da 6.9:1. Un contenedor de tinta nuevo tiene que entrar a esta
lista, o su foco será tinta sobre tinta. */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
:is(.section--ink,.reel,.stats,.breaker,.dhero,.cta,.footer,.mobile-menu,.a11y-panel,
.js .nav:not([data-elevated="true"])){--focus:var(--gold)}
/* Texto sólo para lectores de pantalla (el patrón visually-hidden de siempre):
avisos de «se abre en una pestaña nueva», rótulos que la vista ya da por el
contexto. Nunca display:none, que lo esconde también del lector. */
.u-sr{
position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* ---------- Shared type ---------- */
.eyebrow{
font-family:var(--ff-mono);
font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--on-paper-mut);
display:flex;align-items:center;gap:.7em;margin-bottom:1.4rem;
}
.eyebrow--light{color:var(--on-ink-mut)}
/* El número del rótulo: oro de texto sobre papel, oro de marca sobre tinta
(los rótulos de tinta son siempre .eyebrow--light). */
.eyebrow .idx{color:var(--gold-txt)}
.eyebrow--light .idx{color:var(--gold)}
.section-title{
font-family:var(--ff-display);
font-weight:700;font-size:clamp(2.1rem,5.2vw,4rem);
line-height:1.03;letter-spacing:-.03em;
}
.section-title--light{color:var(--on-ink)}
/* El remate dorado del titular. Sobre papel va en --gold-dk y no en --gold-txt:
es tipografía de despliegue (1.8rem para arriba, seminegra), que pide 3:1 y
no 4.5, y --gold-dk da 3.5:1 sobre --paper y 3.2 sobre --paper-2 sin
volverse café. Sobre tinta se queda en el oro de marca. */
.u-gold{color:var(--gold-dk)}
:is(.section--ink,.dhero,.breaker,.cta,.reel,.footer) .u-gold,
.section-title--light .u-gold{color:var(--gold)}
.idx{font-family:var(--ff-mono)}
/* =========================================================
NAV
========================================================= */
.nav{
position:fixed;top:0;left:0;right:0;z-index:1000;
transition:background .35s var(--ease), box-shadow .35s var(--ease),
backdrop-filter .35s var(--ease), -webkit-backdrop-filter .35s var(--ease);
}
.nav__inner{
position:relative; /* ancla del badge, que cuelga fuera de la barra */
max-width:var(--wrap);margin-inline:auto;padding:18px var(--pad);
display:flex;align-items:center;justify-content:space-between;gap:24px;
transition:padding .35s var(--ease);
}
/* Sin JS nadie eleva el nav, y la versión transparente —texto crema— seguiría
fija encima del papel en cuanto se deja atrás el hero. Por eso sin .js el nav
nace ya en su versión de papel, y todo lo que lo pinta en crema va detrás de
.js. Sin JS no encoge: el relleno chico es sólo del estado elevado. */
.nav[data-elevated="true"],
html:not(.js) .nav{
background:rgba(244,239,227,.82);
backdrop-filter:saturate(1.4) blur(14px);
-webkit-backdrop-filter:saturate(1.4) blur(14px);
box-shadow:0 1px 0 var(--line-paper);
}
.nav[data-elevated="true"] .nav__inner{padding-top:12px;padding-bottom:12px}
/* Las dos versiones del logotipo comparten celda y se cruzan por opacidad: con
display se intercambiaban de golpe, y ese salto era parte del tirón. */
.brand{display:grid;align-items:center;flex-shrink:0}
.brand__logo{
grid-area:1/1;height:clamp(19px,2.1vw,27px);width:auto;display:block;
transition:opacity .35s var(--ease);
}
.brand__logo--ink{opacity:0}
.nav[data-elevated="true"] .brand__logo--light,
html:not(.js) .brand__logo--light{opacity:0}
.nav[data-elevated="true"] .brand__logo--ink,
html:not(.js) .brand__logo--ink{opacity:1}
/* hero over-nav: make nav readable on dark hero before scroll */
.js .nav:not([data-elevated="true"]) .nav__links a{color:var(--on-ink)}
.js .nav:not([data-elevated="true"]) .nav__toggle span{background:var(--on-ink)}
.nav__links{display:flex;gap:30px}
.nav__links a{
font-size:.9rem;font-weight:500;position:relative;padding:6px 0;color:var(--on-paper);
transition:color .35s var(--ease);
}
.nav__links a::after{
content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--gold);
transition:width .3s var(--ease);
}
.nav__links a:is(:hover,:focus-visible)::after{width:100%}
.btn{
display:inline-flex;align-items:center;gap:.6em;
font-weight:600;font-size:.9rem;letter-spacing:.01em;
padding:.72em 1.35em;border-radius:2px;cursor:pointer;border:1px solid transparent;
transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
/* .35s y no los .25s de .btn: el cambio del nav es un solo movimiento y todo
lo que participa en él comparte duración. El hover conserva sus .25s. */
.btn--nav{
background:var(--ink);color:var(--on-ink);
transition:background .35s var(--ease), color .35s var(--ease),
border-color .35s var(--ease), transform .25s var(--ease);
}
.js .nav:not([data-elevated="true"]) .btn--nav{background:var(--gold-lt);color:var(--ink)}
.btn--nav:hover{transform:translateY(-2px)}
/* El cambio de idioma va pegado a Contacto (o, abajo de 860px, al badge y al
botón de menú) y lleva a la misma página en el otro idioma. Su alto —26px—
no rebasa ni al botón (45) ni al badge (30), así que no mueve --matte. Con
6px de relleno medía 31 y estiraba el header móvil un pixel. */
.nav__end{display:flex;align-items:center;gap:clamp(16px,2vw,26px)}
.nav__lang{
position:relative;padding:4px 0;line-height:1.5;
font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.16em;color:var(--on-paper);
transition:color .35s var(--ease);
}
.js .nav:not([data-elevated="true"]) .nav__lang{color:var(--on-ink)}
.nav__lang::after{
content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--gold);
transition:width .3s var(--ease);
}
.nav__lang:is(:hover,:focus-visible)::after{width:calc(100% - .16em)}
/* El área táctil crece hasta 44×44 con un ::before absoluto, sin tocar la caja:
la caja es la que mide 26px de alto y por eso no mueve --matte. */
.nav__lang::before{content:"";position:absolute;inset:-9px -12px}
/* El sello de certificación. NO se mueve: mismo alto y misma posición sobre el
hero y sobre el papel. Llegó a tener dos estados —160px prendido al borde
superior, atravesando la franja, contra 38px centrado al elevarse— y ese
viaje era lo único del nav que cambiaba de tamaño; se retiró.
El es sólo un hueco en el flex y el ![]()
va absoluto sobre
.nav__inner —por eso éste lleva position:relative— porque el sello sobresale
de la línea de los botones y en el flujo estiraría la barra.
La ALTURA del hueco no se toca: es la que fija --matte:66px en móvil, donde
el badge —y no el botón— es el elemento más alto de la barra. La ANCHURA sí,
y tiene que seguir al alto de la imagen o el sello se encimaría con Contacto:
el banderín es 736×1280, o sea 0.575, así que 56px de alto son 32 de ancho.
El tope de 56px lo manda la barra RECOGIDA (69px en escritorio, 54 en móvil)
y no la franja del hero (81 y 66): es el estado chico el que tiene que
contenerlo, y ahí quedan 6.5px de aire arriba y abajo. Si cambia el relleno
del nav, hay que rehacer el número. */
.nav__cert{
flex-shrink:0;pointer-events:none;
width:clamp(26px,3vw,33px);height:clamp(30px,3.4vw,38px);
}
.nav__cert img{
position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
height:clamp(44px,5.2vw,56px);width:auto;display:block;
}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-lt);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--on-ink);border-color:var(--line-ink)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-lt)}
.nav__toggle{position:relative;display:none;flex-direction:column;gap:6px;background:none;border:0;padding:8px;cursor:pointer}
/* La caja mide 42×26; el área táctil, 46×44. Mismo truco que .nav__lang. */
.nav__toggle::before{content:"";position:absolute;inset:-9px -2px}
.nav__toggle span{width:26px;height:2px;background:var(--on-paper);transition:transform .3s var(--ease),opacity .3s var(--ease),background .35s var(--ease)}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
/* El menú arranca debajo de la barra (que queda encima, con el botón de
cerrar) y se desplaza si no cabe: con el teléfono acostado, o con el texto
agrandado, los seis renglones miden más que la pantalla. «safe center»
centra mientras cabe y, si no, se pega arriba en vez de cortar el primero.
--matte no vive aquí (es de .reel), así que manda el respaldo de 66px. */
.mobile-menu{
position:fixed;inset:0;z-index:999;background:var(--ink);
display:grid;justify-content:center;align-content:safe center;
overflow-y:auto;overscroll-behavior:contain;
padding-block:calc(var(--matte,66px) + 16px) 32px;
animation:menuIn .35s var(--ease);
}
.mobile-menu[hidden]{display:none}
.mobile-menu nav{display:flex;flex-direction:column;gap:8px}
.mobile-menu a{
font-family:var(--ff-display);font-size:2rem;font-weight:700;letter-spacing:-.02em;color:var(--on-ink);
display:flex;align-items:baseline;gap:16px;padding:10px 0;
}
.mobile-menu a:hover{color:var(--gold-lt)}
.mm-idx{font-family:var(--ff-mono);font-size:.8rem;color:var(--gold)}
@keyframes menuIn{from{opacity:0}to{opacity:1}}
@media (max-height: 500px){
.mobile-menu nav{gap:0}
.mobile-menu a{font-size:1.45rem;line-height:1.25;padding:6px 0}
}
@media (prefers-reduced-motion: reduce){
.mobile-menu{animation:none}
}
/* =========================================================
HERO — EL ENCUADRE
========================================================= */
.reel{
--push:1; /* acercamiento continuo de la toma, 1 → 1.07 */
--asm:1; /* 0 = reloj de arena deconstruido · 1 = armado */
--l0:1;--l1:1;--l2:1; /* acople por palabra del logo (0..1) */
--out:0; /* salida: 1 = letras apagadas, sólo el glow */
/* Alto de cada franja = alto del nav, para que el header no flote sobre una
barra sino que sea la barra. Es un NÚMERO MEDIDO, no proporcional: la altura
del nav se compone de rellenos en em y px, así que no depende del alto de la
ventana. Arriba de 860px manda el botón Contacto (45px de contenido + 36 de
relleno); abajo manda el badge (30px, más alto que el botón de menú) y el
valor cae a 66px, más abajo en la media query. Si cambia el relleno del nav, la tipografía del botón o el
corte de 860px, hay que volver a medirlo. */
--matte:81px;
background:var(--sala);color:var(--on-ink);
}
.reel__track{height:240vh;position:relative}
.reel__stage{
position:sticky;top:0;overflow:hidden;
height:100vh;height:100svh;
/* Franja, logotipo, bajada, franja: apilados en flujo. Antes el logo se
centraba en todo el alto y la bajada iba absoluta desde abajo; como el logo
crece con el ANCHO, en una ventana ancha y baja se montaban. Ahora el logo
ocupa sólo el hueco que la bajada le deja. */
display:flex;flex-direction:column;
padding-block:var(--matte);
background:var(--sala);
}
/* ---- La ventana ---- */
.reel__gate{position:absolute;inset:0;z-index:0;overflow:hidden}
.reel__frame{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center 42%;
filter:grayscale(1) contrast(1.14) brightness(.5);
opacity:0;transform:scale(var(--push));
transition:opacity .3s linear; /* corte, no disolvencia */
will-change:opacity,transform;
}
.reel__frame.is-on{opacity:.82}
.reel__vignette{
position:absolute;inset:0;
background:
radial-gradient(120% 88% at 76% 8%, rgba(185,151,79,.15), transparent 58%),
linear-gradient(180deg, rgba(6,6,10,.76) 0%, rgba(6,6,10,.30) 40%, rgba(6,6,10,.93) 100%);
}
.reel__grain{
position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---- El chasis: dos franjas fijas ----
La de arriba mide lo que mide el nav, así que el header no flota sobre una
barra negra: el header es la barra. La de abajo la iguala y sostiene el HUD. */
.reel__matte{
position:absolute;left:0;right:0;z-index:2;pointer-events:none;
height:var(--matte);background:var(--sala);
}
.reel__matte--top{top:0}
.reel__matte--bot{bottom:0}
/* ---- El logo real, reconstruido con el scroll ---- */
/* El h1 llena el hueco y el SVG se topa con su alto: con max-height el cuadro
del SVG se aplana y preserveAspectRatio "meet" encoge el dibujo centrado, así
que el logo se ajusta al lado que mande —ancho o alto— sin JS. */
.reel__title.reel__title--logo{
font-size:0;line-height:0;margin:0;
flex:1;height:100%;display:flex;align-items:center;
}
.reel__logo{display:block;width:min(100%,62rem);height:auto;max-height:100%;margin-inline:auto;overflow:visible}
.js .reel__logo{opacity:0;transform:translateY(2.6vh)}
.reel.is-ready .reel__logo{
opacity:1;transform:none;
transition:opacity 1s var(--ease) .15s, transform 1.15s cubic-bezier(.16,1,.3,1) .15s;
}
.lg-word path{fill:var(--proyeccion)}
.lg-half path{fill:var(--gold-lt)}
.lg-emblem{
--gi:calc(var(--asm,1) + var(--out,0) * .5);
transform-box:fill-box;transform-origin:center;
transform:translate(calc(var(--out,0) * -95px), calc(var(--out,0) * 47px)) scale(calc(1 + var(--out,0) * .26));
transition:transform .5s var(--ease);
filter:
drop-shadow(0 0 calc(var(--gi) * 13px) rgba(255,246,224, calc(var(--gi) * .5)))
drop-shadow(0 0 calc(4px + var(--gi) * 26px) rgba(216,179,129, calc(var(--gi) * .5)));
}
@media (prefers-reduced-motion: reduce){
.lg-emblem{filter:drop-shadow(0 0 16px rgba(216,179,129,.4))}
}
.lg-flores{--l:var(--l0,1)}
.lg-serna{--l:var(--l1,1)}
.lg-group{--l:var(--l2,1)}
.lg-word{
transform:translateY(calc((1 - var(--l,1)) * 26px));
opacity:calc(1 - var(--out,0));
transition:opacity .5s var(--ease); /* suaviza el apagado (el armado sigue scrubbeado) */
will-change:transform,opacity;
}
.lg-half{transform-box:fill-box;transform-origin:center;opacity:var(--asm,1)}
.lg-half--top{
transform:translateY(calc((var(--asm,1) - 1) * 30px)) scale(calc(.86 + .14 * var(--asm,1)));
}
.lg-half--bot{
transform:translateY(calc((1 - var(--asm,1)) * 30px)) scale(calc(.86 + .14 * var(--asm,1)));
}
@media (prefers-reduced-motion: reduce){
.reel .reel__logo{opacity:1;transform:none;transition:none}
.lg-word{transform:none}
.lg-half{transform:none;opacity:1}
}
/* ---- Contenido: el logo toma el hueco entre la franja y la bajada ---- */
.reel__inner{
position:relative;z-index:3;width:100%;
flex:1 1 auto;min-height:0;
/* flex y no bloque: sin animaciones el escenario va en height:auto, el 100%
del h1 no resuelve, y aun así el logo tiene que quedar centrado */
display:flex;align-items:center;
max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
/* Arriba se aparta lo mismo que ocupa la bajada abajo (--foot-sp, que mide
main.js), para que el logo quede centrado en el escenario entero: al
arrancar la bajada aún no se ve y, sin esto, el logo flotaba arriba de un
hueco. Pero sólo se aparta lo que sobra con el logo a tamaño completo
(--logo-h): en una ventana baja manda que el logo no se encoja ni se monte,
no que quede centrado. Sin JS o sin animación --foot-sp no existe y la
bajada ya está visible: logo y bajada se leen juntos. */
--rpad:clamp(16px,4vh,48px);
--logo-h:calc(min(min(100vw,var(--wrap)) - 2 * var(--pad), 62rem) * 194 / 760);
padding-block:var(--rpad);
padding-top:calc(var(--rpad) + min(var(--foot-sp,0px), max(0px,
100svh - 2 * var(--matte) - var(--foot-sp,0px) - 2 * var(--rpad) - var(--logo-h))));
text-align:center;
}
/* El valor de arranque de --foot-sp, para que el logo no nazca arriba y brinque
cuando main.js escribe el medido (eso era corrimiento de layout en el primer
pintado). Son los números que mide main.js con la bajada en dos o tres
renglones: 167px a 1440 y entre 141 y 192 en las demás ventanas; el JS
corrige lo que falte, y así la corrección es de pocos pixeles. Sólo con
animación: sin ella main.js no mide, y --foot-sp no debe existir. */
@media (prefers-reduced-motion: no-preference){
html.js:not(.a11y-quieto) .reel{--foot-sp:175px}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 861px){
html.js:not(.a11y-quieto) .reel{--foot-sp:167px}
}
.reel__foot{
position:relative;z-index:3;width:100%;flex:none;
margin-bottom:clamp(40px,6vh,62px);
max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
padding-top:24px;
opacity:var(--foot,1);
transform:translateY(calc((1 - var(--foot,1)) * 22px));
}
.reel__foot::before{
content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);
height:1px;background:var(--line-ink);
}
.reel__lede{max-width:62ch;font-size:clamp(1rem,1.4vw,1.16rem);color:var(--on-ink);opacity:.9}
/* ---- Lectura técnica: dice qué toma está en pantalla ---- */
.reel__hud{
position:absolute;left:0;right:0;bottom:0;z-index:4;
height:var(--matte); /* vive dentro de la franja, centrado */
max-width:var(--wrap);margin-inline:auto;
display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:0 var(--pad);
font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--on-ink-mut);
}
.js .reel__hud{opacity:0}
.reel.is-ready .reel__hud{opacity:1;transition:opacity 1s var(--ease) .9s}
.reel__toma b{color:var(--gold-lt);font-weight:400;margin-left:.6em}
@media (prefers-reduced-motion: reduce){
.reel__track{height:auto}
/* relative y no static: sin pegajoso, pero sigue siendo bloque contenedor de
las franjas y el HUD, que están absolutos */
.reel__stage{position:relative;height:auto;min-height:100svh}
.reel__frame{transition:none;transform:none}
.reel .reel__foot,.reel .reel__hud{transform:none;opacity:1;transition:none}
}
/* =========================================================
STATS
========================================================= */
.stats{background:var(--ink-2);color:var(--on-ink);border-top:1px solid var(--line-ink)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);padding-block:clamp(40px,5vw,64px)}
.stat{padding:6px 26px;border-left:1px solid var(--line-ink)}
.stat:first-child{border-left:0;padding-left:0}
.stat__num{
font-family:var(--ff-display);font-weight:700;font-size:clamp(2.6rem,5vw,4rem);
line-height:1;display:block;letter-spacing:-.03em;
}
.stat__num--serif{color:var(--gold-lt)}
.stat__label{display:block;margin-top:.6em;font-size:.82rem;color:var(--on-ink-mut);max-width:22ch}
/* =========================================================
GRUPO
========================================================= */
.grupo__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,90px)}
.grupo__title{
font-family:var(--ff-display);font-weight:600;
font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.1;letter-spacing:-.03em;
}
.grupo__left{position:sticky;top:110px;align-self:start}
/* 72ch y no los 60 de antes: al justificarse sin guiones, la medida corta abría
ríos entre palabras. */
.grupo__right p{margin-bottom:1.3em;color:var(--on-paper);max-width:72ch}
.grupo__right strong{font-weight:600}
/* Los pilares quedan en bandera: son renglones sueltos, no texto corrido. */
.pillars{margin-top:2.4rem;border-top:1px solid var(--line-paper)}
.pillars li{
padding:1.15rem 0;border-bottom:1px solid var(--line-paper);
display:grid;grid-template-columns:minmax(140px,180px) 1fr;gap:20px;
font-size:.98rem;color:var(--on-paper-mut);
}
.pillars li span{font-weight:600;color:var(--on-paper);font-family:var(--ff-body)}
.plate{margin-top:clamp(26px,3.4vw,44px)}
.plate img{
width:100%;aspect-ratio:4/5;max-height:44vh;object-fit:cover;object-position:center 22%;
border:1px solid var(--line-paper);border-radius:2px;
filter:grayscale(.5) contrast(1.03);
}
.plate figcaption{
margin-top:.85rem;font-family:var(--ff-mono);font-size:.66rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--on-paper-mut);
}
/* ---- El sello de Great Place To Work, contado ----
Va a lo ancho del wrap y no dentro de la columna derecha: es una afirmación de
la casa entera, no un párrafo más de la reseña. No reusa el archivo del nav:
aquél es gptw-nav.webp, cortado a la altura del badge (112px), y éste es
gptw-sello.webp, a 320px de ancho para la columna de 156. Como cae muy por
debajo del primer pantallazo, lleva loading="lazy". */
.gptw{
margin-top:clamp(48px,6vw,84px);padding-top:clamp(30px,3.6vw,46px);
border-top:1px solid var(--line-paper);
display:grid;grid-template-columns:minmax(112px,156px) 1fr;
gap:clamp(28px,5vw,64px);align-items:start;
}
.gptw__badge{width:100%;height:auto;display:block}
.gptw__lead{
font-family:var(--ff-display);font-weight:600;
font-size:clamp(1.2rem,2vw,1.62rem);line-height:1.25;letter-spacing:-.02em;
color:var(--on-paper);margin-bottom:1.15em;
}
.gptw__text > p{margin-bottom:1.3em;color:var(--on-paper);max-width:72ch}
.gptw__text > p:last-child{margin-bottom:0}
/* el rótulo y el titular no se justifican; ganan por especificidad al selector
de arriba, que es .gptw__text > p */
.gptw__text .eyebrow,.gptw__text .gptw__lead{text-align:left}
/* =========================================================
PLACA / TRANSICIÓN
========================================================= */
/* La placa NO es una caja de alto fijo con el texto anclado abajo, y ésa fue la
lección. Lo era hasta septiembre de 2026: min-height en vh, align-items:end,
y el velo de papel medido en PORCENTAJES de ese alto. Como el alto seguía a
la ventana y el texto seguía al borde de abajo, la posición del rótulo dentro
del degradado cambiaba con cada tamaño de pantalla: caía al 49.8% del alto en
1920×1080 —cómodo, bajo el velo— y al 39.8% en 1440×900, o sea justo en la
última respiración del papel, y ahí el oro se lavaba. Los dos números estaban
afinados para un solo ancho y nada más ahí coincidían.
Ahora hay UNA sola medida, --rampa, y de ella cuelgan las dos cosas: el
relleno superior y el final del velo de papel. El rótulo empieza exactamente
donde el papel llega a cero, en cualquier ventana, porque son el mismo valor.
Sin min-height y sin flex: el alto lo da rampa + texto + pie, y no sobra
holgura que empuje nada. Si se toca --rampa se mueven las dos a la vez, que
es justamente lo que antes no pasaba. */
.breaker{
--rampa:clamp(92px,10vw,144px);
position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink);
padding-top:var(--rampa);
padding-bottom:clamp(48px,6vw,80px);
}
.breaker__img{
position:absolute;inset:0;width:100%;height:100%;
/* la vertical es la que manda en escritorio (la toma es 2.18:1 y la sección
casi 3:1, así que sobra alto y se recorta arriba y abajo); la horizontal
sólo entra en juego en pantalla angosta, y corre a la derecha para no
perder las manos */
object-fit:cover;object-position:58% 62%;
/* Iba en .62 de opacidad y .72 de brillo, y con los tres velos de abajo
encima sobrevivía un 5% de la fotografía en el tercio izquierdo: no estaba
oscura, estaba tapada. */
filter:grayscale(1) contrast(1.1) brightness(.74);opacity:.82;
}
/* La costura con El Grupo, que va en papel. Son DOS rampas superpuestas y no
una sola de papel a tinta: aquella cruzaba de crema opaco a tinta al 55% en
apenas un cuarto del alto, y ese canto se veía como una raya. Aquí el papel
se retira largo y con la pendiente suavizada por los extremos —que es donde
el ojo detecta el quiebre, no en el degradado en sí— mientras la tinta sube
por debajo hasta cerrar en sólido, para empalmar con Divisiones, que es
section--ink.
El papel muere en --rampa: mientras quede papel encima del rótulo dorado, el
fondo se aclara y el oro (184 de luminancia) se pierde contra él. Los altos
son fracciones de --rampa, no porcentajes del alto de la sección, por lo que
se dijo arriba.
Pero la rampa vertical sola NO alcanzaba, y ésa fue la otra lección: la toma
es clarísima del lado izquierdo —el escritorio blanco— y ahí es justamente
donde va todo el texto. Un velo que sólo baja no distingue entre el
escritorio y la manga oscura de la derecha, así que para oscurecer el
izquierdo había que apagar la foto entera. De ahí la TERCERA rampa, la
horizontal: da suelo al texto en el tercio izquierdo y deja la fotografía
respirar a la derecha, que es donde no estorba.
La vertical se retiró de la mitad de arriba (iba .32 al 34% y .5 al 42%, y
ahí no hay texto que proteger): ésa era la que borraba la foto dentro de la
propia transición, que es donde más se quiere ver. Abajo cierra igual que
antes, porque tiene que llegar a tinta sólida para empalmar con Divisiones.
El orden importa. El papel va ARRIBA de la horizontal a propósito: si no, el
velo izquierdo asomaría en la costura misma y se vería una mancha oscura
pegada al borde de El Grupo. Mientras el papel es opaco, tapa la horizontal;
aparece conforme el papel se retira. */
.breaker::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(180deg,
rgba(244,239,227,1) 0,
rgba(244,239,227,.97) calc(var(--rampa) * .125),
rgba(244,239,227,.9) calc(var(--rampa) * .275),
rgba(244,239,227,.78) calc(var(--rampa) * .425),
rgba(244,239,227,.6) calc(var(--rampa) * .575),
rgba(244,239,227,.4) calc(var(--rampa) * .725),
rgba(244,239,227,.2) calc(var(--rampa) * .85),
rgba(244,239,227,.06) calc(var(--rampa) * .93),
rgba(244,239,227,0) var(--rampa)),
linear-gradient(90deg,
rgba(16,15,13,.84) 0%,
rgba(16,15,13,.8) 26%,
rgba(16,15,13,.62) 44%,
rgba(16,15,13,.34) 62%,
rgba(16,15,13,.1) 78%,
rgba(16,15,13,0) 90%),
linear-gradient(180deg,
rgba(16,15,13,0) 0%,
rgba(16,15,13,.03) 18%,
rgba(16,15,13,.09) 30%,
rgba(16,15,13,.17) 40%,
rgba(16,15,13,.34) 50%,
rgba(16,15,13,.56) 62%,
rgba(16,15,13,.74) 74%,
rgba(16,15,13,.88) 86%,
rgba(16,15,13,.95) 93%,
var(--ink) 100%);
}
.breaker__inner{position:relative;z-index:1;width:100%}
.breaker__kicker{
font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.22em;
text-transform:uppercase;color:var(--gold-lt);margin-bottom:1rem;
}
.breaker__line{
font-family:var(--ff-display);font-weight:600;
font-size:clamp(1.3rem,2.9vw,2.3rem);line-height:1.2;letter-spacing:-.03em;
max-width:38ch;color:var(--on-ink); /* medido: el texto nuevo cae en cuatro renglones */
}
/* =========================================================
DIVISIONES — Index
========================================================= */
/* El rótulo va ENCIMA del titular y en su misma columna, como en todas las demás
secciones del sitio. Antes caía solo en la columna izquierda y, con
align-items:end, se pegaba a la última línea del titular: quedaba huérfano a
media altura, sin nada con que alinearse. El row-gap es 0 a propósito — el aire
entre rótulo y titular lo pone el margin-bottom de .eyebrow, que es el mismo
que en Presencia y en El Grupo. */
.divisiones__head{
display:grid;grid-template-columns:1fr 1fr;gap:0 60px;align-items:end;
margin-bottom:clamp(36px,5vw,64px);
}
.divisiones__head > .eyebrow{grid-row:1;grid-column:1}
.divisiones__head > .section-title{grid-row:2;grid-column:1}
/* la entrada ocupa las dos filas de la derecha y se apoya abajo, así que su
último renglón queda a la altura del último del titular */
.divisiones__intro{
grid-row:1 / 3;grid-column:2;align-self:end;
color:var(--on-ink-mut);max-width:54ch; /* medida al justificar: 46ch abría ríos */
}
.section-title{margin-top:.3em}
.divs{display:block}
.js .divs{
display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,1fr);
gap:clamp(34px,4.6vw,72px);align-items:start;
}
/* ---- El visor ---- */
.visor{display:none}
.js .visor{display:block;position:sticky;top:clamp(88px,11vh,118px)}
.visor__frame{
position:relative;aspect-ratio:4/5;overflow:hidden;
background:var(--sala);border:1px solid var(--line-ink);border-radius:2px;
}
.visor__plate{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:var(--crop,center 40%);
filter:grayscale(1) contrast(1.12) brightness(.8);
opacity:0;transform:scale(1.055);
transition:opacity .3s linear,transform 2.4s var(--ease);
}
.visor__plate.is-on{opacity:1;transform:scale(1)}
.visor__veil{
position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(120% 90% at 74% 6%, rgba(185,151,79,.14), transparent 60%),
linear-gradient(180deg, rgba(6,6,10,.12) 0%, rgba(6,6,10,.05) 42%, rgba(6,6,10,.76) 100%);
}
.visor__hud{
position:absolute;left:14px;bottom:13px;
font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.2em;
color:var(--on-ink-mut);
}
.visor__hud span{color:var(--gold-lt)}
/* Contador de cuadro: una marca por división, la activa encendida. */
.visor__ticks{position:absolute;right:14px;bottom:17px;display:flex;gap:5px}
.visor__ticks span{
width:10px;height:2px;background:rgba(239,233,219,.26);
transition:background .3s var(--ease);
}
.visor__ticks span.is-on{background:var(--gold-lt)}
.visor__meta{margin-top:1.1rem;transition:opacity .16s var(--ease)}
.visor__meta.is-swap{opacity:0}
@media (prefers-reduced-motion: reduce){
.visor__plate{transform:none;transition:none}
}
.visor__desc{color:var(--on-ink-mut);font-size:.95rem;min-height:3.25em}
/* ---- Las filas ---- */
.index{border-top:1px solid var(--line-ink)}
.index__row{
position:relative;display:grid;
grid-template-columns:56px 60px 1fr 30px;
align-items:center;gap:0 24px;
padding:clamp(14px,1.6vw,18px) 8px;
border-bottom:1px solid var(--line-ink);
transition:background .4s var(--ease),padding-inline .4s var(--ease),color .4s var(--ease);
cursor:pointer;
}
.index__row::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold);
transition:width .4s var(--ease);
}
/* El hover y el foco de teclado dicen lo mismo: la barra de oro y la flecha. */
.index__row:is(:hover,:focus-visible){background:rgba(216,179,129,.06);padding-inline:20px 8px}
.index__row:is(:hover,:focus-visible)::before{width:3px}
.index__thumb{
width:100%;aspect-ratio:4/5;object-fit:cover;object-position:var(--crop,center 40%);
border-radius:2px;filter:grayscale(1) contrast(1.1) brightness(.82);
transition:filter .4s var(--ease);
}
.index__row:is(:hover,:focus-visible) .index__thumb{filter:grayscale(.55) contrast(1.06) brightness(.95)}
.index__num{font-family:var(--ff-mono);font-size:.95rem;color:var(--gold)}
.index__name{
font-family:var(--ff-display);font-weight:700;
font-size:clamp(1.25rem,1.95vw,1.75rem);line-height:1.1;letter-spacing:-.025em;
}
.index__desc{margin-top:.42em;color:var(--on-ink-mut);font-size:.93rem;max-width:52ch}
.index__arrow{
font-size:1.4rem;color:var(--gold-lt);opacity:0;transform:translateX(-8px);
transition:opacity .35s var(--ease),transform .35s var(--ease);text-align:right;
}
.index__row:is(:hover,:focus-visible) .index__arrow{opacity:1;transform:translateX(0)}
@media (min-width: 1025px){
/* El aire de los renglones está medido para que cinco llenen el alto del
visor —la placa 4:5 más su pie—; si no, la columna derecha se acaba muy
por encima de la izquierda. Si vuelven a cambiar las divisiones, rehacerlo. */
.js .index__row{grid-template-columns:60px 1fr 30px;padding-block:clamp(24px,2.4vw,35px)}
.js .index__thumb{display:none}
.js .index__desc{
position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;
}
.js .index__row.is-active{background:rgba(216,179,129,.06);padding-inline:20px 8px}
.js .index__row.is-active::before{width:3px}
.js .index__row.is-active .index__arrow{opacity:1;transform:translateX(0)}
}
/* =========================================================
PRESENCIA
========================================================= */
.presencia{position:relative;overflow:hidden}
.presencia__head > *{max-width:660px}
.pres-lead{margin-top:1rem;color:var(--on-ink-mut);max-width:54ch;font-size:1.08rem}
/* ---- Escenario del mapa ---- */
.mapstage{
position:relative;width:100%;
margin-top:clamp(34px,4.5vw,60px);aspect-ratio:2.39/1;overflow:hidden;
}
.mapstage__layer{position:absolute;inset:0;transform:translateY(var(--py,0px)) scale(1.04);transform-origin:center center;will-change:transform}
.mapstage__map,.mapstage__sun{
-webkit-mask-image:
linear-gradient(90deg,transparent 0%,#000 7%,#000 94%,transparent 100%),
linear-gradient(180deg,#000 0%,#000 72%,transparent 99%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg,transparent 0%,#000 7%,#000 94%,transparent 100%),
linear-gradient(180deg,#000 0%,#000 72%,transparent 99%);
mask-composite:intersect;
}
.mapstage__map{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;object-position:center top;
}
/* ---- La línea del día ---- */
.mapstage__sun{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sun__night{fill:rgba(4,4,8,.58)}
.sun__edge{
fill:none;stroke:var(--gold-lt);stroke-width:1.6;
vector-effect:non-scaling-stroke; /* el viewBox se estira; el trazo no */
opacity:.85;
filter:drop-shadow(0 0 7px rgba(216,179,129,.55));
}
@media (prefers-reduced-motion: reduce){.sun__edge{filter:none}}
/* ---- Pines ---- */
.mapstage__pins{position:absolute;inset:0}
.pin{
position:absolute;width:11px;height:11px;border-radius:50%;
background:var(--gold-lt);transform:translate(-50%,-50%);z-index:3;
box-shadow:0 0 0 4px rgba(216,179,129,.16), 0 0 14px rgba(216,179,129,.5);
opacity:0;scale:.4;
transition:opacity .5s var(--ease), scale .5s var(--ease),
box-shadow .3s var(--ease), background .3s var(--ease);
transition-delay:calc(var(--i,0) * 110ms + 160ms);
}
.is-acquired .pin{opacity:1;scale:1}
.pin.is-day{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18), 0 0 16px rgba(255,255,255,.6)}
.pin--hq::after{
content:"";position:absolute;inset:0;border-radius:50%;
border:1px solid var(--gold-lt);animation:ping 2.8s var(--ease) infinite;
}
.pin--hq.is-day::after{border-color:#fff}
.pin.is-hot{scale:1.5;box-shadow:0 0 0 6px rgba(216,179,129,.28), 0 0 22px rgba(216,179,129,.85)}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.6);opacity:0}}
.cdot{
position:absolute;width:6px;height:6px;border-radius:50%;background:transparent;
border:1.5px solid var(--gold);transform:translate(-50%,-50%);z-index:2;
opacity:0;transition:opacity .6s var(--ease) .5s;
}
.is-acquired .cdot{opacity:.85}
.pinlabel{
position:absolute;z-index:4;white-space:nowrap;pointer-events:none;
font-family:var(--ff-mono);font-size:.66rem;line-height:1;
letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink);
text-shadow:0 1px 6px rgba(4,4,8,.9), 0 0 14px rgba(4,4,8,.7);
opacity:0;transition:opacity .6s var(--ease);
transition-delay:calc(var(--i,0) * 110ms + 380ms);
}
.is-acquired .pinlabel{opacity:.92}
.pinlabel--r{transform:translate(14px,-50%)}
.pinlabel--l{transform:translate(-14px,-50%) translateX(-100%)}
.pinlabel.is-hot{opacity:1;color:var(--gold-lt)}
@media (prefers-reduced-motion: reduce){
.pin--hq::after{animation:none}
.pin,.cdot,.pinlabel{opacity:1;scale:1;transition:none}
.cdot{opacity:.85}
.pinlabel{opacity:.92}
}
/* ---- Office lists (on ink) ---- */
.presencia__lists-wrap{margin-top:clamp(40px,6vw,76px)}
.presencia__cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
gap:clamp(28px,4vw,56px);
border-top:1px solid var(--line-ink);padding-top:clamp(28px,4vw,44px)}
.hq__tag{display:inline-block;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold-lt);margin-bottom:.5rem}
.hq__tag--2{margin-top:1.7rem}
.hq__name{font-family:var(--ff-display);font-size:1.12rem;font-weight:700;letter-spacing:-.02em;color:var(--on-ink)}
.hq__addr{color:var(--on-ink-mut);font-size:.9rem;margin-top:.3rem;max-width:38ch}
.hq{transition:opacity .3s var(--ease)}
.hq__now{margin-top:.5rem}
/* ---- Relojes ---- */
.clock{display:none}
.js .clock{
display:inline-flex;align-items:center;gap:.6em;
font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.14em;
color:var(--on-ink-mut);font-variant-numeric:tabular-nums;
}
.clock::before{
content:"";width:6px;height:6px;border-radius:50%;
border:1px solid var(--gold);background:transparent;
transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.clock.is-day{color:var(--on-ink)}
.clock.is-day::before{
background:var(--gold-lt);border-color:var(--gold-lt);
box-shadow:0 0 0 3px rgba(216,179,129,.18);
}
.clock:empty::after{content:"—"}
.offices__title{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--gold-lt);padding-bottom:.9rem;border-bottom:1px solid var(--line-ink);margin-bottom:.4rem}
.offices ul li{padding:.55rem 0;border-bottom:1px solid var(--line-ink);font-size:.96rem;color:var(--on-ink)}
/* La plaza y su reloj van en dos celdas, y el nombre, el país y la dirección
viven dentro de la primera. Antes eran tres hijos sueltos con el reloj
ocupando dos filas a mano; al entrar la dirección eso se habría vuelto un
span de tres, que se rompe en cuanto alguna plaza tenga un renglón más. */
.offices--intl ul li{
display:grid;grid-template-columns:1fr auto;align-items:start;
column-gap:16px;
transition:color .3s var(--ease);
}
.offices--intl ul li:hover{color:var(--gold-lt)}
.offices__place span{
display:block;font-family:var(--ff-display);font-size:1.06rem;font-weight:600;
letter-spacing:-.01em;
}
.offices__place small{display:block;color:var(--on-ink-mut);font-size:.8rem}
.offices__addr{margin-top:.4rem;color:var(--on-ink-mut);font-size:.82rem;line-height:1.5;max-width:44ch}
.offices__pend{
font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold-lt);font-style:normal;
}
/* ---- Nacionales: cada plaza abre su dirección ----
Es un y no un botón con JS: se abre con teclado y con lector de
pantalla sin que nosotros programemos nada, y sin JS la lista sigue
funcionando — que es la regla de toda esta portada. */
.offices--mx{margin-top:clamp(34px,4.4vw,56px)}
.mxgrid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(240px,26vw,300px),1fr));
gap:0 clamp(24px,3.4vw,48px);align-items:start;
}
.mxo{border-bottom:1px solid var(--line-ink)}
.mxo > summary{
display:flex;align-items:baseline;gap:.6em;
padding:.7rem 22px .7rem 0;position:relative;cursor:pointer;
list-style:none;transition:color .3s var(--ease);
}
.mxo > summary::-webkit-details-marker{display:none}
/* la cruz que gira a menos al abrir; en dos trazos para que no dependa de una
fuente ni de un glifo */
.mxo > summary::after,
.mxo > summary::before{
content:"";position:absolute;right:2px;top:50%;
width:9px;height:1px;background:var(--gold);
transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.mxo > summary::before{transform:translateY(-50%) rotate(90deg)}
.mxo > summary::after{transform:translateY(-50%)}
.mxo[open] > summary::before{transform:translateY(-50%) rotate(0deg);opacity:0}
.mxo > summary:hover{color:var(--gold-lt)}
.mxo > summary:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.mxo summary span{font-family:var(--ff-display);font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.mxo summary small{color:var(--on-ink-mut);font-size:.78rem}
.mxo__addr{
padding:0 22px .85rem 0;margin-top:-.15rem;
color:var(--on-ink-mut);font-size:.82rem;line-height:1.55;
}
/* =========================================================
MEDIOS Y BOLETINES
========================================================= */
/* Medios y Boletines empiezan cada una por su rótulo y siguen con el hilo del
bloque. El aire entre los dos lo ponía .medios__head, que desapareció al
partirse la sección en dos. */
.medios > .wrap > .eyebrow,
.boletines > .wrap > .eyebrow{margin-bottom:clamp(22px,2.8vw,34px)}
.link-arrow{font-weight:600;font-size:.95rem;border-bottom:1.5px solid var(--gold);padding-bottom:3px}
.link-arrow:hover{color:var(--gold-txt)}
/* ---- El hilo que encabeza cada bloque ----
Publicaciones y Boletín viven en secciones separadas desde agosto de 2026, así
que ya no hay dos .mblock seguidos que separar; la clase sobrevive porque
boletines.html usa el mismo hilo para «Todas las ediciones». */
.mblock__head{
display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
padding-bottom:.85rem;border-bottom:1px solid var(--line-paper);
margin-bottom:clamp(22px,2.8vw,34px);
}
.mblock__title{
font-family:var(--ff-display);font-weight:700;letter-spacing:-.025em;
font-size:clamp(1.3rem,2.1vw,1.75rem);
}
.mblock__note{
font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--on-paper-mut);
}
/* ---- Publicaciones ----
Van en el mismo carrusel que el boletín (.bolcar, más abajo): en retícula,
siete tarjetas con portada eran tres renglones y casi dos pantallas. */
.post{
background:var(--paper);border:1px solid var(--line-paper);border-radius:3px;
padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:270px;
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
/* Sólo la tarjeta que es enlace (la que trae pdf o url) se levanta y pide
clic; la de puro texto es un y no debe prometer nada. Igual que
a.bol. El foco de teclado levanta lo mismo que el hover. */
a.post{cursor:pointer}
a.post:is(:hover,:focus-visible){transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(16,15,13,.4);border-color:var(--gold)}
.post__cover{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line-paper)}
.post__cover img{
width:100%;height:100%;object-fit:cover;
filter:grayscale(1) contrast(1.06);
transition:filter .45s var(--ease),transform .6s var(--ease);
}
a.post:is(:hover,:focus-visible) .post__cover img{filter:grayscale(.3) contrast(1.02);transform:scale(1.035)}
.post__body{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;flex:1}
.post__meta{
display:flex;justify-content:space-between;font-family:var(--ff-mono);
font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-paper-mut);
padding-bottom:1rem;border-bottom:1px solid var(--line-paper);margin-bottom:1.2rem;
}
.post__meta span{color:var(--gold-txt)}
.post__title{font-family:var(--ff-display);font-weight:700;font-size:1.35rem;line-height:1.15;letter-spacing:-.025em}
.post__excerpt{margin-top:.8rem;color:var(--on-paper-mut);font-size:.94rem;flex:1}
.post__cta{margin-top:1.4rem;font-weight:600;font-size:.9rem;color:var(--gold-txt)}
/* Sin resumen (es opcional) no hay párrafo que empuje el «Leer» al pie de la
tarjeta; así queda alineado con el de sus vecinas del carrusel. */
.post__title + .post__cta{margin-top:auto;padding-top:1.4rem}
a.post:is(:hover,:focus-visible) .post__cta{color:var(--ink)}
/* ---- Boletín ---- */
.bolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.8vw,40px)}
.bol{display:block;transition:transform .35s var(--ease)}
a.bol:is(:hover,:focus-visible){transform:translateY(-4px)}
.bol__cover{
position:relative;aspect-ratio:1/1.414;overflow:hidden;background:var(--ink);
border:1px solid var(--line-paper);border-radius:2px;
box-shadow:0 16px 38px -26px rgba(16,15,13,.6);
transition:box-shadow .35s var(--ease),border-color .35s var(--ease);
}
a.bol:is(:hover,:focus-visible) .bol__cover{box-shadow:0 26px 54px -26px rgba(16,15,13,.72);border-color:var(--gold)}
.bol__cover img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* Pie del bloque: el paso al archivo. Nace con [hidden] y lo destapa main.js
cuando hay más boletines de los que caben, así que aquí no se toca display. */
.bolmas{margin-top:clamp(26px,3vw,40px);text-align:right}
/* Invitación a recibir las obras del CDI-FS, al pie de sus publicaciones. La
pregunta a la izquierda y el correo a la derecha, como renglón del índice;
abajo de 760 se apilan. */
.cdisus{
display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem clamp(24px,4vw,64px);
margin-top:clamp(40px,5vw,72px);padding-top:clamp(26px,3vw,40px);
border-top:1px solid var(--line-paper);
}
.cdisus__t{
grid-column:1;font-family:var(--ff-display);font-weight:700;
font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.2;letter-spacing:-.02em;
}
.cdisus__d{grid-column:1;color:var(--on-paper-mut)}
.cdisus__arrow{color:var(--gold-dk)}
.cdisus__mail{grid-column:2;grid-row:1 / span 2;overflow-wrap:anywhere}
/* El correo mide 37 caracteres sin un solo espacio: en teléfono no cabía en el
botón y overflow-wrap lo partía a media palabra. Se achica la letra y el
relleno para que quepa entero en un renglón; anywhere queda sólo de red. */
@media (max-width: 400px){
.cdisus__mail{font-size:.78rem;padding-inline:1em;letter-spacing:0}
}
@media (max-width: 340px){
.cdisus__mail{font-size:.7rem;padding-inline:.8em}
}
@media (max-width: 760px){
.cdisus{grid-template-columns:1fr}
.cdisus__mail{grid-column:1;grid-row:auto;justify-self:start;margin-top:.8rem}
.cdisus__arrow{display:inline-block;transform:rotate(90deg)}
}
/* ---- El carrusel del boletín (y de Medios) ----
La portada y el CDI enseñan las ediciones en una tira: tres por vista (dos
en tableta, una y un asomo de la siguiente en teléfono). main.js avanza de
vista en vista y, al llegar al final, vuelve al principio. Sin JS es una
tira que se recorre con el dedo o la barra, con el mismo encaje. */
/* position:relative la vuelve bloque contenedor de lo absoluto que lleva
dentro —el .u-sr de «pestaña nueva» de cada tarjeta—: sin eso, el aviso de
la última tarjeta se posicionaba contra la página, a 1200px a la derecha, y
ensanchaba el documento entero aunque el body recorte. */
.bolcar__track{
position:relative;
--per:3;--gap:clamp(22px,2.8vw,40px);
display:grid;grid-auto-flow:column;gap:var(--gap);
grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
/* aire para el alza y la sombra del hover, que el overflow recortaría */
padding-block:6px 32px;margin-block:-6px -32px;
}
.bolcar__track > :is(.bol,.post){scroll-snap-align:start}
/* La marca la pone main.js al armar el carrusel, y no la clase .js de :
ésa sólo la agrega la portada, y en el CDI la barra se quedaba a la vista. */
.bolcar__track.is-armado{scrollbar-width:none}
.bolcar__track.is-armado::-webkit-scrollbar{display:none}
/* Nace con [hidden]: main.js lo destapa sólo si hay más de una vista. */
.bolcar__ctrl:not([hidden]){
display:flex;align-items:center;gap:12px;margin-top:clamp(22px,2.6vw,32px);
}
.bolcar__pos{
margin-right:auto;font-family:var(--ff-mono);font-size:.66rem;
letter-spacing:.18em;color:var(--on-paper-mut);
}
.bolcar__btn{
width:44px;height:44px;display:grid;place-items:center;
background:none;border:1px solid var(--line-paper);border-radius:50%;
color:var(--on-paper);font:inherit;cursor:pointer;
transition:border-color .3s var(--ease),color .3s var(--ease);
}
.bolcar__btn:hover{border-color:var(--gold);color:var(--gold-dk)}
.bol__ph{
position:absolute;inset:0;display:flex;flex-direction:column;
padding:clamp(16px,1.7vw,24px);
background:
radial-gradient(120% 80% at 50% 0%, rgba(185,151,79,.16), transparent 62%),
var(--ink);
color:var(--on-ink);text-align:center;
}
.bol__ph-top,.bol__ph-foot{
font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--on-ink-mut);
}
.bol__ph-num{
margin-top:auto;font-family:var(--ff-display);font-weight:700;
font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:-.02em;
}
.bol__ph-num em{font-style:italic;font-weight:500;color:var(--gold-lt)}
.bol__ph-quote{
margin:.9rem auto 0;max-width:26ch;
font-family:var(--ff-display);font-weight:500;font-style:italic;
font-size:clamp(.82rem,1.15vw,.98rem);line-height:1.35;color:var(--proyeccion);
}
.bol__ph-foot{margin-top:auto;padding-top:1.2rem}
.bol__ph-num::after{
content:"";display:block;width:34px;height:1px;background:var(--gold);
margin:.75rem auto 0;
}
.bol__meta{
margin-top:1.1rem;font-family:var(--ff-mono);font-size:.66rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--on-paper-mut);
}
.bol__num{color:var(--gold-txt);margin-right:.5em}
.bol__title{
margin-top:.5rem;font-family:var(--ff-display);font-weight:700;
font-size:1.06rem;line-height:1.2;letter-spacing:-.02em;
}
.bol__cta{display:inline-block;margin-top:.7rem;font-weight:600;font-size:.88rem;color:var(--gold-txt)}
a.bol:is(:hover,:focus-visible) .bol__cta{color:var(--ink)}
/* ---- La suscripción ----
El formulario POSTea a Netlify Forms (data-netlify) y aterriza en gracias.html.
No hay backend que mantener: las altas se leen y se exportan desde el panel de
Netlify. Si el sitio cambia de cuenta, Forms hay que volver a habilitarlo, como
Identity — está en DEPLOY.md. */
.susc{
margin-top:clamp(48px,6vw,84px);padding-top:clamp(30px,3.6vw,46px);
border-top:1px solid var(--line-paper);
display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:clamp(26px,4vw,64px);align-items:start;
}
.susc__title{
font-family:var(--ff-display);font-weight:700;letter-spacing:-.025em;
font-size:clamp(1.3rem,2.1vw,1.75rem);
}
.susc__note{margin-top:.6rem;color:var(--on-paper-mut);font-size:.94rem;max-width:46ch}
.susc__form{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;align-items:start}
.susc__field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.susc__field--wide,.susc__consent,.susc__submit{grid-column:1 / -1}
.susc__field label{
font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--on-paper-mut);
}
.susc__field label span{text-transform:none;letter-spacing:.06em}
.susc__field input{
width:100%;font:inherit;font-size:.98rem;color:var(--on-paper);
/* El borde es lo único que dice «aquí se escribe», así que tiene que dar 3:1
contra el papel (WCAG 1.4.11): el filete de .14 se perdía. --on-paper-mut
da 5.2:1. */
background:var(--paper);border:1px solid var(--on-paper-mut);border-radius:2px;
padding:.7em .8em;
transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
/* Foco: borde y anillo en tinta. Antes era outline:none y una sombra de oro
al .16, que no se distinguía del campo sin foco. */
.susc__field input:focus-visible,
.susc__field input:focus{
outline:2px solid var(--focus);outline-offset:1px;border-color:var(--ink);
}
.susc__consent{
display:flex;align-items:flex-start;gap:.7em;
font-size:.86rem;color:var(--on-paper-mut);line-height:1.5;
}
.susc__consent input{
flex-shrink:0;margin-top:.18em;width:15px;height:15px;accent-color:var(--gold);
}
.susc__consent a{border-bottom:1px solid var(--gold);color:var(--on-paper)}
.susc__consent a:hover{color:var(--gold-txt)}
.susc__submit{justify-self:start}
/* =========================================================
CTA
========================================================= */
.cta{position:relative;overflow:hidden}
.cta__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta__bg img{
width:100%;height:100%;object-fit:cover;object-position:70% center;
filter:grayscale(1) contrast(1.1) brightness(.78);opacity:.5;
}
.cta__bg::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg, var(--ink) 12%, rgba(16,15,13,.72) 52%, rgba(16,15,13,.55) 100%);
}
.cta__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.cta__title{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1;letter-spacing:-.04em}
.cta__lede{color:var(--on-ink-mut);max-width:52ch;font-size:1.08rem}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.8rem}
.cta__note{margin-top:1.6rem;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-mut)}
/* =========================================================
FOOTER
========================================================= */
.footer{background:var(--ink);color:var(--on-ink);padding-block:clamp(48px,7vw,84px);border-top:1px solid var(--line-ink)}
.footer__top{padding-bottom:clamp(32px,4vw,52px)}
.footer__logo{width:min(560px,80%);height:auto}
.footer__grid{
display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;
padding-block:clamp(32px,4vw,52px);border-top:1px solid var(--line-ink);
}
.footer__tag{color:var(--on-ink-mut);max-width:46ch}
/* Las redes, bajo el logotipo. Los glifos van en línea y no en un sprite con