/* ==========================================================================
   Selección Oro Absoluto — Ranking
   ========================================================================== */

.split-hero{
    min-height: 75svh;
}
.split-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(../img/beer-dudge.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  transition: opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out);
}

body.is-loading .split-hero::before {
  opacity: 0;
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .split-hero::before { transition: none; }
}

/* En mobile el texto pasa a ocupar todo el ancho (centrado) y suele ser
   más largo que en desktop (párrafos extra), así que la sección crece en
   alto. El fondo (::before) tenía inset:0, o sea ocupaba TODA la altura
   de la sección; con background-size:contain sobre un ancho angosto la
   imagen se escala muy alta y su borde superior termina invadiendo el
   texto, sin importar cuánto padding-bottom se le diera.
   Solución: anclar el fondo a una franja fija de alto conocido pegada
   abajo (top:auto + height), y reservar exactamente esa misma altura
   como padding-bottom del texto. Así el texto nunca puede terminar por
   debajo de donde arranca la imagen, sin importar cuán largo sea. */
@media (max-width: 900px) {
  .split-hero {
    min-height: 60svh;
    padding-bottom: min(42vh, 380px);
  }

  .split-hero::before {
    top: auto;
    height: min(42vh, 380px);
    background-position: bottom center;
  }
}

   /* ---- Estado actual ---- */

.ranking-status {
  padding: clamp(3rem, 6vw, 5rem) 0 0;
}

.about-intro__card {
  background: var(--c-grey-050);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.about-intro__card p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-grey-text);
  margin: 0 0 1rem;
}

.about-intro__card p:last-child { margin-bottom: 0; }

/* ---- Cuenta regresiva ---- */

.countdown {
  padding: var(--space-small) 0;
  background-color: var(--c-black);
}

.countdown__box {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--c-black);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.countdown__box .eyebrow { color: var(--c-gold-light); }

.countdown__box h2 {
  color: var(--c-white);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0.4rem 0 clamp(2rem, 4vw, 2.75rem);
}

.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: clamp(1rem, 2.5vw, 1.5rem) 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.countdown__value {
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--c-gold-light);
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 480px) {
  .countdown__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Categorías ---- */

.categories {
  padding: var(--space-section) 0;
}

.categories__head {
  max-width: 60ch;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.categories__head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  margin-top: 0.5rem;
}

.category-card {
  height: 100%;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) 1rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: transparent;
}

.category-card__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-grey-100);
  color: var(--c-gold);
  font-size: 1.15rem;
}

.category-card h3 {
  font-size: 0.98rem;
  margin: 0;
  line-height: 1.35;
}

.category-card p {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--c-grey-text);
}

.category-card--gold {
  background: var(--c-black);
  border-color: transparent;
}

.category-card--gold .category-card__icon {
  background: var(--gradient-gold);
  color: var(--c-black);
}

.category-card--gold h3 { color: var(--c-white); }