/* =====================================================================
   alfombraroja.es · Tema «Photocall»
   Revista de famosos: terciopelo negro, alfombra roja y champán. Titulares en Gloock
   (alto contraste, de portada de revista), texto en Urbanist. Las fotos de prensa
   (250 × 140 px) se muestran a su tamaño real, enmarcadas como copias de prensa.
   ===================================================================== */

:root {
  --marfil: #faf6f0;
  --marfil-2: #f2e9df;
  --blanco: #fffdfb;
  --terciopelo: #141012;
  --terciopelo-2: #231b1e;
  --alfombra: #a3162b;
  --alfombra-oscura: #7d0f20;
  --champan: #c9a86a;
  --champan-claro: #e8d6ae;
  --tinta: #1d1719;
  --tenue: #6b6266;
  --borde: #e6dad0;

  --f-display: 'Gloock', 'Didot', 'Bodoni 72', Georgia, serif;
  --f-texto: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.25rem;
  --t-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --t-2xl: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --t-3xl: clamp(2.75rem, 1.8rem + 4vw, 5.5rem);

  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
  --margen: clamp(1.25rem, 4vw, 2.5rem);
  --bloque: clamp(4rem, 3rem + 4vw, 7rem);

  --ancho-texto: 38rem;
  --ancho-amplio: 64rem;
  --radio: 2px;
  --color-texto: var(--tinta);
  --color-fondo: var(--blanco);
  --color-suave: var(--marfil-2);
  --color-borde: var(--borde);
  --color-acento: var(--alfombra);
  --color-acento-texto: var(--marfil);
  --color-tenue: var(--tenue);
  --fuente-texto: var(--f-texto);
  --fuente-titulos: var(--f-display);

  color-scheme: light;
  accent-color: var(--alfombra);
  scrollbar-color: var(--alfombra) var(--marfil-2);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--marfil); color: var(--tinta); font-family: var(--f-texto); font-size: var(--t-m); line-height: 1.65; font-weight: 450; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--alfombra); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--alfombra-oscura); text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--alfombra); color: var(--marfil); }
:focus-visible { outline: 3px solid var(--alfombra); outline-offset: 3px; }
main:focus { outline: none; }
button { font: inherit; cursor: pointer; }
.envoltorio { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: var(--margen); }
.definiciones { position: absolute; width: 0; height: 0; overflow: hidden; }
.saltar { position: absolute; left: var(--e-4); top: -4rem; z-index: 200; background: var(--alfombra); color: var(--marfil); padding: var(--e-3) var(--e-4); font-weight: 700; text-decoration: none; }
.saltar:focus { top: var(--e-4); color: var(--marfil); }
.icono { width: 1.25em; height: 1.25em; flex: none; }
.estrella { width: .85em; height: .85em; flex: none; }
.photocall { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.rotulo { display: inline-flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-4); font-size: .9375rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--champan); }
.rotulo-rojo { color: var(--alfombra); }
.titulo-seccion { font-family: var(--f-display); font-size: var(--t-2xl); line-height: 1.05; letter-spacing: -.01em; color: var(--tinta); }
.titulo-claro { color: var(--marfil); }
.seccion-cabecera { margin-bottom: var(--e-7); text-align: center; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 3rem; padding: .75rem 1.6rem;
  background: var(--alfombra); color: var(--marfil); border: 1px solid var(--champan);
  font-family: var(--f-texto); font-size: .9375rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  box-shadow: inset 0 0 0 3px var(--alfombra), inset 0 0 0 4px rgba(232, 214, 174, .55);
  transition: background-color .2s ease, transform .2s ease;
}
.boton:hover { background: var(--alfombra-oscura); color: var(--marfil); transform: translateY(-1px); box-shadow: inset 0 0 0 3px var(--alfombra-oscura), inset 0 0 0 4px rgba(232, 214, 174, .7); }

