/* ============================================================================
   GoatAscend — sitio público
   Hoja de estilos única, compartida por index.html y las 3 páginas legales.
   Sin dependencias externas: tipografías del sistema, sin CDN, sin analytics.

   Los colores salen de los design tokens de la app
   (goatascend/apps/mobile/theme/tokens.ts). Dark-first.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* Lienzo y superficies */
  --bg: #0e0d10;
  --surface: #17161a;
  --surface-raised: #1e1c22;
  --surface-overlay: #26232c;

  /* Tinta */
  --ink: #f4f2ec;
  --ink-dim: #9a97a2;
  --ink-faint: #5b5862;

  /* Neutro cálido: momentos importantes */
  --cream: #e9e1d0;

  /* Acento violeta — ÚNICO color energético, usado con escasez */
  --accent: #8b6dff;
  --accent-bright: #a78bff;
  --accent-deep: #5b3fd6;

  /* Semánticos (uso puntual) */
  --good: #4fd6a0;
  --warn: #e0b15c;

  /* Bordes */
  --border: #2a2830;
  --border-strong: #3a3742;

  /* Tipografía */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Medidas */
  --wrap: 68rem;
  --wrap-prose: 44rem;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
}

/* --------------------------------------------------------------- reset --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-bright);
  text-decoration-color: rgba(167, 139, 255, 0.45);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ------------------------------------------------------------- layout --- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #0e0d10;
  padding: 0.7rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
  z-index: 50;
}

.saltar:focus {
  left: 0;
}

section {
  padding-block: 3.5rem;
}

@media (min-width: 48rem) {
  section {
    padding-block: 5rem;
  }
}

.eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}

h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);
  font-weight: 700;
}

h3 {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.plomo {
  color: var(--ink-dim);
  max-width: 46ch;
  margin: 0 0 2rem;
}

/* ------------------------------------------------------------ cabecera --- */

.sitio-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(14, 13, 16, 0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

/* En la landing el header va TRANSPARENTE por encima de la imagen del hero
   (no una barra negra aparte). Las páginas legales siguen con la barra sólida. */
.sitio-header--overlay {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
}

.sitio-header--overlay .wm {
  font-size: 1.2rem;
}

.sitio-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.marca .glifo {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
}

/* Wordmark de dos tonos (marca): "Goat" crema + "Ascend" violeta, en itálica
   pesada estilo deportivo. Reemplaza al texto plano "GoatAscend". */
.wm {
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.wm-goat { color: var(--ink); }
.wm-ascend { color: var(--accent); }

/* Emblema del hero: el mismo mark de ascenso de la app, en grande. */
.hero-emblema {
  display: block;
  width: 6rem;
  height: 6rem;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 8px 28px rgba(139, 109, 255, 0.35));
}

.nav-sitio {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.9rem;
}

/* Mismo estilo que el eyebrow "Entrenamiento que se adapta a ti": mayúsculas,
   peso 700, espaciado de letras y tamaño chico. Violeta de marca. */
.nav-sitio a {
  color: var(--accent-bright);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.nav-sitio a:hover {
  color: var(--ink);
}

@media (max-width: 30rem) {
  .nav-sitio .opcional {
    display: none;
  }
}

/* ------------------------------------------------------- selector idioma --- */

/* Agrupa la navegación y el selector de idioma a la derecha del header, para
   que la marca quede a la izquierda y ambos controles juntos a la derecha. */
.header-fin {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

/* Selector de idioma: iconito de globo + ES · EN. El idioma activo es texto
   plano (no link); el otro es un enlace a la página equivalente. Sobrio y
   neutro a propósito, para leerse como utilidad y no competir con el nav. */
.idioma {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
}

.idioma-globo {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  color: var(--ink-dim);
  margin-right: 0.15rem;
}

.idioma-op {
  padding: 0.1rem 0.1rem;
  text-decoration: none;
}

a.idioma-op {
  color: var(--ink-dim);
}

a.idioma-op:hover {
  color: var(--ink);
}

.idioma-op--activa {
  color: var(--ink);
  font-weight: 700;
}

.idioma-sep {
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------- hero --- */

/* Hero robusto: imagen de FONDO (cover) + texto en FLUJO NORMAL encima. Al estar
   el texto en flujo (no absoluto), NUNCA se solapa con el header ni con la
   sección de abajo, en cualquier tamaño de pantalla. El header va transparente
   arriba (.sitio-header--overlay). La imagen de fondo se cambia por la vertical
   en mobile (media query abajo). */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end; /* el texto se apoya abajo */
  padding-block: 0; /* el hero NO usa el padding genérico de sección (evita el hueco) */
  min-height: clamp(32rem, 82vh, 46rem);
  background-color: var(--bg);
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

/* Velo: apenas oscuro arriba (para que se lea el header), transparente en el
   medio (se ve la escena) y bien oscuro abajo (para que se lea el texto). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 13, 16, 0.55) 0%,
    rgba(14, 13, 16, 0) 16%,
    rgba(14, 13, 16, 0) 40%,
    rgba(14, 13, 16, 0.72) 76%,
    rgba(14, 13, 16, 0.97) 100%
  );
  pointer-events: none;
}

.hero-overlay {
  position: relative; /* en flujo, por encima del velo */
  z-index: 1;
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: 5rem 1.25rem 2.5rem;
  text-align: center;
}

.hero-overlay h1 {
  font-size: clamp(2.4rem, 1.5rem + 4.5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 0.25rem;
}

.lema {
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -0.01em;
  margin: 0 auto 1rem;
}

.hero-overlay .bajada {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.12rem);
  color: var(--ink);
  max-width: 46ch;
  margin: 0 auto 1.5rem;
}

.hero-overlay .acciones {
  justify-content: center;
}

/* La bajadita del CTA centrada dentro del hero (el bloque, no solo el texto). */
.hero-overlay .nota-cta {
  margin-inline: auto;
}

/* Eyebrow del hero: sobre la imagen el gris se perdía. Violeta claro de marca +
   una sombra suave para que se lea sí o sí. */
.hero-overlay .eyebrow {
  color: var(--accent-bright);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
}

/* Mobile: misma técnica. Alto más contenido (no gigante) y foco corrido a la
   izquierda para que se vean las personas, no solo la montaña. */
@media (max-width: 40rem) {
  .hero {
    background-image: url("hero-mobile.jpg");
    background-position: 28% center;
    align-items: flex-end; /* texto abajo; la escena ocupa arriba, sin hueco */
    min-height: clamp(30rem, 78vh, 44rem);
  }
}

/* -------------------------------------------------------------- botones --- */

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.boton-principal {
  background: var(--accent);
  color: #0e0d10;
}

.boton-principal:hover {
  background: var(--accent-bright);
}

.boton-secundario {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}

.boton-secundario:hover {
  background: var(--surface-raised);
}

/* Estado honesto mientras no exista el link de la tienda. */
.boton[disabled],
.boton.no-disponible {
  background: var(--surface-raised);
  color: var(--ink-dim);
  border: 1px dashed var(--border-strong);
  cursor: not-allowed;
}

.nota-cta {
  font-size: 0.88rem;
  color: var(--ink-dim);
  margin: 0;
  max-width: 44ch;
}

/* Intro de la sección "la app" centrada (igual criterio que el hero). Solo el
   encabezado; las tarjetas mantienen su texto a la izquierda. */
#la-app > .wrap > .eyebrow,
#la-app > .wrap > h2,
#la-app > .wrap > .plomo {
  text-align: center;
}

#la-app > .wrap > .plomo {
  margin-inline: auto;
}

/* ------------------------------------------------------------- tarjetas --- */

.rejilla {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
}

.tarjeta p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.96rem;
}

