/* ==========================================================================
   CYBER 3D · TP3D
   Landing de campaña sin frameworks. Mobile first.
   ========================================================================== */

:root {
  /* Paleta CYBER 3D */
  --azul: #1e9bfa;
  --rosa: #ff8cf7;
  --violeta: #a33bff;
  --verde: #5bff2b;
  --tinta: #12062b;
  --blanco: #ffffff;
  --claro: #f4f0ff;
  --tinta-suave: #35294d;
  --sombra: #12062b2e;
  --verde-glow: #5bff2b66;
  --blanco-suave: #ffffffcc;
  --lila: #e2d2ff; /* violeta aclarado: fondo suave para fotos de producto en gris */

  /* Tipografías: Big Shoulders (display) + Monument Extended (con Unbounded de respaldo) */
  --fuente-display: "Big Shoulders Display", Impact, sans-serif;
  --fuente-extendida: "Monument Extended", "Unbounded", sans-serif;
  --fuente-texto: Arial, Helvetica, sans-serif;

  --radio-s: 0.65rem;
  --radio-m: 1rem;
  --radio-l: 1.5rem;
  --radio-xl: 2rem;
  --radio-pill: 999rem;
  --contenedor: 75rem;
  --header: 4.6rem;
  --borde: 0.125rem solid var(--tinta);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transicion: 200ms var(--ease-out);
  --autoplay: 6s;
  --solape: 3.5rem; /* cuánto se montan las tarjetas de categorías sobre el hero */

  /* Trama de puntos que se usa como textura en los fondos de color */
  --puntos: radial-gradient(#ffffff2e 1.5px, transparent 1.6px);
}

/*
  Cuando tengan la licencia de Monument Extended, subir el archivo a /fonts y descomentar:
  @font-face {
    font-family: "Monument Extended";
    src: url("../fonts/MonumentExtended-Ultrabold.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
  }
*/

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--tinta);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.menu-abierto { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
a:focus-visible, button:focus-visible {
  outline: 0.2rem solid var(--verde);
  outline-offset: 0.25rem;
}
section[id] { scroll-margin-top: calc(var(--header) + 0.125rem); } /* alto del header + su borde */
/* Las tarjetas de categorías suben --solape sobre el hero: el ancla tiene que frenar antes para mostrarlas enteras */
#categorias { scroll-margin-top: calc(var(--header) + var(--solape) + 1rem); }

.container { width: min(100% - 2rem, var(--contenedor)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Tipografía y piezas comunes ---------- */
.titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: clamp(2.8rem, 12vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
}
.etiqueta {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radio-s);
  background: var(--verde);
  color: var(--tinta);
  font-family: var(--fuente-extendida);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.etiqueta--oscura { background: transparent; padding: 0; color: var(--verde); }
.bajada { margin: 1rem 0 0; max-width: 38rem; font-size: 1rem; line-height: 1.55; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.6rem 0.85rem;
  background: var(--verde);
  color: var(--tinta);
  font-family: var(--fuente-display);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: skewX(-10deg);
}
.badge > span { transform: skewX(10deg); }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.4rem;
  border: var(--borde);
  border-radius: var(--radio-pill);
  background: var(--verde);
  box-shadow: 0 0.45rem 0 var(--tinta), 0 0 1.5rem var(--verde-glow);
  color: var(--tinta);
  font-family: var(--fuente-extendida);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
/* Brillo que cruza el botón al pasar el mouse */
.btn::after {
  content: "";
  position: absolute;
  inset: -50% auto -50% -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #ffffffb3, transparent);
  transform: skewX(-20deg) translateX(0);
  pointer-events: none;
}
.btn:hover { transform: translateY(-0.2rem) scale(1.015); box-shadow: 0 0.65rem 0 var(--tinta), 0 0 2rem var(--verde-glow); }
.btn:hover::after { transform: skewX(-20deg) translateX(480%); transition: transform 700ms var(--ease-out); }
.btn:active { transform: translateY(0.25rem); box-shadow: 0 0.15rem 0 var(--tinta), 0 0 1rem var(--verde-glow); }

.flecha { display: inline-block; transition: transform var(--transicion); }

.seccion { position: relative; padding-block: 4.5rem; overflow: hidden; }
.seccion__encabezado { margin-bottom: 2rem; }

/* Placeholder de imagen: muestra un cubo hasta que se cargue un <img> */
.media {
  position: relative;
  display: grid;
  width: 100%;
  flex: 1;
  min-height: 8rem;
  place-items: center;
  padding-block: 1rem;
}
.media img {
  width: 100%;
  height: 100%;
  max-height: 16rem;
  object-fit: contain;
  transition: transform 400ms var(--ease-out);
}
.media__icono {
  width: min(40%, 7rem);
  aspect-ratio: 126 / 146;
  color: currentColor;
  opacity: 0.28;
  transition: transform 500ms var(--ease-out), opacity var(--transicion);
}
.media:has(img) .media__icono { display: none; }

/* ---------- Revelado al hacer scroll (solo con JS activo) ---------- */
.js [data-reveal] {
  opacity: 0;
  translate: 0 2rem;
  transition: opacity 700ms ease, translate 800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-visible { opacity: 1; translate: 0 0; }

/* ==========================================================================
   0. Header
   ========================================================================== */
.header {
  position: sticky;
  z-index: 30;
  top: 0;
  border-bottom: var(--borde);
  background: var(--blanco);
  transition: box-shadow var(--transicion);
}
.header.is-scrolled { box-shadow: 0 0.6rem 1.5rem var(--sombra); }
.header__inner {
  display: flex;
  min-height: var(--header);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Logo TP3D (PNG horizontal a 3x) */
.tp3d { display: inline-flex; align-items: center; }
.tp3d img { width: auto; height: 1.9rem; }
.header__toggle {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: var(--borde);
  border-radius: var(--radio-pill);
  background: var(--verde);
  cursor: pointer;
}
.header__toggle svg { width: 1.3rem; height: 1.3rem; }
.header__nav {
  position: fixed;
  inset: var(--header) 0 auto;
  display: none;
  padding: 1rem;
  border-bottom: var(--borde);
  background: var(--blanco);
  box-shadow: 0 1rem 2rem var(--sombra);
}
.header__nav.abierto { display: block; animation: menu-entra 250ms var(--ease-out); }
@keyframes menu-entra { from { opacity: 0; transform: translateY(-0.75rem); } }
.header__lista { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.header__link {
  display: block;
  padding: 0.9rem 1rem;
  border-radius: var(--radio-m);
  font-family: var(--fuente-extendida);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: background var(--transicion), color var(--transicion);
}
.header__link:hover { background: var(--claro); }
.header__link[aria-current="true"] { background: var(--verde); }
.header__link--cta { background: var(--tinta); color: var(--blanco); text-align: center; }
.header__link--cta:hover { background: var(--violeta); }

/* ==========================================================================
   1. Hero
   ========================================================================== */
/* Banner horizontal y bajo (formato carrusel de e-commerce): las promos asoman enseguida */
.hero {
  position: relative;
  padding-block: 1.5rem calc(var(--solape) + 3.5rem);
  background:
    radial-gradient(60rem 30rem at 50% 45%, #ffffff26, transparent 70%),
    var(--puntos) 0 0 / 1.75rem 1.75rem,
    var(--azul);
  color: var(--blanco);
  overflow: hidden;
}
/* Fundido inferior hacia el fondo de las categorías, que se apoyan encima */
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: var(--solape); /* el azul se ve detrás de la parte alta de las tarjetas y se funde abajo */
  background: linear-gradient(#f4f0ff00, var(--claro));
  pointer-events: none;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "slides logo";
  align-items: center;
  column-gap: 0.75rem;
}

/* Logo CYBER 3D animado (hero y cierre) */
.logo-cyber { display: block; overflow: visible; }
.hero__logo { position: relative; z-index: 2; grid-area: logo; align-self: start; width: 6rem; }
.logo-cyber__bomba { transform-box: fill-box; transform-origin: 50% 100%; animation: bomba 2.6s ease-in-out infinite; }
.logo-cyber__chispa {
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 6px #5bff2b);
  animation: chispa 420ms ease-in-out infinite alternate;
}
.logo-cyber__particula { opacity: 0; animation: particula 1.1s ease-out infinite; }
.logo-cyber__particula:nth-of-type(1) { --tx: 22px; --ty: -20px; }
.logo-cyber__particula:nth-of-type(2) { --tx: 26px; --ty: 8px; animation-delay: 0.35s; }
.logo-cyber__particula:nth-of-type(3) { --tx: 4px; --ty: -28px; animation-delay: 0.7s; }
@keyframes bomba {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-2deg); }
  75% { transform: translateY(-1px) rotate(2deg); }
}
@keyframes chispa {
  from { transform: scale(0.78) rotate(-12deg); }
  to { transform: scale(1.18) rotate(16deg); }
}
@keyframes particula {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.2); }
}

/* Decoración flotante */
.hero__deco { position: absolute; inset: 0; pointer-events: none; }
.flota {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s) * 0.65);
  aspect-ratio: 126 / 146;
  translate: calc(var(--px, 0) * var(--depth) * 1px) calc(var(--py, 0) * var(--depth) * 1px);
  transition: translate 400ms var(--ease-out);
}
.flota__item {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0.3rem 0.3rem 0 #12062b40);
  animation: flotar 7s ease-in-out infinite;
  animation-delay: var(--d);
}
.flota__item--chispa { fill: var(--verde); filter: drop-shadow(0 0 0.5rem var(--verde-glow)); animation-name: flotar, titilar; animation-duration: 7s, 1.6s; }
.flota__item--rosa { fill: var(--rosa); filter: drop-shadow(0 0 0.5rem #ff8cf780); }
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-1rem) rotate(8deg); }
}
@keyframes titilar { 50% { opacity: 0.45; } }
.flota--desktop { display: none; }

