/* soin — hoja de estilos del sitio.
   Tokens, radios y escala tipográfica de docs/handoffs/soin-design-handoff-v1.md §3.1,
   más borderStrong de ADR 0017 §2.4. Sin color de acento: el estado se comunica por
   relleno, borde, peso y posición, nunca por matiz. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Paleta completa en :root. Solo se redefinen tokens en los bloques de tema —
   nunca se define un color por primera vez dentro de un media query. */
:root {
  --bg: #f7f6f4;
  --surface: #fcfbfa;
  --surface-alt: #edecea;
  --ink: #111111;
  --ink-muted: #666666;
  --ink-faint: #999999;
  --border: #e3e3e3;
  --border-strong: #8c8c8c;
  --sel-bg: #f6f6f6;

  --r-input: 10px;
  --r-card: 12px;
  --r-block: 16px;
  --r-pill: 22px;

  --voice: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ui: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f0f;
    --surface: #171717;
    --surface-alt: #222222;
    --ink: #f2f2f2;
    --ink-muted: #a3a3a3;
    --ink-faint: #6b6b6b;
    --border: #2c2c2c;
    --border-strong: #626262;
    --sel-bg: #1d1d1d;
  }
}

:root[data-theme="dark"] {
  --bg: #0f0f0f;
  --surface: #171717;
  --surface-alt: #222222;
  --ink: #f2f2f2;
  --ink-muted: #a3a3a3;
  --ink-faint: #6b6b6b;
  --border: #2c2c2c;
  --border-strong: #626262;
  --sel-bg: #1d1d1d;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---- Cambio de idioma: los dos idiomas viven en el DOM, se muestra uno ----
   Sin JavaScript el atributo data-lang del HTML deja el español visible. */
:root[data-lang="es"] [data-i18n="en"],
:root[data-lang="en"] [data-i18n="es"] { display: none; }

/* ---- Cabecera ---- */

header.site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 40px 0 0;
  flex-wrap: wrap;
}

.logo {
  font-family: var(--voice);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.01em;
}

.phonetic {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: none;
  margin-left: 10px;
  white-space: nowrap;
}

/* Pastillas de idioma: la activa invierte a relleno ink con texto bg,
   igual que los presets de hora del onboarding (handoff §3.2). */
.langs { display: flex; gap: 6px; }

.langs button {
  font-family: var(--data);
  font-size: 11.5px;
  letter-spacing: 0.10em;
  padding: 7px 13px;
  min-height: 34px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

:root[data-lang="es"] .langs button[value="es"],
:root[data-lang="en"] .langs button[value="en"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.langs button:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }

/* ---- Bloques ---- */

.promise {
  font-family: var(--voice);
  font-weight: 400;
  font-size: clamp(27px, 5.2vw, 40px);
  line-height: 1.32;
  text-wrap: pretty;
  margin: 56px 0 0;
  max-width: 18em;
}

.eyebrow {
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
}

section { margin: 64px 0; }

h2 {
  font-family: var(--voice);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.32;
  margin: 0 0 20px;
}

h3 {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 6px;
}

p { margin: 0 0 14px; max-width: 34em; }

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

/* Lista con guión, como los bullets del onboarding (handoff §3.2) */
ul.dashes { list-style: none; padding: 0; margin: 0; }

ul.dashes li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 14.5px;
  line-height: 1.5;
}

ul.dashes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 14px;
  height: 1px;
  background: var(--ink-faint);
}

/* Los cinco pilares (identidad de marca §4; el quinto se sumó el 2026-08-20) */
.pillars { display: grid; gap: 12px; }

.pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 18px 20px;
}

.pillar p { font-size: 14.5px; color: var(--ink-muted); margin: 0; }

/* ---- Capturas ----
   Van crudas, sin marco de teléfono dibujado: el bisel sería decoración y además
   mentiría sobre un modelo concreto. Las capturas traen su propio fondo claro
   (#f7f6f4), así que en tema oscuro se apoyan sobre un panel para que se lean como
   objetos sobre la página y no como un bloque de luz. Los datos son sintéticos
   (docs/brand/capturas/README.md). */

.shots {
  background: var(--surface-alt);
  border-radius: var(--r-block);
  padding: 26px 0 22px 24px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.shots-fila {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0 24px 0 0;
  width: max-content;
}

.shot { margin: 0; }

.shot img {
  display: block;
  width: 208px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.shot figcaption {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 12px;
}

/* ---- Precio ----
   Panel `surface` con borde, como los pilares, y no `surface-alt`: el bloque de
   privacidad que va justo debajo ya usa surface-alt, y dos paneles idénticos
   seguidos se leen como uno solo partido al medio.
   La cifra va en la tipografía de datos, no en la de voz: es un dato verificable
   contra el App Store, no una afirmación de marca. */
.price {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-block);
  padding: 24px;
}

.price-tag {
  font-family: var(--data);
  font-size: 32px;
  line-height: 1;
  margin: 0 0 12px;
}

.price-lead { margin-bottom: 20px; }

.price ul.dashes li:last-child { margin-bottom: 0; }

.price-estado { font-size: 13px; margin: 20px 0 0; }

/* ---- Aviso de lanzamiento ----
   Queda entre .price (surface) y .note (surface-alt). Por eso va **sin relleno**, sólo
   con borde: con cualquiera de los dos fondos se fundiría con el panel vecino, que es
   justo lo que advierte el comentario de .price. Panel, abierto, panel.
   Sin color de acento, como todo el resto: el botón destaca por valor y peso. */
.aviso {
  border: 1px solid var(--border);
  border-radius: var(--r-block);
  padding: 24px;
}

.aviso-lead { margin-bottom: 20px; }

/* La etiqueta es visible y no un placeholder: un placeholder desaparece al escribir y
   deja el campo sin nombre para quien vuelve a mirarlo. */
.aviso-label {
  display: block;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.aviso-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: var(--measure);
}

.aviso-input {
  flex: 1 1 16em;
  min-width: 0; /* sin esto el input desborda el flex en pantallas angostas */
  font-family: var(--ui);
  font-size: 16px; /* menos de 16px hace que Safari en iOS acerque el zoom al enfocar */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-input);
  padding: 12px 14px;
}

.aviso-input::placeholder { color: var(--ink-faint); }

.aviso-input:focus-visible,
.aviso-boton:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
}

.aviso-boton {
  flex: 0 0 auto;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-input);
  padding: 12px 22px;
  cursor: pointer;
}

.aviso-boton:hover { background: var(--ink-muted); border-color: var(--ink-muted); }

.aviso-nota {
  font-size: 13px;
  margin: 18px 0 0;
  max-width: var(--measure);
}

.aviso-nota:last-child { margin-bottom: 0; }

/* Trampa para robots. Fuera de la pantalla en lugar de display:none, que algunos robots
   detectan y saltean. Lleva tabindex="-1" para que el teclado nunca caiga acá. */
.aviso-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bloque destacado de privacidad */
.note {
  background: var(--surface-alt);
  border-radius: var(--r-block);
  padding: 22px 24px;
}

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

a { color: var(--ink); text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

/* ---- Política de privacidad ---- */

.policy h2 { font-size: 22px; margin-top: 40px; }
.policy p { font-size: 14.5px; }
.policy strong { font-weight: 500; }

.back {
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---- Pie ---- */

footer.site {
  border-top: 1px solid var(--border);
  margin-top: 80px;
  padding: 28px 0 56px;
  font-size: 13px;
  color: var(--ink-faint);
}

footer.site p { margin: 0 0 8px; }

/* Reduce Motion: el sitio no anima, pero se declara por coherencia con la app */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}