/* foto de prensa a tamaño real */
.prensa { position: relative; display: inline-block; padding: 10px 10px 30px; background: var(--blanco); box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 18px 30px -16px rgba(0, 0, 0, .55); }
.prensa img { width: var(--ancho, 250px); max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- cabecera */
.cabecera { position: relative; z-index: 50; background: var(--terciopelo); color: var(--marfil); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-5); min-height: 5.5rem; }
.marca { display: grid; gap: .15rem; text-decoration: none; color: var(--marfil); padding-block: var(--e-2); }
.marca:hover { color: var(--marfil); }
.marca-nombre { font-family: var(--f-display); font-size: 2.125rem; line-height: 1; letter-spacing: -.01em; }
.marca-nombre span, .pie-marca span { color: var(--champan); }
.marca-lema { font-size: .75rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--champan); }
.navegacion { display: flex; align-items: center; gap: var(--e-5); }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e-5); }
.menu a, .navegacion-buscar { position: relative; display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.75rem; color: var(--marfil); text-decoration: none; font-size: .875rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.menu a::after { content: ""; position: absolute; left: 0; right: .18em; bottom: .45rem; height: 1px; background: var(--champan); transform: scaleX(0); transition: transform .2s ease; }
.menu a:hover, .navegacion-buscar:hover { color: var(--champan-claro); }
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }
.menu a[aria-current] { color: var(--champan); }
.navegacion-buscar { justify-content: center; width: 2.75rem; border: 1px solid rgba(201, 168, 106, .5); border-radius: 50%; }
.navegacion-buscar[aria-current] { border-color: var(--champan); color: var(--champan); }
.navegacion-buscar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cabecera :focus-visible { outline-color: var(--champan); }
.alfombra-franja { height: 12px; background: var(--alfombra); border-block: 2px solid var(--champan); box-shadow: inset 0 2px 0 var(--alfombra-oscura), inset 0 -2px 0 var(--alfombra-oscura); }
.menu-boton { display: none; }

@media (max-width: 56rem) {
  .cabecera-fila { min-height: 3.75rem; }
  .marca-nombre { font-size: 1.625rem; }
  .marca-lema { display: none; }
  .alfombra-franja { height: 8px; }
  .menu-boton {
    display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.75rem; min-width: 2.75rem; padding: 0 var(--e-4);
    background: transparent; color: var(--marfil); border: 1px solid var(--champan);
    font-size: .875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; position: relative; z-index: 60;
  }
  .menu-boton-rayas, .menu-boton-rayas::before, .menu-boton-rayas::after { display: block; width: 1rem; height: 2px; background: currentColor; transition: transform .2s ease, background-color .2s ease; }
  .menu-boton-rayas { position: relative; }
  .menu-boton-rayas::before, .menu-boton-rayas::after { content: ""; position: absolute; left: 0; }
  .menu-boton-rayas::before { top: -5px; }
  .menu-boton-rayas::after { top: 5px; }
  .menu-boton[aria-expanded="true"] { background: var(--alfombra); }
  .menu-boton[aria-expanded="true"] .menu-boton-rayas { background: transparent; }
  .menu-boton[aria-expanded="true"] .menu-boton-rayas::before { transform: translateY(5px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] .menu-boton-rayas::after { transform: translateY(-5px) rotate(-45deg); }
  .navegacion {
    display: none; position: fixed; inset: 0; z-index: 55; flex-direction: column; align-items: stretch; gap: 0;
    padding: 5.5rem var(--margen) calc(var(--e-7) + env(safe-area-inset-bottom)); overflow-y: auto;
    background: radial-gradient(ellipse 80% 50% at 50% 0, rgba(201, 168, 106, .14), transparent 70%), var(--terciopelo);
  }
  .navegacion::before { content: ""; position: absolute; left: 0; right: 0; top: 3.75rem; height: 8px; background: var(--alfombra); border-block: 2px solid var(--champan); }
  .navegacion.abierto { display: flex; }
  .menu { flex-direction: column; gap: 0; }
  .menu li { border-bottom: 1px solid rgba(201, 168, 106, .28); }
  .menu a, .navegacion-buscar { width: 100%; min-height: 4rem; font-family: var(--f-display); font-size: 2rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
  .menu a::after { display: none; }
  .navegacion-buscar { border: 0; border-radius: 0; justify-content: flex-start; }
  .navegacion-buscar span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  html.menu-abierto { overflow: hidden; }
  html.menu-abierto .marca { position: relative; z-index: 60; }
}

/* ---------------------------------------------------------------- portada: exclusiva */
.exclusiva { position: relative; overflow: hidden; background: var(--terciopelo); color: var(--marfil); padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.exclusiva::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 70% at 72% 45%, rgba(255, 244, 222, .16), transparent 70%), radial-gradient(ellipse 30% 40% at 15% 0, rgba(163, 22, 43, .35), transparent 70%), linear-gradient(90deg, rgba(20, 16, 18, .92) 0, rgba(20, 16, 18, .7) 45%, rgba(20, 16, 18, 0) 75%); pointer-events: none; }
.exclusiva-fila { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--e-7); align-items: center; }
.exclusiva-titulo { font-family: var(--f-display); font-size: var(--t-3xl); line-height: .98; letter-spacing: -.02em; }
.exclusiva-titulo a { color: var(--marfil); text-decoration: none; }
.exclusiva-titulo a:hover { color: var(--champan-claro); }
.exclusiva-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin: var(--e-5) 0 0; font-size: var(--t-s); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--champan-claro); }
.exclusiva-meta > * + *::before { content: "★"; margin-right: var(--e-4); color: var(--alfombra); letter-spacing: 0; }
.exclusiva-meta a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--champan); text-decoration: none; }
.exclusiva-meta a:hover { color: var(--champan-claro); text-decoration: underline; }
.exclusiva-entradilla { max-width: 36rem; margin: var(--e-4) 0 0; font-size: var(--t-l); line-height: 1.6; color: rgba(250, 246, 240, .88); }
.exclusiva-botones { margin: var(--e-6) 0 0; }
.exclusiva :focus-visible, .historia-cabecera :focus-visible, .lista-cabecera :focus-visible { outline-color: var(--champan); }
.exclusiva-foto { position: relative; margin: 0; display: grid; place-items: center; min-height: 20rem; }
.flash { position: absolute; width: 26rem; height: 26rem; max-width: 120%; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 248, 230, .22) 0 2deg, transparent 2deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 68%); mask-image: radial-gradient(circle, #000 0, transparent 68%); }
.flash::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 252, 240, .55), transparent 70%); }
.exclusiva-foto .prensa { transform: rotate(-4deg); }
.exclusiva-foto .prensa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--champan-claro); transform: rotate(9deg) translate(10px, 6px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }

