/* ============================================================
   SECCIONES
   Portada · Problema (provisional) · Pie
   ============================================================ */

/* ------------------------------------------------------------
   PORTADA
   ------------------------------------------------------------ */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-top: clamp(5.5rem, 11vh, 7.5rem);
  padding-bottom: clamp(6.5rem, 14vh, 8.5rem);
  text-align: center;
}

.hero__inner {
  display: grid;
  justify-items: center;
  gap: clamp(var(--sp-4), 2.4vh, var(--sp-5));
}

.hero__titulo {
  font-size: var(--fs-mega);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.hero__titulo .hero__linea { display: block; }
.hero__linea--luz {
  color: var(--luz);
  text-shadow: 0 0 60px rgba(230, 171, 88, 0.32);
  font-weight: 500;
}

.hero__bajada {
  max-width: 54ch;
}

/* Datos destacados */
.hero__datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) clamp(var(--sp-4), 3vw, var(--sp-7));
  padding-block: var(--sp-3);
}

.hero__datos li {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  min-width: 8.5rem;
  padding-inline: var(--sp-3);
}
.hero__datos li + li { border-left: 1px solid var(--linea); padding-left: clamp(var(--sp-4), 3vw, var(--sp-7)); }

.dato__cifra {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--luz);
  text-shadow: 0 0 34px rgba(230, 171, 88, 0.35);
  font-variant-numeric: lining-nums tabular-nums;
}
.dato__texto {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--texto-bajo);
  max-width: 16ch;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .hero__datos { gap: var(--sp-5) var(--sp-4); }
  .hero__datos li + li { border-left: 0; padding-left: var(--sp-3); }
  .hero__datos li { min-width: 6.5rem; }
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

.hero__publico { margin-top: var(--sp-2); color: var(--texto-bajo); }
.hero__publico:hover { color: var(--luz-clara); }

/* ---------- La sala: fila de butacas al pie, la 01 iluminada ---------- */
.hero__sala {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.35rem, 1.1vw, 0.9rem);
  padding-inline: var(--gutter);
  pointer-events: none;
}

.butaca {
  position: relative;
  flex: none;
  width: clamp(1.35rem, 3.6vw, 2.5rem);
  aspect-ratio: 1;
  color: var(--sala-500);
  opacity: 0.8;
}
.butaca svg { width: 100%; height: 100%; }

/* Algunas butacas se encienden y se apagan solas: entradas vendidas */
.butaca--vende {
  animation: butaca-vende 11s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes butaca-vende {
  0%, 8%, 100%  { color: var(--sala-500); filter: none; }
  16%, 52%      { color: var(--luz); filter: drop-shadow(0 0 10px rgba(230, 171, 88, 0.55)); }
  62%           { color: var(--sala-500); filter: none; }
}

/* La firma de la marca: butaca 01 */
.butaca--01 {
  color: var(--luz);
  opacity: 1;
  filter: drop-shadow(0 0 16px rgba(230, 171, 88, 0.7));
  animation: butaca-01 4.2s ease-in-out infinite;
}
.butaca--01::after {
  content: "01";
  position: absolute;
  left: 50%;
  top: calc(100% + 0.35rem);
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--luz-clara);
}
@keyframes butaca-01 {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(230, 171, 88, 0.5)); }
  50%      { filter: drop-shadow(0 0 22px rgba(230, 171, 88, 0.9)); }
}

/* Indicador de scroll: una línea de luz que cae */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: clamp(2rem, 6vh, 3.5rem);
  margin-left: -0.5px;
  overflow: hidden;
  background: var(--linea);
  transition: opacity var(--dur-media) ease;
}
.hero__scroll::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 45%;
  background: linear-gradient(180deg, transparent, var(--luz));
  animation: scroll-cae 2.2s var(--ease-in-out) infinite;
}
.hero__scroll.is-oculto { opacity: 0; }
@keyframes scroll-cae {
  from { transform: translateY(-110%); }
  to   { transform: translateY(260%); }
}

/* ------------------------------------------------------------
   PROBLEMA (§3) — maqueta provisional para probar el motor
   ------------------------------------------------------------ */

.problema__cabeza {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: clamp(var(--sp-7), 6vw, var(--sp-9));
  max-width: 50rem;
}
.problema__titulo { font-size: var(--fs-h1); }

.problema__rejilla {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}

.problema__num {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--luz);
  margin-bottom: var(--sp-5);
}

/* ------------------------------------------------------------
   PIE
   ------------------------------------------------------------ */

.pie {
  position: relative;
  padding-top: var(--sp-9);
  padding-bottom: var(--sp-6);
  border-top: 1px solid var(--linea);
  background: linear-gradient(180deg, transparent 0%, rgba(0, 5, 14, 0.7) 34%, rgba(0, 5, 14, 0.94) 100%);
  overflow: hidden;
}

.pie__cuerpo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
}

.pie__lema {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-style: italic;
  font-weight: 400;
  color: var(--texto-medio);
  max-width: 22ch;
}

.pie__col h3 {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--luz);
  margin-bottom: var(--sp-4);
}
.pie__lista { display: grid; gap: var(--sp-3); }
.pie__lista a {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--texto-bajo);
  transition: color var(--dur-rapida) ease, transform var(--dur-rapida) ease;
}
.pie__lista a:hover { color: var(--luz-clara); transform: translateX(3px); }

/* Logotipo gigante de cierre, ajustado al ancho (ver ajustarLogotipo) */
.pie__logotipo {
  font-family: var(--font-marca);
  font-size: clamp(1.8rem, 11.5vw, 12rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: var(--tr-marca);
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230, 171, 88, 0.55);
  user-select: none;
  padding-block: var(--sp-4) var(--sp-5);
  white-space: nowrap;
}

.pie__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  padding-bottom: 3.5rem; /* deja libre la esquina del botón de WhatsApp */
  border-top: 1px solid var(--linea);
  font-size: var(--fs-xs);
  color: var(--texto-tenue);
}

/* ------------------------------------------------------------
   MODO REVISIÓN (?revision): resalta el contenido provisional
   ------------------------------------------------------------ */

body.revision [data-provisional] {
  outline: 1px dashed var(--luz);
  outline-offset: 6px;
}
.revision-aviso {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 150;
  transform: translateX(-50%);
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 1.1rem;
  background: var(--sala-950);
  border: 1px solid var(--linea-luz);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--texto-medio);
}
.revision-aviso b { color: var(--luz); }