/* OBDScan — sitio de producto.
   Sin framework, sin CDN, sin fuentes remotas: el sitio se sirve entero desde su propio
   origen, igual que la vista web que la app levanta en el teléfono.

   Los seis temas son las mismas semillas que AppThemes.kt. Cambiar uno aquí sin cambiarlo
   allá deja el sitio mintiendo sobre la app. */

/* ------------------------------------------------------------------ temas */

:root,
[data-theme="obdscan"] {
  --bg: #0c1216;
  --surface: #151e23;
  --raised: #1c282e;
  --brand: #45e778;
  --brand-ink: #06140c;          /* texto sobre relleno de marca */
  --secondary: #45e778;
  --accent: #82c5ff;
  --text: #eaf1f4;
  --muted: #adbcc4;
  --border: #35464f;
  --outline: #6f838d;
  --warning: #ffce70;
  --danger: #ff8c88;
  --glow: rgba(69, 231, 120, 0.16);
}

[data-theme="vice"] {
  --bg: #13132a;
  --surface: #1b1b3a;
  --raised: #24244b;
  --brand: #ff4fa3;
  --brand-ink: #1b0512;
  --secondary: #27d3ff;
  --accent: #a78bfa;
  --text: #f3f4f6;
  --muted: #b8b9d4;
  --border: #3a3a68;
  --outline: #7b7ca8;
  --glow: rgba(255, 79, 163, 0.18);
}

[data-theme="la"] {
  --bg: #0c1424;
  --surface: #132038;
  --raised: #1b2c4c;
  --brand: #5b9cff;              /* readableOn(): la semilla #3B82F6 se aclara 19 % */
  --brand-ink: #04101f;
  --secondary: #0ea5e9;
  --accent: #7dd3fc;
  --text: #f3f4f6;
  --muted: #a9bad4;
  --border: #2b4066;
  --outline: #6d85ab;
  --glow: rgba(91, 156, 255, 0.18);
}

[data-theme="ny"] {
  --bg: #111315;
  --surface: #1c2127;
  --raised: #262d35;
  --brand: #f5c542;
  --brand-ink: #1a1401;
  --secondary: #ffc107;
  --accent: #94a3b8;
  --text: #f5f5f5;
  --muted: #aeb6bf;
  --border: #39424c;
  --outline: #74808c;
  --glow: rgba(245, 197, 66, 0.16);
}

[data-theme="cyberpunk"] {
  --bg: #090b12;
  --surface: #111827;
  --raised: #182238;
  --brand: #00e5ff;
  --brand-ink: #00141a;
  --secondary: #ff2bd6;
  --accent: #a3ff12;
  --text: #f4f7fb;
  --muted: #a7b4c8;
  --border: #27354d;
  --outline: #66788f;
  --glow: rgba(0, 229, 255, 0.18);
}

[data-theme="serius"] {
  --bg: #0f1720;
  --surface: #18222d;
  --raised: #202d3b;
  --brand: #56a9b5;              /* readableOn(): la semilla #2F7E8A se aclara 31 % */
  --brand-ink: #03151a;
  --secondary: #4ca6a8;
  --accent: #9fc7c9;
  --text: #f5f7fa;
  --muted: #a8b8c4;
  --border: #2e3f4f;
  --outline: #6c8190;
  --glow: rgba(86, 169, 181, 0.16);
}