/* ---------------------------------------------------------------- portada: pasarela (alfombra) */
.pasarela { padding-block: var(--bloque); background: linear-gradient(var(--marfil-2), var(--marfil) 18rem); }
.pasarela-lista { --ancho-alfombra: 4.5rem; position: relative; list-style: none; margin: 0; padding: var(--e-4) 0 var(--e-7); display: grid; gap: var(--e-6); }
.pasarela-lista::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--ancho-alfombra); transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, .06) 6px 7px), linear-gradient(90deg, var(--alfombra-oscura), var(--alfombra) 18%, var(--alfombra) 82%, var(--alfombra-oscura));
  border-inline: 3px solid var(--champan);
  -webkit-mask-image: linear-gradient(transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}
.pasarela-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--ancho-alfombra) minmax(0, 1fr); column-gap: var(--e-6); align-items: center; }
.pasarela-historia { grid-column: 1; grid-row: 1; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-5); align-items: start; padding: var(--e-5); background: var(--blanco); border: 1px solid var(--borde); box-shadow: 0 20px 34px -28px rgba(20, 16, 18, .6); transition: transform .2s ease, box-shadow .2s ease; }
.pasarela-item:nth-child(even) .pasarela-historia { grid-column: 3; }
.pasarela-historia:hover { transform: translateY(-3px); box-shadow: 0 26px 40px -26px rgba(20, 16, 18, .65); }
.pasarela-historia:focus-within { outline: 3px solid var(--alfombra); outline-offset: 3px; }
.poste { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3d6, var(--champan) 45%, #8c6d33); box-shadow: 0 0 0 4px var(--alfombra), 0 0 0 6px var(--champan); }
.pasarela-foto { margin: 0; }
.pasarela-foto .prensa { padding: 6px 6px 18px; transform: rotate(-2deg); }
.pasarela-item:nth-child(even) .pasarela-foto .prensa { transform: rotate(2deg); }
.pasarela-foto .prensa img { width: min(var(--ancho, 250px), 11rem); }
.pasarela-titulo { font-family: var(--f-display); font-size: 1.625rem; line-height: 1.08; }
.pasarela-titulo a { color: var(--tinta); text-decoration: none; }
.pasarela-titulo a::after { content: ""; position: absolute; inset: 0; }
.pasarela-historia:hover .pasarela-titulo a { color: var(--alfombra); }
.pasarela-titulo a:focus-visible { outline: none; }

.historia-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); margin: 0 0 var(--e-2); font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.historia-seccion { color: var(--alfombra); }
.historia-seccion::after { content: "·"; margin-left: var(--e-3); color: var(--tenue); }
.historia-extracto { margin: var(--e-2) 0 0; font-size: var(--t-s); line-height: 1.55; color: var(--tenue); }

