/* INTER, UNA SOLA TIPOGRAFÍA EN TODAS PARTES.
   Decisión de Antonio el 2026-10-06: la misma en iOS, Android y la web.
   Titulares Bold 700, títulos de pantalla y botones SemiBold 600, texto
   Regular 400, datos secundarios Medium 500.

   LA VARIABLE Y NO LOS ESTÁTICOS, por una razón medida: esta hoja de estilos
   usa además 750 y 850, que NO existen en los pesos estáticos. Antes se
   pedían a Google cinco pesos sueltos y el navegador fingía los demás
   redondeando -- el SemiBold de los botones no era SemiBold.

   `swap` para que el texto se lea desde el primer momento con la del sistema
   y cambie cuando llegue: en un móvil con mala cobertura, que es donde vive
   esta app, lo contrario es una pantalla en blanco. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/InterVariable.woff2') format('woff2');
}

/* La landing. La MISMA hoja para la versión en español y la inglesa.

   Estaba dentro de index.html hasta que hubo dos idiomas: dos copias del
   mismo CSS son dos sitios donde hacer cada cambio de diseño, y uno de los
   dos se queda atrás. Las páginas legales tienen la suya (legal.css), que
   es otro documento y otro problema.

   Se sirve con `Cache-Control: public, no-cache` -- "pregunta siempre
   antes" -- porque su nombre no cambia nunca y un ETag hace que preguntar
   cueste un 304 y cero bytes. Sin eso, un cambio de diseño no llega a quien
   ya había abierto la página. */
:root {
  --ink:#0f172a;
  --muted:#667085;
  --blue:#2563eb;
  --blue-2:#3b82f6;
  --sky:#eef5ff;
  --soft:#f6f8fb;
  --line:#e7ebf1;
  --white:#fff;
  --green:#16a36a;
  --orange:#f28b2c;
  --purple:#8b5cf6;
  --shadow:0 24px 70px rgba(15,23,42,.10);
  --shadow-sm:0 12px 34px rgba(15,23,42,.08);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* La cabecera es `sticky` y tapa los 76 px de arriba. Al saltar a un ancla el
   navegador pone el destino a ras del viewport, o sea DEBAJO de la cabecera, y
   lo único que lo disimulaba era el relleno generoso de `.section`. Donde el
   relleno es corto se veía: `#precio` tiene 20 px arriba, así que el botón de
   "14 días gratis" de la barra aterrizaba con el borde de la caja y la mitad
   de su "SUSCRIPCIÓN" por debajo de la cabecera translúcida; `#ideas` tiene 30
   y perdía el borde de arriba de la caja azul.

   Hasta hoy eso era un salto dentro de la misma página y se notaba poco. Desde
   /roadmap las seis entradas del menú son `/#...`: se carga la portada y salta,
   y lo primero que ve quien llega es el destino medio tapado. */
section[id]{scroll-margin-top:88px}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.nav{
  height:76px;display:flex;align-items:center;gap:28px;
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(15,23,42,.05)
}
.nav-inner{display:flex;align-items:center;width:min(1180px,calc(100% - 40px));margin:auto}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:850;letter-spacing:.08em}
.logo{width:34px;height:34px}
/* ── el idioma ──
   Al lado de los botones y no escondido en el pie: quien llega a una página
   en un idioma que no lee no baja hasta abajo a buscarlo, se va. */