:root {
  --warning: var(--warning, #ffce70);
  --danger: var(--danger, #ff8c88);

  --max: 1120px;
  --gutter: 20px;
  --radius: 16px;
  --radius-sm: 10px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans JP",
    "Noto Sans KR", "Noto Sans SC", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Todos los temas son oscuros por diseño: la app fija tema oscuro y el sitio lo acompaña.
   Se declara para que el navegador pinte formularios y barras con el esquema correcto. */
:root { color-scheme: dark; }

/* ------------------------------------------------------------------ base */

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h3 { font-size: 1.18rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; height: auto; display: block; }
code, kbd { font-family: var(--mono); font-size: 0.88em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

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

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--brand-ink);
  padding: 12px 18px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.center { text-align: center; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* El desenfoque es adorno: sólo se pide donde el navegador lo declara soportado, y
   entonces el fondo pasa a semitransparente. En WebView antiguos backdrop-filter deja
   de repintar el contenido que pasa por debajo, así que el fondo opaco es el valor
   por defecto y no una degradación. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
  }
}
.site-header > .wrap {
  display: flex; align-items: center; gap: 14px;
  min-height: 62px; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 30px; height: 30px; flex: none; }
.brand b { color: var(--brand); font-weight: 700; }

.nav { display: flex; gap: 4px; margin-inline-start: auto; align-items: center; flex-wrap: wrap; }
.nav a {
  color: var(--muted); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  padding: 7px 11px; border-radius: 999px;
}
.nav a:hover { color: var(--text); background: var(--surface); }
.nav a[aria-current="page"] { color: var(--brand); }

@media (max-width: 860px) {
  .nav { order: 3; width: 100%; margin: 0 0 10px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .nav a { white-space: nowrap; }
}

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

.lang { position: relative; margin-inline-start: 8px; }
.lang > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.88rem; color: var(--text); background: var(--surface);
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { border-color: var(--outline); }
.lang[open] > summary { border-color: var(--brand); }
.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; width: min(340px, calc(100vw - 32px));
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  max-height: 60vh; overflow-y: auto;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.lang-menu a {
  color: var(--text); text-decoration: none; font-size: 0.88rem;
  padding: 7px 10px; border-radius: 8px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.lang-menu a:hover { background: var(--raised); }
.lang-menu a[aria-current="true"] { color: var(--brand); font-weight: 600; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 0.97rem; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: transform 0.12s ease, background 0.16s ease, border-color 0.16s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--brand) 86%, #fff); }
.btn-ghost { border-color: var(--border); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--outline); background: var(--surface); }

/* ------------------------------------------------------------------ insignias de tienda */

.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px 11px 17px; min-width: 210px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.store:hover { text-decoration: none; }
.store svg { width: 26px; height: 26px; flex: none; }
.store .lines { display: flex; flex-direction: column; line-height: 1.25; }
.store .top { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.store .bot { font-size: 1.02rem; font-weight: 600; }

/* Estado sin enlace: la tienda todavía no tiene ficha publicada. Es un <span>, no un <a>,
   para que ningún lector de pantalla ni ningún dedo prometa una descarga que no existe. */
.store[data-state="pending"] { cursor: default; opacity: 0.72; border-style: dashed; }
.store[data-state="pending"]:hover { transform: none; }
.store[data-state="live"]:hover { border-color: var(--brand); background: var(--raised); }

/* ------------------------------------------------------------------ chips */

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 0.85rem; color: var(--muted);
}
.chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex: none;
}

/* ------------------------------------------------------------------ secciones */

section { padding: clamp(56px, 8vw, 96px) 0; }
section + section { border-top: 1px solid var(--border); }

.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 12px;
}
.lede { font-size: clamp(1.02rem, 2.2vw, 1.2rem); color: var(--muted); max-width: 62ch; }
.section-head { max-width: 64ch; margin-bottom: clamp(32px, 5vw, 48px); }

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

.hero { padding-top: clamp(48px, 7vw, 84px); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset-inline-start: 50%; top: -240px;
  width: 760px; height: 560px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--glow), transparent 68%);
  pointer-events: none;
}
.hero > .wrap { position: relative; display: grid; gap: clamp(36px, 5vw, 56px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .hero > .wrap { grid-template-columns: 1.08fr 0.92fr; } }

.hero h1 { margin-bottom: 18px; }
.hero h1 .accent { color: var(--brand); }
.hero .lede { margin-bottom: 26px; }
.hero .stores { margin-bottom: 14px; }
.hero .chips { margin-top: 22px; }

/* ------------------------------------------------------------------ maqueta de teléfono */

.phone {
  width: min(320px, 82vw); margin: 0 auto;
  border: 9px solid #05080a; border-radius: 40px;
  background: var(--bg); overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border);
}
.phone img { width: 100%; display: block; }
.phone-caption { text-align: center; margin-top: 14px; font-size: 0.82rem; color: var(--muted); }

/* ------------------------------------------------------------------ cifras */

.stats { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(6, 1fr); } }
.stat { background: var(--surface); padding: 22px 16px; text-align: center; }
.stat .n { font-size: 1.6rem; font-weight: 700; color: var(--brand); letter-spacing: -0.02em; line-height: 1.1; }
.stat .l { font-size: 0.8rem; color: var(--muted); margin-top: 5px; display: block; }

/* ------------------------------------------------------------------ rejillas de tarjetas */

.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 680px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 24px;
}
.card h3 { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.card p:last-child { margin-bottom: 0; }
.card .ico { width: 24px; height: 24px; flex: none; color: var(--brand); }
.card .tag {
  display: inline-block; margin-top: 14px; padding: 3px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
  border: 1px solid var(--border); color: var(--muted);
}

/* ------------------------------------------------------------------ pasos */

.steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; position: relative; }
.step::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: var(--brand-ink);
  font-weight: 700; font-size: 1rem; margin-bottom: 14px;
}

