/* Página de lanzamiento de 57 Roller Store.
 * Tokens tomados de docs/design-system/tokens.json (tema oscuro / pieza de campaña). */
:root {
  --rosa-roller: #ff0066;
  --azul-electrico: #0052ff;
  --menta-57: #7df9d2;
  --rosa-accion: #ff3385;
  --on-accion: #0b0b0f;
  --foco: #00b8ff;
  --tinta: #f4f4f8;
  --tinta-suave: #b3b0c4;
  --fondo: #0b0b0f;
  --borde: #2e2b3d;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 4px;
  --inclinacion-57: -20deg;
  --font-sans: "Montserrat", Arial, system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { overflow-x: clip; }
body {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  font-family: var(--font-sans); color: var(--tinta); background: var(--fondo);
  position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

/* Franjas inclinadas: repiten el ángulo del 5 y el 7, como la portada del manual. */
.franjas {
  position: absolute; inset: 0 0 0 auto; width: 40vw; pointer-events: none; z-index: 0; overflow: hidden;
}
.franja {
  position: absolute; top: -10%; bottom: -10%;
  transform: skewX(var(--inclinacion-57)) translateX(120%);
  animation: entra 1.1s cubic-bezier(.2, .7, .1, 1) forwards;
}
.franja-rosa  { right: 34%; width: 22%; background: var(--rosa-roller); animation-delay: .05s; }
.franja-azul  { right: 12%; width: 14%; background: var(--azul-electrico); animation-delay: .2s; }
.franja-menta { right: 2%;  width: 3%;  background: var(--menta-57); animation-delay: .35s; }
@keyframes entra { to { transform: skewX(var(--inclinacion-57)) translateX(0); } }

.cabecera, .contenido, .pie { position: relative; z-index: 1; padding-inline: clamp(var(--space-4), 6vw, 96px); }

.cabecera { padding-top: clamp(var(--space-4), 4vh, var(--space-16)); }
/* Área de seguridad: el margen alrededor del logo supera la altura de la O de ROLLER. */
.logo { display: block; width: clamp(130px, min(16vw, 22vh), 220px); height: auto; }

.contenido {
  align-self: center; max-width: 900px;
  padding-block: clamp(var(--space-4), 3vh, var(--space-8));
}

.antetitulo {
  display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-6);
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .16em; color: var(--tinta-suave);
}

.titular {
  margin: 0; font-weight: 800; text-transform: uppercase;
  font-size: clamp(48px, min(9vw, 13vh), 144px); line-height: .92; letter-spacing: -0.03em;
}

.bajada {
  max-width: 34em; margin: var(--space-6) 0 0;
  font-size: clamp(15px, min(1.3vw, 2.4vh), 19px); line-height: 1.5; color: var(--tinta-suave);
}

/* Contador */
.contador {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(var(--space-4), 4vh, var(--space-12)); max-width: 720px;
  border-top: 1px solid var(--borde);
}
.celda {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: clamp(var(--space-3), 2.5vh, var(--space-6)) var(--space-4) 0 0;
}
.celda + .celda { padding-left: clamp(var(--space-3), 2vw, var(--space-6)); border-left: 1px solid var(--borde); }
.numero {
  font-size: clamp(36px, min(6vw, 11vh), 88px); line-height: 1; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.unidad {
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.celda-seg .unidad { color: var(--menta-57); }

.acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6);
  margin-top: clamp(var(--space-4), 3vh, var(--space-8));
}
.nota { font-size: 14px; line-height: 20px; color: var(--tinta-suave); }

.pie {
  display: flex; gap: var(--space-4) var(--space-8); flex-wrap: wrap;
  padding-block: clamp(var(--space-3), 2vh, var(--space-6)) clamp(var(--space-3), 2.5vh, var(--space-6));
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-suave);
}

/* Enlaces en el token enlace (tema oscuro), con foco de 2 px en foco. */
.enlace-red { color: var(--foco); text-decoration: none; }
.enlace-red:hover { text-decoration: underline; text-underline-offset: 3px; }
.enlace-red:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Componentes del design system (docs/design-system/componentes/estilos.css) */
.rs-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--space-2);
  border: 0; background: none; cursor: pointer; margin: 0 var(--space-2);
  padding: var(--space-3) var(--space-6); font-family: var(--font-sans); font-size: 13px; line-height: 16px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta); }
.rs-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-sm);
  transform: skewX(var(--inclinacion-57)); transition: filter .15s ease; }
