/*
 * Landing.
 * Todos los colores salen de frontend/src/theme/palettes.ts (paletteDark / PLATFORM_BRAND) y las
 * fuentes de frontend/src/theme/fonts.ts. No agregar tonos propios: la landing tiene que verse
 * como la app, no como otra marca.
 */
:root {
  --bg: #0a0a0a;            /* primaryDark */
  --background: #121212;    /* background */
  --surface: #1e1e1e;       /* surface */
  --elevated: #2c2c2c;      /* surfaceElevated */
  --hover: #383838;         /* surfaceHover */
  --text: #ffffff;
  --text-2: #9e9e9e;        /* textSecondary */
  --border: rgba(255, 255, 255, 0.18);
  --border-soft: rgba(255, 255, 255, 0.08);
  --red: #c62828;           /* relleno con texto blanco: 5.62:1 (era #e63946, 4.17:1) */
  --red-bright: #d32f2f;
  --red-pressed: #b71c1c;
  --red-text: #ef5350;      /* rojo como texto sobre el fondo oscuro: 5.37:1 */
  --success: #22c55e;

  --ui: "Plus Jakarta Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; } /* los brillos de fondo no deben abrir scroll lateral */
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: clip; } /* clip y no hidden: hidden vuelve al body contenedor de scroll y anula position: sticky (el índice de la ayuda se iba con el scroll) */
a { color: inherit; text-decoration: none; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.muted { color: var(--text-2); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 16px; }

/* ── Botones: mismas proporciones que el botón primario de la app ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 10px;
  background: var(--red); color: #fff; border: 1px solid var(--red);
  font: 600 15px/1 var(--ui);
  transition: background-color .15s, border-color .15s;
}
.btn:hover { background: var(--red-bright); border-color: var(--red-bright); }
.btn:active { background: var(--red-pressed); border-color: var(--red-pressed); }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn--ghost:hover { background: var(--surface); border-color: var(--border); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.link { color: var(--text-2); font-size: 14px; font-weight: 500; padding: 12px 4px; transition: color .15s; }
.link:hover { color: var(--text); }

/* ── Nav ── */
.nav { display: flex; align-items: center; justify-content: space-between; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 16px var(--gutter); }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { display: block; width: auto; height: 35px; }
.nav__cta { display: flex; align-items: center; gap: 12px; }

/* ── Hero ── */
.hero { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(48px, 7vw, 96px); }
.hero__copy { max-width: 940px; }
.hero__lede { max-width: 620px; }
.hero h1 { margin: 0; text-wrap: balance; font: 800 clamp(40px, 6.4vw, 76px)/1.02 var(--ui); letter-spacing: -0.035em; }
.hero__lede { margin: 20px 0 32px; max-width: 580px; font-size: clamp(17px, 1.6vw, 20px); color: #c7c7c7; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Ventana de la app ── */
.app {
  margin: clamp(40px, 6vw, 64px) 0 0;
  display: grid; grid-template-columns: 200px 1fr;
  height: clamp(460px, 62vw, 680px);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--background);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}

.app__map { position: relative; min-height: 0; background: #1b1b1b; }

/* ── Portada: chrome flotante del mapa web (MapScreen.web.tsx), tema oscuro a 1280 px ──
   Isla: theme/mapSidePanelChrome.ts:142-190 (fondo surface al 94 %, borde blanco 8 %, radio 16,
   margen 12, sombra y blur 20px). Colores: theme/palettes.ts (paletteDark). */
.app--map { display: block; position: relative; background: #0c0c0c; } /* mapStyle.ts:59-62 */
.app--map > .map { position: absolute; inset: 0; }
.island { background: rgba(30, 30, 30, .94); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
.app--map svg[data-mdi] { fill: currentColor; }

/* Riel (screens/map/MapDrawerRail.tsx): 200 px a 1280, a 12 px del borde, radio 16 */
.rail { position: absolute; z-index: 2; left: 12px; top: 12px; bottom: 12px; width: 200px; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: rgba(30, 30, 30, .94); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
.rail__head { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 8px 0 14px; flex: none; }
.rail__chip { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: #b71c1c; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: -.2px; }
.rail__brand { display: grid; min-width: 0; flex: 1; }
.rail__brand strong { font-size: 15px; line-height: 19px; font-weight: 800; letter-spacing: -.15px; }
.rail__brand small { font-size: 12px; line-height: 15px; color: #9e9e9e; }
.rail__collapse { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #9e9e9e; }
.rail__collapse svg { width: 16px; height: 16px; }
.fleet { display: grid; gap: 10px; margin: 2px 10px 6px; padding: 14px; border-radius: 12px; background: #2c2c2c; flex: none; }
.fleet__label { font-size: 12px; line-height: 16px; font-weight: 600; color: #9e9e9e; }
.fleet__count { display: flex; align-items: baseline; gap: 8px; }
.fleet__count b { font-size: 30px; line-height: 32px; font-weight: 600; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.fleet__count span { font-size: 13px; font-weight: 500; color: #9e9e9e; }
.fleet__bar { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; }
.fleet__bar i { display: block; flex: var(--n) 1 0; background: var(--c); }
.fleet__legend { list-style: none; margin: 0 -6px; padding: 0; display: grid; gap: 2px; }
.fleet__legend li { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 6px; border-radius: 8px; font-size: 13px; color: #9e9e9e; }
.fleet__legend b { min-width: 22px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.fleet__legend b.is-zero { color: #9e9e9e; }
.st { width: 8px; height: 8px; border-radius: 4px; flex: none; }
.st--moving { background: #22c55e; }   /* success */
.st--stopped { background: #f59e0b; }  /* mapMarkerIdle */
.st--nosignal { background: #ff5252; } /* danger */
.st--offline { background: #9e9e9e; }  /* textSecondary */
.st--on { background: #22c55e; }
.st--off { background: #9e9e9e; }
.rail__nav { display: grid; align-content: start; gap: 0; padding: 4px 0; overflow: hidden; flex: 1; min-height: 0; }
.rail__section { padding: 14px 20px 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: #9e9e9e; }
.rail__item { display: flex; align-items: center; gap: 12px; min-height: 40px; margin: 0 8px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: #9e9e9e; }
.rail__item svg { width: 18px; height: 18px; flex: none; }
.rail__item.is-active { background: #2a0608; color: #ffcdd2; font-weight: 600; } /* accentContainer / onAccentContainer */
.rail__item.is-active svg { color: #ef5350; }
.rail__foot { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: auto; padding: 8px 16px; border-top: 1px solid rgba(255, 255, 255, .18); flex: none; }
.rail__avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #2c2c2c; font-size: 12px; font-weight: 700; }
.rail__user { display: grid; flex: 1; min-width: 0; }
.rail__user strong { font-size: 13px; line-height: 17px; font-weight: 600; }
.rail__user small { font-size: 12px; line-height: 15px; color: #9e9e9e; }
.rail__foot > svg { width: 18px; height: 18px; color: #9e9e9e; }

/* Buscador (overlayToolbar/MapOverlayTopSearch.tsx): alto 44, radio 12, máx. 480, centrado entre riel e íconos */
.msearch2 { position: absolute; z-index: 2; top: 12px; left: calc(224px + max(0px, (100% - 224px - 154px - 480px) / 2)); width: min(480px, calc(100% - 224px - 154px)); height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 12px; background: rgba(30, 30, 30, .94); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); font-size: 14px; color: #9e9e9e; white-space: nowrap; overflow: hidden; }
.msearch2 svg { width: 18px; height: 18px; flex: none; margin-left: 2px; }
/* Íconos de arriba a la derecha (MapOverlayTopStrip.tsx:120-178) y botones (OverlayButton.tsx:96-112) */
.topicons { position: absolute; z-index: 2; top: 12px; right: 12px; display: flex; gap: 2px; padding: 2px; }
.obtn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: #9e9e9e; }
.obtn svg { width: 20.8px; height: 20.8px; }
.obtn--badge b { position: absolute; top: 4px; right: 3px; min-width: 14px; height: 14px; padding: 0 2px; border-radius: 7px; background: #c62828; color: #fff; font-size: 8px; line-height: 14px; font-weight: 700; text-align: center; }
/* Controles en tarjetas (overlayToolbar/MapOverlayRightRail.tsx): desde 64 px, 8 entre tarjetas */
.rrail { position: absolute; z-index: 2; top: 64px; right: 12px; display: grid; gap: 8px; }
.rrail .island { display: grid; gap: 2px; padding: 2px; }
.app--map .map__demo { left: auto; right: 12px; bottom: 44px; z-index: 2; }
@media (max-width: 860px) {
  .app--map .rail { display: none; }
  .msearch2 { left: 12px; width: calc(100% - 24px - 142px - 8px); }
}
@media (max-width: 520px) {
  .app--map .rrail { display: none; }
  .topicons .obtn:nth-child(n + 2) { display: none; }
  .msearch2 { width: calc(100% - 24px - 46px - 8px); }
}
.map { position: absolute; inset: 0; }
.map__demo { position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 5px 9px; border-radius: 6px; background: rgba(18, 18, 18, .8); border: 1px solid var(--border-soft); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }

/* ── Footer ── */
.footer { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 32px var(--gutter); border-top: 1px solid var(--border-soft); font-size: 12px; }

/* ── Responsive: en pantallas chicas el menú lateral no entra y queda solo el mapa ── */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; height: 520px; }
  .app__drawer { display: none; }
}
@media (max-width: 420px) {
  .nav__cta .nav__login { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .app { height: 460px; margin-left: calc(-1 * var(--gutter) + 8px); margin-right: calc(-1 * var(--gutter) + 8px); }
}
.map__error { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--text-2); font-size: 14px; }

/* ── Secciones de funciones ── */
.feat { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter) 0; }
.feat__head { max-width: 640px; }
.feat__kicker { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--red-bright); letter-spacing: .02em; }
.feat h2 { margin: 0; font: 800 clamp(30px, 4.2vw, 48px)/1.05 var(--ui); letter-spacing: -0.03em; text-wrap: balance; }
.feat__lede { margin: 16px 0 0; font-size: clamp(16px, 1.4vw, 18px); color: #c7c7c7; max-width: 560px; }
.feat .app { margin-top: clamp(28px, 4vw, 44px); }

/* ── Historial ── */
/* ── Historial (MapHistoryPanel + barra de reproducción), tema oscuro ──
   Panel: MapScreenChromeShell.web.tsx:386-408, mapChromeLayout.web.css:26, historyPanel/*.
   Barra: historyPlayback/mapHistoryPlaybackBar.styles.ts, MapHistoryTimelineTrack.web.tsx.
   Con el riel colapsado (56 px): panel en x 76, 312 de ancho; barra desde 412 hasta 68 del borde. */
.app--hist { height: clamp(560px, 58vw, 700px); }
.tnum { font-variant-numeric: tabular-nums; }
.rail--collapsed { width: 56px; }
.rail--collapsed .rail__head { justify-content: center; padding: 0; }
.rail--collapsed .rail__nav { padding-top: 8px; gap: 2px; }
.rail--collapsed .rail__item { justify-content: center; margin: 0 8px; padding: 0; }
.rail--collapsed .rail__foot { justify-content: center; padding: 8px 0; }
.hpanel { position: absolute; z-index: 2; left: 76px; top: 12px; bottom: 12px; width: 312px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; border-radius: 16px; background: rgba(30, 30, 30, .94); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.hpanel svg[data-mdi] { fill: currentColor; }
.hpanel__head { display: flex; align-items: center; gap: 2px; padding: 10px 8px 0 16px; flex: none; }
.hpanel__head h3 { flex: 1; margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.15px; }
.hpanel__actions { display: flex; gap: 2px; }
.hbtn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #9e9e9e; }
.hbtn svg { width: 20px; height: 20px; }
.hsum { display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 10px 12px; border-radius: 10px; background: #2c2c2c; flex: none; }
.hsum > svg { width: 20px; height: 20px; flex: none; color: #9e9e9e; }
.hsum__info { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: #9e9e9e; }
.hsum__info strong { font-size: 14px; font-weight: 700; color: #fff; }
.hsum__nums { display: grid; justify-items: end; gap: 2px; }
.hsum__nums b { font-size: 14px; font-weight: 600; }
.hsum__nums small { font-size: 12px; font-weight: 500; color: #9e9e9e; }
.hsearch { display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 12px; padding: 0 12px; border-radius: 10px; background: #2c2c2c; font-size: 14px; color: #9e9e9e; flex: none; }
.hsearch svg { width: 18px; height: 18px; }
.hline { display: flex; align-items: center; gap: 8px; padding: 8px 4px 8px 16px; margin: 0 12px; flex: none; }
.hline__text { display: grid; flex: 1; min-width: 0; }
.hline__text strong { font-size: 13px; font-weight: 600; }
.hline__text span { font-size: 12px; color: #9e9e9e; }
.hfilter { position: relative; }
.hfilter__btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #fff; font: 600 12px var(--ui); cursor: pointer; }
.hfilter__btn svg { width: 16px; height: 16px; color: #9e9e9e; }
.hfilter__btn:hover { background: rgba(255, 255, 255, .08); }
.hfilter__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.hfilter__menu { position: absolute; z-index: 5; right: 0; top: 36px; width: 220px; display: grid; padding: 6px; border-radius: 12px; background: #2c2c2c; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.hfilter__title { padding: 6px 10px; font-size: 12px; font-weight: 600; color: #9e9e9e; }
.hfilter__menu button { min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #fff; font: 500 14px var(--ui); text-align: left; cursor: pointer; }
.hfilter__menu button:hover { background: rgba(255, 255, 255, .08); }
.hfilter__menu button[aria-pressed="true"] { background: #2a0608; color: #ffcdd2; font-weight: 600; }
.hday { margin: 0; min-height: 30px; display: flex; align-items: center; padding: 0 16px; border-top: 1px solid rgba(255, 255, 255, .18); border-bottom: 1px solid rgba(255, 255, 255, .18); background: #1e1e1e; font-size: 12px; font-weight: 600; letter-spacing: .2px; color: #9e9e9e; flex: none; }
.tl { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
.tl li[hidden] { display: none; }
.tlr { position: relative; display: flex; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.tlr--drive, .tlr--geofence { padding-top: 6px; padding-bottom: 6px; }
.tlr:hover { background: rgba(255, 255, 255, .08); }
.tlr.is-active { background: #2a0608; }
.tlr.is-active, .tlr.is-active .tlr__time, .tlr.is-active .tlr__addr, .tlr.is-active .tlr__title { color: #ffcdd2; }
.tlr__mark { position: relative; width: 26px; flex: none; display: flex; justify-content: center; }
/* Línea que une las filas: 2 px en el color de borde, sin cortes entre filas. */
.tlr__mark::before, .tlr__mark::after { content: ""; position: absolute; left: 12px; width: 2px; background: rgba(255, 255, 255, .18); }
.tlr__mark::before { top: -10px; height: 23px; }
.tlr__mark::after { top: 13px; bottom: -10px; }
li:first-child .tlr__mark::before, li:last-child .tlr__mark::after { display: none; }
.tlr--drive .tlr__mark::before, .tlr--geofence .tlr__mark::before { top: -6px; height: 19px; }
.tlr--drive .tlr__mark::after, .tlr--geofence .tlr__mark::after { bottom: -6px; }
.tlr__dot { position: relative; z-index: 1; display: grid; place-items: center; border-radius: 50%; }
.tlr__dot--edge { width: 26px; height: 26px; color: #000; }
.tlr__dot--edge svg { width: 14px; height: 14px; fill: currentColor; }
.tlr__dot--start { background: #22c55e; }
.tlr__dot--end { background: #ff5252; }
.tlr__dot--stop { width: 26px; height: 26px; background: #94a3b8; color: #000; font-size: 11px; font-weight: 600; }
.tlr__dot--drive { width: 20px; height: 20px; margin-top: 3px; border: 1.5px solid #9e9e9e; background: #1e1e1e; color: #9e9e9e; font-size: 10px; font-weight: 600; }
.tlr__dot--geofence { width: 10px; height: 10px; margin-top: 8px; background: #a78bfa; }
.tlr__body { display: grid; gap: 2px; padding-top: 3px; flex: 1; min-width: 0; }
.tlr__top { display: flex; align-items: baseline; gap: 8px; }
.tlr__title { flex: 1; font-size: 13px; font-weight: 600; }
.tlr--drive .tlr__title, .tlr--geofence .tlr__title { font-weight: 500; color: #9e9e9e; }
.tlr__dur { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tlr__time { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: #9e9e9e; }
.tlr__addr { display: flex; gap: 4px; font-size: 12px; line-height: 17px; color: #9e9e9e; }
.tlr__addr svg { width: 14px; height: 14px; flex: none; margin-top: 1px; fill: currentColor; }
.tlr__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tlr__chips span { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 11px; font-variant-numeric: tabular-nums; color: #9e9e9e; }
.tlr__seg { width: 36px; height: 36px; display: grid; place-items: center; align-self: flex-start; margin: -2px -6px 0 0; border-radius: 10px; color: #9e9e9e; }
.tlr__seg svg { width: 20px; height: 20px; fill: currentColor; }

/* Barra de reproducción flotante (modo mini): radio 12, borde blanco 18 %, sin sombra, blur 12 px */
.pbar { position: absolute; z-index: 3; left: 412px; right: 68px; bottom: 4px; height: 150px; display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(30, 30, 30, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pbar svg[data-mdi] { fill: currentColor; }
.pbar__top { display: flex; align-items: center; gap: 8px; padding: 2px 0; min-width: 0; }
.pbar__dev { display: inline-flex; align-items: center; gap: 7px; padding-right: 12px; font-size: 13px; letter-spacing: .1px; white-space: nowrap; }
.pbar__dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: none; }
.pbar__sep { width: 1px; height: 18px; margin: 0 4px; background: rgba(255, 255, 255, .18); flex: none; }
.pbar__sep--tall { height: 28px; margin: 0; }
.pbar__sep--soft { height: 20px; opacity: .7; margin: 0; }
.pbar__speed { display: inline-flex; align-items: center; gap: 4px; color: #ef5350; white-space: nowrap; }
.pbar__speed svg { width: 14px; height: 14px; }
.pbar__speed b { font-size: 12.5px; font-weight: 700; }
.pbar__legend { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; color: #9e9e9e; white-space: nowrap; }
.pbar__swatches { display: inline-flex; }
.pbar__swatches i { width: 10px; height: 4px; background: var(--c); }
.pbar__actions { display: inline-flex; gap: 2px; margin-left: auto; padding-left: 8px; }
.pbar__transport { display: inline-flex; align-items: center; gap: 4px; }
.pbtn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #9e9e9e; cursor: pointer; padding: 0; }
span.pbtn { cursor: default; }
.pbtn svg { width: 18px; height: 18px; }
button.pbtn:hover { background: rgba(255, 255, 255, .08); }
.pbtn.is-on { background: #2a0608; color: #ffcdd2; }
.pplay { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #c62828; color: #fff; cursor: pointer; padding: 0; }
.pplay svg { width: 24px; height: 24px; }
.pplay .i-pause, .pplay.is-playing .i-play { display: none; }
.pplay.is-playing .i-pause { display: block; }
.pchip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 0; border-radius: 15px; background: #2c2c2c; color: #fff; font: 700 12px var(--ui); cursor: pointer; }
.pchip svg { width: 13px; height: 13px; color: #ef5350; }
.pbar__time { margin-left: 2px; white-space: nowrap; }
.pbar__time b { font-size: 14px; font-weight: 700; }
.pbar__time small { margin-left: 6px; font-size: 12px; color: #9e9e9e; opacity: .8; }
.pbar__close { width: 32px; height: 32px; display: grid; place-items: center; margin-left: auto; color: #ff5252; }
.pbar__close svg { width: 18px; height: 18px; }
.pbar__clocks { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 5px; font-size: 9px; letter-spacing: .2px; color: rgba(158, 158, 158, .55); }
.pbar__now { display: inline-flex; gap: 6px; }
.pbar__now b:first-child { font-size: 10.5px; color: #ef5350; }
.pbar__now b:last-child { font-size: 11.5px; color: #fff; }
.ptrack { position: relative; flex: 1; min-height: 38px; padding: 4px 0; display: flex; flex-direction: column; }
.ptrack__hist { position: relative; flex: 1; min-height: 0; }
.ptrack__cols { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.ptrack__cols i { flex: 1; margin: 0 .75px; height: var(--h); border-radius: 1.5px 1.5px 0 0; background: rgba(158, 158, 158, .45); }
.ptrack__cols i.is-empty { visibility: hidden; }
.ptrack__cols--played { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.ptrack__cols--played i { background: #ef5350; }
.ptrack__line { position: relative; height: 22px; display: flex; align-items: center; flex: none; }
.ptrack__line::before { content: ""; position: absolute; left: 0; right: 0; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.ptrack__line i { position: absolute; left: 0; height: 5px; width: var(--p, 0%); border-radius: 3px; background: #ef5350; }
.ptrack__knob { position: absolute; left: var(--p, 0%); width: 15px; height: 15px; margin-left: -7.5px; border-radius: 8px; background: #ef5350; border: 3px solid #1e1e1e; box-sizing: border-box; }
.ptrack__marks { position: absolute; left: 0; right: 0; bottom: 5px; height: 20px; pointer-events: none; }
.pmark { position: absolute; top: 0; width: 20px; height: 20px; margin-left: -10px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); box-sizing: border-box; transition: transform .15s; }
.pmark svg { width: 11px; height: 11px; fill: currentColor; }
.pmark.is-near { background: var(--c); color: #fff; transform: scale(1.3); }
.ptrack #scrub { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ptrack:has(#scrub:focus-visible) { outline: 2px solid var(--red-bright); outline-offset: 2px; border-radius: 6px; }

.app--hist .map__demo { right: auto; left: 412px; bottom: auto; top: 12px; }
@media (max-width: 1100px) { .app--hist .hpanel { display: none; } .app--hist .pbar, .app--hist .map__demo { left: 76px; } }
@media (max-width: 860px) {
  .app--hist .pbar { left: 12px; right: 12px; }
  .app--hist .map__demo { left: 12px; }
  .app--hist .rrail { display: none; }
}
/* Con menos de 740 px de barra la app oculta la leyenda y la velocidad (useMapHistoryPlaybackBar.web.ts:186-188). */
@media (max-width: 900px) { .pbar__legend, .pbar__legend-sep, .pbar__speed, .pbar__sep--tall, .pbar__actions { display: none; } }
@media (max-width: 560px) { .pbar__time small, .pbar__dev { display: none; } .pbar { height: 140px; } }

/* ── Reportes ── */

/* Hoja: copia del CSS de templates/reports/report-table.html (el PDF real). */

/* En el teléfono el SVG de 600 unidades quedaría con texto de ~4 px: se le da un ancho mínimo y se desplaza, como la tabla. */

/* Solo para lectores de pantalla. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Android ── */
.droid { display: grid; grid-template-columns: minmax(0, 540px) auto; justify-content: space-evenly; gap: clamp(32px, 6vw, 96px); align-items: center; }

/* Marco del teléfono. Adentro, colores de paletteDark (palettes.ts): la app arranca en oscuro. */
.phone2 { margin: 0; width: 320px; aspect-ratio: 9 / 19.5; padding: 9px; border-radius: 44px; background: #0d0d0d; box-shadow: 0 0 0 1px #2a2a2a, 0 40px 90px -30px rgba(0, 0, 0, .9); }
.phone2__screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #121212; font-family: var(--ui); color: #fff; }
.phone2__status { position: absolute; top: 0; left: 0; right: 0; z-index: 6; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-size: 12px; color: #fff; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
.phone2__sys { display: inline-flex; gap: 4px; }
.phone2__sys i { width: 12px; height: 8px; border-radius: 2px; background: #fff; opacity: .85; }
.phone2__map { position: absolute; inset: 0; }
/* La atribución arriba a la derecha: abajo quedaba debajo de la tarjeta de la unidad. */
.phone2__map .maplibregl-ctrl-bottom-right { top: 88px; bottom: auto; }
.phone2__demo { position: absolute; top: 92px; left: 12px; z-index: 4; margin: 0; padding: 3px 7px; border-radius: 5px; background: rgba(18, 18, 18, .8); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #9e9e9e; }

/* MapFloatingSearch */
.msearch { position: absolute; top: 38px; left: 12px; right: 12px; z-index: 4; height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 14px; background: #1e1e1e; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 6px 14px rgba(0, 0, 0, .4); font-size: 15px; color: #9e9e9e; white-space: nowrap; overflow: hidden; } /* MapFloatingSearch: isla de radio 14 y 50 de alto */
.msearch span { overflow: hidden; text-overflow: ellipsis; }
.msearch svg { width: 30px; height: 30px; padding: 5.5px; border-radius: 999px; fill: #9e9e9e; flex: none; box-sizing: border-box; }

/* MapStatusChip: 14 px del borde, 10 px sobre la barra; superficie + CC de alfa. */
.mchip { position: absolute; left: 12px; right: 12px; bottom: 90px; z-index: 4; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-radius: 16px; background: #1e1e1e; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 6px 14px rgba(0, 0, 0, .4); } /* MapStatusChip: 10 px sobre la barra (80) */
.mchip > b { font-size: 20px; font-weight: 600; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.mchip > span:first-of-type { font-size: 13px; font-weight: 500; color: #9e9e9e; }
.mchip__bar { flex: 1; display: flex; gap: 2px; height: 6px; margin-left: 4px; border-radius: 3px; overflow: hidden; }
.seg { flex-basis: 0; height: 6px; }
.seg--moving { flex-grow: 4; background: #22c55e; }
.seg--stopped { flex-grow: 1; background: #f59e0b; }
.seg--offline { flex-grow: 1; background: #9e9e9e; }
.mchip svg { width: 22px; height: 22px; fill: #9e9e9e; flex: none; }

/* MobileNavBar: 60 px, fondo surface, etiqueta 10 px en mayúsculas, píldora 44×32 al 12 %. */
.mnav { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; height: 68px; padding: 6px; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 22px; background: #1e1e1e; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 6px 14px rgba(0, 0, 0, .4); } /* MobileNavBar: isla flotante, 12 de margen, 68 de alto */
.mnav__tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; font-size: 11px; font-weight: 600; color: #9e9e9e; }
.mnav__tab.is-on { color: #fff; font-weight: 700; }
.mnav__pill { position: absolute; top: 50%; width: 56px; height: 32px; margin-top: -26px; border-radius: 16px; background: linear-gradient(#d32f2f, #c62828); } /* secondaryLight → primaryAction */
.mnav__icon { position: relative; z-index: 1; width: 22px; height: 32px; display: grid; place-items: center; }
.mnav__icon svg { width: 22px; height: 22px; fill: currentColor; }
.mnav__badge { position: absolute; top: 0; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: #c62828; border: 1.5px solid #1e1e1e; color: #fff; font: 800 9px/11px var(--ui); transition: transform .25s; }
.mnav__badge.is-bump { transform: scale(1.25); }

/* Notificación emergente de Android (la dibuja el sistema, no la app). */
.push2 { position: absolute; top: 36px; left: 8px; right: 8px; z-index: 7; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 0; border-radius: 20px; background: #2b2b2e; color: #fff; text-align: left; font: inherit; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transform: translateY(-140%); transition: transform .5s cubic-bezier(.2, .7, .1, 1); }
.push2.is-in { transform: translateY(0); }
.push2:focus-visible { outline: 2px solid #ef5350; outline-offset: 2px; }
.push2__icon { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #c62828; } /* app.json: expo-notifications color */
.push2__icon svg { width: 16px; height: 16px; fill: #fff; }
.push2__body { display: grid; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.35; }
.push2__app { font-size: 11px; color: #a8a8ad; }
.push2__body strong { font-size: 13.5px; }
.push2__body span:last-child { color: #d7d7da; }

/* MobileDeviceCard (variante elevada, seleccionada). */
.mcard { position: absolute; left: 12px; right: 12px; bottom: 88px; z-index: 5; display: flex; overflow: hidden; border-radius: 12px; border: 1px solid #c62828; background: color-mix(in srgb, #c62828 10%, #1e1e1e); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: mcardIn .25s ease-out both; }
.mcard[hidden] { display: none; }
/* La tarjeta de la unidad descansa sobre la barra (8 de aire) y ocupa el lugar del chip de estado. */
.phone2__screen:has(.mcard:not([hidden])) .mchip { display: none; }
@keyframes mcardIn { from { opacity: 0; transform: translateY(6px); } }
.mcard__bar { width: 4px; flex: none; background: linear-gradient(color-mix(in srgb, var(--mc, #22c55e) 76%, white), color-mix(in srgb, var(--mc, #22c55e) 64%, black)); }
.mcard__body { flex: 1; display: grid; gap: 4px; padding: 12px 16px 12px 12px; min-width: 0; }
.mcard__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mcard__row strong { font-size: 15px; }
.mcard__speed { font-size: 14px; font-weight: 700; color: var(--mm, #22c55e); }
.mcard__sub { font-size: 12px; color: #9e9e9e; }
.mcard__pill { padding: 2px 6px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--mm, #22c55e); background: color-mix(in srgb, var(--mm, #22c55e) 14%, transparent); }

/* DeviceMapMarkerView, variante de flota: 56 px, imagen al 82 %, sombra elíptica, estado 12 px. */
/* absolute y arriba-izquierda: MapLibre ubica el marcador con transform; con position relative se
   apilaban en el flujo y cada uno quedaba 56 px más abajo que el anterior (medido). */
.nmk { position: absolute; top: 0; left: 0; width: 56px; height: 56px; pointer-events: none; }
.nmk__shadow { position: absolute; width: 29px; height: 12px; border-radius: 6px; left: 16.5px; top: 27px; background: rgba(0, 0, 0, .35); }
.nmk__img { position: absolute; left: 5px; top: 5px; width: 46px; height: 46px; object-fit: contain; }
.nmk__badge { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #141416; } /* dotRing del basemap oscuro (fleetMapTheme.ts:35) */
.nmk__badge--move { background: #22c55e; }
.nmk__badge--idle { background: #f59e0b; }
.nmk__badge--off { background: #9e9e9e; }

@media (max-width: 860px) {
  .droid { grid-template-columns: 1fr; justify-items: center; }
  
  .phone2 { width: min(320px, 86vw); }
}

/* ── Planes: medidas de subscriptionAdmin.styles.ts, colores de paletteDark ── */
.plans__head { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.plans__head > div:first-child { max-width: 640px; }
.plans__cycle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cycle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--elevated); border: .5px solid var(--border); }
.cycle button { min-height: 44px; padding: 8px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 700 13px var(--ui); cursor: pointer; }
.cycle button[aria-checked="true"] { background: var(--red); color: #fff; }
.cycle__save { padding: 4px 12px; border-radius: 999px; background: rgba(34, 197, 94, .09); border: 1px solid rgba(34, 197, 94, .27); color: var(--success); font-size: 12px; font-weight: 700; }
.cycle__save[hidden] { display: none; }

.plans__grid { margin-top: clamp(36px, 5vw, 52px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; align-items: start; }
.plan2 { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); }
.plan2__badge { position: absolute; top: -13px; left: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; box-shadow: 0 8px 20px -6px rgba(198, 40, 40, .7); }
.plan2__badge svg { width: 14px; height: 14px; fill: currentColor; }
.plan2__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px 24px 24px; }
.plan2__content { display: grid; gap: 20px; align-content: start; }
.plan2__head { display: grid; gap: 4px; }
.plan2__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px; background: #2a0608; }
.plan2__ico svg { width: 24px; height: 24px; fill: #ffcdd2; }
.plan2__namerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.plan2__name { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.plan2__desc { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-2); }
.plan2__price { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan2__amount { font-size: clamp(36px, 3.4vw, 44px); font-weight: 800; letter-spacing: -1.2px; line-height: 1; }
.plan2__suffix { font-size: 14px; font-weight: 600; color: var(--text-2); }
.plan2__note { margin: 6px 0 0; font-size: 12px; color: var(--text-2); }
.plan2__feats { list-style: none; margin: 0; padding: 20px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--border-soft); }
.plan2__feat { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; color: #d6d6d6; }
.plan2__feat svg { width: 18px; height: 18px; margin-top: 1px; flex: none; fill: var(--success); }
/* El botón lleno es solo el de la tarjeta que conviene; las demás lo llevan delineado, así la
   vista va a una sola opción. */
.plan2__cta { min-height: 48px; display: grid; place-items: center; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: #fff; font-size: 15px; font-weight: 700; transition: background-color .15s, border-color .15s; }
.plan2__cta:hover { background: var(--elevated); }
.plan2--best .plan2__cta { border-color: transparent; background: var(--red); box-shadow: 0 12px 28px -10px rgba(198, 40, 40, .8); }
.plan2--best .plan2__cta:hover { background: var(--red-bright); }
.plans__foot { margin: 20px 2px 0; font-size: 14px; color: var(--text-2); }
/* Cargando / no se pudo cargar: ocupa la grilla entera, sin tarjetas falsas. */
.plans__state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 0; color: var(--text-2); text-align: center; }

@media (max-width: 900px) {
  .plans__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}

/* ── Preguntas ── */
.faq2__list { margin-top: clamp(24px, 3vw, 36px); max-width: 820px; border-top: 1px solid var(--border-soft); }
.faq2 details { border-bottom: 1px solid var(--border-soft); }
.faq2 summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 2px; font-size: clamp(16px, 1.4vw, 18px); font-weight: 700; }
.faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.faq2 details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--red-bright); }
.faq2 summary:hover { color: #fff; }
.faq2 details p { margin: -4px 2px 20px; max-width: 64ch; font-size: 15px; color: #c7c7c7; }

/* ── Llamado final ── */
.cta2 { max-width: calc(var(--max) + 2 * var(--gutter)); margin: clamp(64px, 9vw, 120px) auto 0; padding: clamp(40px, 6vw, 72px) var(--gutter); text-align: center; border-top: 1px solid var(--border-soft); }
.cta2 h2 { margin: 0; font: 800 clamp(36px, 5.5vw, 64px)/1.02 var(--ui); letter-spacing: -0.035em; }
.cta2 p { margin: 14px 0 28px; font-size: 18px; color: #c7c7c7; }
.cta2__actions { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ── Navegación por secciones ── */
.nav__links { display: flex; gap: 22px; margin-left: auto; margin-right: 24px; font-size: 14px; }
.nav__links a { color: var(--text-2); padding: 12px 0; transition: color .15s; }
.nav__links a:hover { color: var(--text); }
@media (max-width: 1020px) { .nav__links { display: none; } }

/* Menú del celular (nav.js): el botón aparece cuando los enlaces dejan de entrar. */
.nav__menu { display: none; width: 44px; height: 44px; place-items: center; padding: 0; border-radius: 12px; border: 1px solid var(--border-soft); background: transparent; color: var(--text); cursor: pointer; }
.nav__menu svg { width: 22px; height: 22px; fill: currentColor; }
.nav__menu:hover { background: var(--elevated); }
.nav__menu:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.nav__menu[aria-expanded="true"] .nav__menu-open, .nav__menu[aria-expanded="false"] .nav__menu-close { display: none; }
.nav__panel { position: absolute; top: calc(100% - 4px); left: var(--gutter); right: var(--gutter); display: grid; gap: 12px; padding: 10px; border-radius: 20px; background: radial-gradient(120% 70% at 100% 0%, rgba(198, 40, 40, .16), transparent 60%), #1c1c1e; border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); transform-origin: top right; }
/* Fondo atenuado detrás del menú (nav.js pone .nav--open): debajo del encabezado y encima de la
   página. Va en el encabezado y no en el panel porque la animación del panel lo volvería relativo a él. */
.nav--open::after { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, .55); }
.nav__panel[hidden] { display: none; }
.nav__items { display: grid; gap: 2px; }
.nav__item { display: grid; grid-template-columns: 36px 1fr 20px; align-items: center; gap: 12px; min-height: 52px; padding: 0 10px; border-radius: 12px; color: var(--text); font-size: 16px; font-weight: 600; transition: background-color .15s; }
.nav__item:hover, .nav__item[aria-current] { background: rgba(255, 255, 255, .06); }
.nav__item > svg { width: 20px; height: 20px; fill: var(--text-2); }
.nav__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #2a0608; }
.nav__ico svg { width: 20px; height: 20px; fill: #ffcdd2; }
.nav__item[aria-current] .nav__ico { background: var(--red); }
.nav__item[aria-current] .nav__ico svg { fill: #fff; }
.nav__panel-actions { display: grid; gap: 8px; padding: 12px 2px 2px; border-top: 1px solid var(--border-soft); }
.nav__panel-actions .btn { justify-content: center; gap: 10px; }
.nav__panel-actions svg { width: 20px; height: 20px; fill: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .nav__panel:not([hidden]) { animation: navIn .22s cubic-bezier(.2, .7, .2, 1) both; }
  .nav__panel:not([hidden]) .nav__item { animation: navItem .3s cubic-bezier(.2, .7, .2, 1) both; }
  .nav__item:nth-child(2) { animation-delay: .03s !important; }
  .nav__item:nth-child(3) { animation-delay: .06s !important; }
  .nav__item:nth-child(4) { animation-delay: .09s !important; }
  .nav__item:nth-child(5) { animation-delay: .12s !important; }
  .nav--open::after { animation: navScrim .22s ease both; }
}
@keyframes navIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes navItem { from { opacity: 0; transform: translateY(6px); } }
@keyframes navScrim { from { opacity: 0; } }
@media (max-width: 1020px) { .nav__menu { display: grid; } .nav__cta .nav__login { display: none; } }
/* En el celular el idioma pasa al desplegable: logo, prueba gratis y menú entran sin apretarse. */
.nav__panel .lang { justify-self: center; margin: 0 0 2px; }
.nav__panel .lang a { min-height: 44px; padding: 0 8px; font-size: 13px; }
@media (min-width: 481px) { .nav__panel .lang { display: none; } }
@media (max-width: 480px) { .nav__cta .lang { display: none; } .nav__cta .btn--sm { white-space: nowrap; } }
@media (min-width: 1021px) { .nav__panel { display: none !important; } }

/* Portada: solo el punto de partida de los precios; la tabla completa vive en /pricing. */
.plansteaser { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.plansteaser .feat__head { margin: 0; }
.plansteaser__amount { color: var(--text); font-weight: 800; white-space: nowrap; }
.pricing h1 { margin: 0; text-wrap: balance; font: 800 clamp(34px, 4.6vw, 56px)/1.05 var(--ui); letter-spacing: -0.03em; }

/* ── Pie ── */
.footer { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.footer__brand { display: grid; gap: 10px; }
.footer__brand p { margin: 0; max-width: 36ch; font-size: 13px; color: var(--text-2); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); }
.footer__nav a:hover { color: var(--text); }
.footer__copy { grid-column: 1 / -1; margin: 0; padding-top: 16px; border-top: 1px solid var(--border-soft); font-size: 12px; }
@media (max-width: 640px) { .footer { grid-template-columns: 1fr; } }

/* ── Para quién ── */

/* Lo oculto se oculta siempre. Sin esto, una regla con display (p. ej. .footer__cols a) le gana al
   [hidden] del navegador, y los enlaces de Contacto y Quiénes somos se veían sin llevar a ningún lado. */
[hidden] { display: none !important; }

/* ── Selector de idioma ── */
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px 0 8px; border-radius: 999px; border: 1px solid var(--border-soft); }
.lang svg { width: 18px; height: 18px; fill: var(--text-2); margin-right: 2px; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 999px; color: var(--text-2); font: 700 13px var(--ui); }
.lang a[aria-current] { color: var(--text); background: var(--elevated); }
.lang a:hover { color: var(--text); }

/* ── Sugerencia de idioma (i18n runtime): una franja arriba, nunca una redirección ── */
.langhint { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 6px 16px; background: var(--surface); border-bottom: 1px solid var(--border-soft); font-size: 14px; color: var(--text-2); }
.langhint a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.langhint button { min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 600 14px var(--ui); cursor: pointer; }
.langhint button:hover { color: var(--text); }
.nav__cta .lang { margin-right: 4px; }
@media (max-width: 560px) { .nav__cta .lang svg { display: none; } .nav__cta .lang { padding: 0 2px; } }

/* ── Quiénes somos ── */
.about__body { margin-top: 24px; max-width: 720px; display: grid; gap: 14px; font-size: 17px; color: #c7c7c7; }
.about__body p { margin: 0; }

/* ── WhatsApp flotante (solo si hay número) ── */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #25d366; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.wa-float[hidden] { display: none; }
.droid__store { margin-top: 20px; }
.droid__store .btn { gap: 10px; }
.droid__store svg { width: 20px; height: 20px; fill: currentColor; }

/* ── Pie en columnas ── */
.footer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 28px 40px; align-items: start; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.footer__cols > div { display: grid; align-content: start; }
.footer__cols a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--text-2); }
.footer__cols a:hover { color: var(--text); }
.footer__h { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.footer__social { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 6px; }
.footer__social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border-soft); }
.footer__social svg { width: 20px; height: 20px; fill: var(--text-2); }
.footer__social a:hover svg { fill: var(--text); }
.footer__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.footer__bottom p { margin: 0; font-size: 12px; }
.lang--foot a { font-weight: 600; }
@media (max-width: 760px) {
  .footer { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ── Equipos compatibles (devices) ── */
.devs { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(56px, 8vw, 96px); }
.devs__head { max-width: 720px; }
.devs__head h1 { margin: 0; text-wrap: balance; font: 800 clamp(34px, 4.6vw, 56px)/1.05 var(--ui); letter-spacing: -0.03em; }
.devs__search { position: sticky; top: 0; z-index: 5; margin-top: clamp(28px, 4vw, 40px); padding: 12px 0; background: var(--bg); }
.devs__search label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.devs__input { position: relative; max-width: 560px; }
.devs__input svg { position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); fill: var(--text-2); pointer-events: none; }
.devs__input input { width: 100%; min-height: 52px; padding: 0 16px 0 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 500 16px var(--ui); }
.devs__input input::placeholder { color: #8a8a8a; }
.devs__input input:focus { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.devs__count { min-height: 20px; margin: 8px 2px 0; font-size: 14px; color: var(--text-2); }
.devs__list { margin-top: 16px; columns: 3 280px; column-gap: 32px; }
.devs__group { break-inside: avoid; margin: 0 0 24px; }
.devs__brand { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); font-size: 15px; font-weight: 800; }
.devs__models { list-style: none; margin: 0; padding: 0; display: grid; }
.devs__models li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 14px; }
.devs__model { color: #d6d6d6; overflow-wrap: anywhere; }
.devs__proto { flex: none; font-size: 12px; color: var(--text-2); }
.devs__loading, .devs__empty { column-span: all; margin: 0; padding: 24px 0; color: var(--text-2); }
.devs__missing { margin-top: clamp(32px, 5vw, 56px); padding: clamp(20px, 3vw, 28px); border-radius: 16px; background: var(--surface); border: 1px solid var(--border-soft); max-width: 900px; }
.devs__missing h2 { margin: 0 0 8px; font-size: 20px; }
.devs__missing p { margin: 0; color: #c7c7c7; max-width: 70ch; }
.devs__protocols { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.devs__protocols li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; color: #d6d6d6; }
.devs__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ── Descarga del APK (/download, download.js) ── */
.dl { max-width: calc(880px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(56px, 8vw, 96px); }
.dl__head h1 { margin: 0; text-wrap: balance; font: 800 clamp(34px, 4.6vw, 56px)/1.05 var(--ui); letter-spacing: -0.03em; }
.dl__card { margin-top: clamp(28px, 4vw, 40px); padding: clamp(20px, 3vw, 28px); border-radius: 16px; background: var(--surface); border: 1px solid var(--border-soft); }
.dl__btn { gap: 10px; min-height: 56px; padding: 0 26px; font-size: 16px; }
.dl__btn svg { width: 24px; height: 24px; fill: currentColor; }
.dl__meta { margin: 14px 0 0; font-size: 15px; color: #d6d6d6; font-feature-settings: "tnum" 1; }
.dl__req { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.dl__fail { display: flex; gap: 12px; margin-top: 16px; padding: 16px; border-radius: 12px; border: 1px solid rgba(239, 83, 80, .45); background: rgba(198, 40, 40, .12); }
.dl__fail > svg { flex: none; width: 24px; height: 24px; fill: var(--red-text); }
.dl__fail p { margin: 0 0 8px; color: #e0e0e0; max-width: 62ch; }
.dl__fail .dl__failTitle { font-weight: 700; color: var(--text); }
.dl__failActions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 4px; }
.dl__failActions .btn svg, .dl__shaRow .btn svg { width: 18px; height: 18px; margin-right: 8px; fill: currentColor; }
.dl__failActions .link--u { display: inline-flex; align-items: center; min-height: 44px; }
.dl__sha { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.dl__shaLabel { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.dl__shaRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dl__shaRow code { flex: 1 1 320px; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--background); border: 1px solid var(--border-soft); font-size: 13px; line-height: 1.5; color: #e0e0e0; overflow-wrap: anywhere; user-select: all; }
.dl__hint { margin: 8px 0 0; font-size: 14px; color: var(--text-2); max-width: 70ch; }
.dl__copied { min-height: 20px; margin: 4px 0 0; font-size: 14px; color: var(--success); }
.dl__steps { margin-top: clamp(32px, 5vw, 56px); }
.dl__steps h2 { margin: 0 0 14px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.01em; }
.dl__steps ol { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; color: #d6d6d6; max-width: 72ch; }
.dl__steps ol li::marker { color: var(--red-text); font-weight: 700; }
.dl__notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; }
.dl__notes > div { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--border-soft); }
.dl__notes h3 { margin: 0 0 6px; font-size: 16px; }
.dl__notes p { margin: 0; color: #c7c7c7; font-size: 15px; }
.dl__web { margin: 24px 0 0; color: #c7c7c7; max-width: 72ch; }
.dl__older { margin-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--border-soft); padding-top: 12px; }
.dl__older summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-2); }
.dl__older summary:hover { color: var(--text); }
.dl__older summary svg { width: 20px; height: 20px; margin-left: 6px; fill: currentColor; transition: transform .15s; }
.dl__older[open] summary svg { transform: rotate(180deg); }
.dl__older summary::-webkit-details-marker { display: none; }
@media (max-width: 520px) { .dl__btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .dl__older summary svg { transition: none; } }
.dl__older p { margin: 4px 0 12px; font-size: 14px; max-width: 70ch; }
.dl__older ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dl__older li { display: grid; gap: 2px; font-size: 14px; }
.dl__older li .link--u { justify-self: start; }
.dl__older code { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }

/* ── Fondo y movimiento ──
 * El fondo son recorridos reales sobre calles de Bogotá (img/routes-bg.svg, generado por
 * landing/scripts/gen-bg-routes.mjs), con destellos en el rojo de marca y el violeta de la estela en
 * vivo. La animación vive dentro del SVG y se apaga sola con prefers-reduced-motion. */
main, .footer { position: relative; z-index: 1; }
/* El encabezado va encima del contenido: su menú desplegable lo tapa. */
.nav { position: relative; z-index: 20; }
.bgfx { position: absolute; inset: 0 0 auto 0; height: min(1180px, 130vh); overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); }
.bgfx img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 20%, transparent 80%); }
.bgfx::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(40% 45% at 78% 18%, rgba(198, 40, 40, .22), transparent 70%),
              radial-gradient(35% 40% at 12% 8%, rgba(198, 40, 40, .08), transparent 70%); }

/* Luz detrás de las pantallas del producto. Una sola receta en toda la página: el rojo de marca.
   Solo va donde hay una réplica de la app (el selector de planes también lo es), del lado donde está
   la réplica. El violeta NO se usa como decoración: es el color de la estela en vivo y de las
   geocercas dentro de la app, y fuera de ella confundía. */
.feat { position: relative; isolation: isolate; }
#history::before, #reports::before, #android::before, #get-started::before, #pricing::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 60%; height: 70%;
  background: radial-gradient(closest-side at 55% 50%, rgba(198, 40, 40, .15), transparent),
              radial-gradient(closest-side at 30% 60%, rgba(240, 85, 96, .06), transparent); }
#pricing::before { left: 20%; top: 45%; }
#history::before { left: 20%; top: 30%; }
#reports::before, #android::before, #get-started::before { right: 0; top: 22%; }

/* Cierre: es la llegada del recorrido (trip.js). La luz sube desde abajo, sin repetir el fondo de calles. */
.cta2 { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; border: 1px solid var(--border-soft);
  background: radial-gradient(60% 90% at 50% 120%, rgba(198, 40, 40, .28), transparent 70%), var(--bg); }

/* Tarjetas: se levantan un poco al pasar el mouse. */

@media (prefers-reduced-motion: no-preference) {
  /* Entrada de la portada: sin JS, solo CSS. */
  .hero h1, .hero__lede, .hero__actions, .hero .app { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__lede { animation-delay: .08s; }
  .hero__actions { animation-delay: .16s; }
  .hero .app { animation-delay: .26s; animation-duration: 1s; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } }

  /* Aparición al hacer scroll (fx.js pone .fx en <html> solo si puede observar; sin JS se ve todo). */
  .fx .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
  .fx .reveal.is-in { opacity: 1; transform: none; }
}

.cta2 { width: min(calc(100% - 2 * var(--gutter)), var(--max)); padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }
/* Enlace dentro de un texto: subrayado rojo para que se vea que es enlace (antes no tenía estilo
   y se leía como texto plano). */
.link--u { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--red-bright); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .15s; }
.link--u:hover { color: var(--red-bright); }
.plans__foot .link--u { display: inline-flex; align-items: center; min-height: 44px; }
/* Botón "i" de la atribución del mapa: MapLibre lo dibuja de 24 px. Agrandarlo rompe su ícono (es un
   fondo que se repite: se veían tres "i"), así que se amplía solo el área que recibe el toque. */
.maplibregl-ctrl-attrib-button::after { content: ""; position: absolute; inset: -10px; }

/* ── Cómo empezar: pasos con la pantalla real de cada uno (howto.js) ── */
.howto { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin: clamp(28px, 4vw, 40px) 0 28px; }
.howto__steps { display: grid; gap: 8px; }
.howto__step { position: relative; overflow: hidden; display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; width: 100%; padding: 18px 18px 20px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s; }
.howto__step:hover { background: rgba(255, 255, 255, .03); }
.howto__step[aria-selected="true"] { background: var(--surface); border-color: var(--border-soft); }
.howto__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-2); font-size: 14px; transition: background-color .2s, color .2s, border-color .2s; }
.howto__step[aria-selected="true"] .howto__n { background: var(--red); border-color: var(--red-text); color: #fff; }
.howto__txt { display: grid; gap: 4px; }
.howto__txt strong { font-size: 17px; }
.howto__txt span { font-size: 14px; color: var(--text-2); }
.howto__step[aria-selected="true"] .howto__txt span { color: #c7c7c7; }
.howto__bar { position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .06); opacity: 0; }
.howto__step[aria-selected="true"] .howto__bar { opacity: 1; }
.howto__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--red); }
.howto__step.is-running .howto__bar i { width: 100%; transition: width var(--step-ms, 6s) linear; }
.howto__devices { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 0 68px; font-size: 14px; }

/* Pantalla: colores de paletteDark, como el resto de las réplicas. */
.howto__screen { position: relative; margin: 0; height: 460px; border-radius: 16px; overflow: hidden; background: var(--background); border: 1px solid var(--border-soft); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); }
.hw { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 26px clamp(20px, 4vw, 44px); }
/* Alta y onboarding (CreateOrganizationScreen, AdminOnboardingScreen), tema oscuro, producto sin marca.
   Fondo: LoginBackdrop (loginBackdropPalette.ts:27-63, 164-227) con los recorridos en gris.
   Tarjeta: isla de mapSidePanelChrome.ts:142-189. Stepper: authWizardStepper.styles.ts.
   La tarjeta va a su tamaño real y se escala para entrar en el recuadro (howto.js). */
.hw--auth { display: grid; justify-items: center; align-content: start; gap: 12px; padding: 20px 16px 28px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
  background:
    radial-gradient(ellipse 65% 60% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .62) 100%),
    url("/img/routes-bg.svg") center / cover no-repeat,
    radial-gradient(ellipse 70% 55% at 22% 8%, rgba(229, 57, 53, .2) 0%, rgba(229, 57, 53, 0) 62%),
    radial-gradient(ellipse 60% 55% at 85% 95%, rgba(198, 40, 40, .16) 0%, rgba(198, 40, 40, 0) 68%),
    linear-gradient(160deg, #211414 0%, #1e1e1e 42%, #121212 100%); }
.hw--auth::-webkit-scrollbar { display: none; }
/* Solo se achica si no entra a lo ancho; a lo alto el recuadro se desplaza (howto.js sigue al guion). */
.hwfit { display: grid; justify-items: center; gap: 12px; zoom: var(--fit, 1); }
.hwcard { width: 520px; display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 20px; border-radius: 16px; background: rgba(30, 30, 30, .94); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.hwcard--wide { width: 560px; padding: 28px 24px 24px; gap: 4px; }
.hwcard svg[data-mdi] { fill: currentColor; }
.hwcard__logo { align-self: center; width: auto; height: 38px; margin: 6px 0 22px; }
.hwcard__head { display: grid; gap: 6px; justify-items: center; text-align: center; margin-bottom: 12px; }
.hwcard__head strong { font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -.25px; }
.hwcard__head span { font-size: 13px; line-height: 19px; color: #9e9e9e; }
.wstep { display: grid; gap: 10px; margin-bottom: 20px; }
/* Título y pasos quedan fijos mientras el guion baja por el formulario: sin ellos el campo que se
   llena aparece suelto, sin decir en qué momento del alta está. */
.hwcard__top { position: sticky; top: -20px; z-index: 2; margin: -24px -24px 0; padding: 24px 24px 0; border-radius: 16px 16px 0 0; background: #1e1e1e; box-shadow: 0 10px 12px -10px rgba(0, 0, 0, .6); }
.hwcard--wide .hwcard__top { margin-top: 0; padding-top: 0; border-radius: 0; }
.wstep__count { font-size: 12px; font-weight: 500; color: #9e9e9e; font-variant-numeric: tabular-nums; }
.wstep__row { display: flex; align-items: center; }
.wstep__row > b { flex: 1; min-width: 8px; height: 1px; margin: 0 4px; background: rgba(255, 255, 255, .18); }
.wstep__node { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 4px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #9e9e9e; white-space: nowrap; }
.wstep__node i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .18); font-style: normal; font-size: 11px; font-weight: 700; }
.wstep__node i svg { width: 13px; height: 13px; }
.wstep__node.is-on { background: #2a0608; color: #ffcdd2; }
.wstep__node.is-on i { border-color: #ffcdd2; }
.wstep__node.is-done { color: #fff; }
.wstep__node.is-done i { border-color: transparent; background: rgba(255, 255, 255, .08); }
.wstep__bar { height: 2px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.wstep__bar i { display: block; height: 100%; background: #c62828; }
.wstep__bar--25 i { width: 25%; } /* (paso + 1) / pasos: 1 de 4 */
.wstep__bar--67 i { width: 67%; } /* 2 de 3 */
.hwsec { margin: 12px 0 4px; font-size: 13px; font-weight: 700; }
.hwhint { margin: 0 0 8px; font-size: 12px; line-height: 17px; color: #9e9e9e; }
/* Campo plano (react-native-paper flat): 56 de alto, etiqueta que sube y se pone roja al escribir. */
.fin { position: relative; height: 56px; display: flex; align-items: flex-end; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .18); margin-bottom: 4px; }
.fin__label { position: absolute; left: 0; top: 18px; font-size: 16px; color: #9e9e9e; transition: top .15s, font-size .15s, color .15s; }
.fin__value { display: flex; align-items: center; min-height: 22px; font-size: 16px; color: #fff; }
.fin:has(.js-type:not(:empty)) .fin__label, .fin.is-focus .fin__label { top: 4px; font-size: 12px; }
.fin.is-focus { border-bottom: 2px solid #ef5350; }
.fin.is-focus .fin__label { color: #ef5350; }
.fsel { min-height: 48px; display: flex; align-items: center; padding: 12px 28px 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); font-size: 15px; color: #9e9e9e; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%239e9e9e' stroke-width='2'/%3E%3C/svg%3E") right 4px center / 12px no-repeat; }
.hw__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.hw__chips span { min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-size: 12px; font-weight: 600; color: #fff; transition: background-color .2s, border-color .2s, color .2s; }
.hw__chips .is-on { border-color: transparent; background: #2a0608; color: #ffcdd2; }
.hw__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid #c62828; background: #c62828; color: #fff; font-size: 13px; font-weight: 700; transition: transform .15s, background-color .15s, opacity .15s; }
.hw__btn--full { flex-grow: 1; margin-top: 16px; }
.hw__btn--secondary { background: transparent; border-color: rgba(255, 255, 255, .18); margin-top: 16px; }
.hw__btn.is-pressed { transform: scale(.97); background: #b71c1c; }
.hw__btn.is-busy { opacity: .5; }
.hw__btn.is-busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hwactions { display: flex; gap: 8px; }
.hwhero { position: relative; align-self: center; width: 56px; height: 56px; display: grid; place-items: center; margin: 4px 0 12px; border-radius: 28px; background: #2a0608; color: #ffcdd2; }
.hwhero::before { content: ""; position: absolute; inset: -10px; border-radius: 38px; background: rgba(255, 205, 210, .18); opacity: 0; }
.hw:not([hidden]) .hwhero::before { animation: heroGlow 1.1s ease-out .2s 1 both; }
@keyframes heroGlow { from { transform: scale(.9); opacity: .5; } to { transform: scale(1.45); opacity: 0; } }
.hwhero svg { width: 28px; height: 28px; }
.hwcard__headline { margin: 0 0 6px; text-align: center; font-size: 16px; font-weight: 700; }
.hwcard__hint { margin: 0 0 12px; text-align: center; font-size: 13px; line-height: 19px; color: #9e9e9e; }
.hwveil { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 12px; background: rgba(18, 18, 18, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 13px; font-weight: 700; }
.hwveil svg { width: 18px; height: 18px; fill: currentColor; }
.hwveil--sm { min-height: 32px; padding: 0 10px; font-size: 12px; }
/* Paso 3: el marcador de la portada (sprite, sombra en elipse, punto de estado y etiqueta en píldora). */
.hw__marker img { position: relative; width: 59px; height: 59px; }
.hw__shadow { position: absolute; left: 50%; top: 32px; width: 26px; height: 13px; margin: -6.5px 0 0 -13px; border-radius: 50%; background: rgba(0, 0, 0, .35); }
.hw__dot { position: absolute; left: calc(50% + 9px); top: 39px; width: 14px; height: 14px; border-radius: 50%; background: #22c55e; border: 2.5px solid #141416; box-sizing: border-box; }
.hw__tag { margin-top: 0; padding: 3px 8px; border-radius: 7px; background: rgba(20, 20, 22, .88); border: 1px solid rgba(255, 255, 255, .08); font: 12px/1.3 "Noto Sans", var(--ui); color: #f4f4f5; }
.hw__caret { width: 1.5px; height: 18px; margin-left: 1px; background: var(--red-bright); opacity: 0; }
.hw.is-typing .hw__caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 1; } }

/* Paso 3: el vehículo aparece en el mapa (el mismo basemap de la app, creado al abrir el paso). */
.hw--map { padding: 0; background: #0f0f0f; }
.hw__map { position: absolute; inset: 0; }
.hw__marker, .hw__toast { z-index: 1; }
.hw__marker { position: absolute; left: 50%; top: 48%; display: grid; justify-items: center; transform: translate(-50%, -50%); }
.hw__ping { position: absolute; left: 50%; top: 32px; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid var(--success); opacity: 0; }
.hw__toast { position: absolute; left: 50%; bottom: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(30, 30, 30, .92); border: 1px solid var(--border-soft); font-size: 13px; white-space: nowrap; transform: translateX(-50%); }
.hw__toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
@media (prefers-reduced-motion: no-preference) {
  .hw:not([hidden]) { animation: paneIn .45s ease both; }
  @keyframes paneIn { from { opacity: 0; transform: translateY(10px); } }
  .hw--map:not([hidden]) .hw__marker img { animation: drop .6s cubic-bezier(.3, 1.5, .5, 1) .5s both; }
  .hw--map:not([hidden]) .hw__dot, .hw--map:not([hidden]) .hw__tag { animation: fadeIn .3s ease 1.05s both; }
  .hw--map:not([hidden]) .hw__ping { animation: ping 1.6s ease-out 1.1s 2; }
  .hw--map:not([hidden]) .hw__toast { animation: toastIn .5s ease 1.4s both; }
  @keyframes drop { from { opacity: 0; transform: translateY(-40px); } }
  @keyframes fadeIn { from { opacity: 0; } }
  @keyframes ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(4); } }
  @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } }
}
@media (max-width: 900px) {
  .howto { grid-template-columns: 1fr; }
  .howto__screen { height: 420px; }
}

/* ── Recorrido de la página (trip.js) ── */
.trip { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.trip__svg { position: absolute; left: 0; top: 0; overflow: visible; }
.trip__base { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.trip__done { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(198, 40, 40, .55)); }
.trip__stop { fill: var(--bg); stroke: rgba(255, 255, 255, .25); stroke-width: 2; transition: fill .3s, stroke .3s; }
.trip__stop.is-on { fill: var(--red); stroke: var(--red); }
.trip__stop--end { r: 8; stroke: var(--red-bright); stroke-width: 3; }
.trip__truck { position: absolute; left: 0; top: 0; width: 44px; height: 44px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .6)); will-change: transform; }

/* ── Contacto (diálogo, contact.js) ── */
.cdlg { width: min(480px, calc(100% - 32px)); padding: 28px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: 0 40px 100px rgba(0, 0, 0, .7); }
.cdlg::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(4px); }
.cdlg__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--text-2); font-size: 26px; line-height: 1; cursor: pointer; }
.cdlg__close:hover { color: var(--text); background: var(--elevated); }
.cdlg__title { margin: 0 44px 8px 0; font-size: 24px; letter-spacing: -0.02em; }
.cdlg__lede { margin: 0 0 20px; color: #c7c7c7; }
.cdlg { width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }

/* Formulario de contacto (contact.js) */
.cf { display: grid; gap: 14px; }
.cf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf__field { display: grid; gap: 6px; min-width: 0; }
.cf__label { font-size: 14px; font-weight: 600; }
.cf__opt { font-weight: 400; color: var(--text-2); }
.cf__input { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--background); color: var(--text); font: 400 16px/1.4 var(--ui); }
textarea.cf__input { resize: vertical; min-height: 110px; }
.cf__input:focus { outline: 2px solid var(--red-bright); outline-offset: 1px; border-color: transparent; }
.cf__input[aria-invalid="true"] { border-color: #ff6b6b; }
.cf__err { margin: 0; font-size: 13px; color: #ff8a80; }
.cf__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf__consent { display: grid; grid-template-columns: 24px 1fr; gap: 4px 10px; align-items: start; }
.cf__consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--red-text); }
.cf__consent .cf__err { grid-column: 2; }
.cf__check { font-size: 14px; color: #c7c7c7; line-height: 1.5; }
.cf__check a, .cf__alt a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.cf__send { justify-self: start; min-width: 180px; }
.cf__send:disabled { opacity: .7; cursor: progress; }
.cf__status { min-height: 0; margin: 0; font-size: 14px; }
.cf__status.is-error { padding: 12px 14px; border-radius: 10px; background: rgba(255, 82, 82, .1); border: 1px solid rgba(255, 82, 82, .35); color: #ffb4ab; }
.cf__alt { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 14px; color: var(--text-2); }
.cf__alt a { display: inline-flex; align-items: center; min-height: 44px; }
.cf__done { display: grid; gap: 10px; justify-items: start; padding: 8px 0; }
.cf__doneTitle { margin: 0; font-size: 22px; outline: none; }
.cf__doneTitle::before { content: "✓ "; color: var(--success); }
.cf__doneText { margin: 0 0 8px; color: #c7c7c7; }
@media (max-width: 560px) { .cf__row { grid-template-columns: 1fr; } .cf__send { justify-self: stretch; } }
@media (prefers-reduced-motion: no-preference) {
  .cdlg[open] { animation: dlgIn .25s cubic-bezier(.2, .7, .2, 1); }
  @keyframes dlgIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
}

/* ── Pie: créditos legales ── */
.footer__legal { margin: 0; font-size: 12px; line-height: 1.7; color: var(--text-2); }
.footer__legal a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.footer__legal a:hover { color: var(--text); }
.howto__screen .map__demo { left: auto; right: 12px; bottom: 12px; z-index: 2; }
.howto__screen[aria-labelledby="howtoTab2"] .map__demo { left: 12px; right: auto; }
/* En los formularios, abajo van "Volver al inicio de sesión" y "Saltar por ahora". */
.howto__screen[aria-labelledby="howtoTab0"] .map__demo, .howto__screen[aria-labelledby="howtoTab1"] .map__demo { top: 12px; bottom: auto; } /* en el mapa, abajo a la derecha está la atribución */
/* En pantallas angostas la pantalla va primero (si no, avanza fuera de vista) y los pasos no
   elegidos muestran solo su título. */
@media (max-width: 900px) {
  .howto__screen { order: -1; height: 400px; }
  .howto__step { padding: 12px 14px 16px; }
  .howto__step:not([aria-selected="true"]) .howto__txt span { display: none; }
  .howto__devices { margin-left: 64px; }
}
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) {
  .howto__screen { height: 470px; }
  .hw { padding: 20px 18px; }
  .hw__crumbs { margin: 10px 0 12px; }
  .hw__label { margin-top: 10px; }
}

/* ── Planes: calculadora ── */
.calc { margin-top: clamp(24px, 3vw, 32px); padding: clamp(18px, 2.5vw, 24px); border-radius: 16px; background: var(--surface); border: 1px solid var(--border-soft); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; align-items: center; }
.calc__label { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 700; }
.calc__ctl { display: flex; align-items: center; gap: 10px; }
.calc__step { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text); font: 600 22px/1 var(--ui); cursor: pointer; }
.calc__step:hover { background: var(--elevated); }
.calc__n { flex: none; min-width: 3.2ch; font-size: 28px; font-weight: 500; text-align: right; }
#calcRange { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
#calcRange:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 4px; border-radius: 8px; }
#calcRange::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--red) var(--fill, 8%), var(--elevated) var(--fill, 8%)); }
#calcRange::-moz-range-track { height: 6px; border-radius: 6px; background: var(--elevated); }
#calcRange::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--red); }
#calcRange::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 4px solid var(--red); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
#calcRange::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--red); }
.calc__out { margin: 0; font-size: 16px; color: #c7c7c7; line-height: 1.5; }
.calc__out strong { color: var(--text); }
.calc__amount { font-size: 20px; font-family: var(--ui); font-weight: 800; }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; } }

/* La tarjeta que más conviene para ese número se ilumina; las que no alcanzan se apagan. */
.plan2 { transition: opacity .25s, border-color .25s, box-shadow .25s, transform .25s, background-color .25s; }
.plan2--best { border-color: transparent; background: radial-gradient(120% 55% at 50% 0%, rgba(198, 40, 40, .22), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(160deg, #ef5350, rgba(198, 40, 40, .25) 45%, rgba(198, 40, 40, .7)) border-box; border: 1px solid transparent; box-shadow: 0 40px 90px -40px rgba(198, 40, 40, .7); }
.plan2--off { opacity: .45; }
.plan2__best { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(198, 40, 40, .18); border: 1px solid rgba(239, 83, 80, .6); color: #ffcdd2; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.plan2__for { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: #d6d6d6; }
.plan2--off .plan2__for { font-weight: 500; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .plan2--best { transform: translateY(-8px); }
  .plan2:not(.plan2--off):hover { transform: translateY(-4px); }
  .plan2--best:hover { transform: translateY(-10px); }
}

/* ── Páginas de texto: privacidad y licencias ── */
.doc { max-width: calc(820px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--gutter) clamp(56px, 8vw, 96px); }
.doc__draft { margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .4); color: #fcd34d; font-size: 14px; }
.doc__lang { margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-soft); font-size: 14px; }
.doc__archive { margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-soft); font-size: 14px; }
.doc__archive a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* Versiones de un documento legal, al pie de la vigente */
.doc__versions { max-width: 720px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border-soft); }
.doc__versions h2 { margin: 0 0 8px; font-size: 16px; }
.doc__versions ul { list-style: none; margin: 0; padding: 0; }
.doc__versions li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 44px; font-size: 14px; color: var(--text-2); }
.doc__versions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.doc__body h1 { margin: 0 0 8px; font: 800 clamp(30px, 4vw, 44px)/1.1 var(--ui); letter-spacing: -0.03em; }
.doc__body h2 { margin: 36px 0 10px; font-size: 20px; letter-spacing: -0.01em; }
.doc__body p, .doc__body li { color: #d6d6d6; line-height: 1.7; }
.doc__body ul { padding-left: 22px; }
.doc__body a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.doc__meta { color: var(--text-2) !important; font-size: 14px; }
.doc__todo { padding: 10px 14px; border-left: 3px solid #f59e0b; background: rgba(245, 158, 11, .06); color: #fcd34d !important; font-size: 14px; }

/* ── Quiénes somos (about) ── */
.doc__body.about .about__body { margin-top: 20px; max-width: 70ch; }
.about__draft { display: inline-block; margin: 12px 0 0; padding: 4px 12px; border-radius: 999px; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .45); color: #fcd34d !important; font-size: 12px !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ── Modo simulación: datos provisionales (company.js) ── */
.prov-banner { margin: 0; padding: 10px var(--gutter); text-align: center; font-size: 13px; color: #fcd34d; background: rgba(245, 158, 11, .1); border-bottom: 1px solid rgba(245, 158, 11, .35); position: relative; z-index: 3; }
.prov-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100% - 32px); margin: 0; padding: 12px 18px; border-radius: 12px; background: var(--elevated); border: 1px solid rgba(245, 158, 11, .5); color: var(--text); font-size: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.prov-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* El menu no parte "Equipos compatibles" en dos lineas en anchos medianos. */
.nav__links a { white-space: nowrap; }

/* Con el boton flotante de WhatsApp a la vista, el pie deja espacio abajo: si no, el boton tapaba el
   selector de idioma ("English"). */
body:has(.wa-float:not([hidden])) .footer { padding-bottom: 96px; }

/* ── Íconos en lugar de texto ── */

/* Plataformas: el monitor y el robot de Android se entienden solos. */

/* Formatos del reporte: los íconos de archivo de siempre, con su color reconocible. */

/* El botón del encabezado cede su lugar mientras se ven los de la portada (nav.js). */
.nav__cta .btn--sm { transition: opacity .2s, visibility .2s; }
.nav--hero-cta .nav__cta .btn--sm { opacity: 0; visibility: hidden; }

/* ── Portada: el mapa de escritorio con el teléfono Android encima (android.js) ── */
.stage { position: relative; }
.stage__phone { position: absolute; z-index: 3; right: clamp(-48px, -2.5vw, 0px); bottom: -96px; zoom: .74; }
/* El teléfono tapa la esquina derecha del mapa: la atribución de OpenStreetMap se corre a su
   izquierda (tiene que quedar a la vista) y los controles de abajo del riel derecho se ocultan. */
@media (min-width: 1101px) {
  .stage .app--map .maplibregl-ctrl-bottom-right { right: 230px; }
  .stage .rrail > :nth-child(n + 2) { display: none; }
}
@media (max-width: 1100px) { .stage__phone { display: none; } }
/* En el celular se muestra la app del celular, no la de escritorio apretada. */
@media (max-width: 760px) {
  .stage .app { display: none; }
  .stage__phone { display: block; position: relative; right: auto; bottom: auto; margin: 32px auto 0; zoom: .92; }
}

.footer__brand .droid__store { margin-top: 16px; }

/* ── Funciones ── */
.feats { list-style: none; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feats__item { display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-soft); }
.feats__item svg { width: 40px; height: 40px; padding: 9px; margin-bottom: 8px; border-radius: 12px; background: #2a0608; fill: #ffcdd2; box-sizing: border-box; }
.feats__item h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.feats__item p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 900px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feats { grid-template-columns: 1fr; } }

/* ── Centro de ayuda (/help, /help/<tema>, /help/<artículo>) ──
 * Portada con el buscador al frente, «Empieza aquí» (selección editorial) y los temas en tarjetas;
 * página de tema con su lista; artículo con migas, índice lateral en escritorio y relacionados.
 * Tarjetas sin relleno: borde suave y el relleno solo al pasar el mouse, como el resto de la landing. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.help { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--gutter) clamp(56px, 8vw, 96px); }
.help__hero { max-width: 760px; margin: 0 auto; text-align: center; }
.help__hero h1 { margin: 0; text-wrap: balance; font: 800 clamp(34px, 4.6vw, 56px)/1.05 var(--ui); letter-spacing: -0.03em; }
.help__search { margin: clamp(24px, 3vw, 32px) auto 0; max-width: 640px; text-align: left; }
.help__input { position: relative; }
.help__input svg { position: absolute; left: 18px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); fill: var(--text-2); pointer-events: none; }
.help__input input { width: 100%; min-height: 60px; padding: 0 18px 0 54px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 500 17px var(--ui); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .9); }
.help__input input::placeholder { color: #8a8a8a; }
.help__input input:focus { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.help__count { min-height: 22px; margin: 10px 4px 0; font-size: 14px; color: var(--text-2); text-align: center; }

.help__block { margin-top: clamp(40px, 6vw, 64px); }
.help__h2 { margin: 0 0 16px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.help__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.help__cards--start { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.help__cards--topics { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.help__cards--related { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); max-width: 1000px; }
.help__cards--results { max-width: 760px; margin: 24px auto 0; }
.help__cards > li { display: flex; }
.help__card { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 16px; border: 1px solid var(--border-soft); color: var(--text); text-decoration: none; transition: background-color .15s, border-color .15s; }
.help__card:hover { background: var(--surface); border-color: var(--border); }
.help__card .help__ico { margin-bottom: 8px; }
.help__cards--results .help__card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; }
.help__cards--results .help__card > * { grid-column: 2; }
.help__cards--results .help__card .help__ico { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
.help__card .help__m { margin-top: auto; padding-top: 8px; }
.help__ico { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(239, 83, 80, .12); }
.help__ico svg { width: 22px; height: 22px; fill: var(--red-text); }
.help__ico--lg { width: 56px; height: 56px; border-radius: 16px; }
.help__ico--lg svg { width: 30px; height: 30px; }
.help__t { font-weight: 700; font-size: 16px; line-height: 1.35; }
.help__r { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.help__c { font-size: 12px; font-weight: 700; color: var(--red-text); }
.help__m { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.help__m svg { width: 16px; height: 16px; fill: currentColor; }
/* "Iniciar sesión" era un enlace subrayado dentro del texto y casi no se veía: va como botón
   secundario, el mismo que usa la portada para entrar a la app. */
/* Portada: «Para empezar» en filas (dos columnas en escritorio) y cada tema con sus primeros
   artículos a la vista. Sin cajas: el contenido se agrupa por espacio y una línea fina. */
.help__rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 4px 24px; }
.help__row, .help__topic-head { display: flex; align-items: flex-start; gap: 16px; padding: 14px 12px; margin: 0 -12px; border-radius: 12px; color: var(--text); text-decoration: none; transition: background-color .15s; }
.help__row:hover, .help__topic-head:hover { background: var(--surface); }
.help__row-body { display: grid; gap: 3px; min-width: 0; }
.help__row .help__m { margin-top: 4px; }
.help__topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px 40px; }
.help__topic { padding-bottom: 16px; }
.help__topic-links { list-style: none; margin: 2px 0 0 44px; padding: 0; }
.help__topic-links a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: var(--text); font-size: 15px; line-height: 1.4; text-decoration: none; transition: background-color .15s; }
.help__topic-links a:hover { background: var(--surface); }
.help__topic-links svg { width: 18px; height: 18px; flex: none; fill: var(--text-2); }
.help__topic-links .help__more { color: var(--red-text); font-weight: 700; font-size: 14px; }
.help__topic-links .help__more svg { fill: currentColor; order: 2; }
.help__row:focus-visible, .help__topic-head:focus-visible, .help__topic-links a:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.help__none .help__support-actions { justify-content: center; margin-top: 16px; }
.help__inapp { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 24px 0 0; color: var(--text-2); font-size: 15px; }
.help__inapp p { margin: 0; }
.help__cards > li.help__none { display: grid; justify-items: center; gap: 4px; padding: 24px 0 8px; text-align: center; color: var(--text-2); }
.help__none svg { width: 40px; height: 40px; margin-bottom: 8px; fill: var(--text-2); }
.help__none strong { color: var(--text); font-size: 18px; }

/* Barra de las páginas internas: migas a la izquierda, buscador corto a la derecha. */
.help__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(20px, 3vw, 32px); }
.help__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.help__crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--text-2); }
.help__crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--text-2); font-weight: 600; text-decoration: none; border-radius: 6px; }
.help__crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.help__mini { position: relative; flex: 0 1 320px; }
.help__mini svg { position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: var(--text-2); pointer-events: none; }
.help__mini input { width: 100%; min-height: 44px; padding: 0 12px 0 40px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); font: 500 15px var(--ui); }
.help__mini input::placeholder { color: #8a8a8a; }
.help__mini input:focus { outline: 2px solid var(--red-bright); outline-offset: 2px; }

/* Columna de lectura + índice lateral (solo en escritorio: en el celular el artículo es corto y
   el índice empujaría el contenido hacia abajo). */
.help__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1024px) { .help__layout { grid-template-columns: minmax(0, 720px) 240px; justify-content: space-between; gap: 64px; } }
.help__toc { align-self: start; }
@media (min-width: 1024px) { .help__toc { position: sticky; top: 24px; } }
@media (max-width: 1023px) { .help--article .help__toc { display: none; } }
.help__toc h2 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.help__toc ol, .help__toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-soft); }
.help__toc a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-2); font-size: 14px; line-height: 1.4; text-decoration: none; transition: color .15s, border-color .15s; }
.help__toc a:hover { color: var(--text); }
.help__toc a[aria-current="true"] { color: var(--text); border-left-color: var(--red-text); }
.help__toc svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.help__toc--topics a { min-height: 44px; }

/* Índice plegado del celular */
.help__toc-m { margin: 0 0 20px; border: 1px solid var(--border-soft); border-radius: 12px; }
.help__toc-m summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; cursor: pointer; font-weight: 700; font-size: 15px; border-radius: 12px; }
.help__toc-m summary:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.help__toc-m ol { margin: 0 !important; padding: 0 8px 8px !important; list-style: none; }
.help__toc-m li { margin: 0 !important; }
.help__toc-m a { display: flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--text-2) !important; text-decoration: none !important; border-radius: 8px; }
.help__toc-m a:hover { color: var(--text) !important; background: var(--surface); }
@media (min-width: 1024px) { .help__toc-m { display: none; } }

/* Página de tema */
.help__cathead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: clamp(24px, 3vw, 40px); }
.help__cathead h1 { margin: 0; font: 800 clamp(30px, 4vw, 44px)/1.1 var(--ui); letter-spacing: -0.03em; }
.help__cathead p { margin: 6px 0 0; color: #c7c7c7; font-size: clamp(16px, 1.4vw, 18px); }
.help__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-soft); }
.help__list li { border-bottom: 1px solid var(--border-soft); }
.help__list a { display: grid; gap: 4px; padding: 18px 12px; margin: 0 -12px; border-radius: 12px; color: var(--text); text-decoration: none; transition: background-color .15s; }
.help__list a:hover { background: var(--surface); }
.help__list .help__m { margin-top: 4px; }

/* Artículo */
.help__body h1 { margin: 0 0 12px; }
.help__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 20px !important; color: var(--text-2) !important; font-size: 13px; }
.help__platforms { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.help__chip { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); color: #d6d6d6; }
.help__body h2 { scroll-margin-top: 24px; }
.help__body h3 { margin: 24px 0 8px; font-size: 17px; }
.help__body ol { padding-left: 22px; }
.help__body ol li, .help__body ul li { margin: 4px 0; }
.help__body code { font-family: var(--mono); font-size: .92em; padding: 1px 5px; border-radius: 4px; background: var(--elevated); overflow-wrap: anywhere; }
.help__body pre { overflow-x: auto; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-soft); }
.help__body pre code { padding: 0; background: none; }
.help__body blockquote { margin: 16px 0; padding: 4px 16px; border-left: 3px solid var(--border); }
/* Capturas: a lo ancho de la columna sin pasar de su tamaño real, con la caja reservada (width/height). */
.help__shot { display: block; max-width: 100%; height: auto; margin: 16px auto; border-radius: 12px; border: 1px solid var(--border-soft); }
.help__before { margin: 20px 0; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border-soft); border-left: 3px solid var(--red-text); }
.help__before-title { margin: 0 0 4px !important; font-weight: 800; color: var(--text) !important; }
.help__before ul { margin: 0; }

/* Canal de soporte, al pie de cada página de la ayuda. */
.help__support { margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--border-soft); max-width: 1000px; }
.help__support h2 { margin: 0 0 4px; font-size: 20px; }
.help__support p { margin: 0; color: #c7c7c7; }
.help__support-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.help__support-actions .btn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; overflow-wrap: anywhere; }
.help__support-actions svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.help__card:focus-visible, .help__list a:focus-visible, .help__toc a:focus-visible, .help__crumbs a:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
/* Celular: las tarjetas pasan a filas (ícono a la izquierda) para que la portada no sea un muro. */
@media (max-width: 640px) {
  .help__input input { min-height: 56px; padding-left: 48px; font-size: 16px; }
  .help__input svg { left: 14px; }
  .help__cards { gap: 8px; }
  .help__card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-content: start; padding: 14px 16px; }
  .help__card > * { grid-column: 2; }
  .help__card .help__ico { grid-column: 1; grid-row: 1 / span 3; margin: 2px 0 0; }
  .help__card .help__m { padding-top: 4px; }
  .help__cards--related .help__card { grid-template-columns: minmax(0, 1fr); }
  .help__cards--related .help__card > * { grid-column: 1; }
  .help__cathead { gap: 12px; }
  .help__mini { flex-basis: 100%; }
}