/* Hoja compartida por las tres páginas (portada, privacidad, términos).
   Antes el CSS vivía inline en un único index.html; con tres páginas eso obligaba a mantener
   la misma paleta en tres sitios, que es como se desincronizan. */

/* La paleta se diseñó en oscuro y el modo claro se quedó sin revisar: sobre este fondo, el naranja
   de marca daba 3,16:1 y el gris apagado 4,42:1, los dos por debajo del 4,5:1 que pide WCAG AA
   para texto pequeño (en oscuro dan 9,60 y 6,55, de sobra). Afectaba a los enlaces, a los eyebrows
   y a todo el texto secundario del sitio. Oscurecidos SOLO aquí: 5,10 y 4,96.
   `--accent-fill` no se toca — no lleva texto nunca, solo rellenos y trazados. */
:root {
  --bg: #f1f1ee;
  --surface: #ffffff;
  --ink: #18151a;
  --muted: #666770;
  --line: rgba(24, 21, 26, 0.12);
  --accent: #8f5a0c;
  --accent-fill: #e2a23b;
  --accent-soft: rgba(226, 162, 59, 0.14);
  --pending: #c1440e;
  --pending-soft: rgba(193, 68, 14, 0.1);
  --road: #2a2731;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16141a;
    --surface: #1d1b22;
    --ink: #f1f0ec;
    --muted: #9b9aa1;
    --line: rgba(241, 240, 236, 0.14);
    --accent: #f0b052;
    --accent-fill: #e2a23b;
    --accent-soft: rgba(240, 176, 82, 0.16);
    --pending: #ff8a5c;
    --pending-soft: rgba(255, 138, 92, 0.14);
    --road: #0f0d13;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a { color: var(--accent); }

/* Todo el `:hover` del sitio vive detrás de `@media (hover: hover)`. En táctil el navegador
   aplica el hover al TOCAR y no lo suelta hasta que tocas otra cosa: los enlaces del menú se
   quedaban naranjas como si estuvieran seleccionados. No es cosa del modo responsive de
   Chrome — pasa igual en el iPhone. Lo cazó Marc, el 6 ago 2026. */

/* Y como el color ya no marca nada con teclado, el foco necesita su propia señal: los enlaces
   van sin subrayado y en color apagado, así que sin esto no se ve por dónde vas tabulando. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Cabecera de marca, común a las tres páginas ---------------------------------------- */

.mark { flex: 0 0 auto; }
.mark path { stroke: var(--muted); opacity: 0.5; }
.mark circle:first-of-type { fill: var(--accent-fill); }
.mark circle:last-of-type { fill: var(--ink); }

.wordmark {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 20px;
}

header.top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
/* El selector cubre las DOS cabeceras (portada y páginas legales). Cuando solo apuntaba a
   `header.top`, el enlace de la marca de la portada se quedaba sin estilo: heredaba el color de
   acento y el subrayado del navegador, y perdía el centrado vertical. */
header.top a.brand,
.site-header a.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

/* ========================================================================================
   PORTADA
   ======================================================================================== */

/* `flex-wrap` en los dos niveles. Sin él, por debajo de ~470px el menú no cabía al lado de la
   marca y partía CADA enlace en dos líneas ("Cómo / va", "La / comunidad"); a 320px además se
   salía de la pantalla. Ahora baja entero a una segunda fila, que a 320px sigue cabiendo en una
   línea gracias al gap reducido de la consulta de 480px. */
.site-header {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
}
.site-header nav a {
  color: var(--muted);
  text-decoration: none;
}
@media (hover: hover) {
  .site-header nav a:hover { color: var(--accent); }
}

.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 88px;
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px);
  gap: 64px;
  align-items: center;
}

.tagline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}

.hero h1 {
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 20px;
  text-wrap: balance;
}

.hero .lede {
  font-size: 18px;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 32px;
}

/* --- Botón de descarga ------------------------------------------------------------------ */

/* Sobrio y sin degradados: compite con el móvil ilustrado que tiene al lado, y si grita gana él.
   Sobre `--ink` (casi negro en claro, casi blanco en oscuro) va invertido en los dos temas sin
   escribir una sola regla de color extra. */
