:root {
  --acento: #E3006F; --tinta: #111111; --fondo: #ffffff; --sobre-acento: #ffffff;
  --g50: #f7f7f8; --g100: #efeff1; --g200: #e3e4e7; --g400: #a2a4aa; --g600: #63656b;
  --curva: cubic-bezier(.2,.8,.2,1); --t: 220ms var(--curva);
  --radio: 16px; --radio-g: 28px;
  --sombra: 0 10px 24px -12px rgba(17,18,20,.14); --sombra-hover: 0 16px 32px -14px rgba(17,18,20,.22);
  --gutter: clamp(16px, 4.5vw, 96px);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Montserrat, system-ui, sans-serif; color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.ic { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.envoltura { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.barra { position: sticky; top: 0; z-index: 30; background: var(--fondo); }
.barra .envoltura { height: 64px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.barra img { width: 32px; height: 32px; }
.barra .marca { display: flex; align-items: center; gap: 10px; white-space: nowrap; flex-shrink: 0; }
.barra .años { margin-left: auto; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.barra .años a { padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--g600); font-variant-numeric: tabular-nums; transition: background var(--t), color var(--t); }
.barra .años a:hover { color: var(--tinta); background: var(--g50); }
.barra .años a.on { background: var(--g100); color: var(--tinta); font-weight: 600; }

.cabecera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 34vw); gap: clamp(24px, 5vw, 96px); align-items: center; padding: clamp(32px, 6vw, 96px) 0; }
.cabecera .kicker { font-size: 13px; font-weight: 500; color: var(--g600); }
.cabecera .anio { font-size: clamp(88px, 15vw, 280px); font-weight: 600; letter-spacing: -.05em; line-height: .86; color: var(--acento); font-variant-numeric: tabular-nums; }
.cabecera .anio span { display: inline-block; transform: translateY(105%); animation: digito 760ms var(--curva) forwards; animation-delay: calc(var(--i) * 70ms); }
.cabecera .anio .caja { display: inline-block; overflow: hidden; vertical-align: top; }
@keyframes digito { to { transform: none; } }
.cabecera .reina { margin-top: clamp(16px, 2vw, 32px); }
.cabecera .reina small { display: block; font-size: 12px; color: var(--g600); }
.cabecera .reina b { display: block; font-size: clamp(20px, 2vw, 36px); font-weight: 600; letter-spacing: -.01em; margin-top: 4px; }
.cabecera .reina span { display: block; font-size: 14px; color: var(--g600); margin-top: 4px; }
.cabecera .foto { aspect-ratio: 3 / 4; border-radius: var(--radio-g); overflow: hidden; background: var(--g100); clip-path: inset(0 0 0 100% round var(--radio-g)); animation: cortina 1000ms var(--curva) 200ms forwards; }
.cabecera .foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); animation: acerca 2200ms var(--curva) 200ms forwards; }
@keyframes cortina { to { clip-path: inset(0 0 0 0 round var(--radio-g)); } }
@keyframes acerca { to { transform: none; } }

.seccion { padding: clamp(48px, 6vw, 112px) 0 0; }
.seccion h2 { margin: 0 0 clamp(18px, 2vw, 32px); font-size: clamp(24px, 2.6vw, 48px); font-weight: 600; letter-spacing: -.02em; }
.seccion h2 small { font-size: 14px; font-weight: 400; color: var(--g600); letter-spacing: 0; margin-left: 10px; }
.cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; }
.cands .marco { aspect-ratio: 3 / 4; border-radius: var(--radio); overflow: hidden; background: var(--g100); }
.cands img { width: 100%; height: 100%; object-fit: cover; }
.cands b { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; }
.cands span { font-size: 12px; color: var(--g600); }
.vacio { padding: 32px 0; color: var(--g600); font-size: 14px; border-top: 1px solid var(--g200); }
.navegar { display: flex; justify-content: space-between; gap: 16px; padding: clamp(48px, 6vw, 96px) 0; }
.navegar a { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.navegar a span { font-size: clamp(28px, 3vw, 56px); letter-spacing: -.03em; color: var(--g200); transition: color 400ms var(--curva); }
.navegar a:hover span { color: var(--acento); }
.navegar a:empty { visibility: hidden; }
.pie { border-top: 1px solid var(--g200); padding: 28px 0 48px; font-size: 12.5px; color: var(--g600); }
@media (max-width: 480px) { .barra .marca span { display: none; } }
@media (max-width: 760px) { .cabecera { grid-template-columns: 1fr; } .cabecera .foto { order: -1; max-height: 64svh; } .cands { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cabecera .anio span, .cabecera .foto, .cabecera .foto img { animation: none; transform: none; clip-path: none; } }