/* Stack Pack - escaparate. Direccion "La Torre": la web no habla de la torre, la web ES la
   torre, y la construyes tu al bajar. Una sola torre dibujada en un lienzo fijo detras del texto;
   el scroll es el mando. Los estilos de las paginas legales viven aparte, en estilos.css. */

@font-face {
  font-family: 'Lilita One';
  src: url('fuentes/LilitaOne-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('fuentes/Fredoka-Variable.ttf') format('truetype');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  --tinta-1: rgba(255,255,255,.96); --tinta-2: rgba(255,255,255,.76); --tinta-3: rgba(255,255,255,.55);
  --ambar: #FFC45C; --ambar-alto: #FFD98A; --ambar-bajo: #E8A63E; --ambar-canto: #9C6D1E;
  --hielo: #BFE3FF; --caos: #FF7A9C; --azul: #048ABF;
  --cielo-1: #2A1C58; --cielo-2: #140C30; --cielo-3: #05030E;
  --f-d: 'Lilita One', system-ui, sans-serif; --f-t: 'Fredoka', system-ui, sans-serif;
  --px: 0; --py: 0;
  --extru: 0 2px 0 #2E1D5C, 0 4px 0 #2B1B57, 0 6px 0 #281950, 0 8px 0 #241649, 0 10px 0 #201342,
           0 12px 0 #1C103A, 0 14px 0 #180D32, 0 16px 0 #140B2A, 0 18px 0 #100822, 0 30px 44px rgba(0,0,0,.7);
  color-scheme: dark;
}
body { margin: 0; background: #05030E; font-family: var(--f-t); color: var(--tinta-1); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ambar); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--hielo); outline-offset: 4px; border-radius: 6px; }

.sp { position: relative; width: 100%; overflow-x: clip; }
.sp[data-modo="purga"] { --cielo-1: #4A0F33; --cielo-2: #2A0722; --cielo-3: #12000E; --hielo: #FFC7DA; }

/* ── el telón: el mundo se enciende ─────────────────────────────────── */
.sp-telon { position: fixed; inset: 0; z-index: 20; background: #05030E; pointer-events: none;
  transition: opacity 900ms cubic-bezier(.4,0,.2,1); }
.sp[data-encendido="si"] .sp-telon { opacity: 0; }
.sp-lienzo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.sp-cielo { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 62% 12%, var(--cielo-1) 0%, var(--cielo-2) 48%, var(--cielo-3) 100%);
  transition: background 900ms cubic-bezier(.4,0,.2,1), opacity 1200ms ease 200ms; }
.sp[data-encendido="si"] .sp-cielo { opacity: 1; }
.sp-haz { position: fixed; inset: -10% -20%; z-index: -1; pointer-events: none; opacity: 0;
  transform: translate3d(calc(var(--px) * -26px), calc(var(--py) * -16px), 0);
  transition: opacity 1400ms ease 500ms; }
.sp[data-encendido="si"] .sp-haz { opacity: .75; }
.sp-grano { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .05; transition: opacity 500ms ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
.sp[data-modo="purga"] .sp-grano { opacity: .16; }
.sp-vineta { position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 45%, transparent 40%, rgba(5,3,14,.74) 100%); }

/* ── cromo ──────────────────────────────────────────────────────────── */
.sp-hud { position: fixed; z-index: 6; display: flex; align-items: center; gap: 12px;
  top: 0; left: 0; right: 0; height: 72px; padding: 0 clamp(16px, 3vw, 40px); opacity: 0;
  transition: opacity 800ms ease 900ms; }
.sp[data-encendido="si"] .sp-hud { opacity: 1; }
.sp-marca { display: flex; align-items: center; gap: 11px; }
.sp-marca span { font-family: var(--f-d); font-size: 19px; letter-spacing: .04em; }
.sp-pildora { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(5,3,14,.5);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--tinta-2); }
.sp-pildora b { font-family: var(--f-d); font-weight: 400; font-size: 15px; color: var(--tinta-1); letter-spacing: 0; }
.sp-icono { width: 16px; height: 16px; flex: none; }

.sp-regla { position: fixed; right: clamp(14px, 2.4vw, 34px); top: 50%; transform: translateY(-50%);
  z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; opacity: 0;
  transition: opacity 800ms ease 1100ms; }
.sp[data-encendido="si"] .sp-regla { opacity: 1; }
.sp-marca-piso { display: flex; align-items: center; gap: 9px; opacity: .26; transition: opacity 400ms ease; }
.sp-marca-piso[data-activo="si"] { opacity: 1; }
.sp-marca-piso i { display: block; width: 12px; height: 2px; background: var(--tinta-2); border-radius: 2px;
  transition: width 400ms cubic-bezier(.4,0,.2,1), background 400ms ease; }
.sp-marca-piso[data-activo="si"] i { width: 32px; background: var(--ambar); }
.sp-marca-piso span { font-size: 9px; font-weight: 600; letter-spacing: .18em; color: var(--tinta-3); }
.sp[data-modo="purga"] .sp-marca-piso[data-activo="si"] i { background: var(--caos); }

.sp-anillo { position: fixed; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 34px); z-index: 6;
  width: 104px; height: 104px; pointer-events: none; opacity: 0; transition: opacity 800ms ease 1000ms; }
