/* ===================================================================
 * SECTIONS — estilos de bloques que viven dentro de page-templates.
 * Cargado tras components.css y antes de animations.css.
 * Cada bloque .horreo-* es autocontenido y reutilizable entre páginas.
 * =================================================================*/

/* ============================================================
 * HERO PRINCIPAL (front-page) — vídeo + overlay + título
 * ============================================================ */

/*
 * Hero (iter-5 Fase 3): vídeo con position: FIXED full-screen.
 * El vídeo se mantiene visible mientras el .hero está en viewport.
 * IntersectionObserver en main.js gestiona opacity y play/pause.
 * Al pasar al siguiente contenido (que tiene background opaco),
 * el vídeo desaparece visualmente (opacity 0) y se pausa.
 *
 * Inspiración: hero sticky de landonorris.com.
 */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  isolation: isolate;
  /* iter-9 fix glitch: bg opaco bajo el vídeo, evita asomos durante
   * la transición sticky/IO. Si el vídeo se hace opacity:0 por un frame,
   * el negro tapa cualquier sección semi-transparente que esté detrás. */
  background-color: var(--horreo-bg-primary);
}

.hero__video,
.hero__poster {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;                                /* encima del canvas (z:0) */
  opacity: 1;
  transition: opacity 0.45s ease-out;
  pointer-events: none;
  /* iter-9: bg opaco DENTRO del propio vídeo/poster — durante el
   * decoding del vídeo o cuando el poster img tarda en cargar, el
   * navegador no muestra "huecos" transparentes. */
  background-color: var(--horreo-bg-primary);
}

.hero__video.is-hidden,
.hero__poster.is-hidden {
  opacity: 0;
}

/* iter-9: lo mismo para los page-hero internos */
.page-hero {
  background-color: var(--horreo-bg-primary);
}
.page-hero__bg {
  background-color: var(--horreo-bg-primary);
}

/* Overlay oscuro — aclarado en iter-3 para no enterrar el vídeo.
 * Antes: 0.45 → 0.85 (demasiado oscuro, el vídeo no respiraba).
 * Ahora: 0.30 → 0.60 con concentración en el área del título.
 */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.30) 0%,
      rgba(10, 10, 10, 0.45) 50%,
      rgba(10, 10, 10, 0.65) 100%),
    radial-gradient(ellipse at 50% 60%, rgba(10, 10, 10, 0.4), transparent 60%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 4;
  padding: var(--space-7) var(--container-px);
  max-width: 1100px;
}

.hero__title {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--horreo-gold) 70%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.hero__subtitle {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--horreo-text-primary);
  max-width: 680px;
  margin: 0 auto var(--space-8);
  line-height: var(--lh-relaxed);
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* Indicador "scroll" abajo */
.hero__scroll {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--horreo-text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  animation: horreo-fade-in var(--dur-glacial) var(--ease-out) 1s both;
}

.hero__scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--horreo-gold), transparent);
}

/* ============================================================
 * HERO SECUNDARIO (todas las páginas internas)
 *
 * iter-6: comportamiento STICKY idéntico al vídeo del hero principal.
 * .page-hero__bg y .page-hero__overlay viven en position: fixed
 * full-screen; un IntersectionObserver en main.js los muestra
 * (opacity:1) mientras .page-hero está en viewport y los oculta
 * (opacity:0) cuando sale. El siguiente bloque de contenido —que
 * tiene background opaco— cubre el hero al hacer scroll, dando el
 * efecto sticky tipo Lando Norris.
 * ============================================================ */

.page-hero {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px var(--container-px) var(--space-9);
  isolation: isolate;
  /* SIN overflow:hidden — el bg está fuera, en position:fixed */
}

/* iter-19: móvil necesita menos altura (los 65vh ahogan en pantallas
 * verticales altas y el eyebrow+título+subtítulo quedan aireados). */
@media (max-width: 768px) {
  .page-hero {
    min-height: 55vh;
  }
}

.page-hero__bg,
.page-hero__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease-out;
}

.page-hero__bg {
  z-index: 1;
  background-color: var(--horreo-bg-secondary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* iter-33: bg-image pasa a CSS custom property inyectada por cada
   * template desde PHP. Permite imagen específica móvil opcional sin
   * refactorizar cada template. El iter-32 contain-mobile quedó
   * revertido (franjas oscuras quedaban peor que cover a sangre). */
  background-image: var(--hero-bg-desktop);
}

@media (max-width: 768px) {
  .page-hero__bg {
    /* Si el template no inyecta --hero-bg-movil, cae al desktop (cover). */
    background-image: var(--hero-bg-movil, var(--hero-bg-desktop));
  }
}

.page-hero__overlay {
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.55) 0%,
      rgba(10, 10, 10, 0.75) 100%);
}

.page-hero__bg.is-hidden,
.page-hero__overlay.is-hidden {
  opacity: 0;
}

/* iter-24: variante de hero en /nuestra-cerveza que admite vídeo de fondo.
 * El <video> vive dentro del mismo .page-hero__bg (position:fixed full-screen)
 * que el resto de páginas, así que hereda el comportamiento sticky y el
 * fade-out automático cuando el hero sale del viewport. */