.lang{display:flex;align-items:center;gap:2px;margin-left:14px;
  border:1px solid #e7ebf1;border-radius:999px;padding:3px;background:#fff}
.lang a{padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:#667085;text-decoration:none;letter-spacing:.04em}
.lang a:hover{background:#f4f6f8;color:var(--ink)}
.lang a[aria-current]{background:var(--ink);color:#fff}

.nav-links{display:flex;align-items:center;gap:24px;margin-left:46px;font-size:14px;color:#475467}
.nav-links a:hover{color:var(--ink)}
/* "Estás aquí". Hasta que el roadmap tuvo su propia página ningún enlace de
   esta barra llevaba a otra pantalla, así que no había nada que marcar; ahora
   /roadmap pone `aria-current="page"` y el enlace se veía igual que los otros
   cinco. Un lector de pantalla lo decía y la pantalla no. Mismo trato que en
   las páginas legales, que ya lo hacían así (`.top nav a[aria-current]`). */
.nav-links a[aria-current]{color:var(--ink);font-weight:700}
.nav-actions{margin-left:auto;display:flex;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:14px;padding:13px 18px;font-weight:750;border:1px solid var(--line);
  background:white;color:var(--ink);cursor:pointer;transition:.2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn.primary{background:var(--ink);color:white;border-color:var(--ink)}
.btn.blue{background:var(--blue);color:white;border-color:var(--blue)}
.mobile-menu{display:none;margin-left:auto;border:0;background:#f4f6f8;border-radius:12px;width:44px;height:44px;
  font:inherit;font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}

.hero{padding:76px 0 54px;overflow:hidden;position:relative}
.hero::before{
  content:"";position:absolute;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.10),transparent 67%);
  right:-210px;top:-200px;pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:#eff5ff;color:#1f5fd1;
  border:1px solid #dce9ff;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:750
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
h1{font-size:clamp(48px,6.6vw,84px);line-height:.98;letter-spacing:-.055em;margin:20px 0 24px}
h1 span{color:var(--blue)}
.hero p{font-size:19px;line-height:1.65;color:var(--muted);max-width:610px;margin:0 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{position:relative}
/* El móvil del hero: el mismo marco del escaparate, centrado en su columna y
   un poco más grande, porque aquí es lo único que hay a la derecha. Con tope
   de alto: a 2622 px de captura, sin él la primera pantalla mide tres. */
.hero-phone{margin:0 auto;max-width:306px}
@media (min-height:760px){ .hero-phone{max-width:330px} }
.hero-photo{
  height:560px;border-radius:34px;background-image:linear-gradient(180deg,transparent 56%,rgba(15,23,42,.62)),url('img/hero.webp');
  background-size:cover;background-position:center;box-shadow:var(--shadow);overflow:hidden;position:relative
}
.float-card{
  position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow-sm);border-radius:20px
}
.route-card{left:-36px;bottom:34px;width:310px;padding:16px}
.route-card .route-title{font-weight:850;font-size:16px}
.route-card .route-meta{color:#667085;font-size:12px;margin-top:5px}
.route-row{display:flex;align-items:center;gap:12px}
.route-thumb{width:62px;height:58px;border-radius:13px;background:url('img/ride.webp') center/cover}
.mini-map{right:-26px;top:34px;width:220px;height:152px;padding:12px}
.fake-map{
  position:relative;width:100%;height:100%;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#e4ebda,#d7e3d2 60%,#e6eddc)
}
.fake-map::before{content:"";position:absolute;inset:-30%;background:repeating-linear-gradient(20deg,transparent 0 28px,rgba(255,255,255,.75) 29px 31px,transparent 32px 52px);opacity:.7}
.route-svg{position:absolute;inset:0;width:100%;height:100%}
.route-svg path{fill:none;stroke:var(--blue);stroke-width:6;stroke-linecap:round}


.section{padding:92px 0}
.section.soft{background:var(--soft)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:38px}
.kicker{color:var(--blue);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.11em}
h2{font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.045em;margin:10px 0 0}
.section-head p{max-width:520px;color:var(--muted);line-height:1.6;margin:0}
/* ── un `h1` dentro de una cabecera de sección ──
   La regla de `h1` de más arriba está escrita para EL TITULAR DE LA PORTADA:
   sube hasta 84 px y aprieta las letras a -.055em. /roadmap tiene su titular
   en un `.section-head`, que es una fila de dos columnas pensada para los
   52 px de un `h2` -- cuando el roadmap era una sección de la portada, era
   justo eso. Al sacarlo a su propia página el `h2` pasó a `h1` y heredó la
   escala del hero: 84 px partidos en dos líneas contra el párrafo de al lado,
   y 50 px en el móvil donde las demás cabeceras miden 34.

   El nivel del encabezado es información para quien lee la página con un
   lector de pantalla; el tamaño es otra cosa y no tiene por qué cambiar con
   él. Esto devuelve el tamaño, no el nivel. */
.section-head h1{font-size:clamp(34px,4vw,52px);line-height:1.05;
  letter-spacing:-.045em;margin:10px 0 0}

/* Cuatro, y que envuelvan solas: son las cuatro cosas que hace el producto,
   y meterlas en tres columnas obligaría a dejar una fuera. */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px}
.feature{padding:26px;border:1px solid var(--line);border-radius:24px;background:#fff;min-height:240px}
/* ── los iconos de las tarjetas ──
   SVG dibujado por nosotros y no un carácter suelto. Eran 〰 ★ ⌖ ◎, y dos
   problemas: los dos últimos no significan nada -- ⌖ es una mira y ◎ es un
   círculo dentro de otro -- y ninguno de los cuatro está en todas las
   fuentes, así que cada sistema los pintaba con un grosor distinto y la
   fila se veía desigual. Ahora los cuatro dicen lo que hay debajo (una ruta
   con sus tramos, un marcador, una chincheta, dos personas) y comparten
   trazo con el logotipo. */
.icon{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:#eff5ff;color:var(--blue);margin-bottom:24px
}
.icon svg{width:25px;height:25px;display:block}
.feature h3{font-size:20px;letter-spacing:-.025em;margin:0 0 10px}
.feature p{margin:0;color:var(--muted);line-height:1.65;font-size:14px}

/* `stretch` y no `center`: la columna de texto lleva seis argumentos y es
   bastante más alta que los 520 px de la foto, así que centrada dejaba
   un hueco arriba y otro abajo. Ahora la foto acompaña al texto. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:stretch}
.photo-card{border-radius:30px;overflow:hidden;box-shadow:var(--shadow);position:relative;min-height:520px;background:url('img/ride.webp') center/cover}
.photo-card::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(15,23,42,.67))}
.photo-caption{position:absolute;left:26px;right:26px;bottom:24px;color:#fff;z-index:2}
.photo-caption b{font-size:22px}
.photo-caption span{display:block;margin-top:6px;opacity:.82;font-size:13px}
.checks{display:grid;gap:13px;margin-top:26px}
.check{display:flex;gap:12px;align-items:flex-start;color:#475467;line-height:1.55}
/* La frase que abre cada punto, en tinta fuerte: son los argumentos
   frente a la competencia y tienen que leerse de un vistazo, sin
   obligar a leer las seis explicaciones enteras. */
.check b{color:var(--ink)}
.check i{font-style:normal;width:24px;height:24px;border-radius:50%;background:#eaf8f1;color:#138a59;display:grid;place-items:center;flex:none;font-size:12px;font-weight:900}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.step{border:1px solid var(--line);border-radius:24px;padding:28px;background:#fff;position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-size:12px;color:var(--blue);font-weight:850;letter-spacing:.12em}
.step h3{margin:18px 0 9px;font-size:21px}
.step p{margin:0;color:var(--muted);line-height:1.65;font-size:14px}

.community{
  border-radius:34px;background:var(--ink);color:white;padding:50px;display:grid;grid-template-columns:1fr .85fr;gap:40px;align-items:center;overflow:hidden;position:relative
}
.community::after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.45),transparent 65%);right:-110px;top:-150px}
.community p{color:#cbd5e1;line-height:1.65;max-width:560px}
.community .btn{position:relative;z-index:2}
.community-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;z-index:2}
.community-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:20px;padding:18px;backdrop-filter:blur(12px)}
.community-card b{display:block;font-size:15px;margin-top:8px}
.community-card span{font-size:12px;color:#aab6c8}
.avatar-row{display:flex}
.avatar-dot{width:34px;height:34px;border-radius:50%;margin-right:-7px;border:2px solid var(--ink);background:linear-gradient(135deg,#8ec5fc,#435a73)}
.avatar-dot:nth-child(2){background:linear-gradient(135deg,#f6d365,#e77b50)}
.avatar-dot:nth-child(3){background:linear-gradient(135deg,#a1c4fd,#c2e9fb)}

.gallery{display:grid;grid-template-columns:1.35fr .65fr;gap:16px}
.gallery .big,.gallery .small{border-radius:24px;overflow:hidden;background-size:cover;background-position:center;min-height:440px}
.gallery .big{background-image:url('img/hero.webp')}
.gallery-stack{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.gallery .small{min-height:212px;background-image:url('img/ride.webp')}
.gallery .small:nth-child(2){background-position:65% center}

.cta{padding:92px 0}
.cta-box{padding:54px;border-radius:32px;background:linear-gradient(135deg,#eef5ff,#f8fbff);border:1px solid #dde8f9;text-align:center}
.cta-box p{color:var(--muted);max-width:620px;margin:16px auto 28px;line-height:1.65}

/* ── el FAQ ──
   Un <details> por pregunta y CERO JavaScript: el navegador ya sabe abrir y
   cerrar esto, lo anuncia solo a un lector de pantalla, y cada respuesta es
   un enlace que se puede compartir porque <details> se abre al llegar a su
   ancla. Una columna y no dos: en dos, abrir una pregunta estira su fila y
   mueve la de al lado, que es justo lo que no quiere quien está leyendo.
   Y alineado a la izquierda dentro de una caja centrada, porque un párrafo
   de cuatro líneas centrado no se lee. */
.faq{display:grid;gap:10px;max-width:720px;margin:34px auto 32px;text-align:left}
.faq details{border:1px solid #dde8f9;border-radius:16px;background:#fff;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 18px;
  font-weight:750;color:var(--ink);font-size:15.5px;line-height:1.4;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;
  transform:translateY(-50%);color:var(--blue);font-weight:800;font-size:19px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{padding-bottom:8px}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.faq p{margin:0;max-width:none;padding:0 18px 18px;color:var(--muted);
  line-height:1.65;font-size:14.5px}

footer{padding:34px 0 50px;border-top:1px solid var(--line);color:#667085;font-size:13px}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-links{display:flex;gap:20px}

/* ── escuchamos ── */
.listen{padding:30px 0 40px}
.listen-box{
  width:min(680px,100%);margin:auto;text-align:center;
  background:var(--sky);border:1px solid #dbe7fb;border-radius:var(--radius);
  padding:44px 40px;
}
.listen-box h2{margin:10px 0 14px}
.listen-box p{color:#475467;max-width:48ch;margin:0 auto 12px}
.listen-small{font-size:14.5px;color:#667085 !important}
.listen-box .btn{margin-top:14px}
@media(max-width:560px){.listen-box{padding:32px 22px}}

/* ── el precio ── */
.pricing{padding:20px 0 70px}
.pricing-box{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:44px 40px;width:min(680px,100%);margin:auto;text-align:center;
}
.pricing-lead{color:#475467;margin:0 auto 26px;max-width:46ch}
/* "Cómo pagarla", no "elige tu plan": lo que incluyen es idéntico y sólo
   cambia cada cuánto se cobra. */
.pricing-how{margin:26px 0 10px;font-size:14px;font-weight:700;color:var(--ink)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 28px;
  max-width:460px;margin-inline:auto}
.plan{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:20px 14px 16px;border:1.5px solid var(--line);border-radius:18px;
  background:#fff;cursor:pointer;transition:.15s ease}
.plan:hover{border-color:#cfd8e6}
.plan input{position:absolute;opacity:0;pointer-events:none}
.plan.chosen{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.plan-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  padding:3px 10px;border-radius:999px;background:var(--green);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.plan-price{display:flex;align-items:baseline;gap:5px}
.plan-price b{font-size:34px;font-weight:850;letter-spacing:-.04em;line-height:1}
.plan-price em{font-style:normal;color:var(--muted);font-size:13px}
.plan-sub{color:var(--muted);font-size:12.5px;text-align:center;line-height:1.35}
@media(max-width:480px){.plans{grid-template-columns:1fr}}
.price-list{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:9px;text-align:left;
  max-width:420px;margin-inline:auto}
.price-list li{position:relative;padding-left:26px;color:#475467;font-size:15px}
.price-list li::before{
  content:"";position:absolute;left:2px;top:7px;width:13px;height:8px;
  border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);
  transform:rotate(-45deg);
}

.subscribe{text-align:left;max-width:420px;margin-inline:auto;
  border-top:1px solid var(--line);padding-top:26px}
.subscribe label[for]{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.subscribe input[type=email]{
  width:100%;border:1px solid var(--line);border-radius:13px;padding:13px 14px;
  font:inherit;font-size:15px;color:var(--ink);outline:none;margin-bottom:16px;background:#fff;
}
.subscribe input[type=email]:focus{border-color:#c7d4ea;box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.tick{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;
  font-size:13.5px;line-height:1.5;color:#475467}
.tick input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--blue)}
.tick em{color:var(--muted);font-style:normal}
.subscribe .btn{width:100%;margin-top:6px}
.sub-note{margin:12px 0 0;font-size:13.5px;min-height:20px}
.sub-note.bad{color:#b42318}
.sub-small{margin:10px 0 0;font-size:12.5px;color:var(--muted);text-align:center}

@media(max-width:560px){.pricing-box{padding:30px 22px}.price b{font-size:44px}}
.cookie-notice{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:999;
  width:min(660px,calc(100% - 28px));margin:0 auto;
  display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
  padding:16px 18px;border:1px solid var(--line);border-radius:18px;
  background:#fff;box-shadow:var(--shadow);
}
.cookie-notice[hidden]{display:none}
.cookie-notice p{margin:0;font-size:14.5px;line-height:1.55;color:#475467;flex:1 1 260px}
.cookie-notice a{color:var(--blue);text-decoration:underline}
.cookie-acts{display:flex;gap:10px;flex:0 0 auto}
.cookie-acts button{
  font-size:13.5px;font-weight:700;padding:11px 16px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink);
}
.cookie-acts button.yes{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:560px){.cookie-acts{width:100%}.cookie-acts button{flex:1}}

@media(max-width:900px){
  .nav-links,.nav-actions{display:none}
  /* El idioma se queda visible en el móvil: es lo único de esta barra que
     alguien puede necesitar ANTES de poder leer el resto. */
  .lang{margin-left:auto}
  .mobile-menu{display:block;margin-left:10px}

  /* Desplegado: el menú cae bajo la barra en una columna, que es la forma
     que cabe en 390 px. Antes este botón abría un alert diciendo que en la
     app de verdad abriríamos un menú -- una nota nuestra enseñada a quien lo
     pulsaba. */
  /* ── POR QUÉ HACE FALTA ESTO ──
     `.nav` mide 76 px FIJOS y su fondo es `rgba(255,255,255,.88)`. El menú
     desplegado se salía de esos 76 px, así que a partir de ahí no había
     fondo ninguno: los seis enlaces se leían ENCIMA del titular de la
     portada, los dos a la vez. Al abrir, la cabecera crece y se vuelve
     opaca; y si el menú es más alto que la pantalla, se desplaza él en
     lugar de dejar cosas fuera. */
  .nav.open{height:auto;min-height:76px;padding-bottom:16px;
    background:#fff;backdrop-filter:none;box-shadow:0 18px 40px rgba(15,23,42,.10)}
  .nav.open .nav-inner{max-height:calc(100dvh - 20px);overflow-y:auto}

  .nav-inner.open{flex-wrap:wrap}
  .nav-inner.open .nav-links,
  .nav-inner.open .nav-actions{display:flex;flex-direction:column;align-items:stretch;
    width:100%;gap:2px;margin:12px 0 4px}
  .nav-inner.open .nav-links a{padding:12px 4px;font-size:16px;border-bottom:1px solid #eef1f5}
  .nav-inner.open .nav-actions{gap:8px;margin-top:8px}
  .nav-inner.open .nav-actions .btn{justify-content:center}
  .hero{padding-top:44px}
  .hero-grid,.split,.community{grid-template-columns:1fr}
  .hero-photo{height:500px}
  .mini-map{right:10px}
  .route-card{left:10px}
  .features,.steps{grid-template-columns:1fr}
  .section-head{align-items:start;flex-direction:column}
  .gallery{grid-template-columns:1fr}
  .gallery-stack{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .gallery .small{min-height:240px}
}
@media(max-width:580px){
  .container,.nav-inner{width:min(100% - 26px,1180px)}
  .hero{padding-top:28px}
  h1{font-size:50px}
  .hero p{font-size:17px}
  .hero-actions .btn{width:100%}
  .hero-photo{height:430px;border-radius:26px}
  .mini-map{width:165px;height:120px;top:18px}
  .route-card{width:calc(100% - 20px);bottom:14px}
  .section{padding:68px 0}
  .community{padding:30px 24px}
  .community-cards{grid-template-columns:1fr}
  .gallery-stack{grid-template-columns:1fr}
  .gallery .big{min-height:360px}
  .cta-box{padding:38px 22px}
}

/* ── el roadmap ──
   Tres columnas y NINGUNA fecha. Una fecha en un roadmap público es una
   deuda: se incumple, alguien la recuerda, y lo que era transparencia pasa a
   ser una promesa rota. Lo que sí dice es el ORDEN, que es la información que
   de verdad busca quien lo lee: "¿va a existir lo que necesito, y voy a tener
   que esperar mucho?".

   Lo ya hecho va PRIMERO y no al final, porque es lo único verificable de la
   lista: un roadmap que sólo enseña futuro no se distingue de una carta a los
   Reyes Magos. */
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.road-col{border:1px solid var(--line);border-radius:24px;padding:26px;background:#fff}
.road-col.done{background:var(--soft)}
/* Los rótulos de columna son `h2` desde que el roadmap es una página: son sus
   tres divisiones, y un documento con un solo encabezado no se puede recorrer.
   `line-height` explícito porque `h2` trae 1.05 y aquí sobra: esto es un rótulo
   de 12 px, no un titular. */
.road-h{display:flex;align-items:center;gap:9px;margin:0 0 4px;line-height:1.3;
  font-size:12px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.road-col.done .road-h{color:#0f7a51}
.road-when{margin:0 0 18px;font-size:13.5px;color:var(--muted);line-height:1.5}
.road ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.road li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--ink)}
/* El icono es un ESTADO, no un adorno: un tic es algo que ya puedes usar hoy,
   y un punto es algo que todavía no. */
.road li i{flex:none;width:18px;height:18px;border-radius:999px;margin-top:2px;
  display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:10px;font-weight:900;
  background:#e7ebf1;color:#98a2b3}
.road-col.done li i{background:#dcf0e6;color:#0f7a51}
.road li b{display:block;font-weight:700}
.road li span{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}

@media(max-width:900px){.road{grid-template-columns:1fr}}

/* ── la cabecera del showcase ──
   La píldora dice de qué va la sección antes de que nadie lea el titular. */
.ui-hero-head{max-width:760px;margin:0 auto 46px;text-align:center}
/* La píldora: dice de qué va esto antes de que nadie lea el titular. */
.ui-pill{display:inline-block;margin:0 0 20px;padding:6px 15px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.75);
  color:var(--muted);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ui-hero-head p{margin:0 auto;max-width:620px;color:var(--muted);
  font-size:18px;line-height:1.6;text-wrap:pretty}

/* La imagen, sangrada hasta abajo: se apoya en el borde de la sección en vez
   de flotar dentro de una caja, que es lo que la hace leerse como una
   pantalla y no como una foto de una pantalla. */

/* Las etiquetas, encima de la imagen y no debajo: son la leyenda de lo que
   se está viendo, y una leyenda que aparece después de la figura llega
   tarde. */

@media(max-width:900px){.ui-hero-head{margin-bottom:32px}}

/* ── el marco de navegador ──
   Una barra falsa con tres puntos y la dirección, y nada más. No es
   decoración: la captura es de una PANTALLA DE ORDENADOR y, sin marco, al
   lado de cuatro móviles enmarcados parece otra foto del producto en vez de
   otra forma de usarlo. La barra dice «esto es tu navegador» sin tener que
   escribirlo.

   `aspect-ratio` en la imagen además de width/height: la captura puede
   cambiar de tamaño el día que se rehaga, y así el hueco se reserva igual y
   la página no pega un salto cuando termina de cargar. */
.browser{border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:#fff;box-shadow:var(--shadow);max-width:1120px;margin:0 auto}
.browser-bar{display:flex;align-items:center;gap:14px;padding:11px 16px;
  background:#f6f8fa;border-bottom:1px solid var(--line)}
.browser-dots{display:flex;gap:7px;flex:none}
.browser-dots i{width:11px;height:11px;border-radius:50%;background:#dfe4ea;display:block}
.browser-url{flex:1;text-align:center;font-size:12.5px;color:#7a8698;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 14px;
  max-width:280px;margin:0 auto}
.browser .zoomable{display:block;position:relative;cursor:zoom-in;
  text-decoration:none;line-height:0}
.browser img{display:block;width:100%;height:auto;aspect-ratio:1280/972}

/* La pista de que se puede abrir, SIEMPRE visible y no sólo al pasar por
   encima: en un móvil no se pasa por encima de nada, y una pista que sólo
   aparece con el ratón no existe para la mitad de quien lee esto. */
.zoom-hint{position:absolute;right:14px;bottom:14px;
  background:rgba(15,23,42,.84);color:#fff;font-size:12px;font-weight:700;
  padding:7px 13px;border-radius:999px;line-height:1.2;
  opacity:.9;transition:opacity .18s ease;pointer-events:none}
.zoomable:hover .zoom-hint{opacity:1}
.zoomable:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ── el visor ──
   La captura interesa por el DETALLE -- los cuatro tramos, sus filtros, el
   relieve -- y a 1120 px eso no se lee. Así que se abre entera, a tamaño
   real, dentro de una caja que se desplaza: eso es el zoom. */
.zoom-view{border:0;padding:0;margin:0;width:100vw;height:100dvh;
  max-width:100vw;max-height:100dvh;background:transparent;overflow:hidden}
.zoom-view::backdrop{background:rgba(9,14,26,.93)}
.zoom-scroll{width:100%;height:100%;overflow:auto;display:grid;
  place-items:center;background:rgba(9,14,26,.93);cursor:zoom-out}
.zoom-scroll img{display:block;max-width:none;width:auto;height:auto}
.zoom-close{position:fixed;top:16px;right:16px;z-index:2;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:22px;line-height:1}
.zoom-close:hover{background:#fff}

@media(max-width:760px){
  .zoom-hint{right:8px;bottom:8px;font-size:11px;padding:6px 10px}
}

.web-points{list-style:none;margin:36px auto 0;padding:0;max-width:1120px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px}
.web-points li{display:flex;gap:11px;align-items:flex-start;
  color:var(--muted);line-height:1.6;font-size:15px}
.web-points b{color:var(--ink)}
.web-points i{flex:none;margin-top:2px;color:var(--blue);font-style:normal;
  font-weight:900;font-size:13px}

@media(max-width:760px){
  /* Una captura de escritorio a 400 px de ancho no se lee, y fingir que sí
     es peor que no enseñarla: los puntos de abajo cuentan lo mismo. */
  .browser-url{display:none}
  .web-points{grid-template-columns:1fr}
}

/* ── el showcase ──
   Filas alternas: a un lado lo que hace, al otro la pantalla donde se hace.
   La forma es la de i-maker.

   El montaje de cinco móviles que había antes enseñaba TODO y por eso no
   enseñaba NADA: a ese tamaño ninguna de las cinco pantallas se lee, así que
   funcionaba como decoración. Una pantalla por fila, del tamaño que se lee,
   dice más que las cinco juntas.

   Alternar el lado no es simetría: es lo que obliga al ojo a cruzar la
   página en cada fila, y eso es lo que hace que se lean todas en vez de
   saltar a la última. */
.show{display:flex;flex-direction:column;gap:92px}
.show-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
/* Las filas pares, del revés. `order` y no un segundo bloque de HTML: el
   orden de LECTURA (texto y luego imagen) se mantiene para quien lo oye
   leído en voz alta, y sólo cambia el orden visual. */
.show-row:nth-child(even) .show-art{order:-1}

.show-pill{display:inline-block;margin:0 0 18px;padding:5px 14px;border-radius:999px;
  border:1px solid var(--line);background:#fff;
  color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.show-row h3{font-size:clamp(25px,3.1vw,34px);line-height:1.12;letter-spacing:-.035em;
  margin:0 0 16px;text-wrap:balance}
.show-row > div > p{margin:0 0 22px;color:var(--muted);font-size:16.5px;line-height:1.65;
  max-width:46ch;text-wrap:pretty}

.show-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.show-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;color:#344054}
.show-list i{flex:none;margin-top:2px;color:var(--blue);font-style:normal;font-weight:900;font-size:13px}

/* El móvil.
   **Las capturas de hoy salen recortadas de un montaje de 1448 px de ancho,
   así que cada pantalla tiene unos 270 px reales.** Eso no se arregla
   procesando: hacen falta capturas de verdad, una por pantalla, a resolución
   de móvil (1170x2532 o más). Están pedidas.

   Mientras tanto se enseñan PEQUEÑAS -- 232 px y no 290 -- porque a menor
   tamaño en pantalla, menos se estira cada píxel y menos se nota. Es un
   parche y se nota que lo es.

   El marco: fino, gris muy oscuro en vez de negro puro, y con el brillo de
   canto que tiene un móvil de verdad. Un rectángulo negro grueso alrededor
   de una captura borrosa suma dos problemas. */
.show-art{display:flex;justify-content:center}
.show-phone{
  /* 290 y no 232. Las capturas eran recortes de un montaje -- unos 270 px
     reales cada móvil -- y se enseñaban pequeñas para que no se notara.
     Desde el 26/09/2026 son capturas de verdad a 1206x2622, así que ya no
     hay nada que disimular. */
  width:100%;max-width:290px;padding:6px;border-radius:38px;
  background:linear-gradient(160deg,#3d4657,#141b26 38%,#0b1119);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 1px 2px rgba(15,23,42,.30),
    0 24px 56px rgba(15,23,42,.24);
}
.show-phone img{display:block;width:100%;height:auto;border-radius:32px;
  /* Un pelo de nitidez: no inventa detalle, pero recupera el borde que se
     come el reescalado. */
  image-rendering:auto}

@media(max-width:900px){
  .show{gap:64px}
  .show-row{grid-template-columns:1fr;gap:34px}
  /* En una columna se deshace la alternancia: el texto SIEMPRE primero, o
     media página son fotos sin explicación y la otra media explicaciones sin
     foto. */
  .show-row:nth-child(even) .show-art{order:0}
  .show-phone{max-width:250px}
}

/* ── las tiendas ──
   Desde el 2026-10-01 la suscripción se compra en la app y no aquí, así que
   esto sustituye al formulario. Ver el comentario en index.html.

   `align-items:center` y no `stretch`: la insignia de Apple tiene su alto fijo
   -- es un recurso suyo, con sus normas, y no se estira ni se recolorea -- así
   que el bloque de Android se centra contra ella en vez de al revés. */
.stores{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 18px}
.store{display:flex;align-items:center;gap:10px;text-decoration:none}
.store img{display:block;height:50px;width:auto}

/* ANDROID NO LLEVA LA INSIGNIA DE GOOGLE, y no es por pereza: sus normas dicen
   que no se use para una app que no está en la tienda. Así que es un bloque
   nuestro, apagado a propósito, que dice lo que pasa. Y NO es un enlace: un
   botón que no lleva a ningún sitio es peor que no tenerlo. */
.store.soon{
  color:var(--muted);border:1px solid rgba(15,23,42,.13);border-radius:11px;
  height:50px;padding:0 15px;background:rgba(15,23,42,.02);cursor:default
}
.store.soon span{display:flex;flex-direction:column;line-height:1.2}
.store.soon b{font-size:14px;color:var(--ink);font-weight:800}
.store.soon em{font-style:normal;font-size:12px}

/* Los precios ya no se eligen aquí, así que el puntero no debe decir que sí. */
.plans .plan{cursor:default}

/* ── CONSEGUIR LA APP ──
   Grande y arriba de la tarjeta de suscripción. Desde que el pago salió de la
   web (2026-10-01) éste es el único camino que lleva a alguna parte, y estaba
   como una línea de insignias al final, debajo de la lista de lo que incluye.

   Fondo propio y no el de la tarjeta: lo que tiene que destacar no puede
   compartir superficie con lo que lo rodea. */
.get{
  background:linear-gradient(180deg,rgba(37,99,235,.07),rgba(37,99,235,.02));
  border:1px solid rgba(37,99,235,.16);border-radius:26px;
  padding:34px 32px 26px;margin:0 0 30px
}
.get-says h3{
  font-size:clamp(27px,3.3vw,38px);line-height:1.1;letter-spacing:-.035em;
  margin:0 0 12px;text-wrap:balance
}
/* La segunda línea en azul: son DOS promesas y la segunda es la que nadie
   espera. En el mismo color se leería como una sola frase larga. */
.get-says h3 span{color:var(--blue)}
.get-says p{margin:0 0 24px;color:var(--muted);line-height:1.6;max-width:560px}

/* `26px 12px` y no `12px`: la chapa «En camino» sobresale 9 px por encima de su
   insignia, así que al partirse en dos filas se metía dentro de la de arriba.
   El hueco entre filas tiene que dejarle sitio a algo que vuela fuera de su
   caja. */
.get-ways{display:flex;flex-wrap:wrap;gap:26px 12px;align-items:stretch;justify-content:center}
/* `stretch` y no `center`: los tres bloques tienen alturas naturales distintas
   -- la insignia de Apple trae la suya -- y centrados quedaban escalonados. */
.way{
  display:flex;align-items:center;gap:11px;text-decoration:none;
  border-radius:14px;min-height:60px;padding:0 18px;
  border:1px solid rgba(15,23,42,.12);background:#fff;color:var(--ink)
}
.way span{display:flex;flex-direction:column;line-height:1.25}
.way b{font-size:15px;font-weight:800}
.way em{font-style:normal;font-size:12.5px;color:var(--muted)}

/* LA INSIGNIA DE APPLE NO LLEVA NADA ENCIMA: es un recurso suyo, con sus
   normas, y no se enmarca ni se recolorea. Por eso este bloque no tiene borde
   ni fondo, sólo el sitio. */
.way.store{border:0;background:none;padding:0;min-height:60px}
.way.store img{display:block;height:60px;width:auto}

.way.web:hover{border-color:var(--blue);color:var(--blue)}
.way.web:hover em{color:var(--blue)}

/* ── GOOGLE PLAY, APAGADO ──
   La insignia de verdad, pero sin enlace: la app no está en la tienda, y
   llevar a alguien allí sería llevarle a un error.

   `grayscale` y opacidad, que es lo que dice «todavía no» sin tocar la
   insignia: no se recolorea ni se recorta, se apaga entera. Y la chapa encima
   es lo que la convierte en una promesa con fecha -- sin ella, un botón de
   Google Play que no hace nada se lee como una página rota. */
.way.play{
  border:0;background:none;padding:0;position:relative;min-height:60px;
  cursor:default;
  /* `inline-block` y ancho de su contenido, NO de bloque: la chapa va centrada
     sobre esta caja, así que la caja tiene que medir lo que mide la insignia y
     ni un píxel más. Siendo de bloque, la chapa se centra sobre el hueco
     entero y queda flotando al lado de nada. */
  display:inline-block;width:max-content;max-width:100%
}
/* Un 12% más alta que la de Apple, y es para que se vean IGUAL: la insignia de
   Google trae margen interior dentro de la propia imagen y la de Apple no, así
   que a la misma altura de fichero la de Google se ve más pequeña. Se compara
   lo que se ve, no lo que mide el archivo. */
.way.play img{display:block;height:67px;width:auto;filter:grayscale(1);opacity:.45}
.way.play .tag{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--blue);color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(37,99,235,.35)
}

.get-small{margin:20px 0 0;font-size:13px;color:var(--muted);line-height:1.6}

@media (max-width:620px){
  .get{padding:26px 20px 20px}
  /* A lo ancho y apilados: tres bloques de 60 px de alto en una fila de 400
     px se parten por donde no deben.

     `.get-ways .way` Y NO `.way` A SECAS, que es lo que tenía y lo rompía: esa
     clase también la usan las insignias del encabezado, así que en un móvil se
     estiraban a todo el ancho. La de Google no se nota -- la imagen sigue a su
     tamaño -- pero su chapa «En camino» va centrada sobre el CONTENEDOR, y con
     el contenedor a 400 px la chapa se iba a flotar sola a media pantalla,
     separada de la insignia a la que pertenece. */
  .get-ways .way{width:100%}
  .get-ways .way.store img{height:54px}
}

/* ── «y lo hacemos escuchando», dentro de la tarjeta de comunidad ──
   Era una sección clara aparte con el MISMO rótulo «COMUNIDAD»: dos bloques
   compitiendo por decir lo mismo. Juntos dicen algo que separados no decían --
   la comunidad no es sólo lo que los moteros se cuentan entre ellos, es
   también que nos lo cuenten a nosotros. */
.community-listen{
  font-size:21px;line-height:1.25;letter-spacing:-.02em;
  margin:26px 0 10px;color:#fff;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.12)
}
.community-small{font-size:13.5px;opacity:.72;margin-top:-4px}
/* El correo es el único botón de la tarjeta, así que se separa de lo de
   arriba: pegado al párrafo se leía como parte de la frase. */
.community .btn{margin-top:16px}

/* ── los iconos de las tarjetas de comunidad ──
   Eran tres emoji y una fila de puntos de colores. Los emoji los dibuja cada
   sistema a su manera -- la moto de Android no se parece a la de iPhone -- así
   que la misma página se veía distinta en cada móvil, y ninguna de las tres
   versiones se parecía a lo que la app enseña.

   Los mismos de Tabler que usa la aplicación, copiados igual que los de la
   sección de arriba: route, map-pin, users-group y motorbike. Ver el
   comentario de `.features`. */
.community-card .ci{
  width:40px;height:40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(130,170,255,.12);color:#82aaff;margin-bottom:14px
}
.community-card .ci svg{width:22px;height:22px}

/* ── las tiendas en el hero ──
   Donde estaban las dos tarjetas flotantes con datos inventados. Debajo de la
   foto y no encima: superpuestas taparían justo la carretera, que es lo que la
   foto viene a enseñar. */
/* Debajo del botón, alineadas con el titular: es la columna que se lee. */
/* Son la ÚNICA llamada del hero desde que el botón «Todo lo que incluye» se
   fue: quien llega aquí o se descarga la app o sigue bajando, y las dos cosas
   están bien. Más aire arriba, porque ya no cuelgan de un botón. */
/* Mismo motivo que en `.get-ways`: la chapa vuela fuera de su caja. */
.hero-stores{display:flex;flex-wrap:wrap;gap:26px 12px;margin-top:30px}
.hero-stores .way.store img{height:56px}
.hero-stores .way.play img{height:63px}