/* Slides apilados: el alto lo define el slide más alto, sin saltos */
.hero__slides { position: relative; z-index: 2; display: grid; grid-area: slides; }
.hero__slide {
  display: flex;
  grid-area: 1 / 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}
.hero__slide.is-active { visibility: visible; opacity: 1; transition: opacity 400ms ease; }
.hero__slide > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 500ms ease, transform 650ms var(--ease-out);
}
.hero__slide.is-active > * { opacity: 1; transform: none; }
.hero__slide.is-active > :nth-child(2) { transition-delay: 70ms; }
.hero__slide.is-active > :nth-child(3) { transition-delay: 140ms; }
.hero__slide.is-active > :nth-child(4) { transition-delay: 210ms; }
.hero__slide.is-active > :nth-child(5) { transition-delay: 280ms; }

.hero__kicker {
  margin: 0 0 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radio-s);
  background: var(--tinta);
  color: var(--verde);
  font-family: var(--fuente-extendida);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
}
.hero__titulo {
  font-size: clamp(2.2rem, 9vw, 2.9rem);
  font-weight: 900;
  line-height: 0.88;
  text-shadow: 0.045em 0.045em 0 var(--tinta);
}
.hero__texto { display: none; max-width: 34rem; margin: 0.7rem 0 0; font-size: 1rem; font-weight: 700; line-height: 1.4; }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.85rem; }
.hero__acciones .badge { font-size: 0.85rem; }
.hero .btn { min-height: 2.75rem; padding: 0.6rem 1.15rem; }