.page-hero--cerveza .page-hero__bg {
  background-color: var(--horreo-bg-primary);
  overflow: hidden;
}

.page-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.page-hero__content {
  position: relative;
  z-index: 3;
  max-width: 1000px;
}

.page-hero__eyebrow {
  font-family: var(--horreo-font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--horreo-gold);
  margin-bottom: var(--space-3);
  display: inline-block;
}

.page-hero__title {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--horreo-text-primary);
  margin-bottom: var(--space-4);
}

.page-hero__subtitle {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--horreo-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* iter-19c: el primer bloque justo después del hero se "pega" al hero
 * reduciendo solo su padding-top. El padding-bottom sigue heredando el
 * --section-py normal (iter-19b), así que el espacio hacia el bloque
 * siguiente no cambia. Se excluye Gomiuvas porque su hero de 100vh +
 * countdown ya marca su propia cadencia visual. */
.page-hero:not(.page-hero--gomiuvas) + section,
.page-hero:not(.page-hero--gomiuvas) + article {
  padding-top: clamp(1.5rem, 3vw, 3rem);
}

/* ============================================================
 * STORYTELLING — bloques de texto largo en Cormorant
 * ============================================================ */

.storytelling {
  padding-block: var(--section-py);
}

.storytelling__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-inline: var(--container-px);
}

.storytelling p {
  font-family: var(--horreo-font-accent);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--horreo-text-primary);
  margin-bottom: var(--space-5);
}

.storytelling p:first-of-type::first-letter {
  font-family: var(--horreo-font-display);
  font-size: 4em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.15em 0 0;
  color: var(--horreo-gold);
  font-weight: var(--fw-bold);
}

/* ============================================================
 * PLATOS BANDERA / CARDS DE PRESENTACIÓN (sin precios)
 * ============================================================ */

.plato-cards {
  padding-block: var(--section-py);
  background: rgba(26, 26, 26, 0.85);   /* veladura, deja ver burbujas */
}

.plato-cards__title {
  text-align: center;
  font-family: var(--horreo-font-display);
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-8);
  color: var(--horreo-gold);
}

.plato-cards__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .plato-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.plato-card {
  background: var(--horreo-bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--horreo-border);
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.plato-card:hover {
  transform: translateY(-6px);
  border-color: var(--horreo-gold-dim);
  box-shadow: var(--shadow-glow-soft);
}

.plato-card__image {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  display: block;
}

.plato-card__body {
  padding: var(--space-5) var(--space-6);
}

.plato-card__name {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--horreo-text-primary);
  margin-bottom: var(--space-2);
}

.plato-card__desc {
  font-family: var(--horreo-font-body);
  font-size: var(--fs-base);
  color: var(--horreo-text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ============================================================
 * GALERÍA DE 8 CATEGORÍAS DE LA CARTA — mosaico White Frontier
 * ============================================================ */

.cat-mosaic {
  padding-block: var(--section-py);
}

.cat-mosaic__heading {
  text-align: center;
  margin-bottom: var(--space-8);
}

.cat-mosaic__heading h2 {
  font-size: var(--fs-2xl);
  color: var(--horreo-text-primary);
  margin-bottom: var(--space-3);
}

.cat-mosaic__heading p {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  color: var(--horreo-text-secondary);
}

.cat-mosaic__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .cat-mosaic__grid {
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .cat-mosaic__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cat-card {
  --cat-color: var(--horreo-gold);
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--horreo-bg-secondary);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--cat-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}

.cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, var(--cat-color), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

.cat-card:hover::before {
  opacity: 0.18;
}

.cat-card__emoji {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}

.cat-card__name {
  font-family: var(--horreo-font-display);
  /* iter-25: nombre más grande para dominar la composición con foto de fondo.
   * Antes: var(--fs-base). Ahora escala de 24px (móvil) a 40px (desktop). */
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: var(--fw-bold);
  color: var(--horreo-text-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2);
}

.cat-card__tagline {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  /* iter-25: tagline también algo más grande (antes: var(--fs-xs)). */
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--horreo-text-secondary);
  line-height: var(--lh-snug);
}

/* iter-25: con foto, el texto gana en contraste — full-white y sin
 * transparencia del --horreo-text-secondary, que sobre imagen queda flojo. */
.cat-card.has-image .cat-card__name {
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.cat-card.has-image .cat-card__tagline {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* iter-24: variante con imagen de fondo. El borde superior de color
 * temático (--cat-color) se preserva; encima de la foto va un degradado
 * oscuro para que emoji, nombre y tagline sigan legibles. */
.cat-card.has-image {
  background-size: cover;
  background-position: center;
}

.cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.8) 100%);
  z-index: 1;
  pointer-events: none;
}

.cat-card.has-image .cat-card__emoji,
.cat-card.has-image .cat-card__name,
.cat-card.has-image .cat-card__tagline {
  position: relative;
  z-index: 2;
}

/* ============================================================
 * CTA GIGANTE — la jewel-box de page-cocina
 * ============================================================ */

