/* ==========================================================
   Estructura: barra, tickers, hero/afiche, secciones, grilla, pie.
   Mobile first — de acá para arriba en responsive.css
   ========================================================== */

html { scroll-behavior: smooth; }

body {
  background: var(--tinta);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--paso-0);
  line-height: 1.55;
  overflow-x: hidden;
  /* Deja aire para la barra de resumen fija. */
  padding-bottom: calc(var(--resumen-alto) + env(safe-area-inset-bottom));
}

.salto-contenido {
  position: absolute;
  top: -100px; left: var(--e-3);
  z-index: 200;
  background: var(--rayo);
  color: var(--sobre-papel);
  padding: var(--e-2) var(--e-3);
  font-weight: 700;
  transition: top var(--rapido);
}
.salto-contenido:focus { top: var(--e-2); }

/* ---------------- Barra superior ---------------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--barra-alto);
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0 var(--e-3);
  background: rgba(20, 16, 14, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--fuego);
}

.barra__logo img { width: 104px; height: auto; }

.barra__nav {
  display: none;
  gap: var(--e-4);
  margin-left: auto;
  font-size: var(--paso--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.barra__nav a { padding: var(--e-1) 0; border-bottom: 2px solid transparent; transition: border-color var(--rapido), color var(--rapido); }
.barra__nav a:hover { color: var(--rayo); border-bottom-color: var(--fuego); }

/* ---------------- Ticker ----------------
   Dos cintas que corren en sentidos opuestos: la de arriba grita la
   campaña, la de abajo cierra el afiche. Misma pieza, distinta voz. */
.ticker {
  overflow: hidden;
  background: var(--fuego);
  color: var(--tinta);
  border-block: 2px solid var(--tinta);
  padding: 6px 0;
}
.ticker--rayo { background: var(--rayo); color: var(--tinta); }

.ticker__pista {
  display: flex;
  width: max-content;
  animation: correr 34s linear infinite;
}
.ticker--invertido .ticker__pista { animation-direction: reverse; animation-duration: 42s; }

.ticker__pista span {
  font-family: var(--fuente-display);
  font-size: var(--paso--2);
  letter-spacing: 0.16em;
  white-space: nowrap;
  padding-right: 1.5rem;
}
@keyframes correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================
   HERO — el afiche del reventón
   La portada va de fondo, a sangre, y el titular manda encima.
   ========================================================== */
.hero {
  position: relative;
  isolation: isolate;
  /* Que el afiche entre completo entre la barra de arriba y el resumen fijo:
     el llamado a las prendas tiene que verse sin scrollear. */
  min-height: min(calc(100svh - var(--barra-alto) - var(--resumen-alto) - 2rem), 820px);
  display: grid;
  place-items: center;
  padding: var(--e-5) var(--e-3);
  text-align: center;
  overflow: hidden;
  border-bottom: 3px solid var(--fuego);
}

/* La portada. Se apila sobre la imagen de respaldo: si el archivo de la
   campaña todavía no está, se ve la de respaldo y el afiche igual funciona.
   Siempre proporcional (cover/contain): nunca estirada. */
.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: var(--hero-portada), var(--hero-respaldo);
  background-position: var(--hero-foco-movil), center 30%;
  background-size: var(--hero-ajuste), cover;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--tinta);
  transform: scale(1.04);
  animation: respirar 26s var(--ease) infinite alternate;
}
@keyframes respirar {
  from { transform: scale(1.04); }
  to   { transform: scale(1.1); }
}

/* Velo: la foto queda de textura y el titular siempre se lee. */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(20, 16, 14, 0.72) 0%, rgba(20, 16, 14, 0.35) 42%, rgba(20, 16, 14, 0.94) 100%),
    rgba(20, 16, 14, var(--hero-velo));
}

/* Trama de puntos + viñeta: acabado de impresión de afiche callejero. */
.hero__trama {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(rgba(20, 16, 14, 0.5) 1px, transparent 1.3px),
    radial-gradient(circle at 50% 45%, transparent 34%, rgba(20, 16, 14, 0.86) 100%);
  background-size: 5px 5px, 100% 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero__sala {
  position: absolute;
  top: var(--e-4);
  left: var(--e-3);
  z-index: 2;
  font-size: var(--paso--2);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--crema);
  border-left: 3px solid var(--fuego);
  padding-left: var(--e-2);
  text-align: left;
}

.hero__contenido {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  max-width: 980px;
  width: 100%;
}

.hero__ficha {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid rgba(255, 212, 0, 0.35);
  width: 100%;
  max-width: 560px;
}
.hero__ficha > div { display: flex; gap: var(--e-1); align-items: baseline; }
.hero__ficha dt {
  font-size: var(--paso--2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--humo);
}
.hero__ficha dd { font-size: var(--paso--1); color: var(--rayo); font-weight: 500; }

/* ---------------- Secciones ---------------- */
.seccion__titulo {
  font-family: var(--fuente-display);
  font-size: var(--paso-3);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
/* El remate amarillo debajo del título: subrayado de fibrón sobre afiche. */
.seccion__titulo--marcado {
  display: inline;
  background: linear-gradient(180deg, transparent 62%, var(--fuego) 62%, var(--fuego) 92%, transparent 92%);
  padding-inline: 2px;
}

.pasos {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: var(--e-6) var(--e-3);
  scroll-margin-top: calc(var(--barra-alto) + 10px);
}
.pasos__lista {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-4);
  list-style: none;
}

.coleccion {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: var(--e-5) var(--e-3) var(--e-6);
  scroll-margin-top: calc(var(--barra-alto) + 10px);
}
.coleccion__cabecera { margin-bottom: var(--e-4); }
.coleccion__kicker {
  display: inline-block;
  justify-self: start;
  font-family: var(--fuente-display);
  font-size: var(--paso--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--rayo);
  padding: 3px var(--e-2);
  margin-bottom: var(--e-2);
  transform: rotate(-1.2deg);
}
.coleccion__bajada {
  margin-top: var(--e-2);
  color: var(--texto-suave);
  max-width: 52ch;
  font-size: var(--paso--1);
}

/* ---------------- Grilla de prendas ---------------- */
.grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-4);
}

/* ---------------- Franja de urgencia ----------------
   Corta la página entre secciones y repite la única promesa
   de la campaña: todo al 50%. */
.franja {
  position: relative;
  overflow: hidden;
  background: var(--fuego);
  color: var(--tinta);
  border-block: 3px solid var(--tinta);
  padding: var(--e-4) var(--e-3);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--e-1);
}
.franja::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(20, 16, 14, 0.28) 1px, transparent 1.4px);
  background-size: 6px 6px;
  pointer-events: none;
}
.franja__titulo {
  position: relative;
  font-family: var(--fuente-display);
  font-size: var(--paso-3);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-shadow: 4px 4px 0 var(--crema);
}
.franja__texto {
  position: relative;
  font-size: var(--paso-0);
  font-weight: 500;
  letter-spacing: 0.04em;
  max-width: 60ch;
  margin-top: var(--e-1);
  text-wrap: balance;
}

/* ---------------- Pie ---------------- */
.pie {
  border-top: 2px solid var(--fuego);
  padding: var(--e-5) var(--e-3);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--e-2);
}
.pie__logo { width: 92px; height: auto; opacity: 0.75; }
.pie__texto {
  font-size: var(--paso--2);
  color: var(--humo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.8;
}
.pie__texto strong { color: var(--rayo); }