.cta-row { margin: 0; }

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  /* El área táctil mínima de un dedo. Un botón que es EL objetivo de la página no puede quedarse
     corto en un móvil, que es desde donde va a entrar casi todo el mundo. */
  min-height: 48px;
  transition: opacity 0.15s ease;
}

.btn:hover { opacity: 0.85; }

.cta-nota {
  font-size: 14px;
  color: var(--muted);
  margin: 12px 0 0;
}

/* En el cierre el bloque va centrado, así que el botón también. */
.cierre .cta-row { margin-top: 32px; }

/* --- El móvil de la cabecera ------------------------------------------------------------ */

.phone {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 38px;
  border: 1px solid var(--line);
  background: var(--road);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(24, 21, 26, 0.45);
}
.phone::after {
  /* Muesca. Detalle barato que hace que se lea como un móvil y no como un rectángulo. */
  content: "";
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
}
.phone video,
.phone svg.trace {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Ilustración provisional hasta que exista el clip real (ver docs/product/contenido_ig.md).
   Se dibuja el trazado con stroke-dashoffset: es lo que vende la app, y una captura estática
   no puede transmitirlo. NO pretende parecer una captura de pantalla — es un dibujo. */
svg.trace .road { stroke: rgba(255, 255, 255, 0.07); }
svg.trace .route {
  stroke: var(--accent-fill);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(226, 162, 59, 0.5));
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: dibujar 5s ease-in-out infinite;
}
svg.trace .rider {
  fill: #fff;
  stroke: var(--accent-fill);
  stroke-width: 2.5;
  offset-path: path("M 40 300 C 60 250, 30 210, 70 180 S 130 160, 120 120 S 90 70, 140 42");
  animation: avanzar 5s ease-in-out infinite;
}
svg.trace .poi { fill: var(--accent-fill); opacity: 0; animation: aparecer 5s ease-in-out infinite; }
svg.trace .poi.dos { animation-delay: 0.9s; }

@keyframes dibujar {
  0%   { stroke-dashoffset: 620; }
  55%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 620; }
}
@keyframes avanzar {
  0%   { offset-distance: 0%; opacity: 0; }
  6%   { opacity: 1; }
  55%  { offset-distance: 100%; opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes aparecer {
  0%, 22% { opacity: 0; transform: scale(0.4); }
  30%, 88% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}

/* Quien pide menos movimiento ve el trazado completo y quieto — no un hueco vacío. */
@media (prefers-reduced-motion: reduce) {
  svg.trace .route { animation: none; stroke-dashoffset: 0; }
  svg.trace .rider { animation: none; opacity: 1; }
  svg.trace .poi   { animation: none; opacity: 1; }
}

/* ========================================================================================
   SECCIONES DE LA PORTADA
   ======================================================================================== */

.band { border-top: 1px solid var(--line); }
.band-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 80px 24px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

.band h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 16px;
  text-wrap: balance;
}

.band p.intro {
  font-size: 17px;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 0 48px;
}

.tres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.paso {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
}
.paso .num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 14px;
}
.paso h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.paso p { margin: 0; font-size: 15px; color: var(--muted); }

/* Columnas fijas por tramo en vez de `auto-fit`: son CUATRO capturas y con auto-fit alrededor de
   900px salían tres y una huérfana en la fila de abajo. Cuatro, dos y dos, o una: siempre filas
   completas. */
.capturas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.captura { margin: 0; }

/* El pie NO es decorativo. En escritorio las cuatro se leen en fila y la secuencia se explica
   sola; en vertical se apilan y cada una queda huérfana, sin nada que diga qué pantalla es.
   Lo cazó Marc, el 6 ago 2026. */
.captura figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* Las capturas van SIN recortar, en su proporción nativa (9:19.5, la del iPhone). La de detalle
   de ruta tiene blanco al final y se podría cortar, pero para igualarlas habría que recortar
   también las otras dos y ahí sí se perdería contenido real (la barra de navegación, el campo de
   nombre). A este tamaño el blanco no se nota; perder contenido sí. */