.mega-cta {
  padding-block: clamp(4rem, 10vw, 8rem);
  background:
    radial-gradient(ellipse at center, rgba(201, 169, 97, 0.18), transparent 60%),
    rgba(10, 10, 10, 0.85);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.mega-cta::before,
.mega-cta::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--horreo-gold-dim), transparent);
}
.mega-cta::before { top: 0; left: 20%; }
.mega-cta::after  { bottom: 0; left: 20%; }

.mega-cta__inner {
  max-width: 800px;
  margin: 0 auto;
  padding-inline: var(--container-px);
}

.mega-cta__title {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--horreo-text-primary);
  margin-bottom: var(--space-7);
  line-height: var(--lh-tight);
}

.mega-cta__btn {
  display: inline-block;
  padding: var(--space-5) var(--space-9);
  background: var(--horreo-gold);
  color: var(--horreo-bg-primary);
  border-radius: var(--radius-pill);
  font-family: var(--horreo-font-display);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 40px rgba(201, 169, 97, 0.3);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
  border: 2px solid transparent;
}

.mega-cta__btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 60px rgba(201, 169, 97, 0.5);
  background: var(--horreo-gold-light);
  color: var(--horreo-bg-primary);
}

.mega-cta__note {
  margin-top: var(--space-5);
  font-family: var(--horreo-font-accent);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--horreo-text-secondary);
}

/* ============================================================
 * PLAN DEL FINDE — bloque destacado home + página propia
 * ============================================================ */

.plan-finde {
  padding-block: var(--section-py);
  background: linear-gradient(135deg, rgba(26,26,26,0.88), rgba(10,10,10,0.78));
}

.plan-finde__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--container-px);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .plan-finde__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.plan-finde__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.plan-finde__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan-finde__eyebrow {
  font-family: var(--horreo-font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--horreo-gold);
  margin-bottom: var(--space-3);
}

.plan-finde__title {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-2xl);
  color: var(--horreo-text-primary);
  margin-bottom: var(--space-4);
}

.plan-finde__plato {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--horreo-gold);
  margin-bottom: var(--space-3);
}

.plan-finde__nota {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  color: var(--horreo-text-secondary);
  margin-top: var(--space-4);
  font-size: var(--fs-base);
}

/* ============================================================
 * EVENTOS CALENDAR — listado y cards
 * ============================================================ */

.eventos-grid {
  padding-block: var(--section-py);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--container-px);
}

@media (min-width: 768px) {
  .eventos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .eventos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.evento-card {
  background: var(--horreo-bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--horreo-border);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.evento-card:hover {
  transform: translateY(-4px);
  border-color: var(--horreo-gold-dim);
}

.evento-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.evento-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-glacial) var(--ease-out);
}
.evento-card:hover .evento-card__media img { transform: scale(1.05); }

.evento-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.evento-card__date {
  font-family: var(--horreo-font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--horreo-gold);
}

.evento-card__title {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-lg);
  color: var(--horreo-text-primary);
  margin: 0;
}

.evento-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--horreo-text-secondary);
  line-height: var(--lh-relaxed);
}

