/* ---------------------------------------------------------------------------
   Sistema visual de trainapp.com

   LOS COLORES SALEN DE LA APP, no de una paleta inventada para la web: están
   copiados de `ios/trAIn/Core/Design/Theme.swift`. `ink` (#0E0E12) es el fondo
   de la app y `inkRaised` (#1A1A20) el de sus tarjetas.

   El fondo de la WEB es el de las TARJETAS, a propósito (fundador, 17-08): el
   negro casi puro resulta agresivo en una pantalla grande, donde la superficie
   iluminada es mucho mayor que en un móvil. Así el sitio sigue siendo el mismo
   producto sin castigar la vista.

   Tipografía del sistema: en Apple resuelve a SF Pro, que es exactamente lo
   que se busca, y evita cargar una fuente por red.
   --------------------------------------------------------------------------- */

:root {
  --ground: #1a1a20;        /* Theme.inkRaised — el fondo de las tarjetas */
  --sunken: #14141a;        /* un paso por debajo, para zonas de descanso   */
  --raised: #24242c;        /* tarjetas sobre el fondo                      */
  --raised-2: #2c2c36;
  --line: #33333d;
  --text: #f4f1ec;          /* Theme.bone                                   */
  --muted: #a5a29b;
  --faint: #74716b;
  --acid: #d9f24a;          /* Theme.acid                                   */
  --acid-ink: #1a1e05;
  --ember: #ff4d1f;         /* Theme.ember, solo para estados               */
  --measure: 68ch;
  --pad: clamp(1.15rem, 4vw, 2rem);
  --bar-h: 68px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: min(100% - 2 * var(--pad), 1080px); margin-inline: auto; }

h1, h2, h3 { line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.35rem + 4.3vw, 4.3rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.75rem); font-weight: 650; }
h3 { font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem); font-weight: 620; }
p { margin: 0; max-width: var(--measure); }
a { color: var(--acid); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; border-radius: 8px; }
img { max-width: 100%; display: block; }

.eyebrow {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--acid); margin: 0 0 0.9rem;
}
.lead-in { max-width: var(--measure); color: var(--muted); margin-top: 1.2rem; }
.note { font-size: 0.85rem; color: var(--faint); margin-top: 1.6rem; max-width: var(--measure); }

/* ---- barra superior ------------------------------------------------------
   Al estilo de Apple: alta, translúcida, con la navegación centrada y el
   conmutador de idioma a la derecha. En móvil la navegación baja a una
   segunda fila con desplazamiento horizontal en vez de esconderse tras un
   menú: son cuatro secciones, no veinte. */
header.bar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 76%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.bar .wrap {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 1rem; min-height: var(--bar-h);
}
.mark { font-weight: 680; letter-spacing: -0.03em; font-size: 1.3rem; color: var(--text); text-decoration: none; }
.mark b { color: var(--acid); font-weight: 680; }

nav.tabs { display: flex; justify-content: center; gap: 0.15rem; }
nav.tabs a {
  color: var(--muted); text-decoration: none; font-size: 0.93rem; font-weight: 520;
  padding: 0.45rem 0.85rem; border-radius: 999px; white-space: nowrap;
}
nav.tabs a:hover { color: var(--text); background: var(--raised); }
nav.tabs a[aria-current="page"] { color: var(--text); background: var(--raised); }

.lang { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; }
.lang button {
  font: inherit; font-size: 0.78rem; font-weight: 560; letter-spacing: 0.02em;
  padding: 0.28rem 0.72rem; border-radius: 999px; border: 0;
  background: transparent; color: var(--muted); cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--acid); color: var(--acid-ink); }