/* ---------------------------------------------------------------- portada: cita */
.cita { position: relative; overflow: hidden; padding-block: var(--bloque); color: var(--marfil); text-align: center; background: radial-gradient(ellipse 70% 90% at 50% 50%, #b51d33, var(--alfombra) 45%, #5e0b18 100%); }
.cita::before, .cita::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--champan); }
.cita::before { top: 14px; }
.cita::after { bottom: 14px; }
.cita-texto { margin: 0 auto; max-width: 52rem; }
.cita-texto p { margin: 0; font-family: var(--f-display); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1.18; letter-spacing: -.01em; }
.cita-texto p::before, .cita-texto p::after { color: var(--champan-claro); }
.cita-texto p::before { content: "«"; }
.cita-texto p::after { content: "»"; }
.cita-texto footer { margin-top: var(--e-5); }
.cita-texto footer a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.75rem; color: var(--champan-claro); font-size: var(--t-s); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.cita-texto footer a:hover { color: #fff; text-decoration: underline; }
.cita :focus-visible { outline-color: var(--champan-claro); }

/* ---------------------------------------------------------------- portada: invitados y secciones */
.invitados-secciones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); padding-block: var(--bloque); align-items: start; }
.invitados-tarjeta { position: relative; padding: var(--e-7) var(--e-6) var(--e-6); background: var(--blanco); text-align: center; border: 1px solid var(--champan); outline: 1px solid var(--champan); outline-offset: -10px; box-shadow: 0 30px 50px -36px rgba(20, 16, 18, .55); }
.invitados-tarjeta::before { content: "★"; position: absolute; top: -1.1rem; left: 50%; transform: translateX(-50%); width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--alfombra); color: var(--champan-claro); font-size: .95rem; box-shadow: 0 0 0 3px var(--blanco), 0 0 0 4px var(--champan); }
.invitados-sobre { margin: 0 0 var(--e-2); font-size: var(--t-xs); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--tenue); }
.invitados-titulo { font-family: var(--f-display); font-size: var(--t-2xl); line-height: 1; margin-bottom: var(--e-5); }
.invitados-lista { list-style: none; margin: 0; padding: var(--e-4) 0 0; border-top: 1px solid var(--borde); columns: 2 12rem; column-gap: var(--e-6); text-align: left; }
.invitados-lista li { break-inside: avoid; border-bottom: 1px dotted var(--borde); }
.invitados-lista a { display: flex; align-items: center; gap: var(--e-3); min-height: 2.75rem; color: var(--tinta); text-decoration: none; font-weight: 600; }
.invitados-lista a:hover { color: var(--alfombra); }
.visto { width: 1.1rem; height: 1.1rem; padding: 2px; border: 1px solid var(--alfombra); color: var(--alfombra); }
.secciones .titulo-seccion { margin-bottom: var(--e-5); }
.secciones-lista { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.secciones-lista a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-4); padding: var(--e-4) 0; border-bottom: 1px solid var(--borde); color: var(--tinta); text-decoration: none; transition: padding .2s ease, background-color .2s ease; }
.secciones-lista a:hover { padding-left: var(--e-3); background: var(--marfil-2); color: var(--tinta); }
.seccion-nombre { font-family: var(--f-display); font-size: 2rem; line-height: 1.05; }
.seccion-cuenta { align-self: center; font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--alfombra); }
.seccion-ultima { grid-column: 1; font-size: var(--t-s); color: var(--tenue); }
.seccion-flecha { grid-column: 2; grid-row: 2; justify-self: end; color: var(--alfombra); transition: transform .2s ease; }
.secciones-lista a:hover .seccion-flecha { transform: translateX(4px); }