.evento-card__cta {
  margin-top: auto;
  font-size: var(--fs-sm);
  color: var(--horreo-gold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
 * CERVEZA CARDS — grid de cervezas (page-cerveza)
 * ============================================================ */

/* iter-16: auto-fit con minmax genera breakpoints implícitos
 * (≈4/3/2/1 columnas según ancho) y justify-items:center + max-width
 * en la card evita que una única cerveza dentro de una familia se
 * estire a todo el ancho de pista. Cada familia tiene su propio grid,
 * así que este comportamiento uniforme es clave. */
.cerveza-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: var(--space-8) auto;
  max-width: 1200px;
  justify-items: center;
}

.cerveza-card {
  background: var(--horreo-bg-secondary);
  border: 1px solid var(--horreo-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 320px;
}

.cerveza-card.is-agotada { opacity: 0.55; }
.cerveza-card.is-agotada::after {
  content: 'Agotada';
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--horreo-danger);
  color: var(--horreo-bg-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.cerveza-card__photo {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 200px;
  object-fit: contain;
  object-position: center;
  margin-bottom: var(--space-3);
}

.cerveza-card__name {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-lg);
  color: var(--horreo-gold);
  margin: 0;
}

.cerveza-card__estilo {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--horreo-text-muted);
}

.cerveza-card__nota {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  color: var(--horreo-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.cerveza-card__grados {
  background: var(--horreo-bg-primary);
  color: var(--horreo-gold);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
}

/* Familia / agrupación de cervezas */
.cerveza-familia + .cerveza-familia { margin-top: var(--space-9); }
.cerveza-familia__title {
  text-align: center;
  font-family: var(--horreo-font-display);
  font-size: var(--fs-xl);
  color: var(--horreo-text-primary);
  margin-bottom: var(--space-3);
}
.cerveza-familia__lead {
  text-align: center;
  font-family: var(--horreo-font-accent);
  font-style: italic;
  color: var(--horreo-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* Listado simple de bebidas (vinos, copas, cafés) — sin foto */
.bebida-list {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: var(--space-7) auto 0;
}
@media (min-width: 640px) { .bebida-list { grid-template-columns: repeat(2, 1fr); } }

.bebida-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--horreo-border);
  font-family: var(--horreo-font-body);
}
.bebida-list__item strong {
  color: var(--horreo-text-primary);
  font-weight: var(--fw-medium);
  flex: 1;
}
.bebida-list__item .nota {
  color: var(--horreo-text-secondary);
  font-size: var(--fs-sm);
  font-style: italic;
}

/* ============================================================
 * COUNTDOWN GOMIUVAS
 * ============================================================ */

.countdown {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  padding-block: var(--space-8);
  flex-wrap: wrap;
}

.countdown__cell {
  text-align: center;
  min-width: 96px;
}

.countdown__value {
  font-family: var(--horreo-font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  color: var(--horreo-gold);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  font-family: var(--horreo-font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--horreo-text-secondary);
  margin-top: var(--space-2);
}

/* ============================================================
 * TIMELINE — La Casa
 * ============================================================ */

.timeline {
  padding-block: var(--section-py);
  position: relative;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: var(--space-9);
  bottom: var(--space-9);
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--horreo-gold-dim), transparent);
}

@media (min-width: 768px) {
  .timeline::before { left: 50%; transform: translateX(-50%); }
}

.timeline__item {
  position: relative;
  padding-left: 80px;
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .timeline__item {
    width: 50%;
    padding-left: 0;
    padding-right: var(--space-7);
  }
  .timeline__item:nth-child(even) {
    margin-left: 50%;
    padding-left: var(--space-7);
    padding-right: 0;
    text-align: left;
  }
  .timeline__item:nth-child(odd) {
    text-align: right;
  }
}

.timeline__dot {
  position: absolute;
  left: 14px;
  top: 8px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--horreo-bg-primary);
  border: 2px solid var(--horreo-gold);
  box-shadow: 0 0 0 4px var(--horreo-bg-secondary);
}

@media (min-width: 768px) {
  .timeline__item:nth-child(odd) .timeline__dot {
    left: auto;
    right: -14px;
  }
  .timeline__item:nth-child(even) .timeline__dot {
    left: -14px;
  }
}

.timeline__year {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-xl);
  color: var(--horreo-gold);
  margin-bottom: var(--space-2);
  font-weight: var(--fw-bold);
}

.timeline__title {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-lg);
  color: var(--horreo-text-primary);
  margin-bottom: var(--space-2);
}

.timeline__text {
  color: var(--horreo-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ============================================================
 * CONTACTO — mapa, info, formulario
 * ============================================================ */

.contacto-grid {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--section-py);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--container-px);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .contacto-grid { grid-template-columns: 1.1fr 1fr; }
}

.contacto-info h3 {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-xl);
  color: var(--horreo-gold);
  margin-bottom: var(--space-3);
}
.contacto-info p,
.contacto-info address {
  font-style: normal;
  color: var(--horreo-text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}

.contacto-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--horreo-border-strong);
  background: var(--horreo-bg-secondary);
}
.contacto-map iframe {
  width: 100%; height: 100%; border: 0; display: block;
  filter: invert(0.9) hue-rotate(180deg) saturate(0.7);
}

.horarios-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
}
.horarios-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px dashed var(--horreo-border);
  color: var(--horreo-text-secondary);
}
.horarios-table td:first-child {
  color: var(--horreo-text-primary);
  font-weight: var(--fw-medium);
}
.horarios-table tr.is-cerrado td:last-child {
  color: var(--horreo-danger);
  font-weight: var(--fw-semibold);
}

/* ============================================================
 * FORMULARIO EVENTOS PRIVADOS
 * ============================================================ */

.form-eventos {
  max-width: 720px;
  margin: 0 auto;
  padding-block: var(--section-py);
  padding-inline: var(--container-px);
}

.form-eventos__row {
  margin-bottom: var(--space-4);
}

.form-eventos__row--inline {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .form-eventos__row--inline { grid-template-columns: 1fr 1fr; }
}

.form-eventos__hint {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--horreo-text-secondary);
  margin-top: var(--space-3);
}

/* ============================================================
 * GALERÍA
 * ============================================================ */

.galeria-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
  padding-block: var(--section-py);
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--container-px);
}

@media (min-width: 768px)  { .galeria-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (min-width: 1024px) { .galeria-grid { grid-template-columns: repeat(4, 1fr); } }

.galeria-grid__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--horreo-bg-secondary);
}
.galeria-grid__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-glacial) var(--ease-out);
}
.galeria-grid__item:hover img { transform: scale(1.06); }

/* Bloque Instagram embed (placeholder) */
.instagram-block {
  background: var(--horreo-bg-secondary);
  padding: var(--space-7);
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--horreo-border-strong);
  margin-block: var(--space-8);
}
.instagram-block h3 {
  color: var(--horreo-gold);
  font-family: var(--horreo-font-display);
  margin-bottom: var(--space-3);
}
.instagram-block p {
  color: var(--horreo-text-secondary);
  margin-bottom: var(--space-4);
}

/* ============================================================
 * PARTIDOS ESTA SEMANA (Fase 4)
 * ============================================================ */