@media (max-width: 760px) {
  .bar .wrap { grid-template-columns: auto auto; grid-template-areas: "mark lang" "tabs tabs"; padding-block: 0.55rem; row-gap: 0.4rem; }
  .mark { grid-area: mark; }
  .lang { grid-area: lang; justify-self: end; }
  nav.tabs { grid-area: tabs; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
  nav.tabs::-webkit-scrollbar { display: none; }
}

/* ---- secciones ---- */
section { padding-block: clamp(3.2rem, 8vw, 6rem); border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
section.sunken { background: var(--sunken); }

.hero { padding-block: clamp(3.5rem, 10vw, 7.5rem) clamp(2.5rem, 7vw, 5rem); }
.hero p.lede { font-size: clamp(1.1rem, 1rem + 0.75vw, 1.42rem); color: var(--muted); margin-top: 1.5rem; max-width: 54ch; }
.h1-accent { color: var(--acid); }

.stats { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 2.2rem; }
.stat { border: 1px solid var(--line); border-radius: 999px; padding: 0.38rem 0.9rem; font-size: 0.85rem; color: var(--muted); background: var(--sunken); }
.stat b { color: var(--text); font-weight: 620; }

/* ---- el telefono ---------------------------------------------------------
   EL MARCO SE ADAPTA A LA IMAGEN, no al reves (fundador, 17-08). Sin
   `aspect-ratio`: la altura la pone la propia captura, asi que no hay franja
   gris posible por debajo ni recorte por arriba.

   LA BARRA DE ESTADO ES LA DE VERDAD (fundador, 17-08, por la noche). Antes se
   dibujaba aqui en CSS —hora 9:41, cobertura y bateria inventadas— sobre
   capturas recortadas. Se veia bien y era un decorado. Ahora las capturas
   llegan enteras, tal cual salen del movil, y de este lado solo queda lo que
   una captura NO puede contener porque es hardware: la barrita de inicio, aqui
   abajo. La isla dinamica va quemada en la propia imagen
   (`scripts/build_web_shots.py`), porque tiene que caer pixel a pixel sobre la
   hora real y en CSS no se puede garantizar eso a cualquier tamano. */
.phone {
  position: relative;
  width: 100%; margin-inline: auto;
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(150deg, #3a3a44 0%, #1e1e26 38%, #16161c 62%, #33333d 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),          /* filo metalico          */
    inset 0 1px 1px rgba(255, 255, 255, 0.12),    /* luz en el canto de arriba */
    0 30px 70px -34px rgba(0, 0, 0, 0.95);        /* la sombra que lo separa */
  line-height: 0;
}
/* La PANTALLA: mismo negro que el fondo de la app (`Theme.ink`), asi que si
   alguna captura no llenara el marco entero no se veria el corte. */
.phone .screen {
  border-radius: 38px; overflow: hidden;
  background: #0e0e12;
}
.phone img { width: 100%; height: auto; display: block; }

/* El indicador de inicio de iOS, la barrita de abajo. iOS no la captura —es
   una superposicion del sistema— asi que es lo unico que hay que reponer aqui.
   Va DENTRO de la pantalla y superpuesta sobre la imagen, como en el aparato:
   se apoya en el fondo oscuro y no necesita sitio reservado.

   En CSS y no quemada en la imagen, al reves que la isla: es una forma clara
   sobre negro, y el JPEG le pondria un halo alrededor. Vectorial queda limpia
   a cualquier tamano. Medidas del aparato real: 139 x 5 pt, a 8 pt del borde. */
.phone { container-type: inline-size; }
.phone .screen { position: relative; }
.phone .screen::after {
  content: ""; position: absolute; left: 50%; bottom: 1%;
  transform: translateX(-50%);
  width: 35.4%; height: 1.15cqw; min-height: 3px;
  border-radius: 999px; background: rgba(244, 241, 236, 0.82);
}

/* Botones laterales. Decorativos y por eso en pseudoelementos: no son
   contenido y no deben leerlos los lectores de pantalla. */
.phone::before, .phone::after {
  content: ""; position: absolute; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #45454f, #26262e);
}
.phone::before { left: -2px; top: 21%; height: 11%; box-shadow: 0 8.5% 0 #45454f; }
.phone::after  { right: -2px; top: 26%; height: 15%; }

/* Volumen: dos teclas, con el silencio encima. Se dibujan con un degradado a
   tramos sobre el mismo elemento para no anadir mas nodos vacios al HTML. */
.phone::before {
  height: 26%;
  background:
    linear-gradient(180deg, #45454f, #26262e) 0 0 / 2px 14% no-repeat,
    linear-gradient(180deg, #45454f, #26262e) 0 42% / 2px 24% no-repeat,
    linear-gradient(180deg, #45454f, #26262e) 0 74% / 2px 24% no-repeat;
  box-shadow: none;
}

/* Tres en fila en la portada; se apilan en móvil. */
.phone-row { display: grid; gap: clamp(1rem, 3vw, 2rem); margin-top: 3rem; }
@media (min-width: 720px) { .phone-row { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.phone-row figure { margin: 0; }
.phone-row figcaption { margin-top: 0.9rem; font-size: 0.88rem; color: var(--muted); text-align: center; }
.phone-row figcaption b { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.15rem; }

/* Alternadas, con su explicación al lado. */
.shots { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); margin-top: 3rem; }
/* Cuando la seccion es UNA captura y su explicacion, no hace falta tanto aire:
   el titular se queda pegado a lo que titula y la seccion ocupa poco mas que
   la imagen. */
h2 + .shots, .lead-in + .shots { margin-top: 1.6rem; }
section:has(> .wrap > .shots:only-of-type) { padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.shot { display: grid; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) {
  .shot { grid-template-columns: 1fr 290px; }
  .shot.flip { grid-template-columns: 290px 1fr; }
  .shot.flip .shot-text { order: 2; }
  .shot.flip .phone { order: 1; }
}
.shot .phone { max-width: 290px; }
/* UN MISMO <h3> HACE DOS TRABAJOS DISTINTOS, y por eso no puede medir igual
   (fundador, 17-08). Junto a una captura o dentro de un bloque de texto largo
   es el titular de esa idea, y ahi competia en tamano con la letra pequena de
   una tarjeta. Dentro de una rejilla de tarjetas si es un rotulo y se queda
   pequeno. El tamano lo pone el papel que cumple, no la etiqueta. */
.shot-text h3, .prose h3 {
  font-size: clamp(1.3rem, 1.05rem + 0.95vw, 1.85rem);
  letter-spacing: -0.02em;
}
.shot-text h3 { margin-bottom: 0.7rem; }
.shot-text p { color: var(--muted); }
.shot-text ul { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.95rem; }
.shot-text li { margin-bottom: 0.35rem; }

/* ---- rejilla de tarjetas ---- */
.grid3 { display: grid; gap: 1px; margin-top: 3rem; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (min-width: 720px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
.grid2 { display: grid; gap: 1px; margin-top: 2.6rem; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (min-width: 640px) { .grid2 { grid-template-columns: repeat(2, 1fr); } }
.cell { background: var(--raised); padding: 1.6rem 1.5rem; }
.cell h3 { margin-bottom: 0.6rem; }
.cell p { color: var(--muted); font-size: 0.95rem; }
.cell .n { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); display: block; margin-bottom: 0.9rem; }

/* ---- integraciones ---- */
.integration { background: var(--raised); padding: 1.35rem 1.4rem; display: flex; gap: 1rem; align-items: flex-start; }
.integration .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 0.55rem; flex: none; }
.integration.live .dot { background: var(--acid); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acid) 18%, transparent); }
.integration.soon .dot { background: var(--faint); }
.integration h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.integration p { font-size: 0.9rem; color: var(--muted); }
.integration .tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.integration.live .tag { color: var(--acid); }

/* ---- bloque de texto largo ---- */
.prose { margin-top: 2.2rem; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); padding: clamp(1.5rem, 4vw, 2.6rem); }
.prose p { color: var(--muted); }
.prose p + p { margin-top: 1rem; }
.prose h3 { color: var(--text); margin: 1.9rem 0 0.7rem; }
.prose h3:first-child { margin-top: 0; }
.signature { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.signature .name { color: var(--text); font-weight: 620; }
.signature .role { font-size: 0.88rem; color: var(--faint); }

/* ---- llamada final ---- */
.cta { text-align: center; }
.cta h2 { margin-bottom: 1rem; }
.cta p { margin-inline: auto; }
.btn {
  display: inline-block; margin-top: 1.8rem; padding: 0.75rem 1.6rem;
  background: var(--acid); color: var(--acid-ink); border-radius: 999px;
  font-weight: 620; text-decoration: none;
}

/* ---- pie ---- */
footer { border-top: 1px solid var(--line); background: var(--sunken); padding-block: 2.6rem 3.4rem; color: var(--faint); font-size: 0.88rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: baseline; }
footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--acid); }

/* ---- marca y eslogan (portada) -------------------------------------------
   El logotipo y el eslogan abren la portada antes que el titular. Va aparte y
   no dentro del <h1> porque son dos cosas distintas: una es la MARCA y otra la
   promesa de la pagina. Mezclarlas obliga al lector a decidir cual esta
   leyendo. */
.brand { margin-bottom: clamp(2.2rem, 6vw, 3.4rem); }
.brand .wordmark {
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem);
  font-weight: 700; letter-spacing: -0.045em; line-height: 1;
  color: var(--text);
}
.brand .wordmark b { color: var(--acid); font-weight: 700; }
.brand .slogan {
  margin-top: 0.75rem;
  font-size: clamp(0.82rem, 0.75rem + 0.3vw, 1rem);
  font-weight: 560;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acid);
}