/* ---------------------------------------------------------------- pases (etiquetas) */
.etiquetas { position: relative; overflow: hidden; background: var(--terciopelo); padding-block: var(--bloque); text-align: center; }
.etiquetas::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='1' cy='1' r='.6' fill='%23c9a86a' fill-opacity='.08'/%3E%3C/svg%3E"); }
.etiquetas .envoltorio { position: relative; }
.etiquetas .titulo-seccion { margin-bottom: var(--e-7); }
.pases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-5) var(--e-4); }
.pase { position: relative; display: inline-grid; justify-items: center; gap: .1rem; min-width: 7.5rem; padding: 1.4rem 1rem .8rem; background: var(--blanco); color: var(--tinta); text-decoration: none; border-top: 6px solid var(--alfombra); box-shadow: 0 16px 24px -16px rgba(0, 0, 0, .8); transform: rotate(var(--giro, -2deg)); transition: transform .2s ease; }
.pases li:nth-child(2n) .pase { --giro: 1.5deg; }
.pases li:nth-child(3n) .pase { --giro: -.5deg; }
.pase:hover { transform: rotate(0) translateY(-4px); color: var(--alfombra); }
.pase-agujero { position: absolute; top: .45rem; left: 50%; width: 1.6rem; height: .4rem; transform: translateX(-50%); border-radius: 1rem; background: var(--terciopelo); }
.pase-nombre { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.1; }
.pase-n { font-size: .75rem; font-weight: 800; letter-spacing: .14em; color: var(--tenue); }
.pases-claros { justify-content: flex-start; margin-top: var(--e-6); }
.pases-claros .pase { border: 1px solid var(--borde); border-top: 6px solid var(--alfombra); box-shadow: 0 10px 18px -14px rgba(0, 0, 0, .5); }
.pases-claros .pase-agujero { background: var(--marfil-2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25); }

/* ---------------------------------------------------------------- tarjetas de historia */
.historias-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--e-6) var(--e-5); }
.historia { position: relative; display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--borde); transition: transform .2s ease, box-shadow .2s ease; }
.historia:hover { transform: translateY(-3px); box-shadow: 0 24px 36px -28px rgba(20, 16, 18, .6); }
.historia:focus-within { outline: 3px solid var(--alfombra); outline-offset: 3px; }
.historia-foto { margin: 0; display: grid; place-items: center; padding: var(--e-5) var(--e-4); background: var(--terciopelo-2); position: relative; overflow: hidden; }
.historia-foto::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 244, 222, .18), transparent 65%); }
.historia-foto .prensa { padding: 6px 6px 18px; transform: rotate(-1.5deg); }
.historia-texto { padding: var(--e-4) var(--e-5) var(--e-5); }
.historia-titulo { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.1; }
.historia-titulo a { color: var(--tinta); text-decoration: none; }
.historia-titulo a::after { content: ""; position: absolute; inset: 0; }
.historia:hover .historia-titulo a { color: var(--alfombra); }
.historia-titulo a:focus-visible { outline: none; }

/* ---------------------------------------------------------------- interiores */
.lista-cabecera, .historia-cabecera { position: relative; overflow: hidden; background: var(--terciopelo); color: var(--marfil); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) var(--e-7); }
.lista-cabecera::before, .historia-cabecera::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 85% 40%, rgba(255, 244, 222, .12), transparent 70%), linear-gradient(90deg, rgba(20, 16, 18, .9) 0, rgba(20, 16, 18, .55) 50%, rgba(20, 16, 18, 0) 80%); pointer-events: none; }
.lista-cabecera > .envoltorio, .historia-cabecera > .envoltorio { position: relative; }
.lista-titulo { font-family: var(--f-display); font-size: var(--t-3xl); line-height: 1; letter-spacing: -.02em; }
.lista-cuenta { margin: var(--e-4) 0 0; font-size: var(--t-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--champan-claro); }
.lista-cuerpo { padding-block: var(--e-7); }
.otras-secciones { padding-bottom: var(--bloque); }
.otras-secciones .titulo-seccion { font-size: var(--t-xl); margin-bottom: var(--e-4); }
.secciones-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-3); }
.secciones-chips a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.75rem; padding: 0 var(--e-5); border: 1px solid var(--tinta); color: var(--tinta); text-decoration: none; font-family: var(--f-display); font-size: 1.25rem; transition: background-color .18s ease, color .18s ease; }
.secciones-chips a span { font-family: var(--f-texto); font-size: var(--t-xs); font-weight: 800; color: var(--alfombra); }
.secciones-chips a:hover { background: var(--marfil-2); }
.secciones-chips a[aria-current] { background: var(--alfombra); color: var(--marfil); border-color: var(--alfombra); }
.secciones-chips a[aria-current] span { color: var(--champan-claro); }
.buscador-grande { margin-top: var(--e-5); }
.x-buscador { max-width: 34rem; }
.x-buscador input { min-height: 3rem; border: 1px solid var(--champan); border-radius: 0; font-size: 1rem; background: var(--blanco); color: var(--tinta); }
.x-buscador button { min-height: 3rem; padding: .7rem 1.4rem; border: 1px solid var(--champan); border-radius: 0; background: var(--alfombra); color: var(--marfil); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .875rem; }
.x-buscador button:hover { background: var(--alfombra-oscura); transform: none; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2); margin-bottom: var(--e-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--champan); }
.migas a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--champan); text-decoration: none; }
.migas a:hover { color: var(--champan-claro); text-decoration: underline; }
.vacio { font-family: var(--f-display); font-size: var(--t-l); color: var(--tenue); }
.entradilla { font-size: var(--t-l); }
.pagina-cuerpo { padding-block: var(--e-7) var(--bloque); }
.botones { display: flex; flex-wrap: wrap; gap: var(--e-4); margin-top: var(--e-6); }