/* ============================================================
 * CTA PUENTE Eventos → Deportes (iter-31)
 *
 * Bloque dorado al final de /eventos que invita al público a ver los
 * partidos y grandes citas deportivas en /deportes.
 * ============================================================ */

.cta-deportes {
  padding-block: clamp(4rem, 8vw, 6rem);
  background:
    radial-gradient(ellipse at center top, rgba(201, 169, 97, 0.12), transparent 60%),
    rgba(26, 26, 26, 0.85);
  text-align: center;
  position: relative;
}

.cta-deportes__inner {
  max-width: 720px;
  margin: 0 auto;
  padding-inline: var(--container-px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.cta-deportes__icon {
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}

.cta-deportes__title {
  font-family: var(--horreo-font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--horreo-gold);
  font-weight: var(--fw-bold);
  margin: 0;
  line-height: var(--lh-tight);
}

.cta-deportes__text {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--horreo-text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ============================================================
 * GRANDES CITAS · bloque manual (iter-29)
 *
 * Se renderiza en /eventos entre "Los grandes del año" y "Partidos
 * esta semana". Slots manuales desde Hórreo Global (amistosos, Mundial
 * Clubes, finales). Identidad dorada, estilo editorial.
 * ============================================================ */

.grandes-citas {
  padding-block: var(--section-py);
  background: linear-gradient(180deg, transparent 0%, rgba(201, 169, 97, 0.04) 100%);
}

.grandes-citas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.gran-cita-card {
  background: var(--horreo-bg-secondary);
  border: 1px solid rgba(201, 169, 97, 0.2);
  border-top: 3px solid var(--horreo-gold);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.gran-cita-card:hover {
  transform: translateY(-4px);
}

.gran-cita-card__icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}

.gran-cita-card__title {
  font-family: var(--horreo-font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--horreo-gold);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-2);
  line-height: var(--lh-tight);
}

.gran-cita-card__subtitle {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  color: var(--horreo-text-secondary);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-5);
}

.gran-cita-card__datetime {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.gran-cita-card__date {
  font-family: var(--horreo-font-display);
  color: var(--horreo-gold);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
}

.gran-cita-card__time {
  font-family: var(--horreo-font-display);
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  color: var(--horreo-text-primary);
}

.gran-cita-card__channel {
  color: var(--horreo-text-secondary);
  font-size: var(--fs-xs);
  margin-bottom: var(--space-3);
}

.gran-cita-card__badge {
  display: inline-block;
  background: rgba(201, 169, 97, 0.2);
  color: var(--horreo-gold);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin: 0;
}

/* ============================================================
 * GRAN CITA · modo HERO full-width con contador en tiempo real (iter-30)
 *
 * Solo aplica cuando el slot tiene el toggle "contador grande" activo.
 * Layout: contenido a la izquierda, countdown grande a la derecha.
 * En móvil se apila vertical (content + countdown).
 * ============================================================ */

.gran-cita-card--hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto var(--space-7);
  padding: clamp(2rem, 4vw, 3.5rem);
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.92) 0%, rgba(20, 10, 10, 0.95) 100%);
  border: 1px solid rgba(201, 169, 97, 0.3);
  border-top: 3px solid var(--horreo-gold);
  border-radius: var(--radius-md);
  text-align: left;
  transform: none; /* override del hover lift del standard */
}
.gran-cita-card--hero:hover {
  transform: none;
}

