/* ============================================================
   sitio.css — lo comun a todas las paginas de la web:
   la cabecera con el menu, el pie ampliado y las piezas de las
   paginas interiores (cabecera de pagina, rejillas, tarjetas,
   formularios, estados de carga/vacio/error).

   Reglas (CLAUDE.md §4 y §9): el ambar es el unico acento; nada
   de azul en UI; zonas tactiles de 44px; foco ambar visible;
   movimiento solo con transform/opacity y nada con reduced-motion.
   Colores SOLO desde tokens.css.
   ============================================================ */

/* ---------- Saltar al contenido ---------- */
.saltar {
  position: fixed;
  top: calc(var(--space-xs) + var(--safe-t));
  left: var(--gutter);
  z-index: 120;
  padding: var(--space-sm) var(--space-md);
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
  border-radius: 6px;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.saltar:focus-visible { transform: none; }

/* ---------- Cabecera ---------- */
:root { --nav-h: 64px; }
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding-top: var(--safe-t);
  /* El fondo aparece al bajar (data-scroll lo pone nav.js). Se anima la
     opacidad de un pseudo-elemento, no el color del header. */
  isolation: isolate;
}

.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--ink-rgb), 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(var(--paper-rgb), 0.08);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-spring);
}

.nav[data-scroll='true']::before,
.nav[data-abierto='true']::before,
.nav[data-solido='true']::before { opacity: 1; }

.nav__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  min-height: var(--nav-h);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.nav__marca {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  flex-shrink: 0;
}

.nav__marca { gap: 8px; }
/* El SVG de ALBACETEA es muy apaisado (13:1): en movil va a 13px para
   que el lockup entero y la hamburguesa quepan en 360px. */
.nav__logo { height: 13px; width: auto; }
.nav__by { font-size: 0.75rem; color: var(--smoke); }
.nav__dm { height: 26px; width: auto; }
@media (min-width: 30rem) {
  .nav__logo { height: 16px; }
  .nav__dm { height: 30px; }
}

/* Movil: el menu es un panel a pantalla completa. */
.nav__menu {
  position: fixed;
  inset: 0;
  z-index: -1;
  padding: calc(var(--nav-h) + var(--safe-t) + var(--space-xl)) var(--gutter) calc(var(--space-2xl) + var(--safe-b));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xl);
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring), visibility 0s linear var(--dur-base);
  overflow-y: auto;
}

.nav[data-abierto='true'] .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nav__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.nav__enlace {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--step-section);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-decoration: none;
}

.nav__enlace[aria-current='page'] { color: var(--amber); }

.nav__acciones {
  display: grid;
  gap: var(--space-sm);
}

.nav__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding-inline: var(--space-lg);
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) var(--ease-spring);
}

.nav__boton--linea {
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(var(--paper-rgb), 0.35);
}

/* Pagina activa. El boton de linea pasa a ambar; el macizo (Entradas) ya
   es ambar: si el texto tambien lo fuera, quedaria AMBAR SOBRE AMBAR, sin
   letras. Ese lleva un anillo por fuera y el texto sigue en negro. */
.nav__boton--linea[aria-current='page'] { box-shadow: inset 0 0 0 1.5px var(--amber); color: var(--amber); }
.nav__boton:not(.nav__boton--linea)[aria-current='page'] { color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 0 0 3.5px var(--amber); }
.nav__boton:active { transform: scale(0.98); }

/* Boton de hamburguesa: dos rayas que se cruzan al abrir. */
.nav__abrir {
  position: relative;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-inline-end: calc(var(--space-xs) * -1);
  display: grid;
  place-content: center;
  gap: 6px;
  background: none;
  border: 0;
  color: var(--paper);
  cursor: pointer;
}

.nav__raya {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-spring);
}

.nav[data-abierto='true'] .nav__raya:nth-child(2) { transform: translateY(4px) rotate(45deg); }
.nav[data-abierto='true'] .nav__raya:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* Con el menu abierto el fondo no se desplaza. */
:root[data-menu='abierto'] { overflow: hidden; }

