/* Vton · Cereza (el mismo sistema que la app: mobile/DESIGN.md y mobile/src/theme.ts). Solo oscuro.
   Regla del acento: «cherry» rellena, «accent» dibuja (texto, enlaces, iconos, foco). Nunca texto cereza sobre oscuro.
   Jost en todo, como el logo. Fuente alojada aquí (OFL, subconjunto latino): ninguna petición a terceros. */
@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url("/assets/fonts/Jost_400Regular.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Jost_500Medium.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-display: swap; src: url("/assets/fonts/Jost_600SemiBold.woff2") format("woff2"); }

:root {
  --bg: #120609;            /* casi negro con un punto de cereza */
  --surface: #1F0D12;       /* tarjetas */
  --elevated: #2A1219;
  --line: rgba(251, 244, 245, 0.09);
  --line-strong: rgba(251, 244, 245, 0.16);
  --text: #FBF4F5;          /* 18:1 sobre bg */
  --dim: #B5A2A6;           /* 8:1 */
  --faint: #85707A;         /* solo decoración (4.3:1): nunca texto que haya que leer */
  --cherry: #8E1530;        /* relleno de marca; blanco encima 9:1 */
  --on-cherry: #FFFFFF;
  --accent: #F0577A;        /* primer plano sobre oscuro: enlaces, iconos, foco (6:1) */
  --tab-active: rgba(142, 21, 48, 0.32);
  --spot: rgba(194, 30, 69, 0.16);
  --brand: linear-gradient(to bottom right, #7A1229, #3A0512);   /* SOLO el logotipo «vton» */
  --font: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 20px;
  --wrap: 1080px;
  --pad-x: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
@media (max-width: 359px) { :root { --gutter: 16px; } }

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: 80px; }   /* la cabecera fija mide 64 px: el foco y los anclajes no quedan debajo (WCAG 2.4.11) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.7 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
::selection { background: rgba(142, 21, 48, 0.75); color: var(--on-cherry); }

a {
  color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(240, 87, 122, 0.45); transition: text-decoration-color 160ms ease-out, color 160ms ease-out, background-color 160ms ease-out;
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 10; padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: var(--bg); font-weight: 500; text-decoration: none;
}
.skip:focus { left: var(--gutter); }

/* ── Logotipo: «vton» en blanco, Jost SemiBold, sobre el degradado de marca (el Wordmark de la app) ── */
.wordmark {
  --h: 36px; --fs: 18px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: var(--h); padding: 0 calc(var(--h) * 0.34) calc(var(--fs) * 0.14); border-radius: calc(var(--h) * 0.26);
  background: var(--brand); color: var(--on-cherry); text-decoration: none;
  font: 600 var(--fs)/1 var(--font); letter-spacing: -0.03em;
  transition: transform 160ms var(--ease-out), filter 160ms ease-out;
}
a.wordmark:hover { filter: brightness(1.12); }
a.wordmark:active { transform: scale(0.97); }

/* ── Cabecera común ── */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; padding: 8px var(--pad-x);
  padding-left: max(var(--pad-x), env(safe-area-inset-left)); padding-right: max(var(--pad-x), env(safe-area-inset-right));
  background: rgba(18, 6, 9, 0.78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.top-end { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* Red de seguridad: si un enlace no cabe (otra fuente, zoom de texto), se acorta con «…» dentro de su sitio; nunca
   se sale de .nav ni se mete debajo del selector de idioma */
.nav a {
  display: block; min-width: 0; height: 44px; padding: 0 14px; border-radius: 999px;
  color: var(--dim); text-decoration: none; font-weight: 500; font-size: 0.9375rem; line-height: 44px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav a:hover { color: var(--text); background: rgba(251, 244, 245, 0.05); }
.nav a[aria-current="page"] { color: var(--text); background: var(--tab-active); }
/* Selector de idioma EN · FR · ES: pastillas pequeñas; la del idioma que se ve, cereza translúcida (reglas de «Idiomas») */
.langs { display: flex; align-items: center; gap: 2px; flex: none; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.langs a {
  position: relative; display: inline-grid; place-items: center; min-width: 34px; height: 28px; padding: 0 8px; border-radius: 999px;
  color: var(--dim); text-decoration: none; font: 500 0.75rem/1 var(--font); letter-spacing: 0.08em;
  transition: none;   /* al cargar con #fr la pastilla activa no se desliza desde EN */
}
.langs a::after { content: ""; position: absolute; inset: -8px -1px; }   /* zona táctil de 44 px de alto, sin cambiar el aspecto */
.langs a:hover { color: var(--text); background: rgba(251, 244, 245, 0.05); }
/* Móvil: quedan el logo, uno o dos enlaces y el selector. Se ocultan primero los de class="opt" y después los de
   class="opt2" (PAGES de tools/build-pages.py), nunca el de la página actual. Los cortes van por idioma porque los
   textos no miden lo mismo (el francés es el más largo, y el enlace más largo es «How it works» / «Comment ça marche» /
   «Cómo funciona» de la portada, el único que lleva a un #ancla). Medidos con Jost y la cabecera entera (logo, enlaces
   y selector), con 5-10 px de margen: si cambias un texto de la cabecera, vuelve a medirlos (README, «Diseño»). */
@media (max-width: 479px) {
  .top-end { gap: 6px; }
  .nav { gap: 2px; }
  .nav a { padding: 0 10px; font-size: 0.875rem; }
}
@media (max-width: 374px) { .langs a { min-width: 30px; padding: 0 6px; } }
@media (max-width: 499px) { .nav[data-l="en"] a.opt[href^="#"] { display: none; } }
@media (max-width: 479px) { .nav[data-l="en"] .opt { display: none; } }
@media (max-width: 374px) { .nav[data-l="en"] .opt2 { display: none; } }
@media (max-width: 599px) { .nav[data-l="fr"] a.opt[href^="#"] { display: none; } }
@media (max-width: 529px) { .nav[data-l="fr"] .opt { display: none; } }
@media (max-width: 439px) { .nav[data-l="fr"] .opt2 { display: none; } }
@media (max-width: 549px) { .nav[data-l="es"] a.opt[href^="#"] { display: none; } }
@media (max-width: 509px) { .nav[data-l="es"] .opt { display: none; } }
@media (max-width: 399px) { .nav[data-l="es"] .opt2 { display: none; } }
/* Muy estrecho (pantalla exterior de un plegable): todo un poco más compacto para que quepa «Confidentialité» */
@media (max-width: 339px) {
  .top { gap: 8px; }
  .top .wordmark { --h: 32px; --fs: 16px; }
  .top-end { gap: 4px; }
  .nav a { padding: 0 8px; font-size: 0.8125rem; }
  .langs a { min-width: 26px; padding: 0 4px; }
}
@media (max-width: 299px) { .top { gap: 6px; } .top .wordmark { --h: 30px; --fs: 15px; } .nav a { padding: 0 6px; } }

/* ── Idiomas ── Cada página lleva el texto entero en inglés, francés y español: <article class="lang" id="en|fr|es">.
   Se ve uno sin JavaScript: el del #fragmento (:target, o un ancla de dentro con :has()); sin fragmento, inglés.
   Logo, cabecera, pie y «saltar al contenido» tienen una copia por idioma (data-l): se ve la del idioma en pantalla.
   Sin :has() se ven los tres artículos seguidos, con la cabecera y el pie en inglés. lang.js solo ayuda (assets/js). */
@supports selector(:has(*)) {
  body:not(:has(.lang:target, .lang :target)) [data-l]:not([data-l="en"]),
  body:has(#en:target, #en :target) [data-l]:not([data-l="en"]),
  body:has(#fr:target, #fr :target) [data-l]:not([data-l="fr"]),
  body:has(#es:target, #es :target) [data-l]:not([data-l="es"]) { display: none !important; }
  body:not(:has(.lang:target, .lang :target)) .langs a[hreflang="en"],
  body:has(#en:target, #en :target) .langs a[hreflang="en"],
  body:has(#fr:target, #fr :target) .langs a[hreflang="fr"],
  body:has(#es:target, #es :target) .langs a[hreflang="es"] { color: var(--text); background: var(--tab-active); }
  /* Ir a #fr o #es deja la página arriba del todo, igual que el inglés sin # (sin esto bajaría hasta el artículo) */
  .lang { scroll-margin-top: 200px; }
}
@supports not selector(:has(*)) {
  [data-l]:not([data-l="en"]):not(.lang) { display: none !important; }
  .lang + .lang { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--line); }
}

/* ── Tipografía común (escala de la app: display / title / heading / body / label) ── */
.label {
  display: block; margin: 0; color: var(--accent);
  font: 500 0.8125rem/1.25 var(--font); letter-spacing: 0.12em; text-transform: uppercase; text-wrap: balance;
}
b, strong { font-weight: 600; }

/* ── Páginas de texto (privacidad, términos, borrado, ayuda) ── */
main.doc { max-width: 760px; margin: 0 auto; padding: 64px var(--gutter) 104px; }
.doc h1, .doc h2 { font-weight: 600; text-wrap: balance; }
.doc h1 { font-size: clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem); line-height: 1.06; letter-spacing: -0.035em; margin: 0 0 18px; }
.doc h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.22; letter-spacing: -0.025em; margin: 56px 0 14px; }
.doc p, .doc ul, .doc ol { margin: 0 0 16px; }
.doc ul, .doc ol { padding-left: 1.25em; }
.doc li { margin: 10px 0; padding-left: 4px; }
.doc li::marker { color: var(--accent); }
.doc ol li::marker { font-weight: 500; }
.doc .meta { color: var(--dim); font-size: 0.9375rem; letter-spacing: 0.01em; padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.doc .meta + .note { margin-top: 24px; }
.doc .note { color: var(--dim); font-size: 0.9375rem; }   /* aviso corto (p. ej. «la app sale en inglés» en francés) */
.doc table {
  width: 100%; margin: 4px 0 20px; font-size: 0.9375rem; line-height: 1.55;
  border-collapse: separate; border-spacing: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
}
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.doc tr > :first-child { width: 46%; }
.doc tbody tr:last-child > * { border-bottom: 0; }
.doc th { color: var(--accent); font: 500 0.8125rem/1.25 var(--font); letter-spacing: 0.12em; text-transform: uppercase; padding-top: 14px; }
.doc td:first-child { color: var(--text); }
.doc td + td { color: var(--dim); }
@media (max-width: 400px) { .doc th, .doc td { padding: 11px 12px; } .doc table { font-size: 0.875rem; } }

/* ── Abrir en la app: /u/<usuario> e /i/<código> cuando el móvil no tiene Vton (open-in-app.html) ── */
main.open-app { max-width: 600px; padding-top: 96px; text-align: center; }
.open-app .lang { display: grid; justify-items: center; }
.wordmark-xl { --h: 72px; --fs: 36px; margin-bottom: 36px; }
.open-app h1 { margin-bottom: 16px; }
.open-app .lede { margin: 0 0 32px; max-width: 42ch; }
.open-app .stores { display: inline-block; margin: 0 0 14px; text-align: left; }
.open-app .adult { margin: 0; }
.open-app .links { margin: 40px 0 0; color: var(--dim); font-size: 0.9375rem; }
@media (max-width: 479px) { main.open-app { padding-top: 64px; } .wordmark-xl { --h: 60px; --fs: 30px; margin-bottom: 28px; } }

/* ── Pie ── */
.foot {
  border-top: 1px solid var(--line); color: var(--dim); font-size: 0.875rem; line-height: 1.6;
  padding: 32px var(--pad-x) max(48px, env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
}
.foot a { color: var(--dim); text-decoration: none; }
.foot > span a { text-decoration: underline; text-decoration-color: rgba(181, 162, 166, 0.5); }
.foot a:hover { color: var(--text); text-decoration: underline; text-decoration-color: rgba(251, 244, 245, 0.35); }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 32px; }

/* ── Portada ── */
.hero {
  position: relative; min-height: min(92vh, 860px); overflow: hidden; isolation: isolate;
  display: grid; align-items: center;
  padding: 56px var(--pad-x) 72px;
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
/* Sin WebGL (o mientras carga): halo cereza estático en el sitio del maniquí */
.hero::before {
  content: ""; position: absolute; z-index: -2; right: 2%; top: 50%; width: min(72vw, 620px); aspect-ratio: 1;
  transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(194, 30, 69, 0.30), rgba(142, 21, 48, 0.12) 55%, transparent);
  filter: blur(10px);
}
.hero::after { /* velo para leer el texto sobre el 3D */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 6, 9, 0.94) 0%, rgba(18, 6, 9, 0.62) 44%, rgba(18, 6, 9, 0) 70%);
}
/* Móvil y tableta en vertical: el maniquí arriba (escenario) y el texto debajo, sin pisarse. Mismo corte en hero.js.
   Un móvil en horizontal (poca altura) usa el diseño de escritorio, en dos columnas (más abajo) */
@media (max-width: 860px) and (orientation: portrait), (max-width: 860px) and (min-height: 481px) {
  .hero { --stage: clamp(300px, 54vh, 480px); --stage: clamp(300px, 54svh, 480px);
    align-items: start; min-height: 0; padding-top: calc(var(--stage) - 28px); padding-bottom: 72px; }
  .hero canvas { bottom: auto; height: var(--stage); }
  .hero.no-3d { --stage: 112px; }   /* sin WebGL (hero.js pone .no-3d): no se reserva el hueco del maniquí */
  .hero::before { right: 50%; top: calc(var(--stage) * 0.48); width: min(100vw, 460px); transform: translate(50%, -50%); }
  .hero::after { background: linear-gradient(180deg, rgba(18, 6, 9, 0) 0, rgba(18, 6, 9, 0) calc(var(--stage) * 0.7),
    rgba(18, 6, 9, 0.9) calc(var(--stage) - 20px), var(--bg) calc(var(--stage) + 32px)); }
}
.hero-copy { max-width: 560px; min-width: 0; display: grid; gap: 22px; justify-items: start; }
.hero h1 {
  margin: 0; font: 600 clamp(2.5rem, 1.6rem + 4.6vw, 5rem)/1.02 var(--font); letter-spacing: -0.04em; text-wrap: balance;
}
/* Móvil en horizontal: texto a la izquierda y maniquí a la derecha, con el titular a la medida de la poca altura */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 480px) {
  .hero { min-height: 0; padding-top: 32px; padding-bottom: 48px; }
  .hero-copy { max-width: min(560px, 58%); gap: 16px; }
  .hero h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 2.75rem); }
  .hero .lede { font-size: 1rem; }
}
.lede { margin: 0; color: var(--dim); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.65; max-width: 44ch; }
/* «Muy pronto en…»: aviso de texto, no botones (aún no hay enlaces a las tiendas) */
.stores { position: relative; margin: 2px 0 0; padding-left: 20px; color: var(--dim); font-size: 0.9375rem; line-height: 1.5; }
.stores::before {
  content: ""; position: absolute; left: 1px; top: calc(0.75em - 4px); width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--accent);
}
.stores b { color: var(--text); font-weight: 500; }
.adult { margin: 0; color: var(--dim); font-size: 0.875rem; display: inline-flex; align-items: center; gap: 10px; }
.adult b { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; }
.scroll-hint {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: -6px;
  color: var(--dim); font: 500 0.8125rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
}
.scroll-hint:hover { color: var(--text); }
.scroll-hint svg { width: 16px; height: 16px; color: var(--accent); }

.section { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 104px var(--gutter); }
.section + .section { border-top: 1px solid var(--line); }
.section .label { margin-bottom: 14px; }
.section h2 {
  margin: 0 0 16px; font: 600 clamp(2rem, 1.4rem + 2.8vw, 3.25rem)/1.06 var(--font); letter-spacing: -0.035em; text-wrap: balance; max-width: 20ch;
}
.section h2 + p { color: var(--dim); max-width: 58ch; margin: 0 0 48px; font-size: 1.0625rem; }
@media (max-width: 760px) { .section { padding-top: 80px; padding-bottom: 80px; } .section h2 + p { margin-bottom: 36px; } }

.cards { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.cards > li {
  min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px 26px;
  display: grid; gap: 10px; align-content: start;
}
.cards h3 { margin: 0; font: 600 1.375rem/1.2 var(--font); letter-spacing: -0.02em; }
.cards p { margin: 0; color: var(--dim); font-size: 1rem; line-height: 1.62; }

.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: step; }
.steps > li { counter-increment: step; }
.steps > li::before {
  content: "0" counter(step); justify-self: start; margin-bottom: 8px;
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  background: var(--cherry); color: var(--on-cherry); font: 600 0.9375rem/1 var(--font); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .features { grid-template-columns: 1fr; } }
.features > li { grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; }
.features > li > svg { grid-row: span 2; width: 48px; height: 48px; padding: 12px; border-radius: 14px;
  color: var(--accent); background: var(--tab-active); }
@media (max-width: 400px) { .features > li { grid-template-columns: 1fr; } .features > li > svg { grid-row: auto; margin-bottom: 6px; } }

.privacy-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface);
}
.privacy-card > div { padding: 28px 24px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.privacy-card > div + div { border-left: 1px solid var(--line); }
@media (max-width: 760px) {
  .privacy-card { grid-template-columns: 1fr; }
  .privacy-card > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
.privacy-card h3 { margin: 0; font: 500 0.8125rem/1.25 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.privacy-card ul { margin: 0; padding-left: 1.1em; color: var(--text); }
.privacy-card li { margin: 8px 0; padding-left: 2px; }
.privacy-card li::marker { color: var(--accent); }
.privacy-card .more { margin: 0; padding: 20px 24px; grid-column: 1 / -1; border-top: 1px solid var(--line); color: var(--dim); font-size: 0.9375rem; }

/* Sello «IA»: pequeño, cereza, en una esquina (como en las fotos y Reels de la app) */
.ai-note { display: flex; align-items: flex-start; gap: 14px; margin: 28px 0 0; max-width: 64ch; color: var(--dim); font-size: 0.9375rem; }
.ai-badge {
  flex: none; display: inline-grid; place-items: center; height: 24px; padding: 0 9px; margin-top: 1px; border-radius: 999px;
  background: var(--cherry); color: var(--on-cherry); font: 600 0.75rem/1 var(--font); letter-spacing: 0.06em;
}

/* Entrada suave (fade + subir 8 px, 240 ms, como la app); sin movimiento si se pide */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 520ms var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .hero-copy > :nth-child(n+4) { animation-delay: 180ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}