/* ============================================================
PREMIUM DESIGN SYSTEM — Falla Luis Cendoya
Minimalismo moderno · Inter · Tokens · Micro-animaciones
Carga después de style.css. Sustituirá gradualmente al CSS legacy.
============================================================ */
/* Inter se carga como en el de cada página (no @import: encadena
descargas y retrasa el primer pintado). */
/* ---------- TOKENS ---------- */
:root {
/* Tipografía */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Escala tipográfica fluida */
--fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8rem);
--fs-sm: clamp(0.85rem, 0.82rem + 0.2vw, 0.92rem);
--fs-base: clamp(0.95rem, 0.92rem + 0.25vw, 1.02rem);
--fs-lg: clamp(1.05rem, 1rem + 0.3vw, 1.15rem);
--fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--fs-2xl: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
--fs-3xl: clamp(2.2rem, 1.8rem + 2vw, 3.5rem);
--fs-display: clamp(3rem, 2.2rem + 4vw, 6rem);
--fs-hero: clamp(4rem, 3rem + 8vw, 10rem);
/* Espaciado */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
--space-24: 6rem;
--space-32: 8rem;
/* Color (light por defecto) */
--c-bg: #FAFAFA;
--c-surface: #FFFFFF;
--c-surface-2: #F4F4F4;
--c-ink: #0A0A0A;
--c-ink-2: #1D1D1D;
--c-muted: #6B6B6B;
--c-line: rgba(10, 10, 10, 0.08);
--c-line-strong: rgba(10, 10, 10, 0.16);
--c-accent: #C29B57;
--c-accent-soft: rgba(194, 155, 87, 0.12);
/* Azul de marca + degradado azul → oro */
--c-blue: #1B3A6B;
--c-blue-deep: #0E2447;
--c-blue-soft: rgba(27, 58, 107, 0.12);
--grad-brand: linear-gradient(135deg, var(--c-blue-deep) 0%, var(--c-blue) 45%, var(--c-accent) 100%);
--grad-brand-soft: linear-gradient(135deg, var(--c-blue-soft), var(--c-accent-soft));
/* Variables que el CSS legacy esperaba — definidas aquí para evitar fallbacks vacíos */
--primary: var(--c-ink);
--danger: #C0392B;
/* Sombras (muy sutiles, premium) */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.14);
/* Radios */
--r-sm: 6px;
--r-md: 12px;
--r-lg: 20px;
--r-full: 999px;
/* Movimiento */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 180ms;
--dur: 320ms;
--dur-slow: 600ms;
/* Layout */
--container-max: 1320px;
--container-pad: clamp(1rem, 3vw, 2rem);
}
[data-theme="dark"] {
--c-bg: #0A0A0A;
--c-surface: #121212;
--c-surface-2: #1A1A1A;
--c-ink: #F5F5F5;
--c-ink-2: #E6E6E6;
--c-muted: #9A9A9A;
--c-line: rgba(255, 255, 255, 0.08);
--c-line-strong: rgba(255, 255, 255, 0.18);
--c-accent: #D4AF37;
--c-accent-soft: rgba(212, 175, 55, 0.14);
--c-blue: #3B6BB5;
--c-blue-deep: #1F4A92;
--c-blue-soft: rgba(59, 107, 181, 0.16);
--grad-brand: linear-gradient(135deg, var(--c-blue-deep) 0%, var(--c-blue) 45%, var(--c-accent) 100%);
--grad-brand-soft: linear-gradient(135deg, var(--c-blue-soft), var(--c-accent-soft));
--primary: var(--c-ink);
}
/* ---------- PÁGINAS PREMIUM (opt-in) ---------- */
/* Aplica el nuevo sistema solo a páginas marcadas con .premium-page */
.premium-page {
font-family: var(--font-sans);
font-feature-settings: 'cv11', 'ss01', 'ss03';
font-size: var(--fs-base);
line-height: 1.6;
color: var(--c-ink);
background: var(--c-bg);
letter-spacing: -0.011em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@supports (font-variation-settings: normal) {
.premium-page {
font-family: 'Inter var', var(--font-sans);
}
}
.premium-page ::selection {
background: var(--c-ink);
color: var(--c-bg);
}
.premium-page h1,
.premium-page h2,
.premium-page h3,
.premium-page h4 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.035em;
color: var(--c-ink);
}
.premium-page p {
color: var(--c-ink-2);
}
/* ---------- NAV PREMIUM ---------- */
.premium-page nav {
background: color-mix(in srgb, var(--c-bg) 75%, transparent);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--c-line);
transition: background var(--dur) var(--ease-out);
}
/* ---------- CONTENEDOR ---------- */
.premium-page .container {
max-width: var(--container-max);
padding-inline: var(--container-pad);
}
/* ---------- HERO ---------- */
.premium-hero {
min-height: 100svh;
display: grid;
place-content: center;
text-align: center;
padding: var(--space-24) var(--container-pad) var(--space-16);
position: relative;
overflow: hidden;
background: var(--c-bg);
}
.premium-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 0%, var(--c-accent-soft), transparent 60%),
radial-gradient(ellipse at 50% 100%, var(--c-accent-soft), transparent 70%);
opacity: 0.7;
pointer-events: none;
}
.premium-hero__eyebrow {
font-size: var(--fs-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
margin-bottom: var(--space-8);
display: inline-flex;
align-items: center;
gap: var(--space-3);
position: relative;
z-index: 1;
}
.premium-hero__eyebrow::before,
.premium-hero__eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--c-line-strong);
}
.premium-hero__title {
font-size: var(--fs-hero);
font-weight: 700;
letter-spacing: -0.05em;
line-height: 0.92;
margin-bottom: var(--space-6);
position: relative;
z-index: 1;
}
.premium-hero__title em {
font-style: italic;
font-weight: 300;
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ============================================================
PAGE-BG — atmósfera reutilizable (rayos + halo + grain + polvo)
para páginas internas. Se inyecta como primer hijo del body con
position: fixed para que cubra el viewport como capa de fondo.
============================================================ */
.page-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* Asegura que TODO contenido posterior pinte encima del page-bg */
/* Los overlays a pantalla completa (.pdf-lightbox, .lightbox) quedan
excluidos: necesitan su position:fixed y z-index alto propios. */
body > .page-bg ~ *:not(.pdf-lightbox):not(.lightbox) { position: relative; z-index: 1; }
/* Variantes ULTRA-ligeras para páginas internas: solo halo estático +
rayos estáticos + 6 partículas. NO grain, NO animaciones pesadas. */
.page-bg .hero-halo {
top: 50%;
right: -10%;
width: 70vw;
opacity: 0.45;
animation: none; /* estático en internas */
}
.page-bg .hero-streak {
opacity: 0.35;
animation: none; /* sin pulsar en internas */
}
.page-bg .hero-grain { display: none; } /* sin grain → -CPU */
.page-bg .hero-ambient span:nth-child(n+9) { display: none; } /* solo 8 dust */
.page-bg .hero-ambient span { filter: none; } /* sin blur en dust */
/* ============================================================
HERO — composición cinematográfica:
atmósfera (vignette + halo + lightcone + grain) +
escudo bronce protagonista con halo orgánico +
badge centenario + reflejo del título.
============================================================ */
/* --- Capas atmosféricas --- */
.hero-atmosphere {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.hero-vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 50%,
transparent 30%,
rgba(0, 0, 0, 0.55) 80%,
rgba(0, 0, 0, 0.85) 100%);
}
.hero-halo {
position: absolute;
top: 45%;
right: 5%;
width: 80vw;
max-width: 1100px;
aspect-ratio: 1 / 1;
transform: translateY(-50%) translateZ(0);
/* Halo azul: gradient YA difuso, sin blur (mucho más barato en Chrome) */
background: radial-gradient(circle at 40% 50%,
rgba(80, 160, 255, 0.40) 0%,
rgba(31, 74, 146, 0.25) 20%,
rgba(15, 40, 90, 0.12) 45%,
transparent 70%);
opacity: 0;
animation:
halo-rise 2500ms ease-out 200ms forwards,
halo-breathe 6s ease-in-out 2800ms infinite;
}
@keyframes halo-rise {
0% { opacity: 0; transform: translateY(-50%) scale(0.7); }
100% { opacity: 0.85; transform: translateY(-50%) scale(1); }
}
@keyframes halo-breathe {
0%, 100% { opacity: 0.7; }
50% { opacity: 0.95; }
}
.hero-lightcone {
position: absolute;
top: -30%;
right: 15%;
width: 40vw;
height: 130vh;
background: linear-gradient(190deg,
rgba(140, 200, 255, 0.10) 0%,
rgba(80, 160, 255, 0.06) 30%,
transparent 70%);
transform: rotate(8deg);
filter: blur(40px);
pointer-events: none;
}
/* --- Rayos de luz diagonales (estilo jersey) --- */
.hero-streaks {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.hero-streak {
position: absolute;
background: linear-gradient(90deg,
transparent 0%,
rgba(140, 200, 255, 0.0) 12%,
rgba(160, 215, 255, 0.30) 45%,
rgba(120, 190, 255, 0.25) 55%,
rgba(80, 160, 255, 0.10) 80%,
transparent 100%);
box-shadow:
0 0 10px rgba(140, 200, 255, 0.18),
0 0 22px rgba(80, 160, 255, 0.09);
filter: blur(3.5px);
transform-origin: left center;
opacity: 0;
}
.hero-streak.hs1 { top: 18%; left: -20%; width: 140%; height: 3px; transform: rotate(-15deg); animation: streak-pulse 5s ease-in-out 1500ms infinite; }
.hero-streak.hs2 { top: 38%; left: -10%; width: 130%; height: 2px; transform: rotate(-12deg); animation: streak-pulse 6s ease-in-out 1800ms infinite; }
.hero-streak.hs3 { top: 62%; left: -25%; width: 150%; height: 4px; transform: rotate(-18deg); animation: streak-pulse 5.5s ease-in-out 2100ms infinite; }
.hero-streak.hs4 { top: 80%; left: -15%; width: 130%; height: 2px; transform: rotate(-10deg); animation: streak-pulse 7s ease-in-out 1300ms infinite; }
@keyframes streak-pulse {
0%, 100% { opacity: 0; }
20% { opacity: 0.25; }
50% { opacity: 0.5; }
80% { opacity: 0.2; }
}
.hero-grain {
position: absolute;
inset: 0;
opacity: 0.06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* --- Badge centenario superior --- */
.hero-centenary {
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 14px;
z-index: 3;
opacity: 0;
animation: cent-fade 1000ms ease-out 1600ms forwards;
}
.hero-centenary__line {
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.75), transparent);
}
.hero-centenary__text {
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.35em;
text-transform: uppercase;
color: #C5A445;
text-shadow: 0 0 18px rgba(212, 175, 55, 0.5);
}
@keyframes cent-fade {
0% { opacity: 0; transform: translate(-50%, -8px); }
100% { opacity: 1; transform: translate(-50%, 0); }
}
/* --- Línea acento bajo el título --- */
.htl-accent {
display: block;
margin: 24px auto 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #C5A445 30%, #C5A445 70%, transparent);
box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
border-radius: 2px;
opacity: 0;
animation: accent-grow 900ms cubic-bezier(0.22, 1, 0.36, 1) 2400ms forwards;
}
.htl-accent::before,
.htl-accent::after {
content: '';
position: absolute;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: #C5A445;
box-shadow: 0 0 12px rgba(212, 175, 55, 0.9);
transform: translateY(-50%);
}
.htl-accent { position: relative; }
.htl-accent::before { left: calc(50% - 120px); }
.htl-accent::after { right: calc(50% - 120px); }
@keyframes accent-grow {
0% { opacity: 0; width: 0; }
100% { opacity: 1; width: 240px; }
}
/* --- Responsive --- */
@media (max-width: 900px) {
.hero-halo { width: 110vw; }
.hero-centenary__text { font-size: 0.62rem; letter-spacing: 0.25em; }
.hero-centenary__line { width: 36px; }
}
/* El bloque de prefers-reduced-motion que habia aqui se ha unificado con
el del final del archivo, que cubre ademas rayos y polvo y deja que las
animaciones de entrada se completen en vez de cortarlas en seco. */
/* ============================================================
HERO TITLE ANIMATED:
1) Título sube limpio y legible (sin estados invisibles)
2) Sparkles ambientales en bucle
============================================================ */
.premium-hero { position: relative; overflow: hidden; }
.hero-title-animated {
display: block;
position: relative;
z-index: 2;
/* Relieve metálico — ambient depth para todo el título */
filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.3));
}
/* "Falla Luis" — azul pulido embossed (pareja del bronce de "Cendoya"),
con los tonos --c-blue/--c-blue-deep del sistema de diseño (theme-aware)
en vez del blanco plano de antes. drop-shadow (no text-shadow) porque
el relleno es transparente vía background-clip: text. */
.hero-title-animated .htl-line:nth-child(1) {
display: inline-block;
background: linear-gradient(135deg,
color-mix(in srgb, var(--c-blue-deep) 85%, black) 0%,
var(--c-blue-deep) 15%,
color-mix(in srgb, var(--c-blue) 60%, white) 32%,
var(--c-blue) 50%,
color-mix(in srgb, var(--c-blue) 55%, white) 68%,
var(--c-blue-deep) 85%,
color-mix(in srgb, var(--c-blue-deep) 85%, black) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter:
/* Highlight especular frío en el borde superior */
drop-shadow(0 -1px 0 rgba(200, 220, 255, 0.55))
drop-shadow(0 -2px 2px rgba(180, 210, 255, 0.35))
/* Sombra inferior interna (talla del relieve) */
drop-shadow(0 1px 0 rgba(8, 16, 35, 0.65))
drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.55))
/* Sombra de contacto + profundidad cinematográfica */
drop-shadow(0 8px 18px rgba(8, 16, 35, 0.5))
drop-shadow(0 16px 32px rgba(0, 0, 0, 0.3));
}
/* "Cendoya" — bronce repujado (drop-shadow porque tiene fill transparente) */
.hero-title-animated .htl-em em {
filter:
/* Highlight cálido borde superior */
drop-shadow(0 -1px 0 rgba(255, 230, 160, 0.55))
drop-shadow(0 -2px 2px rgba(255, 220, 130, 0.35))
/* Sombra inferior caliente — talla del bronce */
drop-shadow(0 1px 0 rgba(40, 25, 8, 0.7))
drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.55))
/* Profundidad ambient */
drop-shadow(0 8px 18px rgba(30, 18, 5, 0.55))
drop-shadow(0 18px 32px rgba(0, 0, 0, 0.4));
}
.hero-title-animated .htl-line {
display: block;
line-height: 1.1;
padding: 0.04em 0;
white-space: nowrap; /* Evita que "Falla Luis" se rompa en 2 líneas */
}
/* Responsive: ajustar tamaño en móvil para que "Falla Luis" quepa en 1 línea */
@media (max-width: 720px) {
.premium-hero__title { font-size: clamp(2.6rem, 11.5vw, 4.5rem); }
}
@media (max-width: 420px) {
.premium-hero__title { font-size: clamp(2.2rem, 12vw, 3.5rem); }
}
/* Cendoya: gradiente con textura de "oro viejo" — paradas alternadas
highlight/sombra para simular reflejos sobre metal envejecido + pátina.
Sin animación de entrada: el título es visible desde el primer pintado. */
.hero-title-animated .htl-em em {
display: inline-block;
font-style: italic;
font-weight: 300;
/* Bronce envejecido idéntico al escudo: alterna highlights cálidos y
sombras profundas con tonos oliva-marrón típicos del bronce patinado. */
background: linear-gradient(135deg,
#4A3618 0%, /* sombra profunda, casi café */
#6B4F1F 10%, /* bronce oscuro */
#C8A040 22%, /* highlight dorado cálido (especular) */
#8B6A2E 34%, /* mid bronce */
#E4C865 44%, /* especular brillante */
#9F7F30 54%, /* sombra dorada media */
#C8A040 66%, /* highlight repetido */
#6B4F1F 78%, /* sombra olivácea */
#A07D38 88%, /* reflejo apagado */
#3C2D11 100%); /* sombra más profunda final */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
/* (el relieve repujado lo aplica la regla `.htl-em em` arriba) */
}
/* ============================================================
POLVO DORADO FLOTANTE — partículas ambientales, suben muy lentas
con leve deriva horizontal, parpadeo sutil y profundidad (capas).
============================================================ */
.hero-ambient {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.hero-ambient span {
position: absolute;
bottom: -2vh;
left: var(--dust-x, 50%);
width: var(--dust-size, 2px);
height: var(--dust-size, 2px);
border-radius: 50%;
background: radial-gradient(circle,
#FFF1B5 0%,
#FFE17A 30%,
rgba(212, 175, 55, 0.55) 60%,
transparent 85%);
box-shadow: 0 0 6px rgba(255, 225, 122, 0.7);
opacity: 0;
will-change: transform, opacity;
animation: dust-drift var(--dust-dur, 14s) ease-in-out var(--dust-delay, 0s) infinite;
}
@keyframes dust-drift {
0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
8% { opacity: var(--dust-op, 0.85); }
50% { transform: translate(var(--dust-mid-x, 0), -55vh) scale(1); opacity: var(--dust-op, 0.85); }
92% { opacity: 0.15; }
100% { transform: translate(var(--dust-end-x, 0), -110vh) scale(0.4); opacity: 0; }
}
/* 18 partículas con propiedades individuales para variedad orgánica */
.hero-ambient span:nth-child(1) { --dust-x: 8%; --dust-size: 3px; --dust-mid-x: 2vw; --dust-end-x: 5vw; --dust-dur: 16s; --dust-delay: 3s; --dust-op: 0.9; }
.hero-ambient span:nth-child(2) { --dust-x: 22%; --dust-size: 2px; --dust-mid-x: -1vw; --dust-end-x: -3vw; --dust-dur: 19s; --dust-delay: 4.5s; --dust-op: 0.7; }
.hero-ambient span:nth-child(3) { --dust-x: 38%; --dust-size: 1.5px; --dust-mid-x: 3vw; --dust-end-x: 4vw; --dust-dur: 22s; --dust-delay: 6s; --dust-op: 0.55; --dust-blur: 0.5px; }
.hero-ambient span:nth-child(4) { --dust-x: 52%; --dust-size: 4px; --dust-mid-x: -2vw; --dust-end-x: -4vw; --dust-dur: 14s; --dust-delay: 3.8s; --dust-op: 1; }
.hero-ambient span:nth-child(5) { --dust-x: 66%; --dust-size: 2.5px; --dust-mid-x: 1vw; --dust-end-x: 3vw; --dust-dur: 17s; --dust-delay: 5s; --dust-op: 0.8; }
.hero-ambient span:nth-child(6) { --dust-x: 78%; --dust-size: 2px; --dust-mid-x: -3vw; --dust-end-x: -6vw; --dust-dur: 20s; --dust-delay: 7s; --dust-op: 0.65; --dust-blur: 0.4px; }
.hero-ambient span:nth-child(7) { --dust-x: 90%; --dust-size: 3.5px; --dust-mid-x: -1vw; --dust-end-x: -2vw; --dust-dur: 15s; --dust-delay: 4s; --dust-op: 0.95; }
.hero-ambient span:nth-child(8) { --dust-x: 14%; --dust-size: 2.5px; --dust-mid-x: 2vw; --dust-end-x: 3vw; --dust-dur: 18s; --dust-delay: 8s; --dust-op: 0.7; }
.hero-ambient span:nth-child(9) { --dust-x: 30%; --dust-size: 1.5px; --dust-mid-x: -2vw; --dust-end-x: -5vw; --dust-dur: 23s; --dust-delay: 9s; --dust-op: 0.5; --dust-blur: 0.6px; }
.hero-ambient span:nth-child(10) { --dust-x: 45%; --dust-size: 3px; --dust-mid-x: 1vw; --dust-end-x: 4vw; --dust-dur: 16s; --dust-delay: 11s; --dust-op: 0.85; }
.hero-ambient span:nth-child(11) { --dust-x: 58%; --dust-size: 2px; --dust-mid-x: -2vw; --dust-end-x: -3vw; --dust-dur: 19s; --dust-delay: 6.5s; --dust-op: 0.75; }
.hero-ambient span:nth-child(12) { --dust-x: 72%; --dust-size: 4px; --dust-mid-x: 3vw; --dust-end-x: 5vw; --dust-dur: 13s; --dust-delay: 10s; --dust-op: 1; }
.hero-ambient span:nth-child(13) { --dust-x: 84%; --dust-size: 1.5px; --dust-mid-x: -1vw; --dust-end-x: -2vw; --dust-dur: 21s; --dust-delay: 12s; --dust-op: 0.6; --dust-blur: 0.5px; }
.hero-ambient span:nth-child(14) { --dust-x: 5%; --dust-size: 2.5px; --dust-mid-x: 2vw; --dust-end-x: 4vw; --dust-dur: 17s; --dust-delay: 13s; --dust-op: 0.8; }
.hero-ambient span:nth-child(15) { --dust-x: 25%; --dust-size: 3px; --dust-mid-x: -3vw; --dust-end-x: -5vw; --dust-dur: 15s; --dust-delay: 14s; --dust-op: 0.9; }
.hero-ambient span:nth-child(16) { --dust-x: 48%; --dust-size: 1.5px; --dust-mid-x: 1vw; --dust-end-x: 2vw; --dust-dur: 24s; --dust-delay: 16s; --dust-op: 0.55; --dust-blur: 0.7px; }
.hero-ambient span:nth-child(17) { --dust-x: 63%; --dust-size: 2.5px; --dust-mid-x: -2vw; --dust-end-x: -4vw; --dust-dur: 18s; --dust-delay: 15s; --dust-op: 0.75; }
.hero-ambient span:nth-child(18) { --dust-x: 95%; --dust-size: 2px; --dust-mid-x: -4vw; --dust-end-x: -7vw; --dust-dur: 20s; --dust-delay: 17s; --dust-op: 0.65; --dust-blur: 0.4px; }
@media (prefers-reduced-motion: reduce) {
.hero-ambient span { animation: none; opacity: 0; }
.hero-streak,
.hero-lightcone,
.hero-grain {
animation: none !important;
transition: none !important;
opacity: 0;
}
}
.premium-hero__lede {
max-width: 52ch;
margin: 0 auto var(--space-12);
font-size: var(--fs-lg);
color: var(--c-muted);
position: relative;
z-index: 1;
}
/* ---------- CUENTA ATRÁS PREMIUM ---------- */
.premium-countdown {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(0.5rem, 2vw, 2rem);
max-width: 720px;
margin: 0 auto var(--space-12);
position: relative;
z-index: 1;
}
.premium-countdown__unit {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-6) var(--space-3);
border-left: 1px solid var(--c-line);
}
.premium-countdown__unit:first-child {
border-left: none;
}
.premium-countdown__num {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 200;
letter-spacing: -0.04em;
line-height: 1;
color: var(--c-ink);
font-variant-numeric: tabular-nums;
}
.premium-countdown__label {
font-size: var(--fs-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
}
/* ---------- BOTONES ---------- */
.btn-premium {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.95rem 1.75rem;
background: var(--c-ink);
color: var(--c-bg);
border-radius: var(--r-full);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: -0.005em;
border: 1px solid var(--c-ink);
cursor: pointer;
transition: transform var(--dur) var(--ease-out),
background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
position: relative;
z-index: 1;
}
.btn-premium:hover {
transform: translateY(-2px);
background: transparent;
color: var(--c-ink);
}
.btn-premium--ghost {
background: transparent;
color: var(--c-ink);
border-color: var(--c-line-strong);
}
.btn-premium--ghost:hover {
background: var(--c-ink);
color: var(--c-bg);
}
/* ---------- SECCIÓN ---------- */
.premium-section {
padding: var(--space-32) var(--container-pad);
max-width: var(--container-max);
margin: 0 auto;
}
.premium-section__head {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
margin-bottom: var(--space-16);
max-width: 720px;
}
.premium-section__eyebrow {
font-size: var(--fs-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
}
.premium-section__title {
font-size: var(--fs-3xl);
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1.05;
}
.premium-section__lede {
font-size: var(--fs-lg);
color: var(--c-muted);
max-width: 56ch;
}
/* ---------- GRID DE FEATURES ---------- */
.premium-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1px;
background: var(--c-line);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
overflow: hidden;
}
.premium-card {
background: var(--c-bg);
padding: var(--space-12) var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-4);
transition: background var(--dur) var(--ease-out);
position: relative;
color: inherit;
text-decoration: none;
min-height: 280px;
}
.premium-card:hover {
background: var(--c-surface-2);
}
.premium-card__icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
font-size: 1.25rem;
color: var(--c-accent);
margin-bottom: var(--space-4);
}
.premium-card__title {
font-size: var(--fs-xl);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--c-ink);
}
.premium-card__desc {
font-size: var(--fs-base);
color: var(--c-muted);
line-height: 1.55;
flex: 1;
}
.premium-card__arrow {
margin-top: var(--space-6);
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-ink);
letter-spacing: -0.005em;
transition: gap var(--dur) var(--ease-out);
}
.premium-card:hover .premium-card__arrow {
gap: var(--space-3);
}
.premium-card__arrow svg {
width: 14px;
height: 14px;
transition: transform var(--dur) var(--ease-out);
}
.premium-card:hover .premium-card__arrow svg {
transform: translateX(4px);
}
/* ---------- MICRO-ANIMACIONES SCROLL ---------- */
.reveal-up {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out);
}
.reveal-up.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-up[data-delay="1"] {
transition-delay: 80ms;
}
.reveal-up[data-delay="2"] {
transition-delay: 160ms;
}
.reveal-up[data-delay="3"] {
transition-delay: 240ms;
}
.reveal-up[data-delay="4"] {
transition-delay: 320ms;
}
@media (prefers-reduced-motion: reduce) {
.reveal-up,
.reveal-up[data-delay] {
opacity: 1;
transform: none;
transition: none;
}
.btn-premium,
.premium-card,
.premium-card__arrow {
transition: none;
}
}
/* ---------- CTA STRIP ---------- */
.premium-cta {
padding: var(--space-24) var(--container-pad);
text-align: center;
background: var(--c-ink);
color: var(--c-bg);
}
.premium-cta h2 {
font-size: var(--fs-3xl);
font-weight: 600;
letter-spacing: -0.04em;
color: var(--c-bg);
max-width: 20ch;
margin: 0 auto var(--space-6);
}
.premium-cta p {
/* Sección invertida (fondo --c-ink claro): el texto debe derivar de
--c-bg, no ser blanco fijo, o desaparece sobre el fondo claro */
color: color-mix(in srgb, var(--c-bg) 72%, transparent);
max-width: 48ch;
margin: 0 auto var(--space-8);
}
.premium-cta .btn-premium {
background: var(--c-bg);
color: var(--c-ink);
border-color: var(--c-bg);
}
.premium-cta .btn-premium:hover {
background: transparent;
color: var(--c-bg);
}
/* ---------- AJUSTES PARA EL NAV LEGACY ---------- */
.premium-page nav .logo,
.premium-page nav a {
font-family: var(--font-sans);
letter-spacing: -0.01em;
}
/* Quita el padding-top fijo del body legacy si el hero ya lo gestiona */
.premium-page {
padding-top: 0;
}
.premium-page nav~* {
margin-top: 0;
}
/* Garantiza que el hero esté correctamente bajo el nav */
.premium-hero {
padding-top: calc(var(--space-24) + 70px);
}
/* ============================================================
OVERRIDES PARA MARKUP LEGACY DE PÁGINAS INTERIORES
Aplica el lenguaje premium a las clases existentes sin
reescribir cada página: heros, timeline-nav, tarjetas, etc.
============================================================ */
/* Heros internos (monumentos, eventos, representantes, patrocinadores...) */
.premium-page .monumentos-hero,
.premium-page .eventos-hero,
.premium-page .repres-hero,
.premium-page .sponsors-hero,
.premium-page .archivo-hero,
.premium-page .llibrets-hero,
.premium-page .social-hero,
.premium-page .fotomaton-hero {
min-height: 60svh;
display: grid;
place-content: center;
text-align: center;
padding: calc(70px + var(--space-16)) var(--container-pad) var(--space-12);
background: var(--c-bg);
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--c-line);
}
.premium-page .monumentos-hero::before,
.premium-page .eventos-hero::before,
.premium-page .repres-hero::before,
.premium-page .sponsors-hero::before,
.premium-page .archivo-hero::before,
.premium-page .llibrets-hero::before,
.premium-page .social-hero::before,
.premium-page .fotomaton-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 100%, var(--c-accent-soft), transparent 60%);
pointer-events: none;
}
.premium-page .hero-content-mini {
position: relative;
z-index: 1;
max-width: 64ch;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
}
.premium-page .category-eyebrow {
font-size: var(--fs-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.premium-page .category-eyebrow::before,
.premium-page .category-eyebrow::after {
content: '';
width: 24px;
height: 1px;
background: var(--c-line-strong);
}
.premium-page .hero-title {
font-family: var(--font-display);
font-size: var(--fs-display);
font-weight: 700;
letter-spacing: -0.05em;
line-height: 0.95;
color: var(--c-ink);
margin: 0;
text-transform: none;
}
.premium-page .hero-subtitle {
font-size: var(--fs-lg);
color: var(--c-muted);
max-width: 52ch;
margin: 0;
line-height: 1.55;
}
/* Oculta orbs decorativos del CSS legacy en premium pages */
.premium-page .ambient-glow,
.premium-page .glow-orb {
display: none;
}
/* Timeline navigation (años) */
.premium-page .apple-timeline-nav {
position: sticky;
top: 70px;
z-index: 100;
background: color-mix(in srgb, var(--c-bg) 85%, transparent);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--c-line);
padding: var(--space-3) 0;
}
.premium-page .year-scroller {
display: flex;
gap: var(--space-2);
overflow-x: auto;
scrollbar-width: none;
padding: 0 var(--container-pad);
max-width: var(--container-max);
margin: 0 auto;
scroll-snap-type: x mandatory;
}
.premium-page .year-scroller::-webkit-scrollbar {
display: none;
}
.premium-page .year-btn {
flex: 0 0 auto;
padding: 0.55rem 1.1rem;
border: 1px solid var(--c-line);
background: transparent;
color: var(--c-muted);
border-radius: var(--r-full);
font-size: var(--fs-sm);
font-weight: 500;
font-family: inherit;
letter-spacing: -0.005em;
cursor: pointer;
transition: color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out),
background var(--dur) var(--ease-out);
scroll-snap-align: start;
white-space: nowrap;
}
.premium-page .year-btn:hover {
color: var(--c-ink);
border-color: var(--c-line-strong);
}
.premium-page .year-btn.active {
background: var(--c-ink);
color: var(--c-bg);
border-color: var(--c-ink);
}
.premium-page .year-btn.active::after {
display: none;
}
/* ---------- HISTORIA ---------- */
.hist-page #nuestros-hitos {
position: relative;
isolation: isolate;
}
.hist-page #nuestros-hitos::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right,
transparent 0%,
color-mix(in srgb, var(--c-blue) 35%, transparent) 30%,
color-mix(in srgb, var(--c-accent) 35%, transparent) 70%,
transparent 100%);
z-index: 0;
pointer-events: none;
}
.premium-page .intro-history {
/* Ocupa casi toda la ventana inicial (menos la nav fija) para que las
estadísticas no se vean hasta hacer scroll. */
min-height: calc(100svh - 20px);
display: flex;
flex-direction: column;
justify-content: center;
padding-block: clamp(3rem, 6vw, 5.5rem) var(--space-16);
}
.premium-page .intro-content .section-title,
.premium-page .section-title {
font-family: var(--font-display);
font-size: var(--fs-3xl);
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1.05;
color: var(--c-ink);
margin-bottom: var(--space-6);
}
.premium-page .section-title .highlight,
.premium-page .highlight {
font-style: italic;
font-weight: 400;
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.premium-page .intro-history p {
font-size: var(--fs-lg);
color: var(--c-muted);
max-width: 64ch;
}
.premium-page .history-stats {
padding-block: var(--space-16);
border-block: 1px solid var(--c-line);
background: var(--c-surface-2);
}
.premium-page .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-8);
text-align: center;
}
.premium-page .stat-item {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.premium-page .stat-number {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 600;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
line-height: 1;
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.premium-page .stat-label {
font-size: var(--fs-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
}
.premium-page .history-values {
padding-block: var(--space-24);
}
.premium-page .values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1px;
background: var(--c-line);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
overflow: hidden;
}
.premium-page .value-card {
background: var(--c-bg);
padding: var(--space-12) var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: background var(--dur) var(--ease-out);
}
.premium-page .value-card:hover {
background: var(--c-surface-2);
}
.premium-page .value-icon {
font-size: 1.5rem;
color: var(--c-accent);
margin-bottom: var(--space-3);
}
.premium-page .value-card h3 {
font-size: var(--fs-xl);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--c-ink);
}
.premium-page .value-card p {
font-size: var(--fs-base);
color: var(--c-muted);
line-height: 1.55;
}
.premium-page .timeline-container {
padding-block: var(--space-16);
}
.premium-page .heritage-cta {
padding: var(--space-24) var(--container-pad);
background: var(--c-ink);
color: var(--c-bg);
text-align: center;
position: relative;
}
.premium-page .heritage-cta .cta-overlay {
display: none;
}
.premium-page .heritage-cta h2 {
font-family: var(--font-display);
font-size: var(--fs-3xl);
font-weight: 600;
letter-spacing: -0.04em;
color: var(--c-bg);
margin-bottom: var(--space-6);
}
.premium-page .heritage-cta p {
/* Sección invertida (fondo --c-ink): nada de blanco fijo o desaparece en dark */
color: color-mix(in srgb, var(--c-bg) 72%, transparent);
max-width: 56ch;
margin: 0 auto var(--space-8);
font-size: var(--fs-lg);
}
.premium-page .cta-btns {
display: flex;
gap: var(--space-3);
justify-content: center;
flex-wrap: wrap;
}
.premium-page .btn,
.premium-page .btn-gold,
.premium-page .btn-outline {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.85rem 1.6rem;
border-radius: var(--r-full);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: -0.005em;
border: 1px solid var(--c-bg);
background: var(--c-bg);
color: var(--c-ink);
cursor: pointer;
transition: transform var(--dur) var(--ease-out),
background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
}
.premium-page .btn-outline {
background: transparent;
color: var(--c-bg);
}
.premium-page .btn:hover,
.premium-page .btn-gold:hover {
transform: translateY(-2px);
background: transparent;
color: var(--c-bg);
}
.premium-page .btn-outline:hover {
background: var(--c-bg);
color: var(--c-ink);
transform: translateY(-2px);
}
/* ---------- PATROCINADORES ---------- */
.premium-page .sponsors-section {
padding-block: var(--space-16);
}
.premium-page .tier-title-container {
margin-bottom: var(--space-8);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--c-line);
}
.premium-page .tier-title-container h2 {
font-family: var(--font-display);
font-size: var(--fs-2xl);
font-weight: 600;
letter-spacing: -0.03em;
color: var(--c-ink);
}
.premium-page .sponsors-grid {
display: grid;
gap: var(--space-4);
}
.premium-page .grid-oro {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.premium-page .grid-plata {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.premium-page .grid-colab {
/* 160px permitía apretar hasta 5 tarjetas en desktop y los títulos
largos hacían overflow entre columnas. Con 280px se forma una
rejilla legible: 3-4 por fila en desktop, 2 en tablet, 1 en móvil. */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-8);
}
.premium-page .join-sponsor-section {
margin: var(--space-24) 0 var(--space-16);
padding: var(--space-24) var(--container-pad);
background: var(--c-ink);
color: var(--c-bg);
text-align: center;
border-radius: var(--r-lg);
}
.premium-page .join-sponsor-section .cta-overlay {
display: none;
}
.premium-page .join-title {
font-family: var(--font-display);
font-size: var(--fs-3xl);
font-weight: 600;
letter-spacing: -0.04em;
color: var(--c-bg);
margin-bottom: var(--space-6);
}
.premium-page .join-desc {
/* Igual que .premium-cta p: sección invertida, nada de blanco fijo */
color: color-mix(in srgb, var(--c-bg) 72%, transparent);
max-width: 56ch;
margin: 0 auto var(--space-8);
font-size: var(--fs-lg);
}
.premium-page .btn-contact {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.95rem 1.75rem;
background: var(--c-bg);
color: var(--c-ink);
border-radius: var(--r-full);
font-size: var(--fs-sm);
font-weight: 500;
text-decoration: none;
border: 1px solid var(--c-bg);
transition: transform var(--dur) var(--ease-out),
background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
}
.premium-page .btn-contact:hover {
transform: translateY(-2px);
background: transparent;
color: var(--c-bg);
}
/* ---------- EVENTOS ---------- */
.premium-page .eventos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
padding-block: var(--space-12);
max-width: none;
margin: 0;
padding-inline: 0;
}
/* Reset del layout de style.css para el contexto premium */
.premium-page .event-card-grid {
position: relative;
background: var(--c-surface);
border: 1px solid var(--c-line);
border-bottom: 1px solid var(--c-line);
border-radius: var(--r-md);
padding: var(--space-6);
overflow: hidden;
/* Reemplaza el grid de 3 columnas de style.css por flex vertical */
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: flex-start;
transition: border-color var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out);
}
/* Botón compartir por WhatsApp — círculo minimalista arriba-derecha,
simétrico al badge de fecha. Verde de marca siempre, más intenso al hover. */
.premium-page .event-share-btn {
position: absolute;
top: var(--space-4);
right: var(--space-4);
z-index: 3;
width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: #25D366;
border: 1px solid #25D366;
border-radius: 999px;
color: #fff;
font-size: 1.15rem;
cursor: pointer;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 14px -6px rgba(37, 211, 102, 0.5);
transition:
transform var(--dur) var(--ease-out),
background var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out);
}
.premium-page .event-share-btn:hover,
.premium-page .event-share-btn:focus-visible {
background: #1EBE5A;
transform: scale(1.06);
box-shadow: 0 6px 20px -6px rgba(37, 211, 102, 0.65);
outline: none;
}
.premium-page .event-share-btn:active {
transform: scale(0.96);
}
/* En móviles compactos el badge de fecha y el botón deberían coexistir sin
solaparse — el botón vive fuera del flujo, así que el badge sigue arriba
izq. Solo bajamos ligeramente el tamaño del botón para no comer aire. */
@media (max-width: 480px) {
.premium-page .event-share-btn {
width: 36px;
height: 36px;
font-size: 1rem;
}
}
.premium-page .event-card-grid:hover {
border-color: var(--c-line-strong);
border-bottom-color: var(--c-line-strong);
transform: translateY(-4px);
}
/* Imagen ocupa el ancho completo de la tarjeta */
.premium-page .event-card-grid .event-img-header {
display: block;
width: calc(100% + 2 * var(--space-6));
margin-inline: calc(-1 * var(--space-6));
/* Va abajo del todo: come también el padding inferior de la tarjeta */
margin-bottom: calc(-1 * var(--space-6));
margin-top: 0 !important;
height: 180px;
border: none;
border-radius: 0;
flex-shrink: 0;
}
/* La imagen es el último elemento visual: separa la lista hora/ubicación
con margen inferior, no con margen superior en la imagen */
.premium-page .event-card-grid .event-meta-info > div:not(.event-img-header) {
margin-bottom: var(--space-2);
}
.premium-page .event-card-grid .event-date-badge {
margin-top: var(--space-4);
}
.premium-page .event-card-grid .event-body {
flex: 1;
min-width: 0;
}
.premium-page .event-card-grid .event-body h3 {
font-size: var(--fs-xl);
letter-spacing: -0.025em;
white-space: normal;
word-break: break-word;
}
.premium-page .event-card-grid .event-body p {
max-width: none;
word-break: break-word;
}
.premium-page .event-card-grid .event-meta-info {
width: 100%;
}
.premium-page .event-card-grid .event-img-header img {
filter: grayscale(40%);
}
.premium-page .event-card-grid:hover .event-img-header img {
filter: grayscale(0%);
}
/* ============================================================
BLOG — Grid de tarjetas + vista de artículo individual
Mismo lenguaje visual que las tarjetas de eventos.
============================================================ */
.premium-page .blog-grid[hidden],
.premium-page .blog-articulo[hidden] {
display: none;
}
.premium-page .blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
padding-block: var(--space-12);
max-width: none;
margin: 0;
padding-inline: 0;
}
.premium-page .blog-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--r-md);
overflow: hidden;
color: inherit;
text-decoration: none;
transition: border-color var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out);
}
.premium-page .blog-card:hover {
border-color: var(--c-line-strong);
transform: translateY(-4px);
}
.premium-page .blog-card__img {
width: 100%;
height: 180px;
overflow: hidden;
flex-shrink: 0;
}
.premium-page .blog-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(40%);
transition: filter var(--dur) var(--ease-out);
}
.premium-page .blog-card:hover .blog-card__img img {
filter: grayscale(0%);
}
.premium-page .blog-card__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-6);
}
.premium-page .blog-card__fecha {
font-family: var(--font-sans);
font-size: var(--fs-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-muted);
}
.premium-page .blog-card__body h3 {
font-size: var(--fs-xl);
letter-spacing: -0.025em;
margin: 0;
}
.premium-page .blog-card__body p {
color: var(--c-muted);
margin: 0;
}
.premium-page .blog-card__leermas {
margin-top: var(--space-2);
font-weight: 600;
font-size: var(--fs-sm);
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ----- Vista de artículo individual ----- */
.premium-page .blog-articulo {
max-width: 760px;
margin: 0 auto;
padding-block: var(--space-12);
}
.premium-page .blog-articulo__volver {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--c-muted);
text-decoration: none;
font-size: var(--fs-sm);
font-weight: 600;
margin-bottom: var(--space-4);
transition: color var(--dur) var(--ease-out);
}
.premium-page .blog-articulo__volver:hover {
color: var(--c-ink);
}
.premium-page .blog-articulo__volver--pie {
margin-top: var(--space-8);
margin-bottom: 0;
}
.premium-page .blog-articulo__fecha {
display: block;
font-family: var(--font-sans);
font-size: var(--fs-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-muted);
margin-bottom: var(--space-2);
}
.premium-page .blog-articulo h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 2.6vw + 0.4rem, 3rem);
font-weight: 700;
letter-spacing: -0.045em;
line-height: 1.05;
margin: 0 0 var(--space-6);
}
.premium-page .blog-articulo__img {
width: 100%;
border-radius: var(--r-md);
overflow: hidden;
margin-bottom: var(--space-6);
}
.premium-page .blog-articulo__img img {
width: 100%;
height: auto;
display: block;
}
.premium-page .blog-articulo__cuerpo p {
color: var(--c-muted);
line-height: 1.75;
margin: 0 0 var(--space-6);
}
/* ============================================================
REPRESENTANTES — Mismo lenguaje del index
Section head + grid unificado con hairlines · foto/cargo/año
============================================================ */
/* Quita el hero superior — la página entra directa al contenido */
body.premium-page.repres-page .repres-hero,
body.premium-page .repres-hero,
body.premium-page.mon-page .monumentos-hero,
body.premium-page.spons-page .sponsors-hero,
body.premium-page.ev-page .eventos-hero,
body.premium-page.arch-page .archivo-hero,
body.premium-page.lib-page .llibrets-hero,
body.premium-page.soc-page .social-hero {
display: none;
}
/* Ocultamos el scroller horizontal en las páginas con rail editorial */
.repres-page .apple-timeline-nav,
.mon-page .apple-timeline-nav,
.spons-page .apple-timeline-nav,
.arch-page .apple-timeline-nav {
display: none;
}
/* Stepper antiguo flotante: ya no se usa (vive en el rail) */
/* ============================================================
LAYOUT EDITORIAL SPLIT — Representantes
Rail izquierdo (contexto + stepper) · Contenido derecho (fotos)
============================================================ */
.repres-layout,
.mon-layout,
.spons-layout,
.ev-layout,
.blog-layout,
.arch-layout,
.lib-layout,
.soc-layout {
display: grid;
grid-template-columns: minmax(220px, 260px) 1fr;
gap: clamp(1.5rem, 3.5vw, 3.5rem);
max-width: 1680px;
margin: 0 auto;
padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 3vw, 2rem) var(--space-24);
position: relative;
isolation: isolate;
align-items: start;
}
/* Hairline degradada bajo el nav */
.repres-layout::before,
.mon-layout::before,
.spons-layout::before,
.ev-layout::before,
.blog-layout::before,
.arch-layout::before,
.lib-layout::before,
.soc-layout::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right,
transparent 0%,
color-mix(in srgb, var(--c-blue) 35%, transparent) 30%,
color-mix(in srgb, var(--c-accent) 35%, transparent) 70%,
transparent 100%);
z-index: 0;
pointer-events: none;
}
@media (max-width: 900px) {
.repres-layout,
.mon-layout,
.spons-layout,
.ev-layout,
.blog-layout,
.arch-layout,
.lib-layout,
.soc-layout {
grid-template-columns: 1fr;
gap: var(--space-10);
/* La barra de navegación fija mide 70px: sin este hueco el
contenido nace debajo de ella y queda tapado */
padding-top: calc(70px + 1.5rem);
}
/* Mismo problema en historia: su padding superior es menor que la
barra fija (legales y sitemap se corrigen junto a sus reglas base,
más abajo, para respetar la cascada) */
.premium-page .intro-history {
padding-top: calc(70px + 1.5rem);
}
}
/* ----- RAIL IZQUIERDO ----- */
.repres-rail,
.mon-rail,
.spons-rail,
.ev-rail,
.blog-rail,
.arch-rail,
.lib-rail,
.soc-rail {
position: sticky;
top: 96px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5, 1.25rem);
padding-right: var(--space-4);
}
@media (max-width: 900px) {
.repres-rail,
.mon-rail,
.spons-rail,
.ev-rail,
.blog-rail,
.arch-rail,
.lib-rail,
.soc-rail {
position: static;
top: auto;
padding-right: 0;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
padding-bottom: var(--space-6);
border-bottom: 1px solid var(--c-line);
}
}
.repres-rail__eyebrow,
.mon-rail__eyebrow,
.spons-rail__eyebrow,
.ev-rail__eyebrow,
.blog-rail__eyebrow,
.arch-rail__eyebrow,
.lib-rail__eyebrow,
.soc-rail__eyebrow {
font-family: var(--font-sans);
font-size: var(--fs-xs);
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
line-height: 1;
}
/* Año / título protagonista — degradado azul → oro */
.repres-rail__year,
.mon-rail__year {
font-family: var(--font-display);
font-size: clamp(3.5rem, 5.5vw, 5.5rem);
font-weight: 700;
letter-spacing: -0.055em;
line-height: 0.9;
margin: 0;
font-variant-numeric: tabular-nums;
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-wrap: nowrap;
}
/* Para títulos de texto (patrocinadores, eventos, archivo, llibrets, social): mismo lenguaje, más pequeño */
.spons-rail__title,
.ev-rail__title,
.blog-rail__title,
.arch-rail__title,
.lib-rail__title,
.soc-rail__title {
font-family: var(--font-display);
font-size: clamp(2rem, 2.6vw + 0.4rem, 3rem);
font-weight: 700;
letter-spacing: -0.045em;
line-height: 0.95;
margin: 0;
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
@media (max-width: 900px) {
.repres-rail__year,
.mon-rail__year {
font-size: clamp(2.5rem, 11vw, 4rem);
order: 1;
}
.spons-rail__title,
.ev-rail__title,
.blog-rail__title,
.arch-rail__title,
.lib-rail__title,
.soc-rail__title {
font-size: clamp(1.8rem, 6vw, 2.4rem);
order: 1;
}
}
/* Divisor degradado bajo el año/título */
.repres-rail__divider,
.mon-rail__divider,
.spons-rail__divider,
.ev-rail__divider,
.blog-rail__divider,
.arch-rail__divider,
.lib-rail__divider,
.soc-rail__divider {
width: 72px;
height: 2px;
background: var(--grad-brand);
border-radius: 2px;
}
@media (max-width: 900px) {
.repres-rail__divider,
.mon-rail__divider,
.spons-rail__divider,
.ev-rail__divider,
.blog-rail__divider,
.arch-rail__divider,
.lib-rail__divider,
.soc-rail__divider {
display: none;
}
}
/* Stepper integrado en el rail */
.repres-rail__stepper,
.mon-rail__stepper {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-2);
}
@media (max-width: 900px) {
.repres-rail__stepper,
.mon-rail__stepper {
margin-top: 0;
order: 2;
}
}
.repres-rail__stepper .stepper-btn,
.mon-rail__stepper .stepper-btn {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 50%;
background: transparent;
border: 1px solid var(--c-line-strong);
color: var(--c-ink);
cursor: pointer;
padding: 0;
transition: background var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out),
color var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out),
opacity var(--dur) var(--ease-out);
}
.repres-rail__stepper .stepper-btn:hover:not(:disabled),
.mon-rail__stepper .stepper-btn:hover:not(:disabled) {
background: var(--c-ink);
color: var(--c-bg);
border-color: var(--c-ink);
transform: translateY(-1px);
}
.repres-rail__stepper .stepper-btn:active:not(:disabled),
.mon-rail__stepper .stepper-btn:active:not(:disabled) {
transform: scale(0.94);
}
.repres-rail__stepper .stepper-btn:disabled,
.mon-rail__stepper .stepper-btn:disabled {
opacity: 0.25;
cursor: not-allowed;
}
.repres-rail__stepper .stepper-btn svg,
.mon-rail__stepper .stepper-btn svg {
width: 14px;
height: 14px;
transform: rotate(-90deg);
}
.repres-rail__count,
.mon-rail__count {
font-family: var(--font-sans);
font-size: var(--fs-xs);
letter-spacing: 0.18em;
color: var(--c-muted);
font-weight: 500;
font-variant-numeric: tabular-nums;
min-width: 56px;
text-align: center;
}
.repres-rail__lede,
.mon-rail__lede,
.spons-rail__lede,
.ev-rail__lede,
.blog-rail__lede,
.arch-rail__lede,
.lib-rail__lede,
.soc-rail__lede {
font-size: var(--fs-base);
color: var(--c-muted);
line-height: 1.55;
max-width: 32ch;
margin: var(--space-3) 0 0;
}
@media (max-width: 900px) {
.repres-rail__lede,
.mon-rail__lede,
.spons-rail__lede,
.ev-rail__lede,
.blog-rail__lede,
.arch-rail__lede,
.lib-rail__lede,
.soc-rail__lede {
display: none;
}
}
.mon-rail__ficha-link {
margin-top: var(--space-4);
padding: 0.6rem 1.1rem;
font-size: var(--fs-xs);
}
/* ----- CONTENIDO DERECHO ----- */
.repres-content,
.mon-content,
.spons-content,
.ev-content,
.blog-content,
.arch-content,
.lib-content,
.soc-content {
min-width: 0;
}
.premium-page #representative-display,
.premium-page .mon-content #spotlightContent,
.premium-page .ev-content #eventosSpotlight,
.premium-page .blog-content #blogSpotlight {
padding: 0;
max-width: none;
margin: 0;
}
/* ----- FILTROS DEL RAIL (patrocinadores) ----- */
.spons-rail__filters {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
margin-top: var(--space-2);
width: 100%;
max-width: 240px;
}
.spons-rail__filters .year-btn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--space-3);
padding: 0.7rem 0.9rem;
background: transparent;
border: 1px solid var(--c-line);
color: var(--c-muted);
border-radius: var(--r-md);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
text-align: left;
transition: background var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out),
color var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out);
white-space: nowrap;
}
.spons-rail__filters .year-btn::before {
content: '';
width: 14px;
height: 1px;
background: currentColor;
flex-shrink: 0;
opacity: 0.5;
transition: width var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.spons-rail__filters .year-btn:hover {
color: var(--c-ink);
border-color: var(--c-line-strong);
}
.spons-rail__filters .year-btn:hover::before {
width: 22px;
opacity: 1;
}
.spons-rail__filters .year-btn.active {
background: var(--c-ink);
color: var(--c-bg);
border-color: var(--c-ink);
}
.spons-rail__filters .year-btn.active::before {
background: var(--c-bg);
width: 22px;
opacity: 1;
}
.spons-rail__filters .year-btn.active::after {
display: none;
}
@media (max-width: 900px) {
.spons-rail__filters {
flex-direction: row;
flex-wrap: wrap;
max-width: none;
order: 2;
gap: var(--space-2);
width: auto;
}
.spons-rail__filters .year-btn {
padding: 0.5rem 0.85rem;
}
.spons-rail__filters .year-btn::before {
display: none;
}
}
/* ----- TABS DEL RAIL (archivo) — mismo lenguaje que filtros spons ----- */
.arch-rail__tabs {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
margin-top: var(--space-2);
width: 100%;
max-width: 240px;
}
.arch-rail__tabs .tab-btn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--space-3);
padding: 0.7rem 0.9rem;
background: transparent;
border: 1px solid var(--c-line);
color: var(--c-muted);
border-radius: var(--r-md);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
text-align: left;
transition: background var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
white-space: nowrap;
}
.arch-rail__tabs .tab-btn i {
width: 16px;
opacity: 0.6;
transition: opacity var(--dur) var(--ease-out);
}
.arch-rail__tabs .tab-btn:hover {
color: var(--c-ink);
border-color: var(--c-line-strong);
}
.arch-rail__tabs .tab-btn:hover i {
opacity: 1;
}
.arch-rail__tabs .tab-btn.active {
background: var(--c-ink);
color: var(--c-bg);
border-color: var(--c-ink);
}
.arch-rail__tabs .tab-btn.active i {
opacity: 1;
}
@media (max-width: 900px) {
.arch-rail__tabs {
flex-direction: row;
flex-wrap: wrap;
max-width: none;
order: 2;
width: auto;
}
}
/* ----- LLIBRETS — estantería editorial ----- */
.lib-page .llibret-shelf-container {
padding: 0;
margin: 0;
background: transparent;
}
.lib-page .llibret-shelf {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
perspective: none;
}
.lib-page .llibret-card {
background: transparent;
border: 0;
box-shadow: none;
transform: none !important;
padding: 0;
}
/* ----- SOCIAL — widget embed ----- */
.soc-page .social-container {
padding: 0;
margin: 0;
background: transparent;
}
.soc-page .widget-wrapper {
border-radius: var(--r-md);
overflow: hidden;
background: var(--c-surface);
border: 1px solid var(--c-line);
padding: var(--space-4);
}
/* ============================================================
PÁGINAS AUXILIARES (404, login, aviso-legal, mapa-del-sitio)
============================================================ */
/* ----- 404 ----- */
.error-page .error-layout {
min-height: calc(100svh - 70px);
display: grid;
place-content: center;
text-align: center;
padding: var(--space-12) var(--container-pad);
max-width: 720px;
margin: 0 auto;
}
.error-page .error-eyebrow {
font-size: var(--fs-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
margin-bottom: var(--space-4);
}
.error-page .error-code {
font-family: var(--font-display);
font-size: clamp(7rem, 22vw, 14rem);
font-weight: 700;
letter-spacing: -0.06em;
line-height: 0.9;
margin: 0 0 var(--space-6);
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-variant-numeric: tabular-nums;
}
.error-page .error-message {
font-size: var(--fs-lg);
color: var(--c-muted);
max-width: 44ch;
margin: 0 auto var(--space-10);
line-height: 1.55;
}
.error-page .btn-premium {
justify-self: center;
}
/* ----- LOGIN ----- */
.login-page .login-layout {
min-height: calc(100svh - 70px);
display: grid;
place-items: center;
padding: var(--space-12) var(--container-pad);
position: relative;
isolation: isolate;
}
.login-page .login-layout::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(50% 50% at 30% 30%, var(--c-blue-soft), transparent 60%),
radial-gradient(50% 50% at 70% 70%, var(--c-accent-soft), transparent 60%);
z-index: -1;
pointer-events: none;
}
.login-page .login-card {
width: 100%;
max-width: 440px;
padding: clamp(2rem, 4vw, 3.5rem);
background: var(--c-bg);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
}
.login-page .login-card__logo {
width: 64px;
height: auto;
margin: 0 auto var(--space-8);
display: block;
}
.login-page .login-card__eyebrow {
display: block;
font-size: var(--fs-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
text-align: center;
margin-bottom: var(--space-3);
}
.login-page .login-card__title {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.4rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1;
text-align: center;
margin: 0 0 var(--space-10);
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.login-page .input-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.login-page .input-group label {
font-size: var(--fs-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
}
.login-page .input-group input[type="text"],
.login-page .input-group input[type="password"] {
width: 100%;
padding: 0.85rem 1rem;
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--r-md);
color: var(--c-ink);
font-family: var(--font-sans);
font-size: var(--fs-base);
letter-spacing: -0.005em;
transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.login-page .input-group input:focus {
outline: none;
border-color: var(--c-ink);
background: var(--c-bg);
}
.login-page .login-card__checkbox {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin: var(--space-2) 0 var(--space-8);
padding: var(--space-4);
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--r-md);
cursor: pointer;
line-height: 1.5;
}
.login-page .login-card__checkbox input[type="checkbox"] {
width: 16px;
height: 16px;
margin-top: 2px;
accent-color: var(--c-ink);
flex-shrink: 0;
}
.login-page .login-card__checkbox span {
font-size: var(--fs-sm);
color: var(--c-muted);
}
.login-page .btn-login {
width: 100%;
padding: 1rem;
background: var(--c-ink);
color: var(--c-bg);
border: 1px solid var(--c-ink);
border-radius: var(--r-full);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
transition: transform var(--dur) var(--ease-out),
background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
}
.login-page .btn-login:hover:not(:disabled) {
background: transparent;
color: var(--c-ink);
transform: translateY(-2px);
}
.login-page .btn-login:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.login-page #loginError {
display: none;
margin-top: var(--space-4);
padding: var(--space-3);
border: 1px solid var(--danger);
color: var(--danger);
border-radius: var(--r-md);
font-size: var(--fs-sm);
letter-spacing: 0;
text-transform: none;
font-weight: 500;
text-align: center;
}
/* ----- AVISO LEGAL ----- */
.legal-page-pro .legal-layout {
max-width: 760px;
margin: 0 auto;
padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 3vw, 2rem) var(--space-24);
position: relative;
isolation: isolate;
}
.legal-page-pro .legal-layout::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right,
transparent 0%,
color-mix(in srgb, var(--c-blue) 35%, transparent) 30%,
color-mix(in srgb, var(--c-accent) 35%, transparent) 70%,
transparent 100%);
}
.legal-page-pro .legal-layout h1 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
margin: 0 0 var(--space-12);
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.legal-page-pro .legal-layout h2 {
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--c-ink);
margin: var(--space-12) 0 var(--space-4);
padding-top: var(--space-6);
border-top: 1px solid var(--c-line);
}
.legal-page-pro .legal-layout p {
font-size: var(--fs-base);
color: var(--c-ink-2);
line-height: 1.7;
margin: 0 0 var(--space-4);
max-width: 64ch;
}
.legal-page-pro .legal-layout p strong {
color: var(--c-ink);
font-weight: 600;
}
.legal-page-pro .legal-layout .back-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-12);
padding: 0.85rem 1.6rem;
background: var(--c-ink);
color: var(--c-bg);
border: 1px solid var(--c-ink);
border-radius: var(--r-full);
font-size: var(--fs-sm);
font-weight: 500;
text-decoration: none;
transition: transform var(--dur) var(--ease-out),
background var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
}
.legal-page-pro .legal-layout .back-link:hover {
background: transparent;
color: var(--c-ink);
transform: translateY(-2px);
}
/* ----- MAPA DEL SITIO ----- */
.sitemap-page .sitemap-layout {
max-width: 1320px;
margin: 0 auto;
padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 3vw, 2rem) var(--space-24);
position: relative;
isolation: isolate;
}
.sitemap-page .sitemap-layout::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right,
transparent 0%,
color-mix(in srgb, var(--c-blue) 35%, transparent) 30%,
color-mix(in srgb, var(--c-accent) 35%, transparent) 70%,
transparent 100%);
}
/* En móvil, el padding superior de legales y sitemap (48px) queda por
debajo de la barra fija de 70px y el título nace tapado */
@media (max-width: 900px) {
.legal-page-pro .legal-layout,
.sitemap-page .sitemap-layout {
padding-top: calc(70px + 1.5rem);
}
}
.sitemap-page .sitemap-header {
text-align: center;
margin-bottom: var(--space-16);
}
.sitemap-page .sitemap-header__eyebrow {
font-size: var(--fs-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
display: inline-block;
margin-bottom: var(--space-4);
}
.sitemap-page .sitemap-header h1 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
margin: 0;
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.sitemap-page .sitemap-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1px;
background: var(--c-line);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
overflow: hidden;
}
.sitemap-page .sitemap-card {
background: var(--c-bg);
padding: var(--space-10) var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-3);
text-decoration: none;
color: inherit;
transition: background var(--dur) var(--ease-out);
}
.sitemap-page .sitemap-card:hover {
background: var(--c-surface-2);
}
.sitemap-page .sitemap-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
font-size: 1.25rem;
color: var(--c-accent);
margin-bottom: var(--space-3);
}
.sitemap-page .sitemap-card h2 {
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--c-ink);
margin: 0;
}
.sitemap-page .sitemap-card p {
font-size: var(--fs-base);
color: var(--c-muted);
line-height: 1.55;
margin: 0;
}
.sitemap-page .sitemap-card__arrow {
margin-top: var(--space-6);
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-ink);
transition: gap var(--dur) var(--ease-out);
}
.sitemap-page .sitemap-card:hover .sitemap-card__arrow {
gap: var(--space-3);
}
/* Cabecera de año oculta: la info ya está en el stepper de la izquierda */
.premium-page .repres-yearhead {
display: none;
}
.premium-page .repres-yearhead--legacy {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--c-line);
flex-wrap: wrap;
}
.premium-page .repres-yearhead__eyebrow {
font-size: var(--fs-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
order: 1;
}
.premium-page .repres-yearhead__year {
font-family: var(--font-display);
font-size: clamp(1.25rem, 1.5vw + 0.4rem, 1.75rem);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1;
color: var(--c-ink);
font-variant-numeric: tabular-nums;
margin: 0;
order: 2;
}
.premium-page .repres-yearhead__lede {
display: none;
}
/* ----- GALERÍA: tamaño de card FIJO (el de 3 por fila).
Con 1 o 2 representantes las cards NO se estiran: mantienen el mismo
ancho que cuando hay tres. Con 4+, hacen wrap a la fila siguiente. */
.premium-page .repres-grid {
--repres-gap: clamp(0.75rem, 1.5vw, 1.5rem);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
column-gap: var(--repres-gap);
row-gap: var(--space-10);
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
/* Ancho fijo: un tercio de la fila descontando los dos huecos */
.premium-page .repres-grid > .repres-card {
flex: 0 0 calc((100% - 2 * var(--repres-gap)) / 3);
min-width: 0;
max-width: calc((100% - 2 * var(--repres-gap)) / 3);
}
/* Excepción: con 4 cards (año completo) vuelven a repartirse la fila
a cuartos y se quedan las cuatro en una sola línea, como antes.
Solo en escritorio: en tablet/móvil mandan las media queries de abajo. */
@media (min-width: 901px) {
.premium-page .repres-grid > .repres-card:first-child:nth-last-child(n+4),
.premium-page .repres-grid > .repres-card:first-child:nth-last-child(n+4) ~ .repres-card {
flex: 1 1 0;
max-width: none;
}
}
/* En tablet (rail aún visible) y móvil bajamos a 2 cards por fila */
@media (max-width: 900px) {
.premium-page .repres-grid {
justify-content: center;
column-gap: clamp(1.5rem, 3vw, 2.5rem);
}
.premium-page .repres-grid > .repres-card {
flex: 1 1 calc(50% - 1.25rem);
max-width: 320px;
}
}
/* Móvil estrecho: 1 por fila */
@media (max-width: 480px) {
.premium-page .repres-grid > .repres-card {
flex: 1 1 100%;
max-width: 420px;
}
}
/* ----- CARDS de retrato ----- */
.premium-page .repres-card {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
margin: 0;
overflow: visible;
display: flex;
flex-direction: column;
gap: var(--space-5, 1.25rem);
width: 100%;
min-width: 0;
transition: none;
position: relative;
transform: none;
text-align: left;
}
.premium-page .repres-card:hover {
background: transparent;
transform: none;
border: 0;
box-shadow: none;
}
/* Imagen — protagonista absoluta, ratio retrato */
.premium-page .repres-img-container {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--c-surface-2);
isolation: isolate;
margin: 0;
padding: 0;
box-shadow: none;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
transition: box-shadow 500ms var(--ease-out), border-color var(--dur) var(--ease-out);
}
.premium-page .repres-card:hover .repres-img-container {
box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.22);
border-color: var(--c-line-strong);
}
.premium-page .repres-img-container::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10, 10, 10, 0.32), transparent 40%);
opacity: 0;
transition: opacity var(--dur) var(--ease-out);
pointer-events: none;
z-index: 2;
}
.premium-page .repres-card:hover .repres-img-container::after {
opacity: 1;
}
.premium-page .repres-img-container .img-zoom-btn,
.premium-page .repres-img-container button {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
background: transparent;
cursor: zoom-in;
display: block;
}
.premium-page .repres-img-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
display: block;
transition: transform 900ms var(--ease-out);
will-change: transform;
}
.premium-page .repres-card:hover .repres-img-container img {
transform: scale(1.04);
}
/* Bloque info — bajo la foto, mismo lenguaje que .premium-card del index */
.premium-page .repres-info {
padding: var(--space-2) 0 0;
background: transparent;
border: 0;
border-radius: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* Cargo: eyebrow dorado (uno de los colores de marca) */
.premium-page .repres-info h3 {
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-accent);
margin: 0;
line-height: 1.3;
}
/* Nombre: tipografía del index, negro protagonista */
.premium-page .repres-info p {
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--c-ink);
margin: 0;
line-height: 1.15;
text-wrap: balance;
word-break: normal;
overflow-wrap: break-word;
hyphens: auto;
position: relative;
padding-bottom: var(--space-3);
}
/* Subrayado degradado azul → oro: aparece al hover */
.premium-page .repres-info p::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: var(--grad-brand);
border-radius: 2px;
transition: width 520ms var(--ease-out);
}
.premium-page .repres-card:hover .repres-info p::after {
width: 48px;
}
/* Animación cambio de año más suave */
.premium-page .repres-yearhead.slide-in-left,
.premium-page .repres-yearhead.slide-in-right,
.premium-page .repres-grid.slide-in-left,
.premium-page .repres-grid.slide-in-right {
animation-duration: 520ms;
animation-timing-function: var(--ease-out);
}
.premium-page .repres-yearhead.slide-out-left,
.premium-page .repres-yearhead.slide-out-right,
.premium-page .repres-grid.slide-out-left,
.premium-page .repres-grid.slide-out-right {
transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
.premium-page .repres-img-container img,
.premium-page .repres-card,
.premium-page .repres-img-container::after {
transition: none;
animation: none;
}
}
/* ---------- MONUMENTOS / SPOTLIGHT ---------- */
.mon-page .premium-page #spotlightContent,
.premium-page #spotlightContent {
padding-block: 0;
}
/* Grid de monumentos: las 4 (boceto+falla grande, boceto+falla infantil) en una sola fila.
Si el ancho aprieta, las fotos se escalan en lugar de saltar a otra línea. */
.premium-page .monument-grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
column-gap: clamp(0.75rem, 1.5vw, 1.5rem);
row-gap: var(--space-10);
}
.premium-page .monument-grid > .monument-card {
flex: 1 1 0;
min-width: 0;
max-width: none;
}
/* Tablet / móvil: 2 por fila */
@media (max-width: 900px) {
.premium-page .monument-grid {
justify-content: center;
column-gap: clamp(1.5rem, 3vw, 2.5rem);
}
.premium-page .monument-grid > .monument-card {
flex: 1 1 calc(50% - 1.25rem);
max-width: 360px;
}
}
/* Móvil estrecho: 1 por fila */
@media (max-width: 480px) {
.premium-page .monument-grid > .monument-card {
flex: 1 1 100%;
max-width: 420px;
}
}
.premium-page .monument-card {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
margin: 0;
overflow: visible;
display: flex;
flex-direction: column;
gap: var(--space-4);
transform: none !important;
transition: none;
perspective: none;
}
.premium-page .monument-img-container {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--r-md);
background: var(--c-surface-2);
border: 1px solid var(--c-line);
isolation: isolate;
transition: box-shadow 500ms var(--ease-out), border-color var(--dur) var(--ease-out);
}
.premium-page .monument-card:hover .monument-img-container {
box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.22);
border-color: var(--c-line-strong);
}
.premium-page .monument-img-container::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10, 10, 10, 0.32), transparent 40%);
opacity: 0;
transition: opacity var(--dur) var(--ease-out);
pointer-events: none;
z-index: 2;
}
.premium-page .monument-card:hover .monument-img-container::after {
opacity: 1;
}
.premium-page .monument-img-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 900ms var(--ease-out);
}
.premium-page .monument-card:hover .monument-img-container img {
transform: scale(1.04);
}
.premium-page .monument-info {
padding: var(--space-2) 0 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
background: transparent;
border: 0;
}
.premium-page .monument-info h3 {
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-accent);
margin: 0;
line-height: 1.3;
}
.premium-page .monument-info p {
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--c-ink);
margin: 0;
line-height: 1.15;
text-wrap: balance;
}
.premium-page .monument-info .boceto-lema {
font-style: italic;
color: var(--c-muted);
font-weight: 400;
font-size: var(--fs-lg);
}
.premium-page .monument-awards-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
.premium-page .info-award-item {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.3rem 0.7rem;
background: var(--c-surface-2);
border: 1px solid var(--c-line);
border-radius: var(--r-full);
font-size: 0.72rem;
font-weight: 500;
color: var(--c-ink-2);
letter-spacing: 0.02em;
}
.premium-page .info-award-item.rank-gold {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.06));
border-color: rgba(194, 155, 87, 0.4);
color: var(--c-accent);
}
.premium-page .info-award-item.rank-silver {
background: rgba(160, 160, 160, 0.12);
border-color: rgba(160, 160, 160, 0.3);
color: #888;
}
.premium-page .info-award-item.rank-bronze {
background: rgba(176, 100, 50, 0.12);
border-color: rgba(176, 100, 50, 0.3);
color: #b06432;
}
.premium-page .info-award-item.rank-ig,
.premium-page .info-award-item.rank-pintura {
background: var(--grad-brand-soft);
border-color: color-mix(in srgb, var(--c-blue) 30%, transparent);
color: var(--c-ink);
}
.premium-page .card-section-tag {
display: inline-flex;
align-self: flex-start;
padding: 0.3rem 0.7rem;
background: var(--c-ink);
color: var(--c-bg);
border-radius: var(--r-full);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: var(--space-2);
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
.premium-countdown {
gap: 0;
}
.premium-countdown__unit {
padding: var(--space-4) var(--space-2);
}
.premium-section {
padding-block: var(--space-16);
}
.premium-section__head {
margin-bottom: var(--space-12);
}
}
/* ============================================================
FICHAS INDIVIDUALES DE MONUMENTO (monumento-.html)
============================================================ */
.ficha-layout {
max-width: 960px;
margin: 0 auto;
padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 3vw, 2rem) var(--space-24);
}
.ficha-breadcrumb {
font-size: 0.85rem;
color: color-mix(in srgb, var(--c-ink) 60%, transparent);
margin-bottom: var(--space-6);
}
.ficha-breadcrumb a {
color: inherit;
text-decoration: none;
}
.ficha-breadcrumb a:hover {
color: var(--c-accent);
}
.ficha-layout h1 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.75rem);
color: var(--c-ink);
margin-bottom: var(--space-6);
}
.ficha-sin-imagen {
color: color-mix(in srgb, var(--c-ink) 70%, transparent);
margin-bottom: var(--space-6);
}
/* Párrafo descriptivo al pie del contenido principal (blog, agenda, archivo…) */
.page-intro {
max-width: 75ch;
margin: var(--space-16) auto;
padding-inline: var(--container-pad);
color: color-mix(in srgb, var(--c-ink) 72%, transparent);
font-size: 0.95rem;
line-height: 1.75;
}
.page-intro a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Continuación del lede del rail (archivo, blog, eventos, llibrets): mismo
ancho estrecho que el lede, solo un poco más de aire encima. Va dentro de
la columna del rail, que ya aporta su propio margen lateral. */
.page-intro--rail {
margin: var(--space-3) 0 0 !important;
padding-inline: 0 !important;
}
.page-intro--rail a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.ficha-intro {
max-width: 70ch;
display: grid;
gap: 0.6em;
color: color-mix(in srgb, var(--c-ink) 88%, transparent);
margin-bottom: var(--space-6);
}
.ficha-intro a {
color: var(--c-accent, inherit);
text-decoration: underline;
text-underline-offset: 3px;
}
.ficha-monumentos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
margin-bottom: var(--space-10);
}
.ficha-monumento {
background: var(--c-surface);
border-radius: 16px;
overflow: hidden;
}
.ficha-monumento img {
width: 100%;
height: auto;
display: block;
}
.ficha-monumento figcaption {
padding: var(--space-4);
}
.ficha-monumento h2 {
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--c-ink);
margin-bottom: 0.25rem;
}
.ficha-lema,
.ficha-artista {
font-size: 0.9rem;
color: color-mix(in srgb, var(--c-ink) 70%, transparent);
}
.ficha-premios {
margin-bottom: var(--space-6);
}
.ficha-premios h3 {
font-family: var(--font-display);
font-size: 1rem;
color: var(--c-accent);
margin-bottom: 0.5rem;
}
.ficha-premios ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.ficha-premios li {
background: var(--c-surface-2);
border-radius: 999px;
padding: 0.35rem 0.9rem;
font-size: 0.85rem;
color: var(--c-ink);
}
.ficha-pager {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
border-top: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
padding-top: var(--space-6);
}
.ficha-pager a {
color: var(--c-ink);
text-decoration: none;
font-size: 0.9rem;
}
.ficha-pager a:hover {
color: var(--c-accent);
}
/* Índice estático del blog — enlaces a todos los artículos para rastreadores
sin JS. Se muestra plegado; el listado principal lo pinta blog.js. */
.blog-indice-estatico {
grid-column: 1 / -1;
margin: var(--space-12) 0 var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--c-line);
}
.blog-indice-estatico h2 {
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-muted);
margin: 0 0 var(--space-4);
}
.blog-indice-estatico ul {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: var(--space-8);
}
.blog-indice-estatico li {
break-inside: avoid;
margin-bottom: var(--space-2);
font-size: var(--fs-xs);
line-height: 1.45;
}
.blog-indice-estatico a {
color: var(--c-ink-2);
text-decoration: none;
}
.blog-indice-estatico a:hover {
color: var(--c-accent);
}
.blog-indice-estatico span {
color: var(--c-muted);
white-space: nowrap;
}
@media (max-width: 700px) {
.blog-indice-estatico ul {
columns: 1;
}
}
/* ============================================================
PREFERS-REDUCED-MOTION — respeta a quien ha pedido en su
sistema que se reduzca el movimiento. Además de accesibilidad,
quita el compositing continuo (halo respirando, rayos pulsando,
polvo a la deriva) en los equipos que más lo sufren.
Debe quedar AL FINAL del archivo: gana por orden de origen.
============================================================ */
@media (prefers-reduced-motion: reduce) {
/* Las animaciones no se matan, se completan al instante: las de
entrada usan `forwards`, así que saltan directas a su estado
final y el elemento queda visible. Poner `animation: none`
las dejaría en su 0% — casi todas arrancan en opacity: 0 y
el hero entero desaparecería. */
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
transition-delay: 0ms !important;
}
html {
scroll-behavior: auto !important;
}
}
/* ============================================================
HERO: correcciones de espaciado
============================================================ */
/* El distintivo del centenario estaba en top:28px, pero la barra de
navegación es fija y ocupa los primeros 70px: quedaba tapado por completo
(comprobado en móvil y escritorio). Se baja por debajo de la barra. */
.hero-centenary {
top: calc(70px + 22px);
}
/* Entre la cuenta atrás y el final del hero quedaban 150px muertos, más 88px
hasta el primer texto de la página. Se recorta el relleno inferior para que
la siguiente sección asome y se entienda que hay más abajo. */
.premium-hero {
padding-bottom: var(--space-8);
}
/* ============================================================
HERO: destino de la cuenta atrás
============================================================ */
.premium-countdown__target {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin: 0 0 var(--space-4);
position: relative;
z-index: 2;
}
.premium-countdown__para {
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--c-muted);
}
.premium-countdown__acto {
font-size: clamp(1.05rem, 3.2vw, 1.5rem);
font-weight: 700;
color: var(--c-accent);
line-height: 1.2;
text-wrap: balance;
}
.premium-countdown__cuando {
font-size: .85rem;
color: var(--c-muted);
}
/* ============================================================
PORTADA: bloque "Ahora mismo"
Dos tarjetas de igual peso: la última publicación y los
próximos actos. Sin titular de sección: cada tarjeta lleva su
propia etiqueta y el encabezado solo repetía lo mismo y comía
una pantalla justo debajo del hero.
============================================================ */
.premium-ahora__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
align-items: stretch;
}
@media (max-width: 860px) {
.premium-ahora__grid { grid-template-columns: 1fr; }
}
.premium-ahora__noticia,
.premium-ahora__agenda {
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: 18px;
padding: var(--space-6);
display: flex;
flex-direction: column;
transition: border-color .25s ease, transform .25s ease;
}
.premium-ahora__noticia { text-decoration: none; color: inherit; }
.premium-ahora__noticia:hover,
.premium-ahora__noticia:focus-visible {
border-color: var(--c-accent);
transform: translateY(-2px);
}
.premium-ahora__etiqueta {
display: block;
font-size: .68rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--c-accent);
margin-bottom: var(--space-4);
}
/* La noticia va en horizontal: una miniatura cuadrada en lugar de
una foto a todo lo ancho. Así no aplasta a la agenda y las
imágenes verticales (carteles, logos) se recortan menos. */
.premium-ahora__fila { display: flex; gap: var(--space-4); align-items: flex-start; }
.premium-ahora__foto {
flex: 0 0 116px;
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
background: var(--c-line);
}
.premium-ahora__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.premium-ahora__texto { min-width: 0; }
.premium-ahora__texto h3 {
margin: 0 0 6px;
font-size: 1.15rem;
line-height: 1.3;
text-wrap: balance;
}
.premium-ahora__texto p {
margin: 0;
color: var(--c-muted);
font-size: .92rem;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* El enlace inferior se pega al fondo para que ambas tarjetas
terminen a la misma altura. */
.premium-ahora__noticia .premium-card__arrow,
.premium-ahora__agenda .premium-card__arrow { margin-top: auto; padding-top: var(--space-4); }
.premium-ahora__lista { list-style: none; margin: 0; padding: 0; }
.premium-ahora__acto {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--c-line);
}
.premium-ahora__acto:first-child { padding-top: 0; }
.premium-ahora__acto:last-child { border-bottom: 0; }
.premium-ahora__fecha {
flex: 0 0 48px;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
}
.premium-ahora__fecha b { font-size: 1.6rem; font-weight: 800; }
.premium-ahora__fecha small {
font-size: .66rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-accent);
margin-top: 4px;
}
.premium-ahora__datos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.premium-ahora__datos strong { font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.premium-ahora__datos small { font-size: .84rem; color: var(--c-muted); }
.premium-ahora__vacio { color: var(--c-muted); font-size: .9rem; padding: 12px 0; }
/* En móvil la miniatura lateral dejaba el texto en 161px y el titular rompía
en cuatro líneas. Ahí la foto va a todo el ancho y el texto debajo; la
miniatura lateral se reserva para escritorio, donde la tarjeta es ancha y
una foto a sangre la haría gigante (era el problema original: 708px de
ancho daban 398px de alto de imagen). */
@media (max-width: 860px) {
.premium-ahora__fila { flex-direction: column; gap: var(--space-4); }
.premium-ahora__foto { flex: none; width: 100%; aspect-ratio: 16 / 9; }
}
/* Esta sección va pegada al hero, así que no necesita el relleno superior de
128px que usan las demás para separarse entre sí: dejaba 184px de vacío
entre la cuenta atrás y las tarjetas. Se recorta aquí sin tocar el ritmo
del resto de la página. */
.premium-ahora { padding-top: var(--space-6); }
.premium-hero { padding-bottom: var(--space-4); }
/* El ritmo entre secciones era de 128px arriba y abajo (256px entre una y la
siguiente) en escritorio y 64+64 en móvil: demasiado aire para una portada
con seis bloques. Se reduce a la mitad. Solo index.html usa .premium-section. */
.premium-section { padding-block: var(--space-16); }
@media (max-width: 900px) {
.premium-section { padding-block: var(--space-12); }
}
/* Se mantiene el recorte extra del bloque pegado al hero. */
.premium-ahora { padding-top: var(--space-6); }
/* Segunda mitad de los titulares en dorado, como el "Cendoya" del hero, para
que blanco y oro se lean como el mismo sistema. Deliberadamente más sobrio
que el bronce repujado del hero (.htl-em em): ahí es la pieza principal y
aquí no debe competir con ella, así que solo cambia color, cursiva y peso. */
.tit-oro {
font-style: italic;
font-weight: 300;
color: var(--c-accent);
text-shadow: 0 1px 0 rgba(40, 25, 8, .45), 0 6px 18px rgba(0, 0, 0, .35);
}
/* El botón de compartir iba en verde WhatsApp macizo y se repetía en cada
tarjeta: once puntos de un color ajeno a la paleta (negro, oro y azul) que
se comían la atención de la rejilla. El icono es lo que reconoce la gente,
no el color, así que en reposo se queda discreto y el verde de marca vuelve
al pasar por encima o al pulsar, como confirmación de lo que va a hacer. */
.premium-page .event-share-btn {
background: rgba(10, 10, 10, .55);
border: 1px solid var(--c-line-strong);
color: var(--c-accent);
box-shadow: none;
}
.premium-page .event-share-btn:hover,
.premium-page .event-share-btn:focus-visible {
background: #25D366;
border-color: #25D366;
color: #fff;
box-shadow: 0 6px 20px -6px rgba(37, 211, 102, .65);
}
/* ============================================================
TARJETA DE EVENTO: la foto pasa a la cabecera
El CSS anterior daba por hecho que la imagen iba la última y sangraba hacia
el relleno inferior de la tarjeta. Ahora abre la tarjeta, así que sangra
hacia arriba. Las esquinas las recorta el overflow:hidden de la tarjeta.
============================================================ */
.premium-page .event-card-grid .event-img-header {
margin-top: calc(-1 * var(--space-6)) !important;
margin-bottom: 0;
order: -1;
}
/* El botón de compartir queda ahora sobre la foto: se le devuelve algo de
sombra para que no se pierda sobre imágenes claras. */
.premium-page .event-share-btn {
box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .55);
}
/* ============================================================
PÁGINA DEL CENTENARIO (centenario.html)
============================================================ */
.cent-page main { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.cent-hero {
text-align: center;
/* Menos aire del que traía: 64px bajo la barra fija y 32px hasta la
primera sección, en vez de 64+48. */
padding: calc(70px + var(--space-12)) 0 var(--space-8);
}
.cent-hero__emblema {
width: min(180px, 42vw);
height: auto;
display: block;
margin: 0 auto var(--space-6);
}
.cent-hero__eyebrow {
display: block;
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--c-muted);
margin-bottom: var(--space-4);
}
.cent-hero__titulo {
font-size: clamp(2.6rem, 11vw, 6rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
margin: 0 0 var(--space-4);
}
.cent-hero__titulo em { font-style: normal; color: var(--c-accent); }
.cent-hero__lede {
font-size: clamp(1rem, 2.4vw, 1.25rem);
color: var(--c-muted);
margin: 0 0 var(--space-8);
text-wrap: balance;
}
.cent-hero__cuenta { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--space-4); }
.cent-hero__para {
font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted);
}
.cent-hero__acto {
font-size: clamp(1.05rem, 3vw, 1.4rem); font-weight: 700; color: var(--c-accent); line-height: 1.2;
}
.cent-hero__cuando { font-size: .85rem; color: var(--c-muted); }
/* 48+48 dejaba casi 100px entre bloques en una página que ya es larga. */
.cent-sec { padding-block: var(--space-8); border-top: 1px solid var(--c-line); }
.cent-sec__titulo {
font-size: clamp(1.5rem, 4.5vw, 2.4rem);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.15;
margin: 0 0 var(--space-3);
text-wrap: balance;
}
.cent-sec__lede { color: var(--c-muted); margin: 0 0 var(--space-6); max-width: 60ch; line-height: 1.65; }
.cent-intro { border-top: 0; }
.cent-intro p {
font-size: clamp(1.1rem, 2.6vw, 1.45rem);
line-height: 1.55;
/* 34ch dejaba unas seis palabras por línea y el párrafo se leía como
versos. Con ~62ch caben tres o cuatro líneas y vuelve a ser prosa. */
max-width: 62ch;
margin: 0 auto;
text-align: center;
text-wrap: pretty;
}
/* --- Programa --- */
.cent-programa { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.cent-acto {
display: flex; gap: var(--space-6); align-items: baseline;
padding: 16px 0; border-bottom: 1px solid var(--c-line);
}
.cent-acto:last-child { border-bottom: 0; }
/* Los actos ya celebrados se atenúan en vez de desaparecer: el programa del
centenario se lee también como un recorrido de lo que ya ha pasado. */
.cent-acto.es-pasado { opacity: .45; }
.cent-acto__fecha {
flex: 0 0 clamp(120px, 22vw, 170px);
font-weight: 600; color: var(--c-accent); text-transform: lowercase;
}
.cent-acto__fecha small { display: block; color: var(--c-muted); font-weight: 400; }
.cent-acto__datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cent-acto__datos strong { font-size: 1.05rem; font-weight: 600; }
.cent-acto__datos small { color: var(--c-muted); font-size: .86rem; }
@media (max-width: 620px) {
.cent-acto { flex-direction: column; gap: 4px; }
.cent-acto__fecha { flex: none; }
.cent-acto__fecha small { display: inline; }
}
/* --- Hitos --- */
.cent-hitos { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.cent-hito {
display: flex; gap: var(--space-6); align-items: baseline;
padding: 13px 0; border-bottom: 1px solid var(--c-line);
}
.cent-hito:last-child { border-bottom: 0; }
.cent-hito__anio {
flex: 0 0 clamp(90px, 18vw, 130px);
font-weight: 700; color: var(--c-accent);
}
.cent-hito__texto strong { font-weight: 500; }
/* --- Monumento --- */
.cent-monumento { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: var(--space-8); align-items: start; margin-bottom: var(--space-6); }
@media (max-width: 720px) { .cent-monumento { grid-template-columns: 1fr; } }
.cent-monumento__foto { border-radius: 14px; overflow: hidden; background: var(--c-line); }
.cent-monumento__foto img { width: 100%; height: auto; display: block; }
.cent-ficha { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px var(--space-6); align-content: start; }
.cent-ficha dt { color: var(--c-muted); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.cent-ficha dd { margin: 0; font-weight: 600; }
/* --- Lecturas --- */
.cent-lecturas { list-style: none; margin: 0; padding: 0; }
.cent-lecturas li { border-bottom: 1px solid var(--c-line); }
.cent-lecturas li:last-child { border-bottom: 0; }
.cent-lecturas a { display: block; padding: 14px 0; text-decoration: none; color: inherit; transition: color .2s ease; }
.cent-lecturas a:hover { color: var(--c-accent); }
.cent-vacio { color: var(--c-muted); }
/* Boceto del centenario: hasta que el servidor lo entrega, en su hueco va el
aviso de cuándo se desvela. */
.cent-boceto {
border: 1px dashed var(--c-line-strong);
border-radius: 14px;
padding: var(--space-6);
display: flex;
align-items: center;
min-height: 190px;
}
.cent-boceto__aviso {
margin: 0;
color: var(--c-muted);
font-size: .95rem;
line-height: 1.6;
text-wrap: pretty;
}
.cent-boceto__aviso strong { color: var(--c-accent); font-weight: 600; }
.cent-boceto.es-visible {
border: 0;
padding: 0;
min-height: 0;
border-radius: 14px;
overflow: hidden;
background: var(--c-line);
}
.cent-boceto.es-visible img { width: 100%; height: auto; display: block; }
/* Los dos bocetos del centenario. Con uno solo ocupa toda la columna; cuando
aparezca el infantil se reparten en dos. El cambio lo hace el JS al recibir
la segunda imagen, así que no hay hueco reservado esperando. */
.cent-bocetos { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.cent-bocetos.tiene-dos { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) {
.cent-bocetos.tiene-dos { grid-template-columns: 1fr; }
}
/* Con dos bocetos, la columna de 320px los dejaba en 152px cada uno. En ese
caso la sección se apila: galería a todo el ancho arriba y ficha debajo. */
.cent-monumento.tiene-dos { grid-template-columns: 1fr; }
/* Hueco reservado de los bocetos del centenario en la galería de monumentos:
mismo tamaño que una tarjeta normal para que la rejilla no se descuadre. */
.boceto-reservado .monument-img-container {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
min-height: 320px;
border: 1px dashed var(--c-line-strong);
border-radius: 14px;
background: transparent;
}
.boceto-reservado__aviso {
margin: 0;
text-align: center;
color: var(--c-muted);
font-size: .95rem;
line-height: 1.6;
text-wrap: pretty;
}
.boceto-reservado__aviso strong { color: var(--c-accent); font-weight: 600; }
/* ============================================================
PORTADA: hero del centenario
La imagen del emblema es una composición cerrada (marco, volutas y
emblema centrado): recortarla a pantalla completa o poner texto
encima la estropea, y el texto caía justo sobre "FALLA LUIS
CENDOYA". Se trata como una pieza; el contenido va al lado en
escritorio y debajo en móvil.
============================================================ */
.premium-hero.hero-emblema {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--space-6);
text-align: center;
overflow: hidden;
background: #04060e;
padding: calc(70px + var(--space-6)) var(--container-pad) var(--space-8);
}
/* Halo tenue que continúa el azul de la imagen hacia los bordes, para que la
pieza no quede recortada sobre un negro plano. */
.hero-emblema::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: radial-gradient(75% 55% at 50% 42%, rgba(38,64,120,.35) 0%, rgba(4,6,14,0) 72%);
}
.hero-emblema > * { position: relative; z-index: 1; }
.hero-emblema__img {
display: block;
width: min(100%, 900px);
max-height: 40svh;
height: auto;
object-fit: contain;
border-radius: 14px;
box-shadow: 0 26px 60px -24px rgba(0,0,0,.9);
}
.hero-emblema__velo { display: none; }
.hero-emblema__abajo { width: 100%; }
.hero-emblema .premium-countdown__target {
display: flex; flex-direction: column; gap: 4px;
margin: 0 0 var(--space-4);
}
.hero-emblema .premium-countdown__para {
font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
color: rgba(255,255,255,.55);
}
.hero-emblema .premium-countdown__acto {
font-size: clamp(1.05rem, 3.2vw, 1.5rem); font-weight: 700; color: #fff; line-height: 1.2;
}
.hero-emblema .premium-countdown__cuando { font-size: .85rem; color: rgba(255,255,255,.65); }
.hero-emblema .premium-countdown__num { color: #fff; }
.hero-emblema__acciones {
display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
margin-top: var(--space-5, 1.25rem);
}
.hero-emblema__btn {
display: inline-flex; align-items: center;
padding: 13px 22px; border-radius: 999px; text-decoration: none;
font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.hero-emblema__btn--oro { background: var(--c-accent); color: #1a1206; border: 1px solid var(--c-accent); }
.hero-emblema__btn--oro:hover { transform: translateY(-2px); }
.hero-emblema__btn--fantasma { background: rgba(255,255,255,.07); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.hero-emblema__btn--fantasma:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
/* --- ESCRITORIO: dos columnas ---
Apilado en vertical, la imagen quedaba flotando en medio con mucho negro a
los lados y sin usar el ancho. A partir de 900px se reparte: la pieza a la
izquierda y la cuenta atrás a la derecha, alineada a la izquierda para que
tenga un eje propio en vez de quedar centrada en el vacío. */
@media (min-width: 900px) {
.premium-hero.hero-emblema {
flex-direction: row;
align-items: center;
justify-content: center;
gap: clamp(2rem, 5vw, 4.5rem);
text-align: left;
padding-inline: clamp(2rem, 6vw, 6rem);
}
.hero-emblema__img {
width: min(54%, 660px);
max-height: 72svh;
flex: 0 1 auto;
}
.hero-emblema__abajo { width: auto; max-width: 30ch; }
.hero-emblema .premium-countdown__target { align-items: flex-start; text-align: left; }
.hero-emblema .premium-countdown { justify-content: flex-start; }
.hero-emblema__acciones { justify-content: flex-start; }
}
/* La columna derecha se quedaba en 30ch y la cuenta atrás, que es una rejilla
de cuatro con relleno generoso, juntaba los números ("40014734"). Se le da
ancho propio y se aprietan relleno y cuerpo dentro de este contexto. */
@media (min-width: 900px) {
.hero-emblema__img { width: min(50%, 600px); }
.hero-emblema__abajo { flex: 0 1 430px; max-width: 430px; }
.hero-emblema .premium-countdown {
max-width: none;
margin-inline: 0;
margin-bottom: 0;
gap: .5rem;
}
.hero-emblema .premium-countdown__unit { padding: var(--space-3) var(--space-2); }
.hero-emblema .premium-countdown__num { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.hero-emblema__acciones { margin-top: var(--space-6); }
}
/* Hueco reservado del boceto en la ficha individual monumento-.html.
Mantiene la proporción 3:4 de las imágenes de boceto para que la rejilla de
la ficha no se descuadre mientras el boceto no es público. */
.ficha-boceto-espera {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 4;
padding: var(--space-6);
border: 1px dashed var(--c-line-strong);
border-radius: 12px;
}
.ficha-boceto-espera img { width: 100%; height: auto; display: block; border-radius: 12px; }
.boceto-reservado .ficha-boceto-espera { background: transparent; }
/* Patrocinadores: cada sección sumaba 64px de relleno arriba, 64 abajo y 80 de
margen, o sea 208px entre una y la siguiente. Se recorta a la mitad larga. */
.premium-page .sponsors-section {
padding-block: var(--space-8);
margin-bottom: var(--space-8);
}
/* El bloque final llevaba 120px de relleno y 80 de margen superior. */
.premium-page .join-sponsor-section {
padding-block: var(--space-16);
margin-top: var(--space-8);
}