@media (min-width: 72rem) {
  :root { --nav-h: 76px; }
  .nav__logo { height: 20px; }
  .nav__dm { height: 36px; }
  .nav__abrir { display: none; }

  .nav__menu {
    position: static;
    z-index: auto;
    padding: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: var(--space-lg);
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: visible;
    transition: none;
  }

  .nav__lista { flex-direction: row; gap: var(--space-2xs); }

  .nav__enlace {
    position: relative;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    padding-inline: var(--space-sm);
    color: rgba(var(--paper-rgb), 0.78);
    transition: color var(--dur-fast) var(--ease-spring);
  }

  /* Subrayado ambar que crece desde el centro: transform, no width. */
  .nav__enlace::after {
    content: '';
    position: absolute;
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: 8px;
    height: 2px;
    background: var(--amber);
    transform: scaleX(0);
    transition: transform var(--dur-base) var(--ease-spring);
  }

  .nav__enlace[aria-current='page'] { color: var(--paper); }
  .nav__enlace[aria-current='page']::after { transform: scaleX(1); }

  .nav__acciones { display: flex; gap: var(--space-xs); }
  .nav__boton { min-height: 42px; padding-inline: var(--space-md); font-size: 0.9375rem; white-space: nowrap; }
}

@media (hover: hover) and (min-width: 72rem) {
  .nav__enlace:hover { color: var(--paper); }
  .nav__enlace:hover::after { transform: scaleX(1); }
  .nav__boton:hover { transform: translateY(-1px); }
  .nav__boton--linea:hover { box-shadow: inset 0 0 0 1.5px var(--paper); }
}

/* ---------- Pie ampliado ---------- */
.footer__claim {
  margin: 0;
  max-width: 32ch;
  color: var(--smoke);
  font-size: var(--step-caption);
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.footer__links--col {
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: var(--space-2xs) 0 0;
}

.footer__links--col a { text-decoration: none; color: rgba(var(--paper-rgb), 0.82); }

@media (min-width: 48rem) {
  .footer__nav { grid-template-columns: repeat(3, auto); gap: var(--space-2xl); }
}

/* ============================================================
   PAGINAS INTERIORES
   ============================================================ */

/* Las paginas interiores no llevan el fondo animado: negro liso con
   un halo ambar muy suave arriba a la derecha (los globos de la sala). */
.pagina {
  min-height: var(--vh-full);
  background:
    radial-gradient(60rem 30rem at 100% -10%, rgba(var(--amber-rgb), 0.10), transparent 60%),
    var(--ink);
}

.contenedor {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Cabecera de pagina, alineada a la izquierda (sin centrar). */
.cabecera {
  padding-block: calc(var(--space-3xl) + 40px + var(--safe-t)) var(--space-2xl);
}

.cabecera__kicker {
  margin: 0 0 var(--space-sm);
  font-size: var(--step-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.cabecera__titulo {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--paper);
}

.cabecera__texto {
  margin: var(--space-lg) 0 0;
  max-width: 52ch;
  font-size: var(--step-body);
  line-height: 1.6;
  color: rgba(var(--paper-rgb), 0.78);
}

.bloque { padding-block: var(--space-2xl); }
.bloque + .bloque { border-top: 1px solid rgba(var(--paper-rgb), 0.08); }

.bloque__titulo {
  margin: 0 0 var(--space-lg);
  font-size: var(--step-section);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper);
}

.texto {
  max-width: 60ch;
  color: rgba(var(--paper-rgb), 0.82);
  line-height: 1.65;
}
.texto p { margin: 0 0 var(--space-md); }

/* Rejilla: CSS grid, nunca matematicas de flex. */
.rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 40rem) { .rejilla--2, .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Partido asimetrico: texto a la izquierda, pieza a la derecha. */
.partido {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 56rem) {
  .partido { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-3xl); }
  .partido--al-reves { grid-template-columns: 0.9fr 1.1fr; }
  .partido--al-reves > :first-child { order: 2; }
}

/* Tarjeta: solo donde la elevacion jerarquiza. Borde de 1px y brillo
   interior sutil; la sombra, tintada del fondo. */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: 18px;
  background: rgba(var(--paper-rgb), 0.035);
  box-shadow: inset 0 0 0 1px rgba(var(--paper-rgb), 0.09), inset 0 1px 0 rgba(var(--paper-rgb), 0.06), 0 20px 40px -24px rgba(0, 0, 0, 0.8);
  color: var(--paper);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-spring);
}