.sp[data-encendido="si"] .sp-anillo { opacity: 1; }
.sp-anillo-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.sp-anillo-centro b { display: block; font-family: var(--f-d); font-size: 22px; line-height: 1; }
.sp-anillo-centro span { display: block; font-size: 8px; font-weight: 600; letter-spacing: .22em; color: var(--tinta-3); margin-top: 3px; }

/* ── tiempos y tipografía cinética ──────────────────────────────────── */
.sp-tiempo { position: relative; z-index: 1; min-height: 100svh; display: flex; align-items: center;
  padding: 104px clamp(20px, 6vw, 96px); box-sizing: border-box; }
.sp-caja { max-width: 540px; }
.sp-caja--der { margin-left: auto; }
.sp-caja--centro { margin: 0 auto; text-align: center; max-width: 760px; }

.sp-rotulo { font-size: 11px; font-weight: 600; letter-spacing: .38em; color: var(--ambar);
  text-transform: uppercase; margin: 0 0 20px; display: flex; align-items: center; gap: 12px; }
.sp-caja--centro .sp-rotulo { justify-content: center; }
.sp-rotulo::before { content: ''; width: 26px; height: 1px; background: currentColor; flex: none; opacity: .7; }
.sp-rotulo--hielo { color: var(--hielo); } .sp-rotulo--caos { color: var(--caos); }

.sp-titular { font-family: var(--f-d); font-weight: 400; margin: 0 0 20px;
  font-size: clamp(38px, 6.6vw, 82px); line-height: .96;
  text-shadow: 0 2px 0 #241649, 0 4px 0 #1C103A, 0 16px 30px rgba(0,0,0,.55); }
.sp-linea { display: block; overflow: hidden; }
.sp-linea > span { display: block; transform: translateY(105%); transition: transform 760ms cubic-bezier(.16,1,.3,1); }
.sp-tiempo[data-visto="si"] .sp-linea > span { transform: none; }
.sp-linea:nth-child(2) > span { transition-delay: 80ms; }
.sp-linea:nth-child(3) > span { transition-delay: 160ms; }

.sp-parrafo { margin: 0; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; color: var(--tinta-2); max-width: 46ch; }
.sp-caja--centro .sp-parrafo { margin-left: auto; margin-right: auto; }
.sp-parrafo em { font-style: normal; color: var(--hielo); font-weight: 600; }
.sp-parrafo b { color: var(--caos); font-weight: 600; }

.sp-entra { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.16,1,.3,1); }
.sp-tiempo[data-visto="si"] .sp-entra { opacity: 1; transform: none; }
.sp-tiempo[data-visto="si"] .sp-entra { transition-delay: 240ms; }
.sp-tiempo[data-visto="si"] .sp-entra.sp-entra--tarde { transition-delay: 380ms; }

