/* Base compartida por las variantes de landing: tokens, nav, teléfono, botones,
   footer. Cada variante agrega su propio layout encima. */

/* Fuentes self-hosted (variables, subset latin): evita el fetch render-blocking
   a Google Fonts y no filtra la IP del visitante a terceros. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  /* Rango real usado: 100 por defecto y 110 en los titulos (.display). El archivo
     se instancia a ese tramo — el eje completo (62-125) pesaba 33 KB de mas. */
  font-stretch: 100% 110%;
  font-display: swap;
  src: url('/fonts/archivo-latin-v2.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* La app tiene tema claro y oscuro; la landing también. `--deep` es la superficie
   siempre-oscura (badges, bloque familia, footer) y no se invierte: en modo claro
   es el contraste, en oscuro se funde apenas con el fondo. */
:root {
  --ink: #0e1726; /* noche de cancha */
  --ink-soft: #3a4657;
  --paper: #edf1f8; /* luz de gimnasio — un punto más oscura que las cards para que las secciones alternadas se separen */
  --card: #ffffff;
  --line: rgba(14, 23, 38, 0.09);
  --line-fuerte: rgba(14, 23, 38, 0.16);
  --deep: #0e1726;
  --deep-hover: #1a2740;
  --on-deep: #e7ecf5;
  --on-deep-soft: #8fa0b8;
  --naranja: #ea7330; /* el naranja del ícono de la app */
  --naranja-hot: #d9510a;
  --naranja-label: #a8481b; /* naranja p/ texto chico: AA sobre claro */
  /* El naranja del logotipo. Sobre el papel claro tiene que llegar a 4,5:1
     (texto chico en negrita), y `--naranja-hot` se queda en 3,6:1. */
  --naranja-marca: #b94809;
  /* Texto chico naranja sobre `--deep`. No se invierte con el tema, como el
     resto de la familia `--on-deep`: el naranja de tema claro cae a 3:1 contra
     esa superficie. */
  --naranja-on-deep: #f79055;
  --naranja-suave: #ffe7d6;
  --verde: #2ecc8f;
  --radius: 18px;
  --maxw: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef2f8;
    --ink-soft: #9babc2;
    --paper: #070c16;
    --card: #141f33;
    --line: rgba(255, 255, 255, 0.09);
    --line-fuerte: rgba(255, 255, 255, 0.18);
    --deep: #141f33;
    --deep-hover: #1b2942;
    --naranja-hot: #f79055;
    --naranja-label: #f79055;
    --naranja-marca: #f79055;
    --naranja-suave: rgba(234, 115, 48, 0.18);
  }
}
:root[data-theme='dark'] {
  --ink: #eef2f8;
  --ink-soft: #9babc2;
  --paper: #070c16;
  --card: #141f33;
  --line: rgba(255, 255, 255, 0.09);
  --line-fuerte: rgba(255, 255, 255, 0.18);
  --deep: #141f33;
  --deep-hover: #1b2942;
  --naranja-hot: #f79055;
  --naranja-label: #f79055;
  --naranja-marca: #f79055;
  --naranja-suave: rgba(234, 115, 48, 0.18);
}
:root[data-theme='light'] {
  --ink: #0e1726;
  --ink-soft: #3a4657;
  --paper: #edf1f8;
  --card: #ffffff;
  --line: rgba(14, 23, 38, 0.09);
  --line-fuerte: rgba(14, 23, 38, 0.16);
  --deep: #0e1726;
  --deep-hover: #1a2740;
  --naranja-hot: #d9510a;
  --naranja-label: #a8481b;
  --naranja-suave: #ffe7d6;
  --naranja-marca: #b94809;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Foco visible en todo lo interactivo: sobre los fondos oscuros (badges, nav,
   footer) el outline por default del browser casi no se ve. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
  border-radius: 6px;
}
.display {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 110;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
a {
  color: inherit;
}
img {
  max-width: 100%;
}
::selection {
  background: var(--naranja);
  color: #fff;
}

/* ---------- NAV ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Archivo';
  font-weight: 900;
  font-size: 1.25rem;
  text-decoration: none;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.logo img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
/* El "Basket" del logotipo es texto chico y en negrita (16 px), así que le
   corresponde 4,5:1 y no el 3:1 del texto grande. El naranja de la marca sobre
   el papel claro se queda en 3,6:1, y sobre el fondo profundo del pie —que es
   oscuro incluso con la página en claro— en 4,4:1. Cada superficie lleva el
   naranja que le sirve. */
.logo b {
  color: var(--naranja-marca);
}
.foot-grid .logo b {
  color: var(--naranja-on-deep);
}
.nav-cta {
  background: var(--deep);
  color: var(--on-deep);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 18px;
  border-radius: 99px;
  transition: background 0.15s;
}
.nav-cta:hover {
  background: var(--naranja);
}
/* A 320px (SE, Fold cerrado) el logo + el toggle + el CTA no entran y el botón
   de descarga se salía del viewport. El body tiene `overflow-x: hidden`, así que
   no se veía como scroll sino como CTA cortado. */
@media (max-width: 360px) {
  .wrap {
    padding: 0 16px;
  }
  .logo {
    font-size: 1.05rem;
    gap: 8px;
  }
  .logo img {
    width: 26px;
    height: 26px;
  }
  .nav-cta {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
}

/* toggle de tema: mismo gesto que el de la app. 44px = tap target mínimo. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 99px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--line-fuerte);
}
.theme-toggle svg {
  width: 19px;
  height: 19px;
}
.theme-toggle .luna {
  display: none;
}
:root[data-theme='dark'] .theme-toggle .luna,
:root:not([data-theme='light']) .theme-toggle .luna {
  display: block;
}
:root[data-theme='dark'] .theme-toggle .sol,
:root:not([data-theme='light']) .theme-toggle .sol {
  display: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .theme-toggle .luna {
    display: none;
  }
  :root:not([data-theme='dark']) .theme-toggle .sol {
    display: block;
  }
}
:root[data-theme='light'] .theme-toggle .sol {
  display: block;
}
:root[data-theme='light'] .theme-toggle .luna {
  display: none;
}

/* ---------- BADGES DE TIENDA ---------- */
.stores {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
/* Arte oficial de cada tienda, tal cual lo entregan sus kits: no se redibuja ni
   se reescribe el rótulo. Trae adentro su fondo, su relleno y su tipografía, así
   que acá sólo se fija el alto —el mismo para las dos— y el cambio de pieza.

   Apple entrega negra y blanca, así que sigue al tema. Google entrega UNA sola,
   negra: sobre fondo oscuro se apoya en su propio borde para despegarse.

   Al arte de Google se le recortó el transparente que traía alrededor (29 px
   arriba y abajo): a igual `height` se veía más chico que el de Apple. El margen
   de respeto que ese aire representaba lo da el `gap` de `.stores`. */
.badge {
  display: inline-flex;
  text-decoration: none;
  border-radius: 9px;
  transition: transform 0.15s;
}
.badge:hover {
  transform: translateY(-2px);
}
.badge img {
  display: block;
  height: 52px;
  width: auto;
}
/* Con la clase sola perdía contra `.badge img { display: block }`, que es más
   específica, y en tema claro se veían las DOS piezas de Apple. */
.badge .badge-clara {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .badge-oscura {
    display: none;
  }
  :root:not([data-theme='light']) .badge-clara {
    display: block;
  }
}
:root[data-theme='dark'] .badge-oscura {
  display: none;
}
:root[data-theme='dark'] .badge-clara {
  display: block;
}
:root[data-theme='light'] .badge-oscura {
  display: block;
}
:root[data-theme='light'] .badge-clara {
  display: none;
}

/* ---------- TELEFONO ---------- */
/* Marco de dispositivo dibujado en CSS: bisel de titanio con luz diagonal, canto
   interior brillante, botones laterales y sombra de contacto. Sin imágenes — el
   marco tiene que verse igual de nítido en cualquier densidad de pantalla.
   Las capturas se generan con canal alfa (`transparentBg` del set Landing en
   `tooling/ui-capture/capture-stores.mjs`), así que el fondo de la pantalla lo
   pone `--paper` y la app se compone encima. */
.phone {
  /* Bisel fino, como un teléfono actual. Los radios son CONCÉNTRICOS: el de la
     pantalla es el del marco menos el bisel, si no la curva se ve deformada. */
  --bisel: 8px;
  --radio: 44px;
  width: 300px;
  max-width: 100%;
  padding: var(--bisel);
  border-radius: var(--radio);
  background: linear-gradient(
    146deg,
    #6b7280 0%,
    #333a45 18%,
    #14181e 46%,
    #2c323c 72%,
    #4a5260 88%,
    #10141a 100%
  );
  box-shadow:
    /* filo pulido: luz arriba, penumbra abajo, cantos laterales apenas vivos */
    0 1px 1px rgba(255, 255, 255, 0.5) inset,
    0 -1px 1px rgba(0, 0, 0, 0.55) inset,
    1px 0 1px rgba(255, 255, 255, 0.16) inset,
    -1px 0 1px rgba(0, 0, 0, 0.4) inset,
    /* contorno propio, para que el aparato se recorte del fondo en cualquier tema */ 0 0 0 0.5px
      rgba(0, 0, 0, 0.55),
    /* apoyado: contacto corto + ambiente larga y baja */ 0 3px 8px -3px rgba(10, 16, 28, 0.45),
    0 22px 40px -20px rgba(10, 16, 28, 0.6);
  position: relative;
  flex-shrink: 0;
}
/* Botones: volumen + silencio a la izquierda, encendido a la derecha. */
.phone::before,
.phone::after {
  content: '';
  position: absolute;
  width: 1.5px;
  border-radius: 1.5px;
  background: linear-gradient(#6d7484, #262b33);
  pointer-events: none;
}
.phone::before {
  left: -1.5px;
  top: 88px;
  height: 22px;
  box-shadow:
    0 38px 0 0 #565d6b,
    0 74px 0 0 #565d6b;
}
.phone::after {
  right: -1.5px;
  top: 128px;
  height: 44px;
}
.phone .screen {
  border-radius: calc(var(--radio) - var(--bisel));
  overflow: hidden;
  position: relative;
  background: var(--paper);
  display: block;
  /* filo negro entre el vidrio y el marco */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.phone .screen img {
  display: block;
  width: 100%;
  height: auto;
}
.phone.sm {
  --bisel: 7px;
  --radio: 37px;
  width: 250px;
}
.phone-zone {
  display: flex;
  justify-content: center;
  position: relative;
}

/* ---------- SECCIONES ---------- */
section {
  padding: 80px 0;
  position: relative;
}
.sec-eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--naranja-label);
  margin-bottom: 14px;
}
h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  margin-bottom: 20px;
}
h1 .naranja {
  color: var(--naranja-hot);
}
h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: 16px;
}
.lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: 32px;
}
.sec-lead {
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 36rem;
}
.note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 20px;
}
.note b {
  color: var(--ink);
}
/* El alcance va en su propio renglon: junto al precio quedaba un bloque unico
   y en mobile se partia en cualquier lado. */