/* Colores de borde por deporte */
.gran-cita-card--hero.gran-cita-card--ufc-mma          { border-top-color: #d4213d; }
.gran-cita-card--hero.gran-cita-card--futbol-seleccion { border-top-color: #c8102e; }
.gran-cita-card--hero.gran-cita-card--futbol-clubes    { border-top-color: var(--horreo-gold); }
.gran-cita-card--hero.gran-cita-card--f1               { border-top-color: #e10600; }
.gran-cita-card--hero.gran-cita-card--motogp           { border-top-color: #cc0000; }
.gran-cita-card--hero.gran-cita-card--tenis            { border-top-color: #4a9b3a; }
.gran-cita-card--hero.gran-cita-card--baloncesto       { border-top-color: #ff6b00; }

.gran-cita-card--hero .gran-cita-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.gran-cita-card--hero .gran-cita-card__icon-big {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  margin-bottom: var(--space-2);
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}

.gran-cita-card--hero .gran-cita-card__title {
  font-family: var(--horreo-font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--horreo-gold);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0;
}

.gran-cita-card--hero .gran-cita-card__subtitle {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--horreo-text-primary);
  margin: 0;
}

.gran-cita-card__datetime-small {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-base);
  color: var(--horreo-gold);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  margin: var(--space-2) 0 0;
}

.gran-cita-card--hero .gran-cita-card__meta {
  font-size: var(--fs-sm);
  color: var(--horreo-text-secondary);
  margin: 0;
}

.gran-cita-card--hero .gran-cita-card__badge {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* Countdown grande */
.countdown-big {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: start;
}

.countdown-big > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}

.countdown-big span {
  font-family: var(--horreo-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--horreo-gold);
  font-weight: var(--fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown-big small {
  color: var(--horreo-text-secondary);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  margin-top: var(--space-2);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .gran-cita-card--hero {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
  }
  .gran-cita-card--hero .gran-cita-card__content {
    align-items: center;
  }
  .gran-cita-card--hero .gran-cita-card__badge {
    align-self: center;
  }
  .countdown-big {
    gap: var(--space-3);
  }
  .countdown-big span {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
  }
}

/* ============================================================
 * PARTIDOS DEL CÓRDOBA CF · TheSportsDB (iter-28 · deprecated iter-29)
 *
 * Bloque retirado del render en iter-29 por datos incorrectos en la API.
 * CSS se mantiene por si en el futuro se reactiva con otra fuente.
 * ============================================================ */
.partidos-cordoba {
  padding-block: var(--section-py);
}

.partidos-cordoba__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.partido-cordoba-card {
  background: rgba(26, 26, 26, 0.78);
  border: 1px solid var(--horreo-border);
  border-top: 3px solid #0f6c3a; /* verde Córdoba */
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.partido-cordoba-card:hover {
  border-color: var(--horreo-gold-dim);
  border-top-color: #4db86e;
}

.partido-cordoba-card__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
}

.partido-cordoba-card__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.partido-cordoba-card__badge {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.partido-cordoba-card__badge-fallback {
  font-size: 2rem;
  line-height: 1;
  color: var(--horreo-gold);
}

.partido-cordoba-card__name {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--horreo-text-primary);
  line-height: var(--lh-snug);
}

.partido-cordoba-card__vs {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  font-size: var(--fs-xs);
  color: var(--horreo-text-muted);
  text-transform: lowercase;
}

.partido-cordoba-card__meta {
  border-top: 1px solid var(--horreo-border);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.partido-cordoba-card__competition {
  display: inline-block;
  align-self: center;
  background: rgba(15, 108, 58, 0.18);
  color: #4db86e;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

.partido-cordoba-card__datetime {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-base);
  color: var(--horreo-gold);
  font-weight: var(--fw-bold);
}

.partido-cordoba-card__venue {
  font-size: var(--fs-xs);
  color: var(--horreo-text-muted);
  font-style: italic;
}

.partidos-week {
  padding-block: var(--section-py);
}

.partidos-week__heading {
  text-align: center;
  margin-bottom: var(--space-7);
}
.partidos-week__heading h2 {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-2xl);
  color: var(--horreo-text-primary);
  margin-bottom: var(--space-2);
}
.partidos-week__heading p {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  color: var(--horreo-text-secondary);
}

.partidos-week__list {
  display: grid;
  gap: var(--space-3);
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* iter-30: layout de 2 columnas (Clubes | Selección). Si una columna
 * queda vacía, la otra ocupa todo el ancho automáticamente (:has
 * :only-child). En móvil apila vertical. */
.partidos-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--container-px);
}

.partidos-col {
  display: flex;
  flex-direction: column;
}

.partidos-col__title {
  font-family: var(--horreo-font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--horreo-gold);
  margin: 0 0 var(--space-2);
  line-height: var(--lh-tight);
}

.partidos-col__sub {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--horreo-text-secondary);
  margin: 0 0 var(--space-5);
}

.partidos-col--seleccion .partidos-col__title { color: #ffcc00; }

.partidos-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.partidos-col .partido-card {
  max-width: none;
  width: 100%;
}

.partido-card--seleccion {
  border-top: 3px solid #c8102e; /* rojo España */
}

/* Si solo hay una columna activa, ocupa todo el ancho con max 700px. */
.partidos-columns:has(> .partidos-col:only-child) {
  grid-template-columns: 1fr;
}
.partidos-columns:has(> .partidos-col:only-child) .partidos-col {
  max-width: 700px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .partidos-columns {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.partido-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  align-items: center;
  background: rgba(26, 26, 26, 0.78);
  border: 1px solid var(--horreo-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.partido-card:hover {
  border-color: var(--horreo-gold-dim);
}

.partido-card__team {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--horreo-font-display);
  font-size: var(--fs-lg);
  color: var(--horreo-text-primary);
  font-weight: var(--fw-semibold);
}
.partido-card__team--right {
  justify-content: flex-end;
}

.partido-card__shield {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--horreo-gold-dim), var(--horreo-bg-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  border: 1px solid var(--horreo-border);
}

.partido-card__center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.partido-card__competition {
  font-family: var(--horreo-font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--horreo-gold);
}
.partido-card__time {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--horreo-text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.partido-card__date {
  font-size: var(--fs-xs);
  color: var(--horreo-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.partido-card__channel {
  font-size: var(--fs-xs);
  color: var(--horreo-text-muted);
  font-style: italic;
}

@media (max-width: 600px) {
  .partido-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .partido-card__team,
  .partido-card__team--right {
    justify-content: center;
  }
}

.partido-card.is-past {
  opacity: 0.4;
  filter: grayscale(0.6);
}

/* ============================================================
 * COUNTDOWN — estructura con separadores ENTRE cifras (iter-9)
 *
 * Cambio respecto a iter-8: los `:` antes eran ::before posicionados
 * absolute → se superponían a las cifras. Ahora son nodos reales del
 * DOM (.countdown__sep) que viven entre cada .countdown__unit gracias
 * a flex layout.
 * ============================================================ */

.countdown {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-7);
  flex-wrap: wrap;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 88px;
}

.countdown__number {
  font-family: var(--horreo-font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: var(--fw-black, 900);
  color: var(--horreo-gold);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  font-family: var(--horreo-font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--horreo-text-secondary);
  margin-top: var(--space-2);
}

.countdown__sep {
  font-family: var(--horreo-font-display);
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  color: var(--horreo-gold);
  font-weight: var(--fw-bold);
  line-height: 0.95;
  align-self: flex-start;        /* sube al nivel de los números, no de los labels */
  margin-top: 0.05em;
  animation: horreo-blink 1.4s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}

@keyframes horreo-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .countdown__sep { animation: none; opacity: 0.7; }
}

/* Compatibilidad con HTML antiguo (countdown__cell/__value) si quedara
 * alguna instancia vieja — los estilos no chocan con la nueva estructura. */
.countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 88px;
}
.countdown__value {
  font-family: var(--horreo-font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  color: var(--horreo-gold);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * HERO GOMIUVAS (iter-15) — countdown dentro del hero
 *
 * Antes el countdown vivía como sección aparte debajo del hero,
 * así que al cargar la página se veía el título pero no las cifras:
 * había que hacer scroll justo cuando el hero sticky se iba. Mal UX.
 * Ahora va dentro de .page-hero__content → visible desde la carga.
 *
 * Reglas:
 *   - min-height: 100vh (no fijo; crece si el contenido es más alto)
 *   - content en columna: eyebrow / título / subtítulo / countdown / nota
 *   - en móvil, cifras más compactas pero legibles
 * ============================================================ */

.page-hero--gomiuvas {
  min-height: 100vh;
}

.page-hero--gomiuvas .page-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
}

.page-hero--gomiuvas .page-hero__subtitle {
  margin-bottom: var(--space-5);
}

.page-hero__countdown {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-hero__countdown-heading {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--horreo-text-secondary);
  margin: 0 0 var(--space-2);
}

.page-hero__countdown .countdown {
  padding-block: var(--space-3);
}

.page-hero__countdown-note {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  color: var(--horreo-text-secondary);
  margin-top: var(--space-4);
}

@media (max-width: 768px) {
  .page-hero--gomiuvas .countdown {
    gap: 8px;
  }
  .page-hero--gomiuvas .countdown__unit {
    min-width: 60px;
  }
  .page-hero--gomiuvas .countdown__number {
    font-size: clamp(2.2rem, 13vw, 3.5rem);
  }
  .page-hero--gomiuvas .countdown__sep {
    font-size: clamp(1.6rem, 9vw, 2.5rem);
  }
}

/* ============================================================
 * RESEÑAS GOOGLE (Fase 4)
 * ============================================================ */

.reseñas-block {
  padding-block: var(--section-py);
}

.reseñas-block__heading {
  text-align: center;
  margin-bottom: var(--space-7);
}
.reseñas-block__heading h2 {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-2xl);
  color: var(--horreo-text-primary);
  margin-bottom: var(--space-2);
}

.reseñas-summary {
  text-align: center;
  margin-bottom: var(--space-7);
}
.reseñas-summary__rating {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--horreo-gold);
  line-height: 1;
}
.reseñas-summary__stars {
  color: var(--horreo-gold);
  font-size: var(--fs-lg);
  letter-spacing: 4px;
  margin: var(--space-2) 0;
}
.reseñas-summary__count {
  font-size: var(--fs-sm);
  color: var(--horreo-text-secondary);
  letter-spacing: var(--tracking-wide);
}

.reseñas-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--container-px);
}
@media (min-width: 768px)  { .reseñas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .reseñas-grid { grid-template-columns: repeat(4, 1fr); } }

.reseña-card {
  background: rgba(26, 26, 26, 0.78);
  border: 1px solid var(--horreo-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.reseña-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.reseña-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--horreo-gold), var(--horreo-gold-dim));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--horreo-bg-primary);
  font-weight: var(--fw-bold);
  font-family: var(--horreo-font-body);
  flex-shrink: 0;
}
.reseña-card__author {
  font-family: var(--horreo-font-body);
  font-weight: var(--fw-semibold);
  color: var(--horreo-text-primary);
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.reseña-card__date {
  font-size: var(--fs-xs);
  color: var(--horreo-text-muted);
}

.reseña-card__stars {
  color: var(--horreo-gold);
  font-size: var(--fs-base);
  letter-spacing: 2px;
}

.reseña-card__text {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--horreo-text-primary);
  line-height: var(--lh-relaxed);
}

.reseñas-block__cta {
  text-align: center;
  margin-top: var(--space-7);
}

/* ============================================================
 * NEWSLETTER FORM (CTA Gomiuvas, etc.)
 *
 * iter-8 BULLETPROOF: layout flex con flex-basis 280px en el input
 * para garantizar ancho mínimo legible. Antes, `flex: 1` con basis 0
 * hacía que el input quedara estrecho cuando el botón ocupaba mucho.
 * Ahora el input nunca baja de 280px en desktop; en <600px ambos
 * elementos ocupan 100% (apilados).
 * ============================================================ */

.newsletter-form {
  max-width: 640px;
  margin-inline: auto;
}

.newsletter-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.newsletter-form input[type="email"] {
  flex: 1 1 280px;             /* basis 280px → ancho mínimo legible */
  min-height: 56px;
  padding: 16px 20px;
  font-size: 18px;
  border: 2px solid var(--horreo-gold-dim);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--horreo-text-primary);
  font-family: var(--horreo-font-body);
}

.newsletter-form input[type="email"]:focus {
  border-color: var(--horreo-gold);
  outline: none;
}

.newsletter-form input[type="email"]::placeholder {
  color: #888;
  opacity: 1;
}

.newsletter-form button[type="submit"] {
  flex: 0 0 auto;
  min-height: 56px;
  padding: 0 32px;
  font-size: 16px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .newsletter-form input[type="email"],
  .newsletter-form button[type="submit"] {
    flex: 1 1 100%;
  }
}

.newsletter-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: 16px;
  font-size: var(--fs-sm);
  color: var(--horreo-text-secondary);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  text-align: left;
}

.newsletter-form__check input {
  width: auto;
  flex-shrink: 0;
  margin-top: 4px;
  cursor: pointer;
}

.newsletter-form__success {
  margin-top: var(--space-5);
  font-family: var(--horreo-font-accent);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--horreo-gold);
  text-align: center;
  animation: horreo-fade-in 0.5s ease-out;
}