/* ── portada ────────────────────────────────────────────────────────── */
.sp-logo { font-family: var(--f-d); font-size: clamp(58px, 11.5vw, 152px); line-height: .84;
  margin: 0 0 24px; text-shadow: var(--extru); }
.sp-logo span { display: inline-block; opacity: 0; transform: translateY(-140px) rotate(-7deg); }
.sp[data-encendido="si"] .sp-logo span { animation: sp-caer 900ms cubic-bezier(.22,1.15,.36,1) forwards; }
@keyframes sp-caer { to { opacity: 1; transform: none; } }

.sp-botones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 32px; }
.sp-caja--centro .sp-botones { justify-content: center; }
.sp-boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 60px; padding: 0 30px; border-radius: 999px; font-size: 17px; font-weight: 600; white-space: nowrap;
  transition: transform 160ms cubic-bezier(.2,.7,.2,1), box-shadow 160ms ease; will-change: transform; }
.sp-boton--ambar { background: linear-gradient(180deg, var(--ambar-alto), var(--ambar) 45%, var(--ambar-bajo));
  color: #1A1030; box-shadow: 0 6px 0 var(--ambar-canto), 0 18px 40px rgba(255,196,92,.26); }
.sp-boton--ambar:hover { color: #1A1030; box-shadow: 0 8px 0 var(--ambar-canto), 0 24px 50px rgba(255,196,92,.34); }
.sp-boton--ambar:active { transform: translateY(4px) !important; box-shadow: 0 2px 0 var(--ambar-canto); }
.sp-boton--borde { border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.05); }
.sp-boton--borde:hover { color: var(--tinta-1); border-color: rgba(255,255,255,.5); }

.sp-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px;
  background: rgba(5,3,14,.72); border: 1px solid rgba(255,196,92,.45); font-size: 13px; font-weight: 600; }
.sp-chip i { width: 7px; height: 7px; border-radius: 999px; background: var(--ambar); flex: none; }
.sp-chip--caos { border-color: rgba(255,122,156,.5); } .sp-chip--caos i { background: var(--caos); }

/* ── PISO 02: la palabra hueca y el botón de soltar ─────────────────── */
.sp-hueca { font-family: var(--f-d); font-size: clamp(54px, 11vw, 150px); line-height: .88; margin: 0 0 8px;
  color: transparent; -webkit-text-stroke: 2px rgba(255,196,92,.55); letter-spacing: .01em; }
.sp-tiempo[data-visto="si"] .sp-hueca { animation: sp-respira 4s ease-in-out infinite; }
@keyframes sp-respira { 0%,100% { -webkit-text-stroke-color: rgba(255,196,92,.4) } 50% { -webkit-text-stroke-color: rgba(255,196,92,.85) } }
.sp-soltar { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 26px;
  border-radius: 999px; border: 1px dashed rgba(255,196,92,.6); background: rgba(255,196,92,.08);
  font-size: 15px; font-weight: 600; letter-spacing: .04em; transition: all 200ms ease; }
.sp-soltar:hover { background: rgba(255,196,92,.16); border-style: solid; }
.sp-soltar[data-hecho="si"] { border-color: rgba(191,227,255,.5); background: rgba(191,227,255,.08); }
.sp-soltar i { width: 9px; height: 9px; border-radius: 999px; background: var(--ambar); flex: none;
  animation: sp-latido 1.4s ease-in-out infinite; }
@keyframes sp-latido { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.5); opacity: .5 } }

/* ── PISO 03: el titular partido ────────────────────────────────────── */
.sp-partido > span:last-child { display: block; transform: translateX(0); transition: transform 900ms cubic-bezier(.16,1,.3,1) 200ms; }
.sp-tiempo[data-visto="si"] .sp-partido > span:last-child { transform: translateX(clamp(18px, 4vw, 64px)); }