/* historia */
.historia-cabecera-fila { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--e-7); align-items: center; }
.historia-titulo-grande { font-family: var(--f-display); font-size: clamp(2.5rem, 1.7rem + 3.6vw, 5rem); line-height: 1; letter-spacing: -.02em; }
.historia-cabecera .exclusiva-foto { min-height: 16rem; }
.historia-cuerpo { padding-block: var(--e-7) var(--e-6); }
.historia-contenido { font-size: 1.1875rem; line-height: 1.75; }
.historia-contenido > p:first-child::first-letter { float: left; margin: .08em .1em 0 0; font-family: var(--f-display); font-size: 4.4em; line-height: .8; color: var(--alfombra); }
.historia-pases { max-width: var(--ancho-texto); margin-inline: auto; }
.vecinas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); padding-block: var(--e-5) var(--e-7); }
.vecina { display: grid; gap: var(--e-2); padding: var(--e-5); border: 1px solid var(--borde); border-left: 6px solid var(--alfombra); background: var(--blanco); color: var(--tinta); text-decoration: none; transition: transform .2s ease; }
.vecina-siguiente { text-align: right; border-left-width: 1px; border-right: 6px solid var(--alfombra); }
.vecina-siguiente .vecina-rotulo { flex-direction: row-reverse; }
.vecina:hover { transform: translateY(-2px); color: var(--alfombra); text-decoration: none; }
.vecina-rotulo { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--alfombra); }
.vecina-titulo { font-family: var(--f-display); font-size: var(--t-l); line-height: 1.15; }
.mas-historias { background: var(--marfil-2); padding-block: var(--e-8) var(--bloque); }
.mas-historias .titulo-seccion { margin-bottom: var(--e-6); }
.comentarios { padding-block: var(--e-6); }
.comentarios-lista { list-style: none; margin: var(--e-4) 0 0; padding: 0; }
.comentario { padding: var(--e-4) var(--e-5); background: var(--blanco); border-left: 4px solid var(--alfombra); }

/* contenido */
.contenido h2, .contenido h3 { font-family: var(--f-display); }
.contenido a { color: var(--alfombra); }