.tarjeta .indice {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  margin-bottom: 0.75rem;
}

.rejilla-menor {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

@media (min-width: 40rem) {
  .rejilla-menor {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tarjeta-menor {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem;
  background: transparent;
}

.tarjeta-menor h3 {
  margin-bottom: 0.3rem;
}

.tarjeta-menor p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.93rem;
}

/* ---------------------------------------------------------------- cierre --- */

.cierre {
  border-top: 1px solid var(--border);
  text-align: center;
}

.cierre .acciones {
  justify-content: center;
}

.cierre .nota-cta {
  margin-inline: auto;
}

/* ---------------------------------------------------------------- footer --- */

.sitio-footer {
  border-top: 1px solid var(--border);
  padding-block: 2.5rem 3rem;
  color: var(--ink-dim);
  font-size: 0.92rem;
}

.footer-cols {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .footer-cols {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.sitio-footer h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.7rem;
}

.sitio-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.sitio-footer a {
  color: var(--ink-dim);
  text-decoration: none;
}

.sitio-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.sitio-footer .lema-pie {
  color: var(--cream);
  font-weight: 600;
  margin: 0.4rem 0 0;
}

.legales-pie {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.legales-pie p {
  margin: 0.25rem 0;
}

/* ==========================================================================
   Páginas legales (privacidad / términos / borrar cuenta)
   ========================================================================= */

.doc {
  max-width: var(--wrap-prose);
  margin-inline: auto;
  padding: 2.5rem 1.25rem 4rem;
}

.doc h1 {
  font-size: clamp(1.7rem, 1.4rem + 1.6vw, 2.3rem);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.doc h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 2.4rem 0 0.6rem;
  color: var(--ink);
}

.doc h3 {
  font-size: 1rem;
  margin: 1.6rem 0 0.35rem;
  color: var(--cream);
}

.doc p,
.doc ul,
.doc ol {
  margin: 0.7rem 0;
  color: var(--ink-dim);
}

.doc strong {
  color: var(--ink);
  font-weight: 600;
}

.doc ul,
.doc ol {
  padding-left: 1.4rem;
}

.doc li {
  margin: 0.35rem 0;
}

.doc .fecha {
  color: var(--ink-dim);
  font-size: 0.92rem;
  margin-bottom: 2rem;
}

.doc .fecha strong {
  color: var(--ink);
  font-weight: 600;
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--ink-dim);
  text-decoration: none;
  margin-bottom: 1.75rem;
}

.volver:hover {
  color: var(--ink);
}

/* Bloque destacado (privacidad) */
.destacado {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1rem 1.15rem;
  margin: 1.25rem 0;
}

.destacado p {
  margin: 0;
}

/* Bloque de advertencia de salud (términos) */
.salud {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 5px solid var(--warn);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
  margin: 1.25rem 0;
}

.salud p:first-child {
  margin-top: 0;
}

.salud p:last-child {
  margin-bottom: 0;
}

/* Caminos de borrado de cuenta */
.camino {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
  margin: 1.25rem 0;
}

.camino h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.camino p:last-child,
.camino ol:last-child {
  margin-bottom: 0;
}

.etiqueta {
  display: inline-block;
  background: var(--accent);
  color: #0e0d10;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  vertical-align: middle;
  margin-left: 0.45rem;
  text-transform: uppercase;
}

.ruta {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .ruta {
    white-space: normal;
  }
}

/* Tablas (privacidad) */
.tabla-scroll {
  overflow-x: auto;
  margin: 1.25rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  min-width: 32rem;
}

.doc th,
.doc td {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--ink-dim);
}

.doc thead th {
  color: var(--ink);
  font-weight: 600;
  background: var(--surface-raised);
}

.doc tbody tr:last-child td {
  border-bottom: none;
}

.doc hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3rem 0 1.5rem;
}