/* ── PISO 05: la rotura ─────────────────────────────────────────────── */
.sp-roto { position: relative; }
.sp-tiempo[data-visto="si"] .sp-roto { animation: sp-glitch 3.4s steps(1) infinite; }
@keyframes sp-glitch {
  0%, 84%, 100% { text-shadow: 0 2px 0 #3A0A28, 0 16px 30px rgba(0,0,0,.6) }
  86% { text-shadow: 4px 0 var(--caos), -4px 0 var(--hielo), 0 2px 0 #3A0A28 }
  88% { text-shadow: -6px 0 var(--caos), 6px 0 var(--hielo), 0 2px 0 #3A0A28 }
  90% { text-shadow: 2px 0 var(--caos), -2px 0 var(--hielo), 0 2px 0 #3A0A28 }
}
.sp-tiempo[data-tiempo="5"][data-visto="si"] .sp-caja { animation: sp-temblor 340ms ease-in-out 3; }
@keyframes sp-temblor {
  0%,100% { transform: translate(0,0) } 25% { transform: translate(-3px,2px) }
  50% { transform: translate(3px,-2px) } 75% { transform: translate(-2px,-2px) }
}

/* ── PISO 07: el móvil ──────────────────────────────────────────────── */
.sp-fono { position: relative; width: min(300px, 74vw); aspect-ratio: 30/61; flex: none;
  border-radius: 38px; border: 1px solid rgba(255,255,255,.18); overflow: hidden;
  background: linear-gradient(180deg, hsl(252 45% 13%), hsl(258 55% 5%));
  box-shadow: 0 50px 110px rgba(0,0,0,.7), inset 0 0 0 6px rgba(255,255,255,.05);
  transform: rotate(-3deg) translateY(20px); opacity: 0;
  transition: transform 1000ms cubic-bezier(.16,1,.3,1), opacity 800ms ease; }
.sp-tiempo[data-visto="si"] .sp-fono { transform: rotate(-3deg); opacity: 1; }
.sp-fono-hud { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 18px; }
.sp-fono-anillo { position: relative; width: 132px; margin-top: 8px; }
.sp-fono-anillo > span { position: absolute; inset: 0; display: grid; place-content: center;
  font-family: var(--f-d); font-size: 25px; }
.sp-fono-perf { font-family: var(--f-d); font-size: 19px; color: var(--ambar); margin-top: 6px; }

.sp-rail { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px, 2.4vw, 30px); margin-top: 30px; }
.sp-rail article { padding: 22px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035); transition: transform 300ms cubic-bezier(.2,.7,.2,1), border-color 300ms ease; }
.sp-rail article:hover { transform: translateY(-6px); border-color: rgba(255,196,92,.5); }
.sp-rail b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 21px; margin-bottom: 8px; }
.sp-rail p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tinta-2); }

.sp-sello { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 26px;
  border: 2px solid rgba(255,196,92,.5); border-radius: 14px; transform: rotate(-4deg); margin-bottom: 26px; }
.sp-sello b { font-family: var(--f-d); font-size: 42px; line-height: 1; color: var(--ambar); }
.sp-sello span { font-size: 9px; font-weight: 600; letter-spacing: .3em; color: var(--tinta-3); }

.sp-pie { position: relative; z-index: 1; padding: 40px clamp(20px, 6vw, 96px) 56px;
  border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; font-size: 13px; color: var(--tinta-3); }
.sp-baja { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .22em;
  color: var(--tinta-3); transition: opacity 500ms ease; pointer-events: none; }