a.tarjeta:active { transform: scale(0.99); }

@media (hover: hover) {
  a.tarjeta:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.45), inset 0 1px 0 rgba(var(--paper-rgb), 0.06), 0 28px 48px -24px rgba(0, 0, 0, 0.9); }
}

.tarjeta__media {
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-xs);
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: rgba(var(--paper-rgb), 0.05);
}
.tarjeta__media img { width: 100%; height: 100%; object-fit: cover; }

.tarjeta__meta {
  margin: 0;
  font-size: var(--step-caption);
  color: var(--amber);
  font-weight: 600;
}
.tarjeta__titulo { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.tarjeta__texto { margin: 0; color: rgba(var(--paper-rgb), 0.72); line-height: 1.55; }

/* Aparicion escalonada al cargar (cascada por --i). */
@media (prefers-reduced-motion: no-preference) {
  .aparece { animation: aparece var(--dur-slow) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 80ms); }
}
@keyframes aparece { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Esqueleto de carga, del tamaño de lo que va a llegar. */
.esqueleto {
  border-radius: 18px;
  background: linear-gradient(100deg, rgba(var(--paper-rgb), 0.04) 30%, rgba(var(--paper-rgb), 0.09) 50%, rgba(var(--paper-rgb), 0.04) 70%) 0 0 / 200% 100%;
  min-height: 260px;
}
@media (prefers-reduced-motion: no-preference) {
  .esqueleto { animation: brillo 1.4s linear infinite; }
}
@keyframes brillo { to { background-position: -200% 0; } }

/* Vacio y error: compuestos, no un texto suelto. */
.aviso-estado {
  padding: var(--space-xl);
  border-radius: 18px;
  border: 1px dashed rgba(var(--paper-rgb), 0.18);
  color: rgba(var(--paper-rgb), 0.78);
}
.aviso-estado strong { display: block; margin-bottom: var(--space-2xs); color: var(--paper); font-size: 1.125rem; }
.aviso-estado[data-tipo='error'] { border-style: solid; border-color: rgba(var(--amber-rgb), 0.5); }

/* Listas con marca ambar. */
.lista-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.lista-puntos li { position: relative; padding-left: 1.4rem; color: rgba(var(--paper-rgb), 0.85); line-height: 1.55; }
.lista-puntos li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }

/* ---------- Formularios de las paginas interiores ----------
   Etiqueta ENCIMA del campo, ayuda opcional, error debajo. */
.campo { display: grid; gap: var(--space-xs); }
.campo__etiqueta { font-weight: 600; font-size: var(--step-caption); color: var(--paper); }
.campo__ayuda { margin: 0; font-size: 0.875rem; color: var(--smoke); }
.campo__error { margin: 0; font-size: 0.875rem; color: var(--amber); min-height: 1.2em; }
.campo__control {
  width: 100%;
  min-height: var(--control-h);
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: var(--input-size);
  color: var(--paper);
  background: rgba(var(--paper-rgb), 0.05);
  border: 1px solid rgba(var(--paper-rgb), 0.18);
  border-radius: 10px;
  transition: border-color var(--dur-fast) var(--ease-spring);
}
textarea.campo__control { min-height: 8rem; resize: vertical; }
.campo__control:focus-visible { border-color: var(--amber); }
.campo__control[aria-invalid='true'] { border-color: var(--amber); }
.formulario { display: grid; gap: var(--space-lg); max-width: 36rem; }
.formulario__fila { display: grid; gap: var(--space-lg); }
@media (min-width: 40rem) { .formulario__fila { grid-template-columns: 1fr 1fr; } }

/* El contenido deja hueco para la cabecera fija cuando se salta a un ancla. */
:target { scroll-margin-top: 96px; }

