/* SubZero · laboratorio de hero — base compartida por los 4 prototipos.
   Solo cambia el mecanismo; la barra, la tipografia y los tokens son identicos
   para que la comparacion sea justa. */

:root{
  --tinta:#06122C;
  --tinta-2:#0A1C42;
  --hielo:#F4F9FF;
  --neon:#00A3FF;
  --neon-claro:#1AD1FF;
  --neon-suave:#70BFFF;
  --apagado:#8FB3E0;
  --barra:108px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--tinta);
  color:var(--hielo);
  font-family:Montserrat,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* superficies del navegador: tambien son diseno */
::selection{background:var(--neon);color:var(--tinta)}
:focus-visible{outline:2px solid var(--neon-claro);outline-offset:3px;border-radius:2px}
:root{color-scheme:dark;caret-color:var(--neon-claro);scrollbar-color:var(--neon) var(--tinta)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--tinta)}
::-webkit-scrollbar-thumb{background:var(--neon);border:3px solid var(--tinta)}
::-webkit-scrollbar-thumb:hover{background:var(--neon-claro)}

/* ---------- tipografia display ---------- */
.titular{
  font-family:Unbounded,sans-serif;
  font-weight:900;
  font-size:clamp(38px,6.6vw,100px);
  line-height:.88;
  letter-spacing:-.035em;
  text-transform:uppercase;
  /* en em, o sea relativo a SU tamano: asi cae en tres lineas y no en cinco */
  max-width:8.4em;
  margin:0;
}
.dato{font-family:'Space Mono',monospace;font-weight:700;font-variant-numeric:tabular-nums}
.etiqueta{
  font-family:Orbitron,sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
}

/* ---------- barra fija: fecha, precio y compra siempre a la vista ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(6,18,44,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(112,191,255,.22);
  box-shadow:0 -8px 34px rgba(2,6,13,.55);
}
.urgencia{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:7px 16px;background:var(--neon);color:var(--tinta);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;
}
.urgencia .reloj{font-family:'Space Mono',monospace;font-variant-numeric:tabular-nums}
.barra-fila{
  display:flex;align-items:center;gap:20px;
  padding:12px 22px;max-width:1440px;margin:0 auto;
}
.barra-datos{display:flex;flex-direction:column;gap:3px;min-width:0}
.barra-cuando{
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--hielo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.barra-donde{font-size:11.5px;font-weight:600;color:var(--apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-precio{margin-left:auto;display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.barra-precio b{font-family:'Space Mono',monospace;font-size:21px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.barra-precio span{font-size:11px;font-weight:600;color:var(--apagado)}
.comprar{
  display:inline-flex;align-items:center;gap:11px;flex-shrink:0;
  background:var(--neon);color:var(--tinta);
  font-weight:800;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  padding:15px 24px;min-height:48px;border:0;cursor:pointer;text-decoration:none;
  box-shadow:0 8px 22px -8px rgba(0,163,255,.75);
  transition:background .28s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease;
}
.comprar:hover{background:var(--neon-claro);transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(0,163,255,.9)}
.comprar:active{transform:translateY(0)}
.comprar svg{width:15px;height:15px;flex-shrink:0}

@media (max-width:860px){
  .barra-fila{flex-wrap:wrap;gap:12px;padding:12px 16px}
  .barra-precio{margin-left:0;order:2}
  .comprar{order:3;margin-left:auto}
  .barra-datos{order:1;flex-basis:100%}
  .barra-cuando{font-size:11.5px}
}

/* ---------- cinta del laboratorio (solo en los prototipos) ---------- */
.lab{
  position:fixed;top:0;left:0;right:0;z-index:95;
  display:flex;align-items:center;gap:14px;padding:9px 18px;
  background:rgba(6,18,44,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(112,191,255,.18);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.lab a{color:var(--neon-suave);text-decoration:none;padding:4px 9px;border:1px solid transparent;transition:color .2s,border-color .2s}
.lab a:hover{color:var(--hielo);border-color:rgba(112,191,255,.4)}
.lab a[aria-current]{color:var(--tinta);background:var(--neon);border-color:var(--neon)}
.lab .marca{color:var(--apagado);margin-right:auto}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}