/* CheckAut — sitio web
   Colores tomados de artifacts/mobile/constants/colors.ts (app). Mobile-first. */

:root {
  --primary: #0A93CE;
  --primary-strong: #0873A5; /* texto y botones con texto blanco: 5,24:1 (AA) */
  --primary-text: #0873A5; /* texto de acento y enlaces */
  --primary-soft: #E6EFFA;
  --pro: #00C9D4; /* turquesa de Pro: solo para lo Pro */
  --pro-deep: #064052;
  --bg: #F1F5F9;
  --surface: #FFFFFF;
  --text: #0F172A;
  --text-muted: #5F6F86; /* #64748B de la app da 4,34:1 sobre el fondo; este llega a 4,67:1 (AA) */
  --border: #E2E8F0;
  --success: #059669;
  --success-bg: #D1FAE5;
  --warning: #B45309;
  --warning-bg: #FEF3C7;
  --hero-from: #E6F4FB;
  --shadow: 0 1px 2px rgb(15 23 42 / .04), 0 8px 24px rgb(15 23 42 / .06);
  --shadow-lg: 0 30px 80px -20px rgb(10 60 100 / .35);
  --radius: 16px;
  --radius-lg: 18px;
  --container: 1160px;
  --gutter: 16px;
  --header-h: 64px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #0088C2;
    --primary-strong: #0873A5;
    --primary-text: #38B6E8; /* texto de acento sobre fondo oscuro: 7,67:1 */
    --primary-soft: #1E3A5F;
    --pro: #00C9D4;
    --bg: #0F172A;
    --surface: #1E293B;
    --text: #E2E8F0;
    --text-muted: #94A3B8;
    --border: #334155;
    --success: #4ADE80;
    --success-bg: #14532D;
    --warning: #FBBF24;
    --warning-bg: #78350F;
    --hero-from: #0B2236;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
    --shadow-lg: 0 30px 80px -20px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary-text); }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 820px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Lenis (equivale a lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .75em 1.4em; border-radius: 999px;
  font: 600 1rem/1.2 var(--font); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { min-height: 40px; padding: .5em 1.1em; font-size: .9375rem; }
.btn-primary { background: var(--primary-strong); color: #fff; box-shadow: 0 6px 18px -6px rgb(10 147 206 / .6); }
.btn-primary:hover { background: #065F86; }
.btn-ghost { color: var(--text); background: transparent; }
.btn-ghost:hover { color: var(--primary-text); }
.btn-outline { border-color: var(--border); color: var(--text); background: var(--surface); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary-text); }
.btn-light { background: #fff; color: #075E85; }

/* Badge oficial de Google Play: se usa sin modificar (ni recortar ni recolorear). */
.play-badge { display: inline-block; line-height: 0; border-radius: 10px; }
.play-badge img { width: 180px; height: auto; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
}
/* El desenfoque va en un pseudo-elemento: un backdrop-filter en el propio header
   lo volvería el contenedor del panel fijo del menú móvil y lo recortaría. */
.site-header::before {
  content: ""; position: absolute; inset: 0;
  opacity: 0; transition: opacity .3s ease;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--border);
}
.site-header::before { opacity: 1; }
.site-header.is-open::before { opacity: 0; }
/* Sobre el hero azul (estados 2 y 3 y el inicio en móvil) el header toma el color del fondo;
   al pasar a la sección siguiente vuelve a su barra clara (main.js alterna .on-hero).
   El tinte del mismo azul al 20% lleva el texto blanco del menú a ≥4,7:1 (AA). */
.site-header .brand-logo--onhero { display: none; height: 30px; width: auto; aspect-ratio: 310 / 67; color: #fff; }
.site-header.on-hero:not(.is-open)::before { background: rgb(0 60 95 / .2); box-shadow: none; }
.site-header.on-hero:not(.is-open) .brand picture { display: none; }
.site-header.on-hero:not(.is-open) .brand-logo--onhero { display: block; }
.site-header.on-hero:not(.is-open) .menu-toggle { color: #fff; }
.site-header.on-hero:not(.is-open) .nav-list a { color: #fff; }
.site-header.on-hero:not(.is-open) .nav-list a:hover { background: rgb(255 255 255 / .14); }
.site-header.on-hero:not(.is-open) .lang-switch { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .3); }
.site-header.on-hero:not(.is-open) .lang-switch a { color: #fff; }
.site-header.on-hero:not(.is-open) .lang-switch a[aria-current="true"] { background: #fff; color: #0779AB; }
.site-header.on-hero:not(.is-open) .btn-primary { background: #fff; color: #0779AB; box-shadow: 0 6px 18px -6px rgb(0 0 0 / .3); }
.site-header.on-hero :focus-visible { outline-color: #fff; }
.site-header::before, .site-header .nav-list a, .site-header .lang-switch, .site-header .lang-switch a, .site-header .btn-primary, .site-header .menu-toggle {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
}
.header-inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; position: relative; z-index: 2; }
.brand-logo { height: 30px; width: auto; }

.menu-toggle {
  position: relative; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer;
}
.menu-icon { width: 22px; height: 14px; position: relative; }
.menu-icon span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, top .3s ease; }
.menu-icon span:first-child { top: 2px; }
.menu-icon span:last-child { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-icon span:first-child { top: 6px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon span:last-child { top: 6px; transform: rotate(-45deg); }

/* Menú móvil: panel a pantalla completa */
.site-nav {
  position: fixed; inset: 0; z-index: 1;
  padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  overflow-y: auto;
}
.site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nav-list a {
  display: block; padding: 12px 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border);
}
.nav-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lang-switch { list-style: none; margin: 0; padding: 4px; display: flex; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.lang-switch a { display: grid; place-items: center; min-width: 40px; min-height: 32px; padding: 0 8px; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: var(--text-muted); text-decoration: none; }
.lang-switch a[aria-current="true"] { background: var(--primary-soft); color: var(--primary-text); }
.lang-switch a:hover { color: var(--text); }

@media (min-width: 960px) {
  :root { --header-h: 76px; }
  .menu-toggle { display: none; }
  .site-nav {
    position: static; padding: 0; background: none; opacity: 1; visibility: visible; transform: none;
    flex-direction: row; align-items: center; gap: 28px; overflow: visible; flex: 1; justify-content: flex-end;
  }
  .nav-list { display: flex; gap: 4px; }
  .nav-list a { font-size: .9375rem; font-weight: 500; padding: 8px 12px; border: 0; border-radius: 999px; color: var(--text-muted); }
  .nav-list a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
  .nav-actions { gap: 12px; }
}

/* ---------- Hero ---------- */
/* Fondo de los estados 2 y 3 (y del layout estático): degradado de marca, tal cual.
   Sobre él el blanco del párrafo daría 3,46:1 (AA pide 4,5:1), así que ::before agrega un velo
   del mismo azul, más oscuro (opacidad 0,32), solo detrás de la columna de texto, que se desvanece
   hacia el teléfono: el peor punto del texto queda en ~4,7:1. isolation crea el contexto de
   apilado para que velo y resplandor queden sobre el fondo y bajo el contenido. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--header-h) + 40px) 0 56px;
  color: #fff;
  background: linear-gradient(218.33deg, #0088C2 7.76%, #0A93CE 66.33%, #0073A4 90.28%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  /* Móvil/tablet: el texto va arriba a todo el ancho. */
  background: linear-gradient(180deg, rgb(0 70 110 / .32) 0%, rgb(0 70 110 / .32) 55%, rgb(0 70 110 / 0) 78%);
}
@media (min-width: 960px) {
  /* Escritorio: el texto ocupa como máximo ~47% del ancho. */
  .hero::before { background: linear-gradient(90deg, rgb(0 70 110 / .32) 0%, rgb(0 70 110 / .32) 48%, rgb(0 70 110 / 0) 72%); }
}
.hero-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 55% at 80% 18%, rgb(255 255 255 / .2), transparent 70%),
    radial-gradient(35% 45% at 85% 100%, rgb(255 255 255 / .1), transparent 70%);
}
.hero :focus-visible { outline-color: #fff; }
/* En móvil el texto ocupa el ancho completo: el resplandor va solo abajo, detrás del teléfono. */
@media (max-width: 959.98px) {
  .hero-glow { background: radial-gradient(70% 28% at 50% 100%, rgb(255 255 255 / .14), transparent 70%); }
}
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero-title { font-size: clamp(2.6rem, 11vw, 5.25rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-title .line-inner { display: inline-block; }
.hero-title .line:last-child .line-inner { color: #CFF0FF; }
.hero-lead { margin-top: 20px; font-size: 1.0625rem; color: #fff; max-width: 34rem; }
.hero .btn-ghost { color: #fff; }
.hero .btn-ghost:hover { color: #CFF0FF; }
.hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero-note { margin-top: 16px; font-size: .875rem; color: #fff; }
@media (min-width: 768px) {
  .hero { padding: calc(var(--header-h) + 64px) 0 88px; }
  .hero-lead { font-size: 1.1875rem; }
  .play-badge img { width: 200px; }
}

/* Mockup del hero (diseños Contenido / Contenido-1 / Contenido-2, lienzo 1466×670).
   Dentro de .hero-stage, 1em = 1px del diseño escalado al ancho real del teléfono
   (--w equivale a los 255px del diseño). Así las tarjetas y el teléfono guardan las
   proporciones exactas a cualquier tamaño. */
.hero { --w: min(62vw, 260px); --u: calc(var(--w) / 255); --ph: calc(var(--u) * 523); }
.hero-visual { position: relative; width: var(--w); margin-inline: auto; }
.hero-stage { position: relative; font-size: var(--u); margin-top: 28px; }

.hphone {
  position: relative; width: 255em; height: 523em; padding: 9em;
  border-radius: 32em; background: #0B121F;
  box-shadow: 0 30em 80em -20em rgb(10 60 100 / .35);
  transform-origin: 50% 0;
}
.hphone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 24em; background: #F1F5F9; color: #0F172A; }
.hphone-welcome { display: none; position: absolute; inset: 0; padding: 40em 14em 0; text-align: center; background: #F8FAFC; }
.hphone-welcome-kicker { font-size: 12em; color: #64748B; }
.hphone-welcome-title { margin-top: .45em; font-size: 20.5em; font-weight: 700; line-height: 1.32; letter-spacing: -0.01em; }
.hphone-welcome-title span { color: #0A93CE; }
.hphone-app { position: absolute; inset: 0; }
.hphone-mark { position: absolute; left: 83.5em; top: 44em; width: 70em; height: 49em; color: #0A93CE; }
.hphone-play { display: block; width: 128em; margin: 16em auto 0; line-height: 0; }
.hphone-play img { width: 100%; height: auto; }
.hphone-btn {
  position: absolute; left: 33em; top: 431em; width: 171em; height: 48em;
  display: flex; align-items: center; justify-content: center; gap: 10em;
  border-radius: 24em; background: #0A93CE; color: #fff; box-shadow: 0 4em 8em rgb(10 147 206 / .35);
}
.hphone-btn svg { width: 14em; height: 14em; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.hphone-btn span { font-size: 15em; font-weight: 600; }

.hcard {
  position: absolute; background: #fff; color: #0F172A;
  box-shadow: 0 8em 24em rgb(15 23 42 / .12), 0 1em 3em rgb(15 23 42 / .06);
}
.hcard--chart { left: -42em; top: 146em; width: 328em; height: 224em; border-radius: 16em; padding: 12em; }
.hcard-tabs { display: flex; height: 40em; padding: 4em 8em; border-radius: 8em; background: #EFF6FF; }
.hcard-tabs span { flex: 1; display: grid; place-items: center; font-size: 12.5em; border-radius: .64em; color: #475569; }
.hcard-tabs span:last-child { background: #0A93CE; color: #fff; }
.hcard-title, .hcard-amount { line-height: 1.2; }
.hcard-title { margin-top: 1.1em; text-align: center; font-size: 13.5em; font-weight: 600; }
.hcard-amount { margin-top: .1em; text-align: center; font-size: 21em; font-weight: 800; color: #0A93CE; letter-spacing: -0.01em; }
.hcard-plot { position: absolute; left: 0; top: 112em; width: 328em; height: 104em; overflow: visible; }
.hcard-plot text { font-size: 11px; fill: #64748B; font-family: var(--font); }
.hcard-axis text { text-anchor: end; }
.hcard-axis text:nth-child(1) { transform: translate(52px, 132px); }
.hcard-axis text:nth-child(2) { transform: translate(52px, 160px); }
.hcard-axis text:nth-child(3) { transform: translate(52px, 188px); }
.hcard-months text { text-anchor: middle; }
.hcard-months text:nth-child(1) { transform: translate(95px, 207px); }
.hcard-months text:nth-child(2) { transform: translate(160px, 207px); }
.hcard-months text:nth-child(3) { transform: translate(221px, 207px); }
.hcard-months text:nth-child(4) { transform: translate(285px, 207px); fill: #0A93CE; font-weight: 700; }

.hcard--item { width: 228em; height: 52em; border-radius: 12em; padding: 9em 12em 9em 10em; display: flex; align-items: center; gap: 12em; }
.hcard-icon { flex: none; width: 34em; height: 34em; border-radius: 12em; background: #EFF6FF; display: grid; place-items: center; }
.hcard-icon svg { width: 18em; height: 18em; fill: none; stroke: #0A93CE; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hcard--tires .hcard-icon svg { stroke-width: 2; }
.hcard-text { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.hcard-text b { font-size: 13.5em; font-weight: 600; }
.hcard-text small { font-size: 10.5em; color: #64748B; }
.hcard--item em { font-style: normal; font-size: 13.5em; font-weight: 600; white-space: nowrap; }

/* Móvil y tablet: todo dentro del ancho de pantalla */
.hcard--tires { left: -48em; top: 384em; }
.hcard--acc { left: 75em; top: -22em; }

/* Capa oscura del estado inicial: solo en escritorio y con animación (main.js la desvanece). */
.hero-dark { display: none; }

@media (min-width: 960px) {
  .hero {
    --w: min(38vh, 17.7vw);
    height: 100vh; min-height: 600px;
    padding: var(--header-h) 0 0;
    display: flex; align-items: center;
  }
  .hero-grid { display: block; }
  .hero-copy { position: relative; z-index: 2; max-width: min(36vw, 540px); }
  .hero-title { font-size: min(4.2vw, 8.8vh); }
  .hero-lead { font-size: 1.0625rem; }
  /* Estado final (Contenido-2): teléfono centrado en el 73,9% del ancho y en vertical bajo el header. */
  .hero-visual {
    position: absolute; z-index: 2; left: 73.9%; margin-left: calc(var(--w) / -2);
    top: calc(var(--header-h) + (100% - var(--header-h) - var(--ph)) / 2);
    will-change: transform;
  }
  .hero-stage { margin-top: 0; }
  .hcard--tires { left: -228em; top: 179em; }
  .hcard--acc { left: 255em; top: 370em; }
}

@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  /* Antes de que corra el JS ya se pinta el estado inicial oscuro (sin parpadeo). */
  /* Capa oscura en piezas para animarlas por separado con el scroll: base azul noche + tres
     resplandores (círculos del diseño con desenfoque, hechos con gradientes radiales: no usan
     filter: blur, así que moverlos o desvanecerlos no obliga a repintar). */
  .js .hero-dark { display: block; position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
  .hero-dark-base { position: absolute; inset: 0; background: #0F172A; }
  .hero-orb {
    --r: 40vh; --a: 1;
    position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2);
    margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%;
    background: radial-gradient(closest-side, rgb(10 147 206 / var(--a)) var(--core, 0%), rgb(10 147 206 / 0) 100%);
    will-change: transform, opacity;
  }
  .hero-orb--bottom { --r: 72vh; --core: 46%; left: 50%; top: 89%; }
  .hero-orb--right { --r: 37vh; --a: .55; left: 84.3%; top: 16.8%; }
  .hero-orb--left { --r: 39vh; --a: .55; left: 5.7%; top: 27%; }
  /* Partículas ("pepas") traslúcidas del estado inicial; las crea y mueve main.js. */
  .hero-particles { position: absolute; inset: 0; will-change: transform, opacity; }
  /* Tamaño máx. 160px. Posición relativa al teléfono: en el estado 1 mide 2 × --w de ancho y
     está centrado, así que sus bordes quedan en 50% ± --w. */
  .hero-veh { --vs: clamp(100px, min(12vw, 26vh), 160px); position: absolute; width: var(--vs); will-change: transform, opacity; }
  .hero-veh-in { will-change: transform; }
  .hero-veh-ico { display: block; width: 100%; height: auto; }
  .hero-veh--cicla { left: calc(50% - var(--w) - var(--vs) - 4vw); top: 28%; }
  .hero-veh--carro { left: calc(50% - var(--w) - var(--vs) - 1.5vw); top: 61%; }
  .hero-veh--moto { left: calc(50% + var(--w) + 2.5vw); top: 42%; }
  .hero-particle { position: absolute; border-radius: 50%; will-change: transform; background: rgb(186 230 253 / .7); box-shadow: 0 0 10px rgb(56 189 248 / .7); }
  .hero-dark-brand { position: absolute; left: 0; right: 0; top: 16.7vh; display: flex; justify-content: center; will-change: transform, opacity; }
  .hero-dark-logo { display: block; height: clamp(36px, 9.4vh, 80px); width: auto; aspect-ratio: 310 / 67; }
  .js .hphone-welcome { display: block; }
  .js .site-header { opacity: 0; visibility: hidden; }
}

/* ---------- Teléfonos (mockups en CSS) ---------- */
.phone {
  --w: 260px;
  width: var(--w); aspect-ratio: 9 / 19; flex: none;
  padding: calc(var(--w) * .035); border-radius: calc(var(--w) * .15);
  background: #0B1220; box-shadow: var(--shadow-lg), inset 0 0 0 2px #273244;
  font-size: calc(var(--w) * .046);
}
.phone-screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: calc(var(--w) * .12);
  background: #F1F5F9; color: #0F172A;
  padding: 2.6em 1em 1em; display: flex; flex-direction: column; gap: .7em;
}
.phone-screen::before { /* cámara */
  content: ""; position: absolute; top: .8em; left: 50%; width: .9em; height: .9em; translate: -50% 0;
  border-radius: 50%; background: #0B1220;
}
.scr-top { display: flex; align-items: center; justify-content: space-between; }
.scr-top--sub { margin-top: .4em; }
.scr-title { font-weight: 700; font-size: 1.15em; letter-spacing: -0.01em; }
.scr-pro { font-size: .62em; font-weight: 800; color: #fff; background: #14B8A6; padding: .25em .6em; border-radius: 999px; letter-spacing: .04em; }
.scr-card { background: #fff; border-radius: .9em; padding: .8em .9em; display: grid; gap: .1em; box-shadow: 0 1px 2px rgb(15 23 42 / .06); }
.scr-card--primary { background: linear-gradient(135deg, #0A93CE, #0670A0); color: #fff; }
.scr-label { font-weight: 700; font-size: .9em; }
.scr-small { font-size: .7em; opacity: .75; }
.scr-amount { font-weight: 800; font-size: 1.5em; letter-spacing: -0.02em; }
.scr-amount--sm { font-size: 1.15em; }
.scr-bars { display: flex; align-items: flex-end; gap: .35em; height: 2.6em; margin-top: .4em; }
.scr-bars i { flex: 1; height: var(--h); border-radius: .25em; background: rgb(255 255 255 / .55); }
.scr-bars i:nth-child(4) { background: #fff; }
.scr-row { display: flex; align-items: center; gap: .7em; background: #fff; border-radius: .8em; padding: .65em .8em; font-size: .85em; line-height: 1.3; }
.scr-row b { display: block; font-weight: 600; }
.scr-row small { color: #64748B; font-size: .85em; }
.scr-row em { margin-left: auto; font-style: normal; font-weight: 700; }
.scr-row .icon { width: 2.1em; height: 2.1em; padding: .45em; border-radius: .6em; color: #0A93CE; background: #E6EFFA; }
.scr-row--warn .icon { color: #B45309; background: #FEF3C7; }
.scr-row--warn small { color: #B45309; font-weight: 600; }
.dot { width: .7em; height: .7em; border-radius: 50%; flex: none; }
.dot--a { background: #0A93CE; } .dot--b { background: #14B8A6; } .dot--c { background: #F59E0B; }
.scr-donut { align-self: center; width: 8em; height: 8em; border-radius: 50%; margin: .4em 0; background: conic-gradient(#0A93CE 0 47%, #14B8A6 0 79%, #F59E0B 0); display: grid; place-items: center; }
.scr-donut span { width: 62%; height: 62%; border-radius: 50%; background: #F1F5F9; }
.scr-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .5em; background: #0F172A; color: #fff; border-radius: 999px; padding: .75em; font-weight: 600; font-size: .85em; }
.scr-btn .icon { width: 1.3em; height: 1.3em; }
.scr-doc { display: flex; align-items: center; gap: .7em; background: #fff; border-radius: .9em; padding: .6em; font-size: .85em; line-height: 1.3; }
.scr-doc b { display: block; font-weight: 600; }
.scr-doc small { font-weight: 600; font-size: .85em; }
.scr-doc small.warn { color: #B45309; } .scr-doc small.ok { color: #059669; }
.scr-doc-thumb { width: 3.4em; height: 4em; border-radius: .5em; display: grid; place-items: center; color: #0A93CE; background: linear-gradient(160deg, #E6EFFA, #CFE3F5); flex: none; }
.scr-doc-thumb .icon { width: 1.6em; height: 1.6em; }
.scr-fab { position: absolute; right: 1em; bottom: 1em; width: 3em; height: 3em; border-radius: 1em; display: grid; place-items: center; color: #fff; background: #0A93CE; box-shadow: 0 6px 16px -4px rgb(10 147 206 / .6); }


/* ---------- Secciones después del hero (dirección en DISENO.md) ----------
   Tipografía: solo Inter, como la app (sistema de diseño, sección 3).
   Los objetos (factura, placa, regla) conservan sus colores reales en ambos temas. */
:root {
  --road: #64748B;      /* carretera de "Cómo funciona" */
  --road-card: #0F172A;
}
@media (prefers-color-scheme: dark) {
  :root { --road-card: #1E293B; }
}

/* Frase */
.statement { padding: 72px 0 56px; }
.statement-text { display: grid; gap: 24px; }
.statement-q { font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.2; letter-spacing: -0.025em; max-width: 28ch; }
.statement-a { max-width: 38ch; font-weight: 500; font-size: clamp(1.125rem, 2.2vw, 1.5rem); line-height: 1.45; letter-spacing: -0.01em; color: var(--text-muted); }
@media (min-width: 768px) { .statement { padding: 120px 0 88px; } }

/* Vitrina: los teléfonos sobre una carretera (asfalto y línea de carril) */
.showcase { padding: 16px 0 64px; }
.section-title.showcase-title { font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.25; max-width: 32ch; margin-bottom: 32px; }
.zoom-wrap { padding-inline: var(--gutter); }
.zoom-card {
  margin: 0 auto; max-width: 1280px; position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(218.33deg, #0088C2 7.76%, #0A93CE 66.33%, #0073A4 90.28%);
  padding: 40px 16px 20px;
  will-change: transform;
}
.zoom-phones { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: 16px; }
.zoom-phones .phone--sm { --w: 200px; display: none; }
.zoom-phones .phone--md { --w: min(62vw, 250px); }
/* Capturas reales dentro del marco vectorial (sin cámara: la captura ya trae su propia barra) */
.phone-screen--shot { padding: 0; display: block; background: #F1F5F9; }
.phone-screen--shot::before { display: none; }
.phone-screen--shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.zoom-caption { position: relative; z-index: 1; margin-top: 20px; font-size: .875rem; color: #fff; } /* abajo a la izquierda el degradado llega a #0073A4: blanco 5,5:1 */
@media (min-width: 768px) {
  .showcase { padding: 32px 0 104px; }
  .zoom-card { padding: 72px 32px 24px; }
  .zoom-phones { gap: 24px; }
  .zoom-phones .phone--sm { display: block; --w: 170px; margin-bottom: 28px; }
  .zoom-phones .phone--md { --w: 220px; }
}
@media (min-width: 1100px) {
  .zoom-phones { gap: 32px; }
  .zoom-phones .phone--sm { --w: 250px; margin-bottom: 32px; }
  .zoom-phones .phone--md { --w: 300px; }
}

/* Base de sección */
.section { padding: 72px 0; }
.section--tint { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { max-width: 46rem; margin-bottom: 40px; }
.section-title { font-weight: 700; font-size: clamp(1.75rem, 4.2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; }
.section-sub { margin-top: 16px; font-weight: 600; font-size: clamp(1.125rem, 2.4vw, 1.5rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--text); }
.section-lead { margin-top: 10px; color: var(--text-muted); font-size: 1.0625rem; max-width: 38rem; }
@media (min-width: 768px) { .section { padding: 112px 0; } .section-head { margin-bottom: 64px; } }

/* Palabras animadas de los títulos */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-word > span { display: inline-block; }

/* Funciones: la guantera */
.gbx { display: grid; gap: 36px; align-items: center; padding-block: 48px; border-top: 1px solid var(--border); }
.gbx-title { font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 1.875rem); line-height: 1.15; letter-spacing: -0.02em; }
.gbx-copy p { margin-top: 12px; color: var(--text-muted); max-width: 34rem; }
.gbx-list { margin: 20px 0 0 !important; display: grid; gap: 10px; max-width: 34rem; }
.gbx-list li { position: relative; padding-left: 22px; }
.gbx-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--primary); }
.pro-mark { display: inline-block; margin-left: 4px; padding: 2px 9px; border-radius: 999px; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 1px rgb(0 60 70 / .45); background: linear-gradient(90deg, #038795, #00C9D4 50%, #038A98); vertical-align: 1px; }
.gbx-art { display: grid; justify-items: center; }
@media (min-width: 900px) {
  .gbx { grid-template-columns: 5fr 6fr; gap: 72px; padding-block: 72px; }
  .gbx--flip .gbx-art { order: -1; }
}

/* Factura térmica saliendo de la impresora */
.printer { display: block; width: min(100%, 372px); height: 14px; border-radius: 8px; background: #64748B; }
.receipt {
  position: relative; width: min(100% - 32px, 340px); margin-top: -4px;
  padding: 26px 26px 30px; background: #fff; color: #0F172A;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 18px 24px rgb(15 23 42 / .18));
}
.receipt::after { /* borde dentado del papel */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 9px;
  background: conic-gradient(from -45deg at bottom, #fff 90deg, transparent 0) 0 0 / 18px 100% repeat-x; /* dientes hacia abajo, como un papel rasgado */
}
.receipt-head { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1.5px dashed #CBD5E1; }
.receipt-head b { font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.receipt-head span { font-size: .875rem; color: #64748B; }
.receipt-lines { margin: 0; padding: 12px 0; display: grid; gap: 8px; border-bottom: 1.5px dashed #CBD5E1; }
.receipt-lines div { display: flex; justify-content: space-between; gap: 16px; font-size: .9375rem; }
.receipt-lines dt { color: #334155; }
.receipt-lines dd { margin: 0; font-weight: 600; }
.receipt-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; }
.receipt-total span { font-size: .875rem; color: #64748B; }
.receipt-total b { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }

/* Tarjeta de documento (la de la app) con la campana de recordatorio flotando abajo a la derecha.
   Dentro de .doc-card, 1em = 1px del diseño (336×106) y escala con el ancho disponible. */
.doc-card { --u: min(1.25px, calc((100vw - 32px) / 336)); position: relative; width: calc(var(--u) * 336); max-width: 100%; font-size: var(--u); }
.doc-card-body {
  position: relative; width: 328em; height: 98em; margin: 3em 4em;
  background: #fff; color: #0F172A; border-radius: 12em;
  filter: drop-shadow(0 18px 24px rgb(15 23 42 / .18)); /* misma sombra que la factura */
}
.doc-ico { position: absolute; left: 10em; top: 11em; width: 34em; height: 34em; border-radius: 12em; background: #EFF6FF; display: grid; place-items: center; }
.doc-ico svg { width: 18em; height: 18em; fill: none; stroke: #0A93CE; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.doc-main { position: absolute; left: 56em; top: 11em; display: grid; gap: 3em; line-height: 1.2; }
.doc-main b { font-size: 14em; font-weight: 700; }
.doc-main small { font-size: 11em; color: #64748B; }
.doc-badge { position: absolute; right: calc(var(--u) * 44); top: calc(var(--u) * 12); padding: calc(var(--u) * 3) calc(var(--u) * 10); border-radius: 999px; background: #D1FAE5; color: #065F46; font-size: calc(var(--u) * 10); font-weight: 600; line-height: 1.2; }
.doc-chev { position: absolute; right: 12em; top: 19em; width: 18em; height: 18em; fill: none; stroke: #334155; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.doc-link {
  position: absolute; left: calc(var(--u) * 57); top: calc(var(--u) * 55); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 11);
  display: flex; align-items: center; gap: calc(var(--u) * 6); border: 1px solid #0A93CE; border-radius: 999px;
  color: #0873A5; font-size: calc(var(--u) * 12); font-weight: 500; white-space: nowrap;
}
.doc-link svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); fill: none; stroke: #0A93CE; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.doc-bell { position: absolute; right: -14em; bottom: -26em; width: 56em; height: 56em; filter: drop-shadow(0 8em 14em rgb(15 23 42 / .28)); }
.doc-bell-ico { display: block; width: 100%; height: 100%; }
/* Regla de 8 días con los dos avisos */
.ruler { position: relative; width: min(100%, 460px); padding: 104px 0 110px; }
.ruler-month { font-weight: 600; font-size: 1.25rem; color: var(--text-muted); margin-bottom: 8px; }
.ruler-days { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
/* Cada día es una cajita con fondo y borde (sin línea base ni marcas). Colores fijos, como el papel de la factura. */
.ruler-days li {
  display: grid; place-items: center; aspect-ratio: 5 / 6;
  background: #fff; color: #0F172A; border: 2px solid #E2E8F0; border-radius: 10px;
  font-weight: 700; font-size: clamp(1rem, 3.4vw, 1.375rem); line-height: 1;
}
.ruler-days li:first-child { border-color: #0A93CE; }                       /* hoy: el aviso de 7 días antes */
.ruler-days li:last-child { background: #FEF3C7; border-color: #F59E0B; color: #92400E; } /* vencimiento (advertencia de colors.ts) */
.ruler-note {
  position: absolute; width: min(78%, 300px); padding: 12px 14px; border-radius: 14px;
  background: #fff; color: #0F172A; box-shadow: 0 14px 30px -16px rgb(15 23 42 / .45);
  display: grid; gap: 2px; font-size: .875rem; line-height: 1.4;
}
.ruler-note b { font-size: .75rem; font-weight: 600; color: #64748B; }
.ruler-note--first { top: 0; left: 0; }
.ruler-note--last { bottom: 0; right: 0; }
.ruler-note--first::after, .ruler-note--last::after { /* puntero hacia el día */
  content: ""; position: absolute; width: 12px; height: 12px; background: #fff; rotate: 45deg;
}
.ruler-note--first::after { left: calc(100% / 16 * 0 + 22px); bottom: -6px; }
.ruler-note--last::after { right: 22px; top: -6px; }

/* Y además */
.gbx-extras { padding-top: 48px; border-top: 1px solid var(--border); display: grid; gap: 20px; }
.gbx-extras-title { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }
.gbx-extras dl { margin: 0; display: grid; gap: 20px; }
.gbx-extras dt { font-weight: 600; }
.gbx-extras dd { margin: 4px 0 0; color: var(--text-muted); max-width: 34rem; }
.gbx-extras dd p + p { margin-top: 10px; }
@media (min-width: 768px) {
  .gbx-extras { grid-template-columns: auto 1fr; gap: 24px 56px; padding-top: 64px; align-items: baseline; }
  .gbx-extras dl { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Cómo funciona: la carretera */
.road-sec { background: var(--surface); border-block: 1px solid var(--border); }
@media (min-width: 768px) { .road-sec { min-height: 100vh; display: flex; align-items: center; padding-block: calc(var(--header-h) + 24px) 64px; } .road-sec > .container { width: 100%; } }
.road { position: relative; }
.road-track { position: absolute; left: 12px; top: 0; bottom: 0; width: 60px; border-radius: 10px; background: var(--road); }
.road-line {
  position: absolute; left: 50%; top: 14px; bottom: 14px; width: 4px; margin-left: -2px;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / .92) 0 26px, transparent 26px 46px);
  transform-origin: 50% 0;
}
.road-stops { position: relative; display: grid; gap: 40px; padding: 18px 0 18px 92px !important; }
.road-stop { position: relative; }
.road-n {
  position: absolute; left: -92px; top: 0; width: 40px; height: 40px; margin-left: 22px;
  display: grid; place-items: center; border-radius: 50%;
  font-weight: 700; font-size: 1.125rem; line-height: 1;
  background: #fff; color: #0F172A; box-shadow: 0 0 0 3px var(--surface); /* mismo color que el fondo de la sección */
}
.road-stop h3 { font-weight: 700; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; }
.road-stop p { margin-top: 8px; color: var(--text-muted); max-width: 30rem; }
@media (min-width: 768px) {
  .road { padding-top: 0; }
  .road-track { left: -14px; right: -14px; top: 0; bottom: auto; width: auto; height: 64px; }
  .road-line { left: 18px; right: 18px; top: 50%; bottom: auto; width: auto; height: 4px; margin: -2px 0 0;
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / .92) 0 40px, transparent 40px 72px); transform-origin: 0 50%; }
  .road-stops { grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 0 !important; }
  .road-stop { padding-top: 96px; }
  .road-n { left: 0; top: 10px; margin: 0; width: 44px; height: 44px; font-size: 1.25rem; }
}

/* Kicker y planes (versión de dos tarjetas) */
.pro-tag { font-size: .6875rem; font-weight: 800; letter-spacing: .05em; color: #fff; text-shadow: 0 1px 1px rgb(0 60 70 / .45); background: linear-gradient(90deg, #038795, #00C9D4 50%, #038A98); padding: 3px 8px; border-radius: 999px; }
.plans { display: grid; gap: 18px; }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 24px; box-shadow: var(--shadow);
}
.plan-name { font-size: 1.125rem; font-weight: 700; }
.plan-price { margin-top: 14px; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.plan-period { margin-top: 6px; font-size: .9375rem; color: var(--text-muted); }
.plan-list { margin: 24px 0 0 !important; display: grid; gap: 12px; }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; }
.plan-list .icon { color: var(--primary); margin-top: 2px; }
.plan--pro {
  padding-top: 52px;
  border: 0; color: #fff;
  background: radial-gradient(80% 60% at 100% 0%, rgb(0 201 212 / .4), transparent 60%), linear-gradient(150deg, #0A93CE, #075E85);
  box-shadow: var(--shadow-lg);
}
.plan--pro .plan-period { color: rgb(255 255 255 / .85); }
.plan--pro .plan-list .icon { color: #99F6E4; }
.plan-badge { position: absolute; top: 24px; right: 24px; font-size: .75rem; font-weight: 700; background: rgb(255 255 255 / .18); padding: 5px 10px; border-radius: 999px; }
/* Pantallas angostas (<372px, p. ej. 360px de Android): la insignia pasa a su propia línea para no chocar con el escudo */
@media (max-width: 371.98px) {
  .plan-badge { position: static; align-self: flex-start; margin-bottom: 10px; }
  .plan--pro { padding-top: 56px; }
}
/* Escudo Pro: centrado arriba, mitad afuera y mitad adentro de la tarjeta (el SVG de la marca, sin cambios).
   Se centra con la propiedad translate para no chocar con el transform de GSAP. */
.plan-shield { position: absolute; left: 50%; top: 0; translate: -50% -50%; width: 84px; pointer-events: none; z-index: 2; filter: drop-shadow(0 10px 16px rgb(0 40 50 / .35)); }
.plan-shield-ico { display: block; width: 100%; height: auto; }
@media (min-width: 768px) { .plans { grid-template-columns: 1fr 1fr; gap: 24px; max-width: 920px; } .plan { padding: 40px 36px; } .plan-price { font-size: 2.25rem; } }
@media (min-width: 768px) { .plan-shield { width: 96px; } }
.plans-notes { margin-top: 28px; display: grid; gap: 6px; font-size: .875rem; color: var(--text-muted); max-width: 46rem; }

/* Preguntas + soporte */
.faq-sec { background: var(--surface); border-top: 1px solid var(--border); }
.faq-layout { display: grid; gap: 40px; }
.faq-help { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); max-width: 26rem; }
.faq-help h3 { font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; }
.faq-help p { margin-top: 8px; color: var(--text-muted); }
.faq-mail { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 1.0625rem; text-underline-offset: 4px; overflow-wrap: anywhere; }
.faq { border-bottom: 1px solid var(--border); }
.faq-item { border-top: 1px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; font-weight: 600; font-size: 1.0625rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--primary-text); }
.faq-sign { position: relative; width: 16px; height: 16px; flex: none; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; transition: transform .25s ease; }
.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: rotate(0deg); }
.faq-a { padding: 0 36px 22px 0; color: var(--text-muted); max-width: 62ch; }
@media (min-width: 960px) {
  .faq-layout { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
  .faq-side { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* CTA final (versión clara con el ícono de la app) */
.final-cta { padding: 88px 0 96px; text-align: center; background: radial-gradient(60% 70% at 50% 100%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%); }
.final-inner { display: grid; justify-items: center; gap: 16px; }
.final-icon { width: 80px; height: 80px; border-radius: 22px; box-shadow: var(--shadow-lg); margin-bottom: 8px; }
.final-title { font-weight: 700; font-size: clamp(1.875rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -0.03em; max-width: 24ch; }
.final-cta p { color: var(--text-muted); font-size: clamp(1.25rem, 2.8vw, 1.875rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 48px 0 24px; font-size: .9375rem; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.footer-brand, .footer-contact { grid-column: 1 / -1; }
.footer-brand p { margin-top: 12px; color: var(--text-muted); max-width: 26rem; }
.footer-title { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.site-footer ul { display: grid; gap: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; } /* zona táctil de 44px */
.site-footer a:hover { color: var(--primary-text); text-decoration: underline; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); display: grid; gap: 6px; text-align: center; font-size: .8125rem; color: var(--text-muted); }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1.3fr 1fr; }
  .footer-brand, .footer-contact { grid-column: auto; }
}

/* ---------- Estados iniciales de animación (solo con JS y sin movimiento reducido) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal], .js [data-card] { opacity: 0; transform: translateY(24px); }
  .js .hero-title .line-inner { transform: translateY(105%); }
  .js [data-hero-stage], .js [data-float] { opacity: 0; }
  .js .split-word > span { transform: translateY(105%); }
}
/* Si el CDN falla, main.js quita .js y todo queda visible. */

/* Escritorio/tablet con animación: profundidad 3D para tarjetas y desenfoque de títulos sin recorte */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .js .split-word { overflow: visible; }
  .js .zoom-card, .js .gbx-art, .js .road-line, .js .plan { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .btn:hover { transform: none; }
}

/* ---------- Páginas legales (política, términos, eliminar cuenta) ---------- */
.legal-main { padding-block: calc(var(--header-h) + 24px) 64px; }
.legal-wrap { max-width: 880px; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.legal-tabs a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--border); border-radius: 50px; background: var(--surface);
  color: var(--text-muted); font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.legal-tabs a:hover { color: var(--text); }
.legal-tabs a[aria-current="page"] { background: var(--primary-strong); border-color: var(--primary-strong); color: #fff; }
.legal-doc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 28px 20px 32px;
}
.legal-doc h1 { margin: 0 0 6px; font-size: clamp(1.625rem, 5vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; }
.legal-updated { margin: 0 0 24px; color: var(--text-muted); font-size: .875rem; }
.legal-doc h2 { margin: 32px 0 10px; font-size: 1.1875rem; line-height: 1.3; }
.legal-doc p, .legal-doc li { line-height: 1.7; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 16px; padding-left: 22px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc a { color: var(--primary-text); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-doc .highlight-box {
  margin: 0 0 20px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--warning-bg); color: var(--text); border: 1px solid var(--border);
}
.legal-doc .highlight-box p { margin: 0; }
@media (min-width: 768px) {
  .legal-main { padding-block: calc(var(--header-h) + 40px) 96px; }
  .legal-doc { padding: 44px 48px 52px; }
}
/* Dentro de la app (WebView de Android): solo los documentos, sin el encabezado ni el pie del sitio */
.in-app .site-header, .in-app .site-footer, .in-app .skip-link { display: none; }
.in-app .legal-main { padding-block: 16px 32px; }

/* Sprite de íconos: sin estilo en línea para poder usar una CSP estricta */
.sprite { position: absolute; }