/* ---------- Home ----------
   El lockup ALBACETEA by DM esta en la cabecera. En el hero, los espacios
   de patrocinio al estilo de la prensa local: dos banners finos a todo el
   ancho arriba y una columna de tres casi cuadrados pegada a la derecha,
   aprovechando el margen. */
.hero__rejilla {
  display: grid;
  gap: var(--space-xl);
}
.hero__principal { padding-block-start: var(--space-sm); }
@media (min-width: 64rem) {
  .hero__rejilla {
    max-width: 1440px;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 420px);
    grid-template-areas: 'arriba arriba' 'principal lateral';
    column-gap: var(--space-2xl);
    row-gap: var(--space-md);
  }
  .anuncios-arriba { grid-area: arriba; }
  .hero__principal { grid-area: principal; align-self: start; padding-block-start: var(--space-lg); padding-inline-start: var(--space-xl); }
  .anuncios { grid-area: lateral; }
}

.anuncios-arriba { display: grid; gap: 8px; }

.anuncio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-radius: 10px;
  background: rgba(var(--ink-rgb), 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.35), 0 20px 40px -24px rgba(0, 0, 0, 0.8);
  color: var(--paper);
  text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring);
}
.anuncio:active { transform: scale(0.99); }
@media (hover: hover) {
  .anuncio:hover { box-shadow: inset 0 0 0 1px var(--amber), 0 28px 48px -24px rgba(0, 0, 0, 0.9); }
}
.anuncio__etiqueta {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.anuncio__titulo { font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.anuncio__cta { color: rgba(var(--paper-rgb), 0.72); font-weight: 600; font-size: 0.875rem; }

/* Variante clara: papel sobre el fondo, para que los dos finos no se
   lean como uno solo. */
.anuncio--claro { background: rgba(var(--paper-rgb), 0.92); color: var(--ink); }
.anuncio--claro .anuncio__etiqueta { color: #9a6414; }
.anuncio--claro .anuncio__cta { color: rgba(var(--ink-rgb), 0.7); }

/* Finos: franja apaisada a todo el ancho. En movil, dos lineas. */
.anuncio--fino {
  min-height: 64px;
  padding: var(--space-sm) var(--space-md);
}
.anuncio--fino .anuncio__titulo { font-size: 1rem; }
.anuncio--fino .anuncio__cta { display: none; }
@media (min-width: 48rem) {
  .anuncio--fino {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    min-height: 84px;
    padding: 0 var(--space-xl);
  }
  .anuncio--fino .anuncio__etiqueta { flex: 0 0 11rem; }
  .anuncio--fino .anuncio__titulo { flex: 1; text-align: center; font-size: clamp(1.15rem, 0.7rem + 1.3vw, 1.9rem); }
  .anuncio--fino .anuncio__cta { display: block; flex: 0 0 11rem; text-align: right; }
}

/* Con creatividad: la imagen ocupa todo el hueco, sin relleno. Los finos
   con imagen toman la proporcion de la pieza (5:1 en movil, 16:1 en
   escritorio) en vez de la altura minima de los de texto. */
.anuncio--imagen { padding: 0; overflow: hidden; background: var(--ink); }
.anuncio--imagen picture, .anuncio--imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.anuncio--fino.anuncio--imagen { min-height: 0; aspect-ratio: 5 / 1; }
@media (min-width: 48rem) {
  .anuncio--fino.anuncio--imagen { min-height: 0; padding: 0; aspect-ratio: 16 / 1; }
}
.anuncio--cuadrado.anuncio--imagen { padding: 0; }


/* Laterales, 16:9 siempre. En movil se apilan a todo el ancho despues
   del hero y van apareciendo al hacer scroll hasta la venta de
   entradas; en escritorio, columna a la derecha (hasta 420x236),
   pegados entre si como en la prensa. */
.anuncios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  align-content: start;
}
.anuncio--cuadrado {
  aspect-ratio: 16 / 9;
  padding: var(--space-lg);
  text-align: center;
  align-items: center;
}
.anuncio--cuadrado .anuncio__titulo { font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.5rem); }
@media (min-width: 64rem) {
  .anuncios { grid-template-columns: 1fr; }
}

.hero { padding-block-start: calc(var(--nav-h) + var(--space-sm) + var(--safe-t)); }
@media (min-width: 48rem) {
  .hero { padding-block-start: calc(var(--nav-h) + var(--space-md) + var(--safe-t)); }
}
/* En escritorio el hero apura el margen lateral, como la prensa, y en
   la home la cabecera se cuadra con el: logo sobre el borde izquierdo de
   los banners y botones sobre el derecho. */
@media (min-width: 64rem) {
  body[data-pagina='inicio'] .nav__inner { max-width: 1440px; padding-inline: var(--space-md); }
  .hero { padding-inline: var(--space-md); }
}

/* ---------- Programas: miniatura que se convierte en video ---------- */
.reproducir {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.reproducir img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-spring); }
.reproducir__icono {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.72);
  box-shadow: inset 0 0 0 1.5px rgba(var(--paper-rgb), 0.5);
  transition: transform var(--dur-base) var(--ease-spring), background-color var(--dur-base) var(--ease-spring);
}
/* Triangulo de play dibujado con CSS: sin iconos de terceros. */
.reproducir__icono::after {
  content: '';
  position: absolute;
  left: 26px;
  top: 21px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--paper);
}
@media (hover: hover) {
  .reproducir:hover img { transform: scale(1.03); }
  .reproducir:hover .reproducir__icono { transform: scale(1.08); background: var(--amber); }
  .reproducir:hover .reproducir__icono::after { border-left-color: var(--ink); }
}
.tarjeta__media iframe { width: 100%; height: 100%; border: 0; display: block; }
.tarjeta__enlace {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--amber);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Figuras de las paginas interiores ---------- */
.figura {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(var(--paper-rgb), 0.09);
  background: rgba(var(--paper-rgb), 0.04);
}
.figura img { width: 100%; height: auto; display: block; }
.figura--retrato { max-width: 26rem; justify-self: center; background: radial-gradient(circle at 50% 35%, rgba(var(--amber-rgb), 0.16), transparent 65%); box-shadow: none; }
.bloque .venue__logo { width: 88px; height: auto; margin-bottom: var(--space-md); }

