/* Axis cerró sus puertas (2026-10-19). */
:root {
  color-scheme: dark;
  --bg: #070a12;
  --vidrio: rgba(255,255,255,.055);
  --vidrio-alto: rgba(255,255,255,.088);
  --borde: rgba(255,255,255,.11);
  --texto: #f2f5fb;
  --tenue: #a7b0c2;
  --debil: #6f7b92;
  --carrera: #d9663a;
  --carrera-2: #ef9563;
  --r: 22px;
  --cielo: env(safe-area-inset-top, 0px);
  --resorte: cubic-bezier(.34, 1.45, .5, 1);
  --suave: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100dvh;
}
button { font-family: inherit; }
/* Sin JS no hay animación: el título quieto, a la vista. */
.cz-quieto .cz-titulo { padding: 0 28px; }

/* Mientras se ve el aviso no se dibuja nada más. */
html.cerrado, html.cerrado body { overflow: hidden; background: var(--bg); }
html.cerrado body > :not(.cz-cierre) { display: none !important; }

.cz-cierre {
  --c1: var(--carrera-2);
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--bg); color: var(--texto);
  padding: var(--cielo) 0 env(safe-area-inset-bottom, 0px);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.cz-cierre.golpe { animation: cz-golpe .32s ease-out; }
@keyframes cz-golpe { 30% { transform: translateY(2px); } 60% { transform: translateY(-1px); } }

/* Lo que queda detrás de las hojas, que se apaga. */
.cz-cierre .cz-app {
  position: absolute; inset: 0; padding: calc(70px + var(--cielo)) 20px 20px; display: grid; gap: 12px; align-content: start;
  max-width: 720px; margin: 0 auto; opacity: .9; animation: cz-app-apaga 1.4s ease .9s forwards;
}
@keyframes cz-app-apaga { to { opacity: .15; filter: blur(3px); } }
.cz-cierre .cz-app i { display: block; border-radius: var(--r); background: var(--vidrio); border: 1px solid var(--borde); }
.cz-cierre .cz-app i:nth-child(1) { height: 30px; width: 46%; border-radius: 999px; border: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); }
.cz-cierre .cz-app i:nth-child(2) { height: 150px; background: linear-gradient(135deg, color-mix(in srgb, var(--carrera) 22%, transparent), var(--vidrio)); }
.cz-cierre .cz-app i:nth-child(3), .cz-cierre .cz-app i:nth-child(4) { height: 86px; }
.cz-cierre .cz-app i:nth-child(5) { height: 120px; }

/* Las dos hojas. Pasan 1 % de largo y vuelven: el golpe. */
.cz-hoja {
  position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #0d1220, #080b14);
  animation: 1.25s cubic-bezier(.7, 0, .2, 1) .5s forwards;
}
.cz-hoja.izq { left: 0; transform: translateX(-101%); animation-name: cz-cierra-izq;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.07), 30px 0 60px -30px #000; }
.cz-hoja.der { right: 0; transform: translateX(101%); animation-name: cz-cierra-der;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.07), -30px 0 60px -30px #000; }
@keyframes cz-cierra-izq { 0% { transform: translateX(-101%); } 88% { transform: translateX(1.2%); } 100% { transform: translateX(0); } }
@keyframes cz-cierra-der { 0% { transform: translateX(101%); } 88% { transform: translateX(-1.2%); } 100% { transform: translateX(0); } }

/* La junta: se prende de punta a punta y después se recoge hacia el
   centro de la marca hasta medir su eje (--oy y --ky los mide JS). */
.cz-junta {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 2;
  background: linear-gradient(transparent 4%, var(--texto) 28%, var(--texto) 44%, transparent 58%);
  transform: scaleY(0); opacity: .85; transform-origin: 50% var(--oy, 40%);
  animation: cz-junta 1s var(--suave) 1.75s forwards, cz-junta-recoge .75s cubic-bezier(.7, 0, .25, 1) 2.75s forwards;
}
@keyframes cz-junta { to { transform: scaleY(1); } }
@keyframes cz-junta-recoge {
  0% { transform: scaleY(1); opacity: .85; }
  82% { transform: scaleY(var(--ky, .2)); opacity: .9; }
  100% { transform: scaleY(var(--ky, .2)); opacity: 0; }
}

.cz-contenido { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; padding: 0 28px; }