.note-alcance {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.note-alcance b {
  color: var(--ink);
}

/* líneas de cancha de fondo */
.court {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.court svg {
  position: absolute;
}

/* ---------- FOOTER ---------- */
footer {
  background: var(--deep);
  color: var(--on-deep-soft);
  padding: 48px 0 40px;
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
}
.foot-grid {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.foot-grid .logo {
  color: var(--on-deep);
}
/* Las redes van como enlaces de solo icono: 44px de lado para que el dedo las
   agarre, y el dibujo hereda el color del pie —así cambia con el tema sin
   necesidad de una pieza por tema—. El nombre accesible lo pone el `aria-label`,
   porque no hay texto visible. */
.foot-social {
  display: flex;
  gap: 4px;
  align-items: center;
}
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 99px;
  color: inherit;
  transition: color 0.15s;
}
.foot-social a:hover {
  color: var(--naranja);
}
.foot-social svg {
  width: 21px;
  height: 21px;
}
.foot-links {
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
}
/* padding vertical → tap target cómodo sin agrandar el texto. */
.foot-links a {
  text-decoration: none;
  transition: color 0.15s;
  padding: 6px 0;
}
.foot-links a:hover {
  color: #fff;
}
.disclaimer {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 24px;
  font-size: 0.78rem;
  line-height: 1.7;
  max-width: 60rem;
}

/* ---------- EL PIE SIGUE AL TEMA ---------- */
/* El pie nació sobre `--deep`, la superficie que NO se invierte, igual que las
   insignias de las tiendas. Con la página en claro eso lo deja como una franja
   oscura al final. Acá pasa a seguir al tema: en claro es papel, se separa con
   una línea en vez de con un bloque de color, y cada texto toma el naranja y la
   tinta que le sirven sobre fondo claro (el naranja de fondo oscuro daría 2,3:1
   sobre blanco). `--deep` sigue intacto para todo lo demás. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) footer {
    background: var(--card);
    color: var(--ink-soft);
    border-top-color: var(--line-fuerte);
  }
  :root:not([data-theme='dark']) .foot-grid .logo {
    color: var(--ink);
  }
  :root:not([data-theme='dark']) .foot-grid .logo b {
    color: var(--naranja-marca);
  }
  :root:not([data-theme='dark']) .foot-links a:hover {
    color: var(--ink);
  }
  :root:not([data-theme='dark']) .disclaimer {
    border-top-color: var(--line);
  }
}
:root[data-theme='light'] footer {
  background: var(--card);
  color: var(--ink-soft);
  border-top-color: var(--line-fuerte);
}
:root[data-theme='light'] .foot-grid .logo {
  color: var(--ink);
}
:root[data-theme='light'] .foot-grid .logo b {
  color: var(--naranja-marca);
}
:root[data-theme='light'] .foot-links a:hover {
  color: var(--ink);
}
:root[data-theme='light'] .disclaimer {
  border-top-color: var(--line);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- PAGINAS LEGALES (privacidad, terminos) ---------- */
/* Mismo lenguaje visual que la landing (tokens, tema claro/oscuro), en un
   layout de una columna legible para texto largo. */
.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: 56px 24px 84px;
}
.legal-title {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: 6px;
}
.legal-updated {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 38px;
}
/* Resetea el `padding:80px 0` que la landing pone a `section`: acá el ritmo lo
   da el margin entre secciones, no el padding de cada una. */
.legal section {
  padding: 0;
  margin-bottom: 26px;
}
.legal h2 {
  font-size: 1.15rem;
  margin-bottom: 9px;
}
.legal p {
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 38rem;
}
.legal p + p {
  margin-top: 10px;
}
.legal a {
  color: var(--naranja-hot);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.legal-back:hover {
  color: var(--ink);
}

/* Preguntas frecuentes: acordeón nativo, sin JavaScript. El texto de las
   respuestas vive en el DOM aunque el bloque esté plegado, así los buscadores
   y los motores de respuesta lo leen entero. */
.faq {
  max-width: 46rem;
  margin-top: 30px;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  padding: 18px 34px 18px 0;
  font-weight: 700;
  font-size: 1.05rem;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--naranja-label);
  border-bottom: 2px solid var(--naranja-label);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}
.faq summary:focus-visible {
  outline: 2px solid var(--naranja-hot);
  outline-offset: 2px;
  border-radius: 4px;
}
.faq details p {
  color: var(--ink-soft);
  padding-bottom: 22px;
  max-width: 42rem;
}
@media (prefers-reduced-motion: reduce) {
  .faq summary::after {
    transition: none;
  }
}