/* ============================================================
 * GALERÍA · sección "Nuestro local" (iter-13)
 * ============================================================ */

.galeria-section {
  padding-bottom: var(--space-8);
}

.galeria-section__title {
  text-align: center;
  font-family: var(--horreo-font-display);
  font-size: var(--fs-2xl);
  color: var(--horreo-text-primary);
  margin-bottom: var(--space-7);
}

/* ============================================================
 * GALERÍA · sección "Nuestro local" con bloque Gutenberg (iter-26)
 *
 * Las fotos viven ahora en el CONTENIDO principal de la página
 * (bloque Gallery de Gutenberg, core de WordPress) en vez de en un
 * campo ACF Gallery que requería ACF Pro. Este bloque estiliza el
 * marcado que genera Gutenberg (.wp-block-gallery > .wp-block-image)
 * para que encaje con el resto del tema.
 * ============================================================ */

.galeria-local {
  padding-block: var(--section-py);
}

.galeria-local__heading {
  text-align: center;
  margin-bottom: var(--space-7);
}

.galeria-local__heading h2 {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-2xl);
  color: var(--horreo-text-primary);
  margin-bottom: var(--space-3);
}

.galeria-local__heading p {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  color: var(--horreo-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* Contenedor del contenido Gutenberg. No fuerza rejilla — respeta la
 * configuración de columnas del propio bloque Galería (2/3/4). */
.galeria-local__content .wp-block-gallery {
  gap: var(--space-4);
  margin-inline: auto;
  max-width: 1400px;
}

.galeria-local__content .wp-block-image {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--horreo-bg-secondary);
}

.galeria-local__content .wp-block-image img,
.galeria-local__content .wp-block-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-glacial) var(--ease-out);
  display: block;
}

