/* ═══════════════════════════════════════════════════════════ XL Contingente Antártico · v2 · Sistema visual Lenguaje: editorial · institucional · expedicionario ═══════════════════════════════════════════════════════════ */ :root { /* ─────────── Color · paleta ampliada ─────────── */ --negro: #0A0E1A; /* Casi negro, base oscura */ --azul-profundo: #0E1F3F; /* Azul antártico institucional */ --azul-medio: #1F3A6B; --azul-claro: #6E8AAB; /* Más cálido que antes */ --teal-glaciar: #7FA9A4; /* Acento polar: hielo glacial */ --teal-claro: #B3CFCB; /* turquesa lavado · "azul clarito" (un punto más contraste que el original #C9DEDB) */ --hielo: #ECEEE8; /* Hielo cálido (no azul plano) */ --crema: #F4F2EC; /* Off-white de fondo */ --piedra: #58606A; --piedra-claro: #666B72; /* a11y: subido de #8D9298 (2.80) a #666B72 (4.80) para pasar WCAG 1.4.3 AA sobre crema/hielo · texto del .contingente__year y .u-text-faint */ --gris-borde: #D6D8D2; --rojo-bandera: #C8102E; /* acento principal de marca */ --rojo-oscuro: #931B2C; --naranja: #F56905; /* reserva de paleta · uso puntual */ --naranja-oscuro: #C25500; --amarillo: #E8B30A; --blanco: #FFFFFF; /* Aliases semánticos */ --bg: var(--crema); --bg-alt: var(--hielo); --bg-dark: var(--negro); --fg: #1A1F2A; --fg-soft: var(--piedra); --accent: var(--rojo-bandera); /* acento principal · rojo bandera */ --accent-cool: var(--teal-glaciar); --accent-mil: var(--rojo-bandera); /* ─────────── Tipografía ─────────── */ --display: "Fraunces", "Times New Roman", serif; --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Inter", sans-serif; --mono: "JetBrains Mono", "SF Mono", Menlo, monospace; /* ─────────── Layout ─────────── */ --maxw: 1320px; --maxw-narrow: 780px; --gutter: clamp(20px, 4vw, 56px); --section-y: clamp(80px, 12vw, 180px); --header-h: 80px; /* ─────────── Motion ─────────── */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 0.18s; --t-norm: 0.42s; --t-slow: 0.8s; } /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); } /* Anclas OnePage: deja respiración bajo el header fijo */ section[id] { scroll-margin-top: calc(var(--header-h) + 12px); } /* ── Diapositiva fullpage controlada por JS ────────────────────── El JS captura wheel/teclado y desplaza panel a panel con cubic- bezier. CSS sólo desactiva scroll-snap nativo si el JS está activo. */ html.fullpage-active { scroll-snap-type: none; scroll-behavior: auto; } /* ── Bloqueo de scroll bajo un modal/popup ─────────────────────── `overflow: hidden` en es la forma fiable (también en iOS Safari) de impedir que la página de fondo se desplace mientras un overlay está abierto. NO usamos `touch-action` porque eso también bloquearía el scroll táctil dentro del propio popup; ese scroll lo confina `overscroll-behavior: contain` aplicado a cada `__inner`. */ html.modal-open, html.modal-open body { overflow: hidden; } /* ── Accesibilidad: focus visible coherente y enlace de salto ── Aplicado a todos los elementos interactivos por defecto. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .nav__menu a:focus-visible, .toc-rail__list a:focus-visible, .footer__col a:focus-visible { outline-offset: 4px; } .skip-link { position: absolute; top: -100px; left: 12px; z-index: 1000; padding: 12px 18px; background: var(--negro); color: var(--blanco); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: top var(--t-fast) var(--ease); } .skip-link:focus { top: 12px; } /* ── Utilities · sustituyen inline-styles repetitivos en plantillas ── */ .u-text-soft { color: var(--fg-soft); } .u-mw-60 { max-width: 60ch; } body { margin: 0; font-family: var(--sans); font-size: clamp(15px, 1vw, 17px); line-height: 1.55; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; text-rendering: optimizeLegibility; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); } button { font-family: inherit; cursor: pointer; } /* Selección · gris azulado institucional */ ::selection { background: #383e4e; color: var(--blanco); } ::-moz-selection { background: #383e4e; color: var(--blanco); } /* ─── Tipografía base ─── */ h1, h2, h3, h4, h5 { font-family: var(--sans); color: var(--fg); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.5em; } .display, h1.display { font-family: var(--display); font-style: italic; font-weight: 400; letter-spacing: -0.025em; line-height: 0.95; } h1 { font-size: clamp(2.4rem, 7vw, 5rem); } h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 500; letter-spacing: -0.022em; } h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; } h4 { font-size: 0.95rem; font-weight: 600; } p { margin: 0 0 1em; max-width: 60ch; } p.lead { font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--fg); font-weight: 400; max-width: 50ch; } /* ─── Etiquetas / códigos ─── */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-soft); margin: 0 0 28px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); } .eyebrow--accent { color: var(--accent); } .eyebrow--accent::before { background: var(--accent); } .code-tag { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft); } .section-num { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.2em; color: var(--accent); font-weight: 600; margin-bottom: 16px; display: inline-block; } /* ─── Reglas decorativas ─── */ .rule { height: 1px; background: var(--fg); width: 100%; margin: 0; border: 0; opacity: 0.12; } .rule--accent { height: 2px; width: 48px; background: var(--accent); opacity: 1; } /* ─── Layout ─── */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--maxw-narrow); } /* Dentro de .section: layout editorial de dos columnas (lead izq, apoyo dcha). Implementación simple sin span: cada hijo no-lead se coloca en la columna 2 y la grid los apila automáticamente. Si la sección tiene un único lead, se queda en la columna 1 ocupando todo y la 2 vacía sin romper nada. */ .section .container--narrow { max-width: 1180px; width: 100%; } .section .lead { max-width: 64ch; } .section .container--narrow p:not(.lead), .section .container--narrow .note { max-width: 56ch; } @media (min-width: 880px) { .section .container--narrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); row-gap: 18px; align-items: start; } .section .container--narrow > .lead { grid-column: 1; margin: 0; } .section .container--narrow > :not(.lead) { grid-column: 2; margin: 0; } /* Si un párrafo tiene .lead pero NO es el primer hijo, se queda en col 1 */ .section .container--narrow > .lead ~ .lead { grid-column: 1; } /* Cuando solo hay lead (sin contenido derecho), que ocupe ambas columnas */ .section .container--narrow > .lead:only-child { grid-column: 1 / -1; max-width: 80ch; }} .section { /* OnePage fullscreen: cada sección ocupa al menos 100vh y centra el contenido. `min-height` (no `height`) deja que las secciones largas (roster de 13, histórico de 40, cronología de 9) crezcan sin solapamientos. `100svh` evita el salto de la barra de URL en móviles. */ min-height: 100vh; min-height: 100svh; padding-block: clamp(60px, 8vw, 120px); display: flex; flex-direction: column; justify-content: center; } .section > .container { width: 100%; } .section--alt { background: var(--bg-alt); } .section--dark { background: var(--bg-dark); color: var(--hielo); } .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--blanco); } .section--dark .eyebrow { color: var(--azul-claro); } .section--dark .rule { background: var(--blanco); opacity: 0.15; } /* Defensa contra inline-styles que asumen fondo claro */ .section--dark p[style*="--fg-soft"], .section--dark p[style*="fg-soft"] { color: var(--azul-claro) !important; } .section--dark p, .section--dark .lead { color: var(--hielo); } /* ── Variantes cromáticas adicionales ─────────────────────── Pensadas para alternar el ritmo del OnePage sin perder coherencia con la paleta editorial / institucional. */ /* "Ice" · fondo turquesa lavado (#C9DEDB, vía --teal-claro). Texto oscuro. */ .section--ice { background: var(--teal-claro); color: #102330; } .section--ice .section-head__label { color: var(--azul-medio); border-color: var(--azul-medio); } .section--ice h2, .section--ice h3 { color: var(--azul-profundo); } .section--ice p, .section--ice .lead { color: #1A3144; } .section--ice p[style*="--fg-soft"], .section--ice p[style*="fg-soft"] { color: #2C4A5F !important; } .section--ice .factsheet dt { color: #2C4A5F; } .section--ice .factsheet dd { color: var(--azul-profundo); } .section--ice .factsheet, .section--ice .factsheet > div { border-color: rgba(14,31,63,0.18); } .section--ice .factsheet > div::before { background: var(--azul-profundo); } .section--ice .factsheet > div:hover { background: rgba(14,31,63,0.04); } .section--ice .factsheet > div:hover dt { color: var(--azul-profundo); } .section--ice .note strong { color: var(--azul-profundo); } .section--ice .code-tag { color: #2C4A5F; } /* Grafito institucional: el mismo gris azulado que el footer */ .section--graphite { background: #383e4e; color: rgba(255,255,255,0.92); } .section--graphite h1, .section--graphite h2, .section--graphite h3, .section--graphite h4 { color: var(--blanco); } /* Forzamos legibilidad de TODOS los párrafos (incluso los que llevan inline-style con color oscuro de las antiguas secciones claras) */ .section--graphite p, .section--graphite .lead, .section--graphite li, .section--graphite dd { color: rgba(255,255,255,0.92) !important; } .section--graphite p[style*="--fg-soft"], .section--graphite p[style*="fg-soft"] { color: rgba(255,255,255,0.72) !important; } .section--graphite strong { color: var(--blanco); } .section--graphite em { color: var(--blanco); font-style: italic; } .section--graphite .section-head__label { color: var(--accent); border-color: var(--accent); } .section--graphite .stat { border-color: rgba(255,255,255,0.18); } .section--graphite .stat__num { color: var(--blanco); } .section--graphite .stat__label { color: rgba(255,255,255,0.7); } .section--graphite .factsheet { border-color: rgba(255,255,255,0.20); } .section--graphite .factsheet > div { border-color: rgba(255,255,255,0.20); } .section--graphite .factsheet dt { color: rgba(255,255,255,0.7); } .section--graphite .factsheet dd { color: var(--blanco); } .section--graphite .factsheet > div::before { background: var(--blanco); } .section--graphite .factsheet > div:hover { background: rgba(255,255,255,0.05); } .section--graphite .factsheet > div:hover dt { color: var(--blanco); } .section--graphite .note { border-left: 2px solid var(--accent); background: rgba(255,255,255,0.04); padding: 14px 20px 14px 22px; border-radius: 2px; } .section--graphite .note strong { color: var(--blanco); } .section--graphite .code-tag { color: rgba(255,255,255,0.7); } /* Cuenta atrás dentro de --graphite (no double-dark) */ .section--graphite .countdown { background: rgba(0,0,0,0.25); } .section--graphite .route-map { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); color: var(--blanco); } .section--graphite .route-map__note, .section--graphite .route-map .code-tag { color: rgba(255,255,255,0.78); } /* Acento cálido: bloques que actúan como pausa de marca */ .section--ocre { background: #C8A24A; /* dorado cálido sin caer en amarillo plano */ color: #1A1A1A; } .section--ocre .section-head__label { color: #5A2E00; border-color: #5A2E00; } .section--ocre h2, .section--ocre h3 { color: #1A1A1A; } /* Cooperación cívico-militar: acento verde claro Sobrescribe localmente el token --accent. Todos los elementos que lo usan (.section-head__label, border, etc.) cambian automáticamente. Contraste #86EFAC sobre el negro de --section--dark = 13.6:1 (AAA). */ .section--coop { --accent: #86EFAC; } .section--coop .section-head__label { color: #86EFAC; border-color: #86EFAC; } .section--coop .lead { color: var(--hielo); } .section--coop strong, .section--coop em { color: var(--blanco); } /* Naranja/rojo Mammut: pausa de alta intensidad para hitos */ .section--accent { background: var(--accent); color: var(--blanco); } .section--accent h1, .section--accent h2, .section--accent h3 { color: var(--blanco); } .section--accent .section-head__label { color: var(--blanco); border-color: var(--blanco); } .section--accent p, .section--accent .lead { color: var(--blanco) !important; } .section--accent p[style*="--fg-soft"], .section--accent p[style*="fg-soft"] { color: rgba(255,255,255,0.86) !important; } .section--accent strong { color: var(--blanco); } .section--accent .placeholder-block { border-color: rgba(255,255,255,0.45); color: rgba(255,255,255,0.86); background: rgba(255,255,255,0.05); } .section--accent .placeholder-block strong { color: var(--blanco); } /* Pequeña tira de color sobre la sección (acento horizontal) */ .section--rule { box-shadow: inset 0 4px 0 0 var(--accent); } /* ═══════════════════════════════════════════════════════════ SPOTLIGHT · Bloque editorial con foto a sangre (estilo Mammut) Ocupa 100vw, foto enorme con titular superpuesto. Permite romper el ritmo de las secciones tipográficas con un golpe visual fuerte. ═══════════════════════════════════════════════════════════ */ .spotlight { position: relative; width: 100%; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; color: var(--blanco); background: var(--negro); } .spotlight__bg { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1.05); transition: transform 1.6s var(--ease-out), filter 1.6s var(--ease-out); filter: saturate(0.95) contrast(1.05); } .spotlight:hover .spotlight__bg { transform: scale(1.0); filter: saturate(1.05) contrast(1.05); } .spotlight::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,14,26,0.10) 0%, rgba(10,14,26,0.00) 30%, rgba(10,14,26,0.78) 100%), linear-gradient(90deg, rgba(10,14,26,0.55) 0%, rgba(10,14,26,0.0) 55%); pointer-events: none; } .spotlight__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(60px, 10vw, 120px) var(--gutter); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } .spotlight__label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blanco); font-weight: 500; border-top: 1px solid var(--accent); padding-top: 10px; display: inline-flex; align-items: center; gap: 12px; } .spotlight__title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2.4rem, 7vw, 5.6rem); letter-spacing: -0.035em; line-height: 0.95; color: var(--blanco); margin: 0; max-width: 18ch; text-shadow: 0 2px 16px rgba(0,0,0,0.35); } .spotlight__lead { max-width: 52ch; color: rgba(255,255,255,0.92); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5; margin: 8px 0 0; text-shadow: 0 1px 8px rgba(0,0,0,0.35); } .spotlight__data { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--blanco); margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 28px; line-height: 1.7; } .spotlight__data span::before { content: attr(data-label) ": "; color: rgba(255,255,255,0.65); font-weight: 500; margin-right: 6px; } /* Variante: alineado a la derecha */ .spotlight--right .spotlight__inner { align-items: flex-end; text-align: right; } /* ═══════════════════════════════════════════════════════════ SECTION-COVER · cabecera con imagen de fondo dentro de una .section regular (sustituye al spotlight separado). Mismo lenguaje visual que .spotlight pero más compacta y embebida en el flujo editorial. ═══════════════════════════════════════════════════════════ */ .section--has-cover { padding-top: 0; padding-bottom: 0; /* Anula el min-height: 100vh y el centrado vertical heredados de .section. El propio .section-cover define su altura. */ min-height: 0; justify-content: flex-start; display: block; } .section-cover { position: relative; width: 100%; min-height: clamp(520px, 78vh, 780px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; color: var(--blanco); background: var(--negro); margin-bottom: 0; } .section-cover__bg { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1.04); transition: transform 1.6s var(--ease-out), filter 1.6s var(--ease-out); filter: saturate(0.95) contrast(1.05); } .section-cover:hover .section-cover__bg { transform: scale(1.0); filter: saturate(1.05) contrast(1.05); } .section-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,14,26,0.20) 0%, rgba(10,14,26,0.45) 50%, rgba(10,14,26,0.88) 100%), linear-gradient(90deg, rgba(10,14,26,0.78) 0%, rgba(10,14,26,0.20) 60%, rgba(10,14,26,0.0) 100%); pointer-events: none; } .section-cover__inner { position: relative; z-index: 2; width: 100%; padding: clamp(50px, 8vw, 100px) 0; } .section-cover__inner .section-head__label { color: var(--blanco); border-top-color: var(--accent); } .section-cover__title { color: var(--blanco) !important; text-shadow: 0 2px 16px rgba(0,0,0,0.35); margin-top: 14px; } .section-cover__lead { max-width: 52ch; color: rgba(255,255,255,0.92); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5; margin: 18px 0 0; text-shadow: 0 1px 8px rgba(0,0,0,0.45); } .section-cover__detail { max-width: 56ch; color: rgba(255,255,255,0.78); font-size: clamp(0.9rem, 1.05vw, 1rem); line-height: 1.6; margin: 22px 0 0; text-shadow: 0 1px 8px rgba(0,0,0,0.55); } .spotlight--right::after { background: linear-gradient(180deg, rgba(10,14,26,0.10) 0%, rgba(10,14,26,0.00) 30%, rgba(10,14,26,0.78) 100%), linear-gradient(-90deg, rgba(10,14,26,0.55) 0%, rgba(10,14,26,0.0) 55%); } /* Variante: cita central, gran respiración (rompe ritmo) */ .spotlight--quote { align-items: center; } .spotlight--quote .spotlight__inner { align-items: center; text-align: center; } .spotlight--quote .spotlight__title { font-size: clamp(2rem, 5vw, 4.2rem); max-width: 26ch; } /* ═══════════════════════════════════════════════════════════ Tarjeta cámara IGN · Spotlight 1 (home) ─────────────────────────────────────────────────────────── Mismo lenguaje visual que .wx-card del modo Base (glassmorphism crema sobre el fondo del spotlight). En escritorio flota arriba a la derecha sobre la imagen de la caldera; en móvil se apila al final de la sección para entregar al lector a la siguiente («Donde España toca la Antártida»). ═══════════════════════════════════════════════════════════ */ .spotlight--has-cam { /* Móvil: apilamos card + inner en columna y empujamos al fondo */ flex-direction: column; align-items: stretch; justify-content: flex-end; } .spotlight--has-cam .spotlight__inner { order: 1; } .spotlight--has-cam .spot-cam { order: 2; } .spot-cam { position: relative; z-index: 3; background: rgba(244, 242, 236, 0.92); color: var(--negro); padding: 14px 16px 12px; border-radius: 4px; display: flex; flex-direction: column; gap: 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.5); /* Móvil: misma anchura útil que .container, mismo gutter lateral */ margin: 0 var(--gutter) clamp(40px, 8vw, 80px); max-width: 560px; } .spot-cam__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .spot-cam .section-head__label { color: var(--negro); border-top-color: var(--accent); font-size: 0.65rem; } .spot-cam__tabs { display: inline-flex; border: 1px solid var(--gris-borde); overflow: hidden; background: rgba(255, 255, 255, 0.6); } .spot-cam__tabs button { appearance: none; background: transparent; border: 0; color: var(--piedra); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 12px; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .spot-cam__tabs button.is-active { background: var(--negro); color: var(--blanco); } .spot-cam__frame { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--negro); overflow: hidden; border-radius: 2px; } .spot-cam__frame img, .spot-cam__frame video { width: 100%; height: 100%; object-fit: cover; display: block; } .spot-cam__hint { margin: 0; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--piedra); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .spot-cam__hint a { color: var(--negro); text-decoration: none; border-bottom: 1px solid var(--gris-borde); padding-bottom: 1px; transition: border-color var(--t-fast) var(--ease); } .spot-cam__hint a:hover, .spot-cam__hint a:focus-visible { border-bottom-color: var(--accent); } /* Escritorio · la card flota arriba a la derecha del spotlight. El inner sigue pegado abajo con su comportamiento original. */ @media (min-width: 880px) { .spotlight--has-cam { flex-direction: row; align-items: flex-end; justify-content: normal; } .spotlight--has-cam .spot-cam { position: absolute; top: clamp(60px, 8vw, 110px); right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); width: clamp(280px, 26vw, 360px); max-width: none; margin: 0; aspect-ratio: auto; } /* Acota el ancho del texto del inner para que nunca se cruce visualmente con la card aunque la sección se acorte. */ .spotlight--has-cam .spotlight__lead { max-width: min(52ch, calc(100% - clamp(280px, 26vw, 360px) - 40px)); } } /* ═══════════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════════ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; /* Gradiente más opaco para garantizar legibilidad sobre vídeo (incluso con nieve) */ background: linear-gradient(180deg, rgba(10,14,26,0.78) 0%, rgba(10,14,26,0.55) 60%, rgba(10,14,26,0.0) 100%); transition: background var(--t-norm) var(--ease), backdrop-filter var(--t-norm) var(--ease), border-color var(--t-norm) var(--ease); border-bottom: 1px solid transparent; } .site-header.is-solid { background: rgba(244, 242, 236, 0.94); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom-color: var(--gris-borde); } .nav__container { max-width: var(--maxw); margin-inline: auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); } .nav__brand { display: flex; align-items: center; gap: 14px; color: var(--blanco); font-weight: 500; font-size: 0.92rem; flex: 1 1 auto; min-width: 0; } .nav__brand-logo { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; } .nav__brand-logo--light { display: none; } .site-header.is-solid .nav__brand-logo--dark { display: none; } .site-header.is-solid .nav__brand-logo--light { display: block; } .site-header.is-solid .nav__brand, .site-header.is-solid .nav__brand strong { color: var(--negro); } .site-header.is-solid .nav__brand small { color: var(--fg-soft); } .nav__brand span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .nav__brand strong { font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; color: var(--blanco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav__brand small { font-family: var(--mono); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-top: 4px; line-height: 1.5; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .site-header.is-solid .nav__brand small { color: var(--fg-soft); text-shadow: none; } @media (max-width: 600px) { .nav__brand small { display: none; } /* Sólo strong en móvil */ } .nav__menu { display: flex; gap: 36px; align-items: center; order: 1; margin-left: auto; /* empuja menú + lupa al lado derecho */ } .nav__menu a { color: var(--blanco); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.005em; position: relative; padding: 8px 0; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,0.55); transition: color var(--t-fast) var(--ease); } .site-header.is-solid .nav__menu a { color: var(--fg); text-shadow: none; } .nav__menu a:hover { color: var(--accent); } /* Item "Interno" del menú · separado, con candado */ .nav__menu .nav__internal { display: inline-flex; align-items: center; gap: 6px; padding-left: 18px; margin-left: 6px; border-left: 1px solid rgba(255,255,255,0.18); font-size: 0.84rem; letter-spacing: 0.04em; opacity: 0.78; } .nav__menu a::after { content: ""; position: absolute; inset: auto 0 2px 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-norm) var(--ease-out); } .nav__menu a:hover::after, .nav__menu a.is-active::after { transform: scaleX(1); } /* Toggle móvil · 44×44 mínimo recomendado WCAG 2.5.5 */ .nav__toggle { display: none; order: 3; /* hamburguesa siempre la última (móvil) */ width: 44px; height: 44px; background: transparent; border: 0; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav__toggle span { display: block; width: 22px; height: 1.5px; background: var(--blanco); transition: transform var(--t-norm) var(--ease), opacity var(--t-fast); } .site-header.is-solid .nav__toggle span { background: var(--negro); } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 880px) { .nav__toggle { display: flex; } .nav__menu { position: fixed; inset: var(--header-h) 0 0 0; background: var(--negro); flex-direction: column; align-items: flex-start; padding: 24px var(--gutter) 32px; gap: 0; transform: translateX(100%); transition: transform var(--t-norm) var(--ease-out); overflow-y: auto; overscroll-behavior: contain; } .nav__menu.is-open { transform: translateX(0); } .nav__menu a { color: var(--hielo); font-family: var(--sans); font-style: normal; font-size: 1.05rem; font-weight: 500; letter-spacing: 0; padding: 14px 0; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .nav__menu a::after { display: none; }} /* ═══════════════════════════════════════════════════════════ HERO · vídeo + composición editorial ═══════════════════════════════════════════════════════════ */ .hero { position: relative; /* Orden correcto: el fallback va PRIMERO; navegadores modernos que entienden 100svh sobreescriben (Chrome 108+, Safari 15.4+, Firefox 101+). Antes estaba al revés y la regla 100svh quedaba muerta. */ min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: var(--blanco); background: var(--negro); padding: var(--gutter) 0 80px; } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,26,0.4) 0%, rgba(10,14,26,0.2) 30%, rgba(10,14,26,0.92) 100%), linear-gradient(90deg, rgba(10,14,26,0.4) 0%, transparent 50%); z-index: 1; } .hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; } @media (min-width: 880px) { .hero__inner { grid-template-columns: 1fr auto; gap: 64px; }} .hero__main { max-width: 920px; } .hero__code { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hielo); margin: 0 0 28px; display: flex; align-items: center; gap: 14px; opacity: 0; animation: fadeUp 1s var(--ease-out) 0.3s forwards; } .hero__code::before { content: ""; width: 28px; height: 1px; background: var(--accent); } .hero__title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(3.5rem, 13vw, 11rem); color: var(--blanco); line-height: 0.85; letter-spacing: -0.04em; margin: 0; opacity: 0; animation: fadeUp 1.2s var(--ease-out) 0.5s forwards; } .hero__title em { font-style: italic; display: block; } .hero__subtitle { margin: 32px 0 0; font-size: clamp(1rem, 1.6vw, 1.3rem); line-height: 1.3; color: var(--blanco); font-weight: 400; letter-spacing: -0.005em; max-width: 540px; opacity: 0; animation: fadeUp 1s var(--ease-out) 0.7s forwards; } .hero__meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hielo); text-align: right; line-height: 2; opacity: 0; animation: fadeUp 1s var(--ease-out) 0.9s forwards; align-self: end; } .hero__meta-line { display: block; color: var(--azul-claro); } .hero__meta strong { color: var(--blanco); font-weight: 600; } @media (max-width: 879px) { .hero__meta { text-align: left; }} .hero__scroll { position: absolute; bottom: 28px; left: var(--gutter); z-index: 2; color: var(--hielo); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; opacity: 0; animation: fadeUp 1s var(--ease-out) 1.1s forwards; } .hero__scroll::after { content: ""; width: 36px; height: 1px; background: var(--accent); animation: scrollLine 2.4s var(--ease-out) infinite; } @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollLine { 0%, 100% { transform: scaleX(0.4); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } } /* ═══════════════════════════════════════════════════════════ ESTRUCTURA · stat blocks · listas ═══════════════════════════════════════════════════════════ */ /* Encabezado de sección · etiqueta SIEMPRE encima del título */ .section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 64px; max-width: 880px; } /* La variante --split mantiene su nombre por compatibilidad pero ya no parte en dos columnas: la etiqueta queda apilada arriba del título. */ .section-head--split { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .section-head__label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 500; border-top: 1px solid var(--accent); padding-top: 12px; display: inline-block; width: auto; min-width: 140px; } .section-head h2 { margin: 0; max-width: 800px; } /* ─── Bloques de estadísticas (números grandes editoriales) ─── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; margin-top: 64px; } .stat { border-top: 1px solid var(--gris-borde); padding-top: 20px; } .stat__num { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--negro); line-height: 1; letter-spacing: -0.03em; margin: 0 0 12px; } .stat__label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft); margin: 0; line-height: 1.5; } /* Variant oscura */ .section--dark .stat { border-color: rgba(255,255,255,0.15); } .section--dark .stat__num { color: var(--blanco); } .section--dark .stat__label { color: var(--azul-claro); } /* ═══════════════════════════════════════════════════════════ GALERÍA / IMÁGENES ═══════════════════════════════════════════════════════════ */ .image-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 48px; } .image-strip figure { margin: 0; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--negro); } .image-strip img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.05); transition: transform var(--t-slow) var(--ease-out), filter var(--t-norm) var(--ease); } .image-strip figure:hover img { transform: scale(1.03); filter: saturate(1) contrast(1); } .image-strip figure::after { content: attr(data-caption); position: absolute; bottom: 16px; left: 16px; right: 16px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blanco); text-shadow: 0 1px 8px rgba(0,0,0,0.6); pointer-events: none; } /* ═══════════════════════════════════════════════════════════ PÁGINA INTERNA · page-hero ═══════════════════════════════════════════════════════════ */ .page-hero { position: relative; background: var(--negro); color: var(--hielo); padding: calc(var(--header-h) + 88px) var(--gutter) 88px; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 0%, rgba(127,169,164,0.12), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(200,16,46,0.08), transparent 60%); pointer-events: none; } /* Variante con slideshow de fondo (Comunicación) · más compacto */ .page-hero--cover { isolation: isolate; padding-top: calc(var(--header-h) + 48px); padding-bottom: 56px; } .page-hero--cover::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,14,26,0.55) 0%, rgba(10,14,26,0.30) 35%, rgba(10,14,26,0.85) 100%), linear-gradient(90deg, rgba(10,14,26,0.55) 0%, rgba(10,14,26,0.0) 60%); pointer-events: none; } .page-hero--cover h1 { font-size: clamp(2rem, 5.5vw, 4rem); margin-bottom: 18px; } .page-hero--cover p.lead { font-size: clamp(0.95rem, 1.2vw, 1.05rem); max-width: 50ch; } .page-hero__slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .page-hero__slide { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; transform: scale(1.04); transition: opacity 1.6s var(--ease), transform 8s linear; filter: saturate(0.95) contrast(1.05); } .page-hero__slide.is-active { opacity: 1; transform: scale(1.0); } @media (prefers-reduced-motion: reduce) { .page-hero__slide { transition: opacity 0.4s linear; transform: none; } .page-hero__slide.is-active { transform: none; }} .page-hero__inner { position: relative; max-width: var(--maxw); margin-inline: auto; z-index: 2; } .page-hero__crumb { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--azul-claro); margin: 0 0 28px; display: flex; align-items: center; gap: 10px; } .page-hero__crumb::before { content: ""; width: 24px; height: 1px; background: var(--accent); } .page-hero__crumb a { color: var(--azul-claro); } .page-hero__crumb a:hover { color: var(--blanco); } .page-hero h1 { color: var(--blanco); font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2.6rem, 8vw, 6rem); letter-spacing: -0.03em; line-height: 0.92; margin: 0 0 24px; max-width: 18ch; } .page-hero p.lead { color: var(--hielo); max-width: 56ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.45; opacity: 0.85; } /* ═══════════════════════════════════════════════════════════ ROSTER · dotación ─ Rejilla de tarjetas cuadradas. Al pulsarlas se abre un popup fullscreen con el CV (ver .roster-popup más abajo). El contenido del CV vive en un