.rs-btn:focus-visible { outline: none; }
.rs-btn:focus-visible::before { outline: 2px solid var(--foco); outline-offset: 3px; }
.rs-btn-primario { color: var(--on-accion); }
.rs-btn-primario::before { background: var(--rosa-accion); }
.rs-btn-primario:hover::before { filter: brightness(1.1); }
.acciones .rs-btn { padding: var(--space-4) var(--space-8); font-size: 14px; }

.rs-tag { position: relative; isolation: isolate; display: inline-block; padding: var(--space-1) var(--space-3);
  margin: 0 var(--space-1); font-size: 12px; line-height: 16px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-accion); }
.rs-tag::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-sm);
  transform: skewX(var(--inclinacion-57)); background: var(--rosa-accion); }

/* Estado: antes y después de la apertura */
.si-abierto { display: none; }
.abierto .si-espera { display: none; }
.abierto .si-abierto { display: block; }
.abierto .titular .si-abierto { display: inline; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Tablet y móvil: las franjas pasan a una banda propia entre el contenido y el pie, sin tapar texto.
 * Los tamaños dependen del alto de la pantalla para que todo quepa sin scroll; la banda solo usa el espacio que sobra. */
@media (max-width: 900px) {
  body { display: flex; flex-direction: column; }
  .cabecera { order: 1; padding-top: clamp(var(--space-3), 3vh, var(--space-8)); }
  .logo { width: clamp(110px, min(34vw, 15vh), 200px); }
  .contenido { order: 2; flex: none; align-self: stretch; padding-block: clamp(var(--space-3), 3vh, var(--space-8)); }
  .antetitulo { margin-bottom: clamp(var(--space-2), 2vh, var(--space-6)); }
  .titular { font-size: clamp(34px, min(13vw, 7.5vh), 96px); }
  .bajada { margin-top: clamp(var(--space-2), 2vh, var(--space-6)); font-size: clamp(14px, min(3.8vw, 2.3vh), 18px); }
  .contador { margin-top: clamp(var(--space-3), 2.5vh, var(--space-8)); }
  .celda { padding-top: clamp(var(--space-2), 1.5vh, var(--space-6)); }
  .numero { font-size: clamp(28px, min(9vw, 6vh), 64px); }
  .acciones { margin-top: clamp(var(--space-3), 2.5vh, var(--space-8)); gap: var(--space-2) var(--space-4); }
  .franjas { order: 3; position: relative; inset: auto; width: 100%; height: auto; flex: 1 1 0; min-height: var(--space-6); }
  .franja { top: 0; bottom: 0; }
  .franja-rosa  { right: 30%; width: 26%; }
  .franja-azul  { right: 8%;  width: 15%; }
  .franja-menta { right: -2%; width: 4%; }
  .pie { order: 4; gap: var(--space-1) var(--space-6); padding-block: clamp(var(--space-2), 1.5vh, var(--space-6)); }
}
/* Móvil: el contador queda en una sola fila de cuatro para ahorrar alto. */
@media (max-width: 520px) {
  .celda { padding-right: var(--space-2); }
  .celda + .celda { padding-left: var(--space-2); }
  .unidad { font-size: 10px; line-height: 14px; letter-spacing: .06em; }
  .acciones .rs-btn { padding: var(--space-3) var(--space-6); }
  .nota { font-size: 13px; line-height: 18px; }
  .pie { font-size: 10px; line-height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .franja { animation: none; transform: skewX(var(--inclinacion-57)); }
  .rs-btn::before { transition: none; }
}

/* Pantallas bajas (ventana de navegador en 16:9 con barras): reduce tamaños para que todo quepa sin scroll. */
@media (min-width: 901px) and (max-height: 680px) {
  .contenido { padding-block: 2vh; }
  .titular { font-size: clamp(40px, min(8vw, 11vh), 120px); }
  .bajada { margin-top: 2vh; }
  .contador { margin-top: 2.5vh; }
  .numero { font-size: clamp(30px, min(5vw, 9vh), 72px); }
  .celda { padding-top: 1.5vh; }
  .acciones { margin-top: 2.5vh; }
  .acciones .rs-btn { padding: var(--space-3) var(--space-6); }
  .antetitulo { margin-bottom: 2vh; }
  .logo { width: clamp(120px, min(14vw, 18vh), 200px); }
  .pie { padding-block: 1.5vh; }
}

/* Isotipo rebotando por la página (rebote.js). Va detrás del texto y no recibe clics. */
.rebote {
  position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none;
  width: clamp(180px, 21vw, 300px); height: auto; opacity: .6;
  will-change: transform;
}