/* ---------- Patrocina: muestras verticales ---------- */
.muestra {
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-xs);
  padding: var(--space-lg) var(--space-lg) 0;
  border-radius: 18px 18px 0 0;
  background: radial-gradient(circle at 50% 30%, rgba(var(--amber-rgb), 0.14), transparent 70%);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex;
  justify-content: center;
}
.muestra img {
  width: 62%;
  height: auto;
  align-self: flex-start;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.9);
}
figure.tarjeta { margin: 0; }
.form__status[data-estado='ok'] { color: var(--amber); }

/* Paginas antiguas (entradas, compra, legales): hueco para la cabecera fija. */
.pagina .legal { padding-top: calc(var(--space-3xl) + 40px + var(--safe-t)); }

/* Boton secundario: contorno, para no competir con el ambar principal. */
.btn--linea {
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(var(--paper-rgb), 0.35);
}
@media (hover: hover) {
  .btn--linea:hover { background: rgba(var(--paper-rgb), 0.06); color: var(--paper); }
}

/* ---------- Proximo programa: "ofrecido por" ----------
   El patrocinador del programa va arriba y en grande, antes que el
   invitado. Mismo ancho que el bloque del invitado. */
.ofrecido {
  max-width: var(--max-w);
  margin: 0 auto var(--space-2xl);
  display: grid;
  gap: var(--space-sm);
  text-align: center;
}
.ofrecido__kicker {
  margin: 0;
  font-size: var(--step-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smoke);
}
@media (min-width: 30rem) { .ofrecido__kicker { letter-spacing: 0.14em; } }
.ofrecido__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 160px;
  padding: var(--space-xl) var(--space-lg);
  border-radius: 14px;
  background: rgba(var(--paper-rgb), 0.04);
  box-shadow: inset 0 0 0 1px rgba(var(--paper-rgb), 0.12);
  color: var(--paper);
  text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-spring);
}
.ofrecido__marca--libre { box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.45); }
@media (hover: hover) {
  .ofrecido__marca:hover { box-shadow: inset 0 0 0 1px var(--amber); }
}
.ofrecido__titulo {
  font-size: clamp(2rem, 1.2rem + 4vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ofrecido__texto { max-width: 38rem; color: rgba(var(--paper-rgb), 0.72); }
.ofrecido__logo { max-height: 120px; max-width: min(100%, 520px); width: auto; height: auto; }
@media (min-width: 48rem) {
  .ofrecido__marca { min-height: 200px; }
  .ofrecido__logo { max-height: 150px; }
}

.next__num { color: var(--amber); }

/* ---------- Home: "Registrate en Mi ALBACETEA by DM" ----------
   El lockup de la cabecera con "Mi" delante: la zona de registrados es
   parte de la marca, no un producto aparte. */
.unete__marca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 var(--space-md);
}
.unete__mi { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
/* Por ancho, no por alto: el SVG es 13:1 y tiene que caber junto a "Mi". */
.unete__logo { width: min(calc(100% - 4.5rem), 330px); height: auto; }
.unete__by { font-size: 0.9rem; color: var(--smoke); font-weight: 500; }
.unete__dm { height: clamp(40px, 1.8rem + 1.6vw, 54px); width: auto; }
/* Dos lineas a proposito: "Mi ALBACETEA" / "by DM", en vez de que el
   lockup parta donde caiga segun el ancho. */
.unete__salto { flex-basis: 100%; height: 0; }
.unete .texto { margin: 0 0 var(--space-lg); }
.unete .btn { margin: 0; }
.unete__sala { margin: var(--space-md) 0 0; }
.unete__sala a {
  color: rgba(var(--paper-rgb), 0.72);
  text-decoration-color: rgba(var(--amber-rgb), 0.6);
  text-underline-offset: 4px;
}
@media (hover: hover) { .unete__sala a:hover { color: var(--paper); } }

/* ---------- Entradas, paso 1: eventos activos (eventos.html) ----------
   Una tarjeta por programa: el cartel a un lado, fecha en grande, sala,
   estado de la venta y el boton para elegir. Toda la tarjeta es el
   enlace. */
.eventos { display: grid; gap: var(--space-lg); }
.esqueleto--evento { min-height: 260px; }
.evento { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden; }
.evento__media { aspect-ratio: 4 / 5; overflow: hidden; background: rgba(var(--paper-rgb), 0.04); }
.evento__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.evento__cuerpo { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); }
.evento__kicker { margin: 0; font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.evento__fecha { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; color: var(--paper); }
.evento__lugar { margin: var(--space-xs) 0 0; font-weight: 600; color: var(--paper); }
.evento__direccion { margin: 0; font-size: var(--step-caption); color: var(--smoke); }
.evento__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid rgba(var(--paper-rgb), 0.09); }
.evento__estado { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step-caption); font-weight: 700; }
.evento__estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.evento__estado--si { color: var(--paper); }
.evento__estado--si::before { background: var(--amber); }
.evento__estado--urge, .evento__estado--pronto { color: var(--amber); }
.evento__estado--no { color: var(--smoke); }
.evento__precio { font-weight: 800; font-size: 1.25rem; color: var(--paper); }
.evento__cta { margin-top: var(--space-md); align-self: stretch; }
/* La tarjeta entera es el enlace: el "boton" de dentro no cambia solo al
   pasar por el, cambia con la tarjeta. */
@media (hover: hover) {
  a.evento:hover .evento__cta { background-color: transparent; color: var(--amber); }
}
.evento--apagado { opacity: 0.7; }
.eventos__vacio { align-items: flex-start; }
.eventos__vacio .btn { margin-top: var(--space-md); }
@media (min-width: 48rem) {
  .evento { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .evento__media { aspect-ratio: auto; min-height: 100%; }
  .evento__cuerpo { padding: var(--space-xl); justify-content: center; }
  .evento__cta { align-self: flex-start; }
}