/* ---------------------------------------------------------------- pie */
.pie { position: relative; overflow: hidden; background: var(--terciopelo); color: var(--marfil); padding-top: var(--e-8); border-top: 12px solid var(--alfombra); box-shadow: inset 0 2px 0 var(--champan); }
.pie > .envoltorio { position: relative; }
.pie::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20, 16, 18, .35), rgba(20, 16, 18, .92) 55%); pointer-events: none; z-index: 0; }
.pie, .exclusiva, .lista-cabecera, .historia-cabecera { isolation: isolate; }
.pie .photocall, .exclusiva .photocall, .lista-cabecera .photocall, .historia-cabecera .photocall { z-index: -1; }
.pie a { color: var(--marfil); text-decoration: none; }
.pie a:hover { color: var(--champan-claro); text-decoration: underline; }
.pie :focus-visible { outline-color: var(--champan); }
.pie-cabecera { text-align: center; padding-bottom: var(--e-7); border-bottom: 1px solid rgba(201, 168, 106, .25); }
.pie-marca { margin: 0; font-family: var(--f-display); font-size: clamp(2.5rem, 1.6rem + 4vw, 5rem); line-height: 1; letter-spacing: -.02em; }
.pie-lema { display: inline-flex; align-items: center; gap: var(--e-3); margin: var(--e-4) 0 0; font-size: var(--t-s); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--champan); }
.pie-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--e-6); padding-block: var(--e-7); }
.pie-bloque h2 { margin: 0 0 var(--e-3); font-size: var(--t-xs); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--champan); }
.pie-bloque ul { list-style: none; margin: 0; padding: 0; }
.pie-bloque li a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.pie-bloque a[aria-current] { color: var(--champan); }
.pie-texto { margin: 0; color: rgba(250, 246, 240, .8); font-size: var(--t-s); }
.pie-final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3) var(--e-6); padding-block: var(--e-5) calc(var(--e-5) + env(safe-area-inset-bottom)); border-top: 1px solid rgba(201, 168, 106, .25); font-size: var(--t-xs); color: rgba(250, 246, 240, .8); }
.pie-final p { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-5); align-items: center; }
.pie-final a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.75rem; }
.pie-final .icono { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------- responsivo */
@media (max-width: 64rem) {
  .invitados-secciones { grid-template-columns: minmax(0, 1fr); gap: var(--e-8); }
  .pasarela-historia { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48rem) {
  body { font-size: 1rem; }
  .exclusiva-fila, .historia-cabecera-fila { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
  .exclusiva-foto { min-height: 15rem; order: -1; }
  .historia-cabecera .exclusiva-foto { min-height: 13rem; order: 0; }
  .flash { width: 19rem; height: 19rem; }
  .pasarela-lista { --ancho-alfombra: 1.5rem; }
  .pasarela-lista::before { left: calc(var(--ancho-alfombra) / 2); border-width: 2px; }
  .pasarela-item { grid-template-columns: var(--ancho-alfombra) minmax(0, 1fr); column-gap: var(--e-4); }
  .pasarela-historia, .pasarela-item:nth-child(even) .pasarela-historia { grid-column: 2; }
  .poste { grid-column: 1; width: 1.1rem; height: 1.1rem; box-shadow: 0 0 0 3px var(--alfombra), 0 0 0 5px var(--champan); }
  .pasarela-historia { padding: var(--e-4); }
  .pasarela-titulo { font-size: 1.375rem; }
  .seccion-cabecera { text-align: left; }
  .historia-contenido { font-size: 1.125rem; }
  .vecinas { grid-template-columns: minmax(0, 1fr); }
  .vecina-siguiente { text-align: left; border-right-width: 1px; border-left-width: 6px; border-left-color: var(--alfombra); border-right-color: var(--borde); }
  .vecina-siguiente .vecina-rotulo { flex-direction: row; }
  .invitados-tarjeta { padding: var(--e-7) var(--e-4) var(--e-5); }
  .invitados-lista { columns: 1; }
  .pase { min-width: 6.5rem; }
}
@media (max-width: 30rem) {
  .x-buscador { flex-direction: column; }
  .x-buscador button { width: 100%; }
  .exclusiva-botones .boton, .botones .boton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  body { background: #fff; }
  .navegacion, .menu-boton, .alfombra-franja, .pie-rejilla, .pie-final, .vecinas, .mas-historias, .photocall, .flash, .etiquetas, .otras-secciones { display: none !important; }
  .exclusiva, .lista-cabecera, .historia-cabecera, .cabecera, .pie, .cita { background: #fff !important; color: #000 !important; }
  .historia-titulo-grande, .exclusiva-titulo a, .lista-titulo, .pie-marca, .marca-nombre { color: #000 !important; }
}

/* listados: historias en filas (foto de prensa + texto), como una página de sección */
.lista-filas .historias-rejilla { grid-template-columns: minmax(0, 1fr); max-width: 60rem; gap: var(--e-5); }
.lista-filas .historia { flex-direction: row; align-items: stretch; }
.lista-filas .historia-foto { flex: 0 0 19rem; }
.lista-filas .historia-texto { align-self: center; padding: var(--e-5) var(--e-6); }
.lista-filas .historia-titulo { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); }
.lista-filas .historia-extracto { font-size: var(--t-m); }
@media (max-width: 40rem) {
  .lista-filas .historia { flex-direction: column; }
  .lista-filas .historia-foto { flex: none; }
  .lista-filas .historia-texto { padding: var(--e-4) var(--e-4) var(--e-5); }
}