.galeria-local__content .wp-block-image:hover img,
.galeria-local__content .wp-block-gallery .wp-block-image:hover img {
  transform: scale(1.06);
}

/* ============================================================
 * LIGHTBOX (iter-13)
 * ============================================================ */

.horreo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  cursor: zoom-out;
  animation: horreo-fade-in 0.25s ease-out;
}

.horreo-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  cursor: default;
}

.horreo-lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--horreo-gold);
  border: 1px solid var(--horreo-gold);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.horreo-lightbox__close:hover {
  background: var(--horreo-gold);
  color: var(--horreo-bg-primary);
  transform: scale(1.05);
}

/* ============================================================
 * CERVEZA · empty state amigable (iter-13)
 * ============================================================ */

.cerveza-empty-card {
  max-width: 600px;
  margin: var(--space-9) auto;
  padding: var(--space-8) var(--space-7);
  background: linear-gradient(180deg, rgba(201, 169, 97, 0.10), rgba(26, 26, 26, 0.85));
  border: 1px solid var(--horreo-gold-dim);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-glow-soft);
}

.cerveza-empty-card__icon {
  font-size: clamp(3rem, 6vw, 4rem);
  line-height: 1;
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 4px 16px rgba(201, 169, 97, 0.4));
}

.cerveza-empty-card__title {
  font-family: var(--horreo-font-display);
  font-size: var(--fs-xl);
  color: var(--horreo-gold);
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-wide);
}

.cerveza-empty-card__text {
  font-family: var(--horreo-font-accent);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--horreo-text-primary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-6);
}

/* ============================================================
 * BLOQUES NOTA / DESTACADO
 * ============================================================ */

.note-block {
  background: var(--horreo-bg-secondary);
  border-left: 3px solid var(--horreo-gold);
  padding: var(--space-5) var(--space-6);
  margin-block: var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--horreo-font-accent);
  font-style: italic;
  color: var(--horreo-text-primary);
}