/* ------------------------------------------------------------------ tablas */

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 520px; }
th, td { text-align: start; padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--raised); font-size: 0.79rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
td .yes { color: var(--brand); font-weight: 600; }
td .no { color: var(--muted); }

/* ------------------------------------------------------------------ privacidad */

.privacy-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.privacy-list li { display: flex; gap: 12px; align-items: flex-start; }
.privacy-list .tick { flex: none; width: 21px; height: 21px; margin-top: 3px; color: var(--brand); }

/* ------------------------------------------------------------------ selector de temas */

.theme-picker { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 26px; list-style: none; }
.theme-swatch {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 500;
}
.theme-swatch:hover { border-color: var(--outline); }
.theme-swatch[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.theme-swatch .dots { display: flex; }
.theme-swatch .dots i {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--surface); display: block;
}
.theme-swatch .dots i + i { margin-inline-start: -6px; }

/* ------------------------------------------------------------------ FAQ */

.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.faq summary {
  cursor: pointer; padding: 17px 20px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 1.3rem; font-weight: 400; flex: none; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq .answer { padding: 16px 20px 4px; color: var(--muted); }

/* ------------------------------------------------------------------ aviso */

.notice {
  border: 1px solid var(--border); border-inline-start: 3px solid var(--warning);
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 18px 22px; color: var(--muted); font-size: 0.93rem;
}
.notice strong { color: var(--text); }

/* ------------------------------------------------------------------ cta final */

.cta { text-align: center; }
.cta .stores { justify-content: center; margin-top: 26px; }

/* ------------------------------------------------------------------ páginas legales */

.legal { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 88px); }
.legal .wrap { max-width: 78ch; }
.legal h1 { font-size: clamp(1.9rem, 4.6vw, 2.7rem); margin-bottom: 10px; }
.legal .meta { color: var(--muted); font-size: 0.89rem; margin-bottom: 36px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.legal h2 { font-size: 1.35rem; margin-top: 2.4em; scroll-margin-top: 80px; }
.legal h3 { font-size: 1.06rem; margin-top: 1.8em; }
.legal ul, .legal ol { padding-inline-start: 1.3em; margin: 0 0 1em; }
.legal li { margin-bottom: 0.5em; }
.legal .toc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 40px;
}
.legal .toc h2 { font-size: 0.79rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 12px; }
.legal .toc ol { margin: 0; padding: 0; list-style: none; }
.legal .toc li { margin-bottom: 4px; font-size: 0.93rem; }
.legal .notice { margin: 28px 0; }

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

.site-footer { border-top: 1px solid var(--border); padding: 52px 0 40px; background: var(--surface); }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.site-footer h4 { font-size: 0.79rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 14px; font-weight: 600; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer li a { color: var(--muted); text-decoration: none; font-size: 0.93rem; }
.site-footer li a:hover { color: var(--text); text-decoration: underline; }
.footer-bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  color: var(--muted); font-size: 0.85rem;
}

/* ------------------------------------------------------------------ RTL */

[dir="rtl"] .step::before,
[dir="rtl"] .theme-swatch .dots { direction: ltr; }
[dir="rtl"] .phone { direction: ltr; }

/* ------------------------------------------------------------------ CJK */

/* En japonés, chino y coreano no hay espacios donde partir la línea, así que el
   navegador corta a mitad de palabra. `auto-phrase` parte por unidades de sentido
   donde está soportado; el resto de reglas evitan cortes feos en el resto. */
:root:lang(ja), :root:lang(zh-Hans), :root:lang(ko) {
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic",
    "Noto Sans JP", "Noto Sans SC", "Noto Sans KR", "Microsoft YaHei",
    "Malgun Gothic", sans-serif;
}
:lang(ja) h1, :lang(zh-Hans) h1, :lang(ko) h1,
:lang(ja) h2, :lang(zh-Hans) h2, :lang(ko) h2,
:lang(ja) h3, :lang(zh-Hans) h3, :lang(ko) h3 {
  word-break: auto-phrase;
  line-break: strict;
  letter-spacing: 0;          /* el tracking negativo aprieta demasiado los ideogramas */
}
:lang(ja) body, :lang(zh-Hans) body, :lang(ko) body { line-height: 1.8; }
:lang(ja) p, :lang(zh-Hans) p, :lang(ko) p { line-break: strict; }

/* El tailandés, el árabe y el hindi tienen ascendentes y descendentes altos: la
   línea apretada del diseño base les corta las marcas diacríticas. */
:lang(ar) body, :lang(hi) body { line-height: 1.85; }