/* La marca grande: la capa de color titila y queda la gris de abajo. */
.cz-marca { position: relative; width: min(210px, 54vw, 30vh); aspect-ratio: 1; margin-top: 20px; cursor: default; }
.cz-marca svg { width: 100%; height: 100%; overflow: visible; }
.cz-marca .eje { stroke-width: 10; stroke-linecap: round; fill: none; }
.cz-marca .arco { stroke-width: 9; fill: none; stroke-linecap: butt; opacity: 0; }
.cz-stop-1 { stop-color: var(--carrera-2); }
.cz-stop-2 { stop-color: var(--carrera); }
.cz-color .eje, .cz-color .arco { stroke: url(#cz-marca-grad); }
.cz-color .piv { fill: url(#cz-marca-grad); }
.cz-gris .eje, .cz-gris .arco { stroke: #2b3242; }
.cz-gris .piv { fill: #2b3242; }
.cz-color { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--carrera) 38%, transparent));
  animation: cz-titila 1.8s linear 5.7s forwards; }
.cz-color .eje { opacity: 0; animation: cz-aparece .2s ease 3.3s forwards; }
.cz-marca .piv { transform-box: fill-box; transform-origin: center; transform: scale(0);
  animation: cz-pop .5s cubic-bezier(.34, 1.6, .5, 1) 4.55s forwards; }
.cz-gris { opacity: 0; animation: cz-aparece .1s linear 5.7s forwards; }
.cz-onda { fill: none; stroke: var(--carrera-2); stroke-width: 2; opacity: 0;
  transform-box: fill-box; transform-origin: center; animation: cz-onda 1.1s cubic-bezier(.2, .7, .3, 1) 4.65s; }
@keyframes cz-onda { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(5.5); } }
@keyframes cz-aparece { to { opacity: 1; } }
@keyframes cz-pop { 0% { transform: scale(0); } 65% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes cz-titila {
  0% { opacity: 1; } 6% { opacity: .25; } 10% { opacity: 1; } 17% { opacity: .1; } 21% { opacity: .95; }
  28% { opacity: .5; } 100% { opacity: 0; }
}
.cz-marca-letras { margin-top: 6px; font-weight: 800; font-size: 1.1rem; letter-spacing: .55em; padding-left: .55em; color: var(--c1);
  opacity: 0; animation: cz-letras 1.1s var(--suave) 4.8s forwards, cz-letras-apaga 1.8s linear 5.7s forwards; }
@keyframes cz-letras { from { opacity: 0; letter-spacing: .1em; } to { opacity: 1; letter-spacing: .55em; } }
@keyframes cz-letras-apaga {
  0% { color: var(--c1); } 6% { color: var(--debil); } 10% { color: var(--c1); } 17% { color: var(--debil); }
  21% { color: var(--c1); } 28% { color: var(--debil); } 100% { color: #3a4254; letter-spacing: .75em; }
}

/* Los textos: palabra por palabra, de borroso a nítido. */
.cz-txt { margin-top: 26px; max-width: 30ch; padding: 0 20px; }
.cz-titulo { font-size: 1.85rem; font-weight: 750; letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.cz-frase { margin: 14px 0 0; font-size: 1.04rem; line-height: 1.5; color: var(--tenue); }
.cz-frase em { font-style: normal; color: var(--c1); font-weight: 650; }
.cz-p { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(8px);
  animation: cz-palabra .9s var(--suave) var(--d) forwards; }
@keyframes cz-palabra { to { opacity: 1; filter: blur(0); transform: none; } }
@media (min-width: 900px) {
  .cz-titulo { font-size: 2.5rem; }
  .cz-frase { font-size: 1.15rem; }
  .cz-txt { max-width: 34ch; }
}

/* «Me gustó Axis»: una vez por aparato. */
.cz-pie { margin-top: 30px; opacity: 0; transform: translateY(6px); animation: cz-palabra .8s var(--suave) var(--d) forwards; }
.cz-gusto {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px 0 15px;
  border-radius: 999px; border: 1px solid var(--borde); background: var(--vidrio);
  color: var(--texto); font: 600 .9rem/1 inherit; cursor: pointer; transition: background .2s, transform .2s var(--resorte);
}
.cz-gusto:hover { background: var(--vidrio-alto); }
.cz-gusto:active { transform: scale(.96); }
.cz-gusto svg { width: 17px; height: 17px; stroke: var(--c1); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: fill .25s, transform .45s var(--resorte); }
.cz-gusto.dado { border-color: color-mix(in srgb, var(--carrera) 45%, transparent);
  background: color-mix(in srgb, var(--carrera) 14%, transparent); cursor: default; }
.cz-gusto.dado svg { fill: var(--c1); transform: scale(1.18); }
.cz-chispa { position: absolute; left: 25px; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%;
  background: var(--c1); pointer-events: none; animation: cz-chispa .6s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes cz-chispa { from { transform: none; opacity: 1; } to { transform: rotate(var(--a)) translateY(-22px) scale(.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cz-cierre, .cz-cierre * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}