/* Flechas a los costados y puntos abajo, sobre el banner */
.hero__controles { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.hero__flecha {
  position: absolute;
  top: calc(50% - var(--solape) / 2);
  display: none;
  translate: 0 -50%;
  pointer-events: auto;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: var(--borde);
  border-radius: var(--radio-pill);
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
  transition: transform var(--transicion), background var(--transicion);
}
.hero__flecha:hover { background: var(--verde); transform: scale(1.08); }
.hero__anterior { left: 0.85rem; }
.hero__siguiente { right: 0.85rem; }
.hero__puntos { position: absolute; bottom: calc(var(--solape) + 1.4rem); left: 50%; display: flex; gap: 0.45rem; translate: -50% 0; pointer-events: auto; }
.hero__punto {
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
  padding: 0;
  border: var(--borde);
  border-radius: var(--radio-pill);
  background: var(--blanco);
  cursor: pointer;
  transition: width 350ms var(--ease-out);
}
/* Zona táctil invisible más grande que el punto (44 px de alto) */
.hero__punto::after { content: ""; position: absolute; inset: -0.9rem -0.25rem; }
.hero__punto.is-active { width: 2.75rem; }
.hero__progreso {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--verde);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__punto.is-active .hero__progreso { animation: progreso var(--autoplay) linear forwards; }
.hero.is-paused .hero__progreso { animation-play-state: paused; }
@keyframes progreso { to { transform: scaleX(1); } }

/* ==========================================================================
   2. Countdown + mecha
   ========================================================================== */
/* Franja compacta: muestra la urgencia sin demorar la llegada a las promos */
.countdown { padding-block: 1.4rem 1.5rem; background: var(--tinta); color: var(--blanco); }
.countdown__inner { display: grid; gap: 0.9rem; }
.countdown__textos { text-align: center; }
.countdown__etiqueta {
  margin: 0;
  color: var(--verde);
  font-family: var(--fuente-extendida);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
}
.countdown__reloj { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.countdown__caja {
  display: grid;
  min-height: 4.1rem;
  place-items: center;
  align-content: center;
  border: 0.125rem solid var(--blanco);
  border-radius: var(--radio-s);
  background: var(--violeta);
  box-shadow: 0.25rem 0.25rem 0 var(--rosa);
  overflow: hidden;
}
.countdown__numero {
  display: block;
  font-family: var(--fuente-display);
  font-size: clamp(2rem, 9.5vw, 2.6rem);
  font-weight: 800;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.countdown__numero.is-tick { animation: tick 260ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes tick {
  from { opacity: 0.35; transform: translateY(-30%); filter: blur(1.5px); }
  to { opacity: 1; transform: none; filter: none; }
}
.countdown__unidad {
  margin-top: 0.3rem;
  font-family: var(--fuente-display);
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.countdown__fin {
  margin: 0;
  color: var(--verde);
  font-family: var(--fuente-display);
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  font-weight: 800;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
}

/* La mecha se consume a medida que pasa el tiempo (ancho = --restante) */
.mecha { padding-block: 0.3rem; }
.mecha__pista {
  position: relative;
  height: 0.6rem;
  margin-right: 1rem;
  border-radius: var(--radio-pill);
  background: repeating-linear-gradient(90deg, #ffffff2e 0 0.35rem, transparent 0.35rem 0.8rem);
}
.mecha__cuerda {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--restante);
  border-radius: var(--radio-pill);
  background: repeating-linear-gradient(-45deg, var(--verde) 0 0.4rem, #3ccf14 0.4rem 0.8rem);
  background-size: 1.13rem 100%;
  box-shadow: 0 0 0.8rem var(--verde-glow);
  animation: trenza 900ms linear infinite;
  transition: width 1s linear;
}
@keyframes trenza { to { background-position: 1.13rem 0; } }
.mecha__chispa {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.75rem;
  height: 1.75rem;
  translate: 50% -50%;
}
.mecha__chispa::before {
  content: "";
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffffe6 0 12%, #5bff2b80 30%, transparent 65%);
  animation: resplandor 160ms ease-in-out infinite alternate;
}
.mecha__chispa svg { position: relative; width: 100%; height: 100%; fill: var(--verde); animation: chispa 300ms ease-in-out infinite alternate; }
@keyframes resplandor { from { opacity: 0.6; transform: scale(0.85); } to { opacity: 1; transform: scale(1.1); } }
.mecha__leyenda {
  margin: 0.3rem 0 0; /* visible también en mobile: lleva la fecha de cierre */
  color: var(--blanco-suave);
  font-family: var(--fuente-extendida);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.countdown.is-terminado .mecha,
.countdown.is-terminado .mecha__leyenda { display: none; }

/* ==========================================================================
   3. Tickers cruzados
   ========================================================================== */
.tickers {
  position: relative;
  height: clamp(7.5rem, 9vw, 10rem);
  background: var(--azul) var(--puntos) 0 0 / 1.75rem 1.75rem;
  overflow: hidden;
}
.ticker {
  position: absolute;
  top: 50%;
  left: -5%;
  width: 110%;
  border-block: var(--borde);
  overflow: hidden;
}
.ticker--verde { top: 62%; z-index: 2; background: var(--verde); color: var(--tinta); transform: translateY(-50%) rotate(-2.5deg); }
.ticker--violeta { top: 36%; background: var(--violeta); color: var(--blanco); transform: translateY(-50%) rotate(2.5deg); }
.ticker__track { display: flex; width: max-content; animation: ticker 30s linear infinite; }
.ticker__track--reversa { animation-direction: reverse; animation-duration: 36s; }
.ticker__linea {
  padding: 0.9rem 0.7rem;
  font-family: var(--fuente-extendida);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ==========================================================================
   4. Categorías
   ========================================================================== */
/* flow-root evita que el margen negativo de la grilla "arrastre" a toda la sección
   (si no, el fondo claro sube y tapa la parte baja del hero) */
.categorias { position: relative; z-index: 3; display: flow-root; padding-bottom: 2rem; background: var(--claro); }
/* Mobile: fila deslizable. Desde 1024px: 5 columnas */
.categorias__grilla {
  display: flex;
  gap: 0.75rem;
  margin: calc(-1 * var(--solape)) -1rem 0;
  padding: 0.25rem 1rem 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  scrollbar-width: none;
}
.categorias__grilla::-webkit-scrollbar { display: none; }
.categoria {
  display: flex;
  flex: 0 0 min(44%, 14rem);
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  border: var(--borde);
  border-radius: var(--radio-m);
  background: var(--blanco);
  box-shadow: 0.3rem 0.3rem 0 var(--tinta);
  scroll-snap-align: start;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.categoria:hover { transform: translateY(-0.3rem); box-shadow: 0.45rem 0.6rem 0 var(--tinta); }
.categoria:hover .media__icono { transform: rotate(-8deg) scale(1.08); opacity: 0.7; }
.categoria:hover .media img { transform: scale(1.06) rotate(-2deg); }
.categoria:hover .categoria__link { background: var(--violeta); }
.categoria__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  min-height: 1.9em; /* títulos de 1 o 2 líneas: las imágenes quedan alineadas */
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
}
.categoria__media { flex: none; min-height: 0; aspect-ratio: 4 / 3; padding: 0.75rem; border-radius: var(--radio-s); }
.categoria__media .media__icono { width: 42%; opacity: 0.55; }
.categoria__media--azul { background: var(--azul) var(--puntos) 0 0 / 1.25rem 1.25rem; color: var(--blanco); }
.categoria__media--verde { background: var(--verde); color: var(--tinta); }
.categoria__media--rosa { background: var(--rosa); color: var(--tinta); }
.categoria__media--lila { background: var(--lila); color: var(--tinta); }
.categoria__media--violeta { background: var(--violeta); color: var(--blanco); }
.categoria__texto { margin: 0; font-size: 0.8rem; font-weight: 700; line-height: 1.3; }
.categoria__link {
  margin-top: auto;
  padding: 0.65rem 0.4rem;
  border-radius: var(--radio-pill);
  background: var(--tinta);
  color: var(--blanco);
  font-family: var(--fuente-extendida);
  font-size: 0.6rem;
  white-space: nowrap;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  transition: background var(--transicion);
}

/* ==========================================================================
   5. Marcas
   ========================================================================== */
.marcas { background: var(--azul) var(--puntos) 0 0 / 1.75rem 1.75rem; color: var(--blanco); }
.marcas .titulo { text-shadow: 0.04em 0.04em 0 var(--tinta); }
.tickers + .marcas { padding-top: 1.5rem; }
/* 5 marcas centradas: en mobile 3 + 2; desde 768px una sola fila */
.marcas .seccion__encabezado { text-align: center; }
.marcas .bajada { margin-inline: auto; }
.marcas__grilla { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; }
.marca {
  display: grid;
  flex: 0 0 calc((100% - 2 * 0.85rem) / 3);
  max-width: 7.5rem;
  aspect-ratio: 1;
  place-items: center;
  padding: 0.5rem;
  border: var(--borde);
  border-radius: var(--radio-pill);
  background: var(--blanco);
  box-shadow: 0.25rem 0.25rem 0 var(--tinta);
  color: var(--tinta);
  transition: transform 300ms var(--ease-out), background var(--transicion), box-shadow var(--transicion);
}
.marca:hover { background: var(--verde); box-shadow: 0.4rem 0.4rem 0 var(--tinta); transform: rotate(-6deg) scale(1.07); }
.marca:nth-child(even):hover { background: var(--rosa); transform: rotate(6deg) scale(1.07); }
.marca img { width: 74%; height: auto; object-fit: contain; }

/* ==========================================================================
   6. Productos destacados
   ========================================================================== */
.productos { background: var(--blanco); }
.productos__grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.producto {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: var(--borde);
  border-radius: var(--radio-l);
  background: var(--claro);
  box-shadow: 0.35rem 0.35rem 0 var(--violeta);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.producto:nth-child(even) { box-shadow: 0.35rem 0.35rem 0 var(--rosa); }
.producto:hover { transform: translate(-0.2rem, -0.3rem); box-shadow: 0.6rem 0.65rem 0 var(--violeta); }
.producto:nth-child(even):hover { box-shadow: 0.6rem 0.65rem 0 var(--rosa); }
.producto:hover .flecha { transform: translate(0.2rem, -0.2rem); }
.producto:hover .media__icono { transform: rotate(-8deg) scale(1.08); opacity: 0.45; }
.producto:hover .media img { transform: scale(1.06); }
.producto:hover .producto__sticker { transform: rotate(-12deg) scale(1.1); }
.producto__sticker {
  position: absolute;
  z-index: 2;
  top: -0.8rem;
  right: -0.5rem;
  display: grid;
  width: 3.3rem;
  height: 3.3rem;
  place-items: center;
  border: var(--borde);
  border-radius: 50%;
  background: var(--verde);
  font-family: var(--fuente-display);
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 0.85;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(12deg);
  transition: transform 350ms var(--ease-out);
}
.producto:nth-child(even) .producto__sticker { background: var(--rosa); }
.producto__nombre {
  margin: 0;
  padding-right: 2rem;
  font-family: var(--fuente-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
}
.media--producto { aspect-ratio: 1; color: var(--tinta-suave); }
.producto__link { padding-top: 0.5rem; font-family: var(--fuente-extendida); font-size: 0.6rem; font-weight: 800; text-transform: uppercase; }

/* ==========================================================================
   7 y 8. Editoriales
   ========================================================================== */
.editoriales { background: var(--claro); }
.editorial { display: grid; border-top: var(--borde); }
.editorial__visual {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 3;
  place-items: center;
  color: var(--blanco);
  overflow: hidden;
}
.editorial__visual--violeta { background: radial-gradient(circle at 30% 30%, #ffffff33, transparent 60%), var(--puntos) 0 0 / 1.6rem 1.6rem, var(--violeta); }
.editorial__visual--azul { background: radial-gradient(circle at 70% 30%, #ffffff33, transparent 60%), var(--puntos) 0 0 / 1.6rem 1.6rem, var(--azul); }
.editorial__visual img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.editorial__frase {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--fuente-display);
  font-size: clamp(3.5rem, 15vw, 7.5rem);
  font-weight: 900;
  line-height: 0.82;
  text-align: center;
  text-shadow: 0.05em 0.05em 0 var(--tinta);
  text-transform: uppercase;
  transform: rotate(-4deg);
}
.editorial__visual--azul .editorial__frase { transform: rotate(3deg); }
.editorial__remate { display: none; }

/* Con foto: la frase baja a la esquina inferior izquierda, sobre un degradé que la hace legible
   (mismo tratamiento que las piezas de campaña en redes) */
.editorial__visual:has(img) { place-items: end start; }
.editorial__visual:has(img)::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, #12062b00 40%, #12062bd9 100%);
  pointer-events: none;
}
.editorial__visual:has(img) .editorial__frase {
  margin: 1.25rem;
  font-size: clamp(2.4rem, 10vw, 4.2rem);
  line-height: 1.06; /* el "¿" baja de la línea: con menos aire choca con la de abajo */
  text-align: left;
  transform: none;
}
.editorial__visual:has(img) .editorial__remate {
  display: block;
  margin-top: 0.6rem;
  color: var(--verde);
  font-family: var(--fuente-extendida);
  font-size: clamp(0.62rem, 1.8vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-shadow: none;
}
.editorial__visual:has(img) .editorial__cubo,
.editorial__visual:has(img) .editorial__chispa { display: none; }
/* "¿Qué se viene?": la foto tiene la mano abajo a la izquierda y el violeta liso arriba,
   así que la frase va arriba (degradé invertido y más suave) */
.editorial--invertido .editorial__visual:has(img) { place-items: start start; }
.editorial--invertido .editorial__visual:has(img)::after { background: linear-gradient(0deg, #12062b00 55%, #12062b80 100%); }
.editorial__cubo {
  position: absolute;
  right: 8%;
  bottom: 8%;
  width: clamp(4rem, 14vw, 8rem);
  aspect-ratio: 126 / 146;
  animation: flotar 6s ease-in-out infinite;
}
.editorial__chispa {
  position: absolute;
  top: 10%;
  left: 10%;
  width: clamp(3rem, 10vw, 5.5rem);
  aspect-ratio: 1;
  fill: var(--verde);
  filter: drop-shadow(0 0 1rem var(--verde-glow));
  animation: chispa 900ms ease-in-out infinite alternate;
}
.editorial__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 3rem 1rem; }
.editorial__titulo { font-size: clamp(3rem, 14vw, 5.5rem); }
.editorial__texto { max-width: 34rem; margin: 1.2rem 0; font-size: 1rem; line-height: 1.6; }
.editorial__link { display: inline-block; padding-block: 0.75rem; font-family: var(--fuente-extendida); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; }
.editorial__link:hover { text-decoration: underline; text-underline-offset: 0.3rem; }
.editorial__link:hover .flecha { transform: translateX(0.3rem); }

/* ==========================================================================
   9. Financiación
   ========================================================================== */
.financiacion { background: var(--azul) var(--puntos) 0 0 / 1.75rem 1.75rem; color: var(--blanco); }
.financiacion__tarjeta {
  position: relative;
  display: grid;
  gap: 1.4rem;
  padding: 1.5rem;
  border: 0.125rem solid var(--blanco);
  border-radius: var(--radio-xl);
  background: var(--tinta);
  box-shadow: 0.65rem 0.65rem 0 var(--rosa);
}
.financiacion__icono {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  border-radius: var(--radio-m);
  background: var(--violeta);
}
.financiacion__icono svg { width: 2.8rem; height: 2.8rem; }
.financiacion__titulo { margin-top: 0.9rem; font-size: clamp(2.4rem, 9vw, 4.5rem); }
.financiacion__texto { margin: 0.8rem 0 0; max-width: 38rem; line-height: 1.55; }
.financiacion .btn { justify-self: start; }
.financiacion__boom {
  position: absolute;
  top: -1.1rem;
  right: 1rem;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border: var(--borde);
  border-radius: var(--radio-s);
  background: var(--verde);
  color: var(--tinta);
  font-family: var(--fuente-extendida);
  font-size: clamp(0.9rem, 4vw, 1.5rem);
  font-weight: 800;
  text-transform: uppercase;
  transform: rotate(-6deg);
  animation: boom 2.4s var(--ease-out) infinite;
}
@keyframes boom {
  0%, 70%, 100% { transform: rotate(-6deg) scale(1); }
  78% { transform: rotate(-10deg) scale(1.25); }
  86% { transform: rotate(-4deg) scale(0.95); }
}

/* ==========================================================================
   10. Cierre
   ========================================================================== */
.cierre {
  display: grid;
  min-height: 32rem;
  place-items: center;
  background: radial-gradient(40rem 22rem at 50% 50%, #a33bff59, transparent 70%), var(--tinta);
  color: var(--blanco);
  text-align: center;
}
.cierre__inner { position: relative; z-index: 2; }
.cierre__logo { width: min(80vw, 24rem); margin: 0.5rem auto 1.5rem; filter: drop-shadow(0 0 1.5rem var(--verde-glow)); }
.cierre__texto { margin: 0 auto 1.8rem; max-width: 35rem; font-size: 1.05rem; line-height: 1.5; }
.cierre__mecha {
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  width: 9rem;
  height: 8rem;
  overflow: visible;
  pointer-events: none;
}
.cierre__mecha-linea { stroke-dasharray: 4 2.5; animation: mecha-corre 1.2s linear infinite; }
.cierre__mecha-chispa { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 8px #5bff2b); animation: chispa 380ms ease-in-out infinite alternate; }
@keyframes mecha-corre { to { stroke-dashoffset: -13; } }

/* ==========================================================================
   11. Footer
   ========================================================================== */
.footer { padding-block: 3rem 1.5rem; border-top: var(--borde); background: var(--blanco); }
.footer__inner { display: grid; gap: 1.7rem; }
.footer__marca img { height: 2.4rem; }
.footer__contacto { display: grid; gap: 0.35rem; margin: 0.75rem 0 0; font-size: 0.9rem; }
.footer__contacto a:hover { color: var(--violeta); }
.footer__links, .footer__redes { display: flex; flex-wrap: wrap; gap: 0 1.3rem; margin: 0; padding: 0; list-style: none; }
.footer__redes { margin-top: 0.5rem; font-size: 0.85rem; }
.footer__links a, .footer__redes a { display: inline-block; padding-block: 0.7rem; } /* zona táctil cómoda en mobile */
.footer__redes a:hover { color: var(--violeta); }
.footer__link { font-family: var(--fuente-extendida); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; }
.footer__link:hover { text-decoration: underline; text-underline-offset: 0.25rem; }
.footer__legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #12062b1f; color: var(--tinta-suave); font-size: 0.75rem; line-height: 1.5; }
.footer__legal a { color: var(--tinta); text-decoration: underline; text-underline-offset: 0.2rem; }
.footer__legal a:hover { color: var(--violeta); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 390px) {
  .container { width: min(100% - 2.5rem, var(--contenedor)); }
  .productos__grilla { gap: 1rem; }
  .producto { padding: 1.25rem; }
  .categorias__grilla { margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-inline: 1.25rem; }
}

@media (min-width: 768px) {
  .header__toggle { display: none; }
  .header__nav { position: static; display: block; padding: 0; border: 0; box-shadow: none; }
  .header__lista { display: flex; align-items: center; gap: 0.15rem; }
  .header__link { padding: 0.7rem 0.75rem; font-size: 0.62rem; }
  .header__link--cta { margin-left: 0.5rem; padding-inline: 1.1rem; border-radius: var(--radio-pill); }

  :root { --solape: 6rem; }
  .hero { padding-block: 3rem calc(var(--solape) + 5rem); }
  .hero__puntos { bottom: calc(var(--solape) + 2rem); }
  .hero__inner { column-gap: 2.5rem; padding-inline: 3.5rem; }
  .hero__logo { align-self: center; width: clamp(12rem, 24vw, 20rem); }
  .hero__titulo { max-width: 18ch; font-size: clamp(3rem, 5.4vw, 5.4rem); }
  .hero__kicker { font-size: 0.75rem; }
  .hero__texto { font-size: 1.1rem; }
  .categoria { flex-basis: 30%; padding: 0.9rem; }
  .categoria__titulo { font-size: 1.4rem; }
  .categoria__texto { font-size: 0.85rem; }
  .hero__texto { display: block; }
  .hero__flecha { display: grid; }
  .flota { width: var(--s); }
  .flota--desktop { display: block; }

  /* Una fila: textos | mecha | contador (a la derecha) */
  .countdown__inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
  .countdown__textos { text-align: left; }
  .mecha { grid-row: 1; grid-column: 2; }
  .countdown { padding-block: 1.6rem; }
  .countdown__etiqueta { font-size: 0.8rem; }
  .countdown__reloj { grid-row: 1; grid-column: 3; grid-template-columns: repeat(4, 4.8rem); gap: 0.65rem; }
  .countdown__caja { min-height: 4.3rem; }
  .countdown__numero { font-size: 2.6rem; }
  .mecha__leyenda { font-size: 0.64rem; }
  .countdown__fin { grid-row: 1; grid-column: 2 / -1; text-align: right; }

  .seccion { padding-block: 5rem; }
  .seccion__encabezado { margin-bottom: 2.5rem; }
  .categorias { padding-bottom: 2.5rem; }
  .marcas__grilla { gap: 1.1rem; }
  .marca { flex-basis: clamp(8.5rem, 12vw, 10.5rem); max-width: none; }
  .productos__grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .producto { min-height: 24rem; }
  .producto__nombre { font-size: 1.45rem; }

  .editorial { grid-template-columns: 1fr 1fr; min-height: 35rem; }
  .editorial__visual { aspect-ratio: auto; }
  .editorial__copy { padding: 4rem clamp(2rem, 6vw, 6rem); }
  .editorial--invertido .editorial__copy { order: -1; }
  .editorial--invertido .editorial__visual { border-left: var(--borde); }
  .editorial:not(.editorial--invertido) .editorial__visual { border-right: var(--borde); }

  .financiacion__tarjeta { grid-template-columns: auto 1fr auto; align-items: center; padding: 2.5rem; }
  .financiacion .btn { align-self: end; }
  .financiacion__boom { top: -1.4rem; right: 2rem; }

  .cierre__mecha { right: 2rem; bottom: 1rem; width: 14rem; height: 13rem; }

  .footer__inner { grid-template-columns: 1fr auto; align-items: start; }
  .footer__links, .footer__redes { justify-content: flex-end; }
}

@media (min-width: 1024px) {
  :root { --solape: 7.5rem; }
  .categorias__grilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-inline: 0; padding: 0; overflow: visible; }
  .categoria { padding: 1rem; }
  .categoria__titulo { font-size: 1.55rem; }
}

@media (min-width: 1440px) {
  .container { width: min(100% - 4rem, var(--contenedor)); }
  .seccion { padding-block: 6rem; }
  .header__link { font-size: 0.7rem; padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; translate: none; }
  .hero__punto.is-active .hero__progreso { transform: scaleX(1); }
}