@keyframes sp-flecha { 0%,100% { transform: translateY(0); opacity: .9 } 50% { transform: translateY(7px); opacity: .3 } }
.sp-baja svg { animation: sp-flecha 2.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .sp-logo span, .sp-baja svg, .sp-hueca, .sp-roto, .sp-tiempo .sp-caja { animation: none !important; }
  .sp-logo span { opacity: 1; transform: none; }
  .sp-entra, .sp-linea > span, .sp-fono { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 860px) {
  .sp-regla, .sp-baja { display: none; }
  .sp-anillo { width: 68px; height: 68px; }
  .sp-anillo-centro b { font-size: 17px; }
  .sp-rail { grid-template-columns: minmax(0,1fr); }
  /* El tercio de abajo es de la torre: el texto se queda arriba y no se pisan. */
  .sp-tiempo { align-items: flex-start; padding: 92px clamp(20px, 6vw, 96px) 40svh; }
  .sp-caja, .sp-caja--centro, .sp-caja--der { max-width: none; margin: 0; text-align: left; }
  .sp-caja--der .sp-rotulo, .sp-caja--centro .sp-rotulo { justify-content: flex-start; }
  .sp-caja--der .sp-parrafo, .sp-caja--centro .sp-parrafo { margin-left: 0; margin-right: 0; }
  .sp-caja--centro .sp-botones { justify-content: flex-start; }
  .sp-botones { gap: 10px; }
  .sp-boton { height: 54px; padding: 0 22px; font-size: 15px; width: 100%; }
  .sp-titular { margin-bottom: 16px; }
  .sp-sello { margin-bottom: 18px; }
  /* La cima lleva sello, dos lineas, parrafo y dos botones: en el telefono hay que apretarla
     para que el plano final de la torre entera quepa debajo sin comerse el texto. */
  .sp-tiempo[data-tiempo="9"] { padding-top: 64px; }
  .sp-tiempo[data-tiempo="9"] .sp-titular { font-size: clamp(30px, 8vw, 84px); }
  .sp-tiempo[data-tiempo="9"] .sp-parrafo { font-size: 15px; }
  .sp-sello { padding: 9px 18px; margin-bottom: 14px; }
  .sp-sello b { font-size: 32px; }
  /* El PISO 07 enseña el movil: ahi manda el movil, no la torre. */
  .sp-tiempo[data-tiempo="7"] { padding-bottom: 110px; flex-direction: column; gap: 26px; }
  .sp-fono { width: min(232px, 62vw); transform: rotate(-3deg) translateY(16px); margin: 0 auto; }
}

/* ── piezas que en el prototipo iban en estilos en linea ───────────────── */
.sp-idioma { display: flex; gap: 3px; padding: 3px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; }
.sp-idioma button { font-size: 11px; font-weight: 600; letter-spacing: .1em; padding: 5px 11px; border-radius: 999px; color: var(--tinta-3); }
.sp-idioma button[aria-pressed="true"] { background: rgba(255,255,255,.16); color: var(--tinta-1); }

.sp-reclamo { font-size: clamp(19px, 2.1vw, 28px); color: var(--tinta-1); font-weight: 500; line-height: 1.24; max-width: 30ch; }
.sp-nota { margin-top: 20px; font-size: 14px; color: var(--tinta-3); }
.sp-rotulo--fin { justify-content: flex-end; }
.sp-titular--purga { font-size: clamp(44px, 9.6vw, 116px); letter-spacing: .02em; }
.sp-titular--chico { font-size: clamp(34px, 4.6vw, 58px); }
.sp-titular--cima { font-size: clamp(38px, 6.6vw, 84px); }
.sp-boton--grande { height: 72px; padding: 0 42px; font-size: 19px; }
.sp-enlace-azul { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.sp-pie-marca { font-size: 17px; font-weight: 600; color: var(--tinta-1); }
.sp-pie a { text-decoration: none; }
.sp-tiempo[data-tiempo="9"] { min-height: 112svh; }

@media (max-width: 860px) {
  .sp-solo-ancho { display: none; }
  .sp-reclamo { max-width: none; }
  .sp-boton--grande { height: 56px; padding: 0 24px; font-size: 16px; }
  .sp-pie { flex-direction: column; align-items: flex-start; gap: 10px; }
}