.marco {
  aspect-ratio: 9 / 19.5;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 16px 40px -20px rgba(24, 21, 26, 0.4);
}
.marco img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cierre { text-align: center; }
.cierre h2 { max-width: 22ch; margin-inline: auto; }
.cierre p.intro { margin-inline: auto; }

/* ========================================================================================
   PÁGINAS LEGALES
   ======================================================================================== */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

/* `.page .updated` y no `.updated`: es un <p> dentro de .page, y `.page p` (más específico y
   declarado más abajo) le ganaba las dos declaraciones. La fecha se renderizaba a 15px con 14px
   de hueco en vez de a 13px con 48px, así que salía del mismo tamaño que el cuerpo y pegada al
   título: se leía como la primera frase del documento en vez de como un dato al margen. */
.page .updated {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 48px;
}

.page h1 {
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
  text-wrap: balance;
}

.page .lede {
  font-size: 16px;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 0 48px;
}

nav.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 48px;
}
nav.toc .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
nav.toc ol { margin: 0; padding-left: 20px; columns: 2; gap: 24px; }
nav.toc li { margin-bottom: 6px; break-inside: avoid; }
nav.toc a { color: var(--ink); text-decoration: none; font-size: 14px; }
@media (hover: hover) {
  nav.toc a:hover { color: var(--accent); }
}

.page section {
  padding: 32px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 24px;
}
.page section:first-of-type { border-top: none; padding-top: 0; }

/* Los títulos de sección eran 12px en mayúsculas y naranja, copiando el `.eyebrow` de la portada.
   Allí funciona porque el eyebrow acompaña a un h2 grande; aquí el eyebrow ERA el título, así que
   en un documento de nueve secciones lo que la gente escanea para encontrar "cómo borro mi cuenta"
   era el texto más pequeño de la página (12px) contra un cuerpo de 15px. Se veía en que `.page h3`
   (16px, ink, bold) pesaba más que su propio h2. */
.page h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
}

.page h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 24px 0 8px;
}

.page p { margin: 0 0 14px; font-size: 15px; }
.page p:last-child { margin-bottom: 0; }
.page ul { margin: 0 0 14px; padding-left: 20px; }
.page li { margin-bottom: 6px; font-size: 15px; }
strong { color: var(--ink); font-weight: 600; }

.data-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--line);
}
.data-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: none; }

/* En vertical las dos columnas quedaban en 115px y 227px: la etiqueta partía en tres líneas
   contra un párrafo de cuatro al lado y cada fila se hacía altísima. Apilada (etiqueta encima,
   valor debajo) se lee de corrido. La cabecera se esconde porque cada etiqueta ya está en su
   fila, pero se esconde sin `display: none` para que siga anunciándose en un lector de pantalla. */
@media (max-width: 560px) {
  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .data-table tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .data-table tbody tr:last-child { border-bottom: none; padding-bottom: 0; }
  .data-table td { display: block; padding: 0; border-bottom: none; }
  .data-table td:first-child {
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
  }
}

.callout {
  background: var(--accent-soft);
  border: 1px solid rgba(226, 162, 59, 0.3);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 14px;
  margin: 16px 0;
}
.callout strong { color: var(--accent); }

/* ========================================================================================
   PIE, COMÚN
   ======================================================================================== */

.site-footer { border-top: 1px solid var(--line); }
.site-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}
.site-footer-inner nav { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer-inner a { color: var(--muted); text-decoration: none; }
@media (hover: hover) {
  .site-footer-inner a:hover { color: var(--accent); }
}

/* ========================================================================================
   MÓVIL
   ======================================================================================== */

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 64px;
  }
  /* El móvil de la cabecera se centra y se limita, o en vertical ocupa la pantalla entera y
     empuja el texto —que es lo que de verdad hay que leer— por debajo del pliegue. */
  .phone { max-width: 260px; margin-inline: auto; }
  .tres { grid-template-columns: 1fr; }
  .capturas { grid-template-columns: repeat(2, 1fr); }
  .band-inner { padding: 64px 24px; }
}

@media (max-width: 499px) {
  .capturas { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  nav.toc ol { columns: 1; }
  .site-header nav { gap: 16px; }
}