/* ── Viana · hoja única ───────────────────────────────────────────────
   Tres familias de fondo: papel, tinta y amarillo. Cada sección declara
   la suya y redefine dentro los colores de texto, filete y apagado, así
   que un bloque se mueve de una a otra sin tocar nada de su interior.
   La voz es Nunito, con el 900 reservado para los titulares grandes. */

:root{
  --papel:#FFFFFF;
  --niebla:#EDF2F7;
  --tinta:#12202F;
  --tinta-honda:#0B1622;
  --tinta-alta:#1B3047;
  --amarillo:#FFC400;
  --amarillo-honda:#E0A800;
  --claro:#EAEFF5;

  /* lo que cada sección redefine */
  --fondo:var(--papel);
  --texto:var(--tinta);
  --apagado:#55687C;
  --filete:#D8E1EA;

  --ancho:1120px;
}
.on-ink{
  --fondo:var(--tinta); --texto:var(--claro);
  --apagado:#9FB0C2; --filete:rgba(234,239,245,.16);
}
.on-mist{ --fondo:var(--niebla); --filete:#D3DEE8; }
.on-yellow{
  --fondo:var(--amarillo); --texto:var(--tinta);
  --apagado:#3C4C5E; --filete:rgba(18,32,47,.24);
}
.on-ink,.on-mist,.on-yellow{background:var(--fondo);color:var(--texto)}

*{box-sizing:border-box}
section[id]{scroll-margin-top:84px}
::selection{background:var(--amarillo);color:var(--tinta)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:22px}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.04}
h1,h2{font-weight:900;letter-spacing:-.035em}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--tinta);outline-offset:4px;border-radius:3px}
.on-ink :focus-visible{outline-color:var(--amarillo)}

/* Las superficies que no dibujo también llevan la marca. */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--niebla)}
::-webkit-scrollbar-thumb{background:#B6C5D4;border:3px solid var(--niebla);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#97AABC}
html{scrollbar-color:#B6C5D4 var(--niebla)}

/* El galón de la marca: la V y las tres ondas del ícono de la app, para
   firmar una sección sin repetir el logotipo. */
.chevron{display:block;width:100%;height:100%;overflow:visible}
.chevron path{fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ── barra ── */
.bar{position:sticky;top:0;z-index:20;color:var(--claro);
  background:rgba(11,22,34,.76);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(234,239,245,.12)}
.bar .wrap{display:flex;align-items:center;height:70px;gap:28px}
.bar .brand img{height:26px}
.bar nav{margin-left:auto;display:flex;gap:26px;font-weight:700;font-size:.95rem;
  align-items:center}
.bar nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;
  transition:border-color .16s ease,color .16s ease}
.bar nav a:hover{border-bottom-color:var(--amarillo)}
.bar :focus-visible{outline-color:var(--amarillo)}
.bar-cta{background:var(--amarillo);color:var(--tinta);padding:11px 20px;border-radius:10px;
  text-decoration:none;font-weight:800;font-size:.92rem;white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.28);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.bar-cta:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.34)}
@media (max-width:700px){.bar nav{display:none}.bar .bar-cta{margin-left:auto}}

/* ── hero (tinta profunda, glow amarillo, mapa de noche) ── */
.hero{position:relative;padding:88px 0 0;isolation:isolate;overflow:hidden;
  background:radial-gradient(118% 92% at 80% 4%, var(--tinta-alta) 0%, var(--tinta) 42%, var(--tinta-honda) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    repeating-linear-gradient(90deg, rgba(234,239,245,.05) 0 2px, transparent 2px 96px),
    repeating-linear-gradient(0deg,  rgba(234,239,245,.05) 0 2px, transparent 2px 96px),
    repeating-linear-gradient(28deg, rgba(255,196,0,.06) 0 3px, transparent 3px 260px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 82%);
  mask-image:linear-gradient(to bottom,#000 0%,transparent 82%)}
.hero::after{content:"";position:absolute;z-index:-1;width:min(620px,84%);aspect-ratio:1;
  right:-2%;top:2%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,196,0,.2), transparent 62%)}
.hero .wrap{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.hero .wrap{grid-template-columns:1.12fr .88fr;gap:60px}}
.hero-pill{display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;
  padding:8px 15px;border-radius:999px;font-weight:800;font-size:.82rem;color:var(--claro);
  letter-spacing:.01em;text-transform:none;
  background:rgba(234,239,245,.08);border:1px solid rgba(234,239,245,.18)}
.hero-pill .dot{width:9px;height:9px;border-radius:50%;background:var(--amarillo)}
.hero h1{font-size:clamp(2.7rem,6.2vw,4.3rem);max-width:15ch;text-wrap:balance;
  line-height:.98;letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--amarillo)}
.hero .lede{margin-top:26px;font-size:clamp(1.1rem,2.3vw,1.36rem);line-height:1.55;
  color:#C4D1DE;max-width:46ch}
.hero .lede b{color:var(--claro);font-weight:800}
.cta-note{margin:16px 0 88px;font-size:.95rem;color:var(--apagado)}
.hero figure{margin:0;justify-self:center;align-self:center;position:relative}
.frame{width:min(284px,74vw);border:11px solid #060C13;border-radius:40px;
  background:#060C13;overflow:hidden;box-shadow:0 26px 60px rgba(18,32,47,.28)}
.hero .frame{margin-bottom:88px;
  box-shadow:0 40px 90px rgba(3,8,15,.72), 0 0 0 1px rgba(234,239,245,.07)}
.hero figcaption{margin:22px auto 88px;max-width:300px;font-size:.9rem;line-height:1.5;
  color:var(--apagado);text-align:center}

/* Tarjetas flotantes que anotan el teléfono, como en las referencias. */
.callout{position:absolute;z-index:3;display:flex;gap:11px;align-items:center;max-width:216px;
  padding:11px 14px;border-radius:15px;background:rgba(18,32,47,.78);
  border:1px solid rgba(234,239,245,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 40px rgba(3,8,15,.55)}
.callout .ci{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;
  place-items:center;background:var(--amarillo);color:var(--tinta)}
.callout .ci svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.callout b{display:block;color:var(--claro);font-size:.93rem;line-height:1.15;font-weight:800}
.callout div span{color:#A7B7C7;font-size:.76rem;line-height:1.2}
.callout.c1{top:-46px;left:-72px}
.callout.c2{top:262px;right:-58px}
.callout.c3{bottom:150px;left:-52px}
@media (max-width:899px){.callout{display:none}}

@keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes flota{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.hero h1,.hero .lede,.hero .stores,.hero .cta-note,.hero figure{
  animation:sube .64s cubic-bezier(.22,.7,.3,1) backwards}
.hero .lede{animation-delay:.07s}
.hero .stores{animation-delay:.14s}
.hero .cta-note{animation-delay:.2s}
.hero figure{animation-delay:.1s}
.callout{animation:flota .6s cubic-bezier(.22,.7,.3,1) backwards}
.callout.c1{animation-delay:.42s}
.callout.c2{animation-delay:.56s}
.callout.c3{animation-delay:.7s}
@media (prefers-reduced-motion:reduce){
  .hero h1,.hero .lede,.hero .stores,.hero .cta-note,.hero figure,.callout{animation:none}
  .pin .ping{animation:none}}

/* ── tira de tres ── */
.facts{border-top:1px solid var(--filete)}
.facts .wrap{display:grid;gap:0}
@media (min-width:780px){.facts .wrap{grid-template-columns:repeat(3,1fr)}}
.facts div{padding:28px 0;border-top:1px solid var(--filete)}
.facts div:first-child{border-top:0}
@media (min-width:780px){
  .facts div{border-top:0;border-left:1px solid var(--filete);padding:34px 30px 34px 28px}
  .facts div:first-child{border-left:0;padding-left:0}}
.facts b{display:block;font-size:1.12rem;margin-bottom:5px;font-weight:800}
.facts span{color:var(--apagado);font-size:.98rem}

/* ── la comunidad (tinta) ── */
.community{padding:96px 0}
.community .wrap{display:grid;gap:30px}
@media (min-width:900px){.community .wrap{grid-template-columns:.92fr 1.08fr;gap:72px}}
.community h2{font-size:clamp(2.1rem,5.4vw,3.4rem);max-width:15ch;text-wrap:balance}
.community h2 em{font-style:normal;color:var(--amarillo)}
.community p{color:#C4D1DE;font-size:1.08rem}
.community p + p{margin-top:18px}

/* ── qué te avisa (papel): cuatro familias, el color manda ── */
.catalogue{padding:96px 0}
.catalogue h2{font-size:clamp(2.1rem,5.4vw,3.4rem)}
.catalogue .intro{color:var(--apagado);margin:16px 0 44px;max-width:54ch;font-size:1.05rem}
/* Iconos de línea, dibujados en el trazo de la marca: cabos y uniones redondos. */
.ico{display:block;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.families{display:grid;gap:20px;align-items:start}
@media (min-width:640px){.families{grid-template-columns:1fr 1fr;gap:24px}}
/* Cada familia es una columna encabezada por su color; el tono del pin en
   el mapa pasa a ser la estructura de la sección. */
.fam{--chip:#3D4E60;border:1px solid var(--filete);border-radius:20px;overflow:hidden;
  background:#fff;box-shadow:0 1px 0 rgba(18,32,47,.02)}
.fam.f-flow{--chip:#B5560C}
.fam.f-danger{--chip:#CE3B41}
.fam.f-env{--chip:#2E6BD6}
.fam.f-auth{--chip:#3D4E60}
.fam > .fam-head{display:flex;align-items:center;gap:10px;padding:16px 18px;
  color:#fff;font-weight:800;font-size:1.02rem;letter-spacing:-.01em;
  background:var(--chip)}
.fam .fam-head .dotfam{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.fam ul{list-style:none;margin:0;padding:6px 18px 8px}
.fam li{display:flex;gap:13px;align-items:flex-start;padding:15px 0;
  border-top:1px solid var(--filete)}
.fam li:first-child{border-top:0}
.fam li .ico{flex:0 0 auto;width:40px;height:40px;padding:9px;border-radius:12px;
  background:color-mix(in srgb, var(--chip) 12%, #fff);color:var(--chip);
  stroke-width:1.9}
.fam li b{display:block;color:var(--tinta);font-size:1rem;font-weight:800;line-height:1.2}
.fam li .ex{display:block;color:var(--apagado);font-size:.86rem;line-height:1.4;margin-top:2px}

.legal-note{margin-top:38px;color:#44576B;font-size:.95rem;max-width:66ch;line-height:1.55;
  display:flex;gap:13px;align-items:flex-start;background:#F8FAFC;border:1px solid var(--filete);
  border-radius:14px;padding:16px 18px}
.legal-note::before{content:"";flex:0 0 auto;width:22px;height:22px;border-radius:7px;margin-top:1px;
  background:var(--amarillo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312202F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16v-5M12 8h.01'/%3E%3C/svg%3E") center/15px no-repeat}

/* ── así se usa: cuatro gestos en texto + tres pantallas que importan ── */
.manual{padding:96px 0}
.manual > .wrap > h2{font-size:clamp(2.1rem,5.4vw,3.4rem)}
.manual .intro{color:#C4D1DE;max-width:54ch;margin:16px 0 0;font-size:1.05rem}

/* Los cuatro gestos del recorrido, contados sin captura. */
.beats{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:720px){.beats{grid-template-columns:repeat(2,1fr);gap:16px 44px}}
.beat{display:flex;gap:16px;align-items:flex-start;padding:22px 0;
  border-top:1px solid var(--filete)}
@media (min-width:720px){.beat{padding:24px 0}}
.beat .bn{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--amarillo);
  color:var(--tinta);font-weight:900;font-size:1.05rem;display:grid;place-items:center;
  box-shadow:0 5px 12px rgba(0,0,0,.3)}
.beat h3{font-size:1.18rem;margin-bottom:5px;color:var(--claro);text-wrap:balance}
.beat p{color:#A7B7C7;font-size:.98rem;line-height:1.5}

/* Las tres pantallas reales. El reporte sube como hoja: lo gris del mapa
   se disuelve en la tinta de la sección. */
.screens{list-style:none;margin:58px 0 0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:44px 30px}
.screen-card{flex:0 1 288px;display:flex;flex-direction:column;gap:18px}
.screen-card .shot{margin:0;align-self:center;width:min(230px,66vw);position:relative;
  border:10px solid #060C13;border-radius:34px;background:#060C13;overflow:hidden;
  box-shadow:0 28px 60px rgba(3,8,15,.55)}
.screen-card .shot img{display:block;width:100%;height:auto}
/* En las dos hojas, un velo de tinta borra el mapa gris por arriba. */
.screen-card.is-sheet .shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, transparent 0 62%, rgba(11,22,34,.72) 78%, var(--tinta-honda) 94%)}
.screen-card .cap{text-align:left}
.screen-card h3{font-size:1.18rem;margin-bottom:6px;color:var(--claro);text-wrap:balance;
  display:flex;align-items:center;gap:.5em}
.screen-card h3 .tag{font-size:.62em;font-weight:800;letter-spacing:.02em;color:var(--tinta);
  background:var(--amarillo);padding:.18em .6em;border-radius:999px;white-space:nowrap}
.screen-card .cap p{color:#A7B7C7;font-size:.96rem;line-height:1.5}

/* ── la promesa (amarillo) ── */
.promise{padding:108px 0;position:relative;overflow:hidden}
.promise .wrap{position:relative;display:grid;gap:32px}
@media (min-width:900px){
  .promise .wrap{grid-template-columns:1fr 1fr;gap:72px;align-items:center}
  .promise .free-list{margin-top:0}
}
.promise h2{font-size:clamp(2.4rem,6.6vw,4.4rem);max-width:11ch;text-wrap:balance;line-height:.9}
.promise p{font-size:1.12rem;max-width:52ch;font-weight:600;margin-top:36px}
.free-list{margin-top:36px;border-top:2px solid var(--filete)}
.free-list p.heading{font-weight:900;font-size:1.05rem;margin:20px 0 10px}
.free-list ul{list-style:none;margin:0;padding:0}
.free-list li{padding:12px 0;border-top:1px solid var(--filete);font-weight:600;
  display:flex;gap:12px;align-items:baseline}
.free-list li span{font-weight:900;white-space:nowrap}
/* Galón de marca, apenas insinuado detrás de la promesa. */
.promise .mark-bg{position:absolute;z-index:0;right:-6%;bottom:-18%;width:min(440px,52%);
  color:rgba(18,32,47,.06);pointer-events:none}
.promise .mark-bg .chevron path{stroke:currentColor}

/* ── planes (papel) ── */
.plans{padding:100px 0}
.plans > .wrap > h2{font-size:clamp(2.1rem,5.4vw,3.4rem)}
.plans .intro{color:var(--apagado);margin:16px 0 48px;max-width:46ch;font-size:1.05rem}
.pair{display:grid;gap:30px}
@media (min-width:860px){.pair{grid-template-columns:1fr 1fr;gap:34px;align-items:stretch}}
.plan{border-radius:24px;padding:36px;transition:transform .18s ease,box-shadow .18s ease}
.plan:not(.premium){border:1px solid var(--filete);background:#F8FAFC}
.plan h3{font-size:1.55rem}
.plan .price{font-size:3.1rem;font-weight:900;letter-spacing:-.04em;margin:14px 0 4px}
.plan .price span{font-size:1.05rem;font-weight:700;color:var(--apagado);letter-spacing:0}
.plan .note{color:var(--apagado);font-size:.98rem}
.plan ul{list-style:none;padding:0;margin:28px 0 0}
.plan li{padding:13px 0 13px 32px;position:relative;border-top:1px solid var(--filete);
  font-size:1rem}
.plan li::before{content:"";position:absolute;left:0;top:14px;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC400' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center/18px no-repeat}
.premium{background:var(--tinta);color:var(--claro);border-radius:24px;padding:38px;
  position:relative;--apagado:#9FB0C2;--filete:rgba(234,239,245,.16);
  box-shadow:0 30px 70px rgba(11,22,34,.3), 0 0 0 1px rgba(234,239,245,.08)}
.premium::before{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  background:radial-gradient(92% 60% at 86% 0%, rgba(255,196,0,.08), transparent 58%)}
.premium > *{position:relative}
.premium .price{color:#fff}
.soon{color:var(--amarillo);font-weight:800;font-size:.84rem;opacity:.85}
.premium .premium-note{margin:18px 0 4px;font-size:.97rem;line-height:1.55;color:#CBD7E3}
.premium .coming-label{margin:24px 0 0;font-weight:800;font-size:.92rem;color:var(--claro)}
.premium ul.coming{margin-top:6px}
.premium ul.coming li::before{top:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v4.8l3 1.8'/%3E%3C/svg%3E") center/18px no-repeat}
@media (min-width:860px){.plan:hover{transform:translateY(-4px)}
  .premium:hover{box-shadow:0 40px 90px rgba(11,22,34,.42), 0 0 0 1px rgba(234,239,245,.14)}
  .plan:not(.premium):hover{box-shadow:0 24px 54px rgba(18,32,47,.12)}}

/* ── confianza (tinta) ── */
.trust{padding:72px 0}
.trust .wrap{display:grid;gap:34px}
@media (min-width:820px){.trust .wrap{grid-template-columns:repeat(3,1fr);gap:48px}}
.trust .ico{width:32px;height:32px;color:var(--amarillo);margin-bottom:14px}
.trust h3{font-size:1.14rem;margin-bottom:7px}
.trust p{color:#A7B7C7;font-size:.98rem;max-width:34ch}

/* ── preguntas (papel) ── */
.faq{padding:96px 0}
.faq h2{font-size:clamp(2rem,5vw,3rem)}
.faq dl{margin:40px 0 0;max-width:68ch}
@media (min-width:900px){
  .faq dl{max-width:none;columns:2;column-gap:64px}
  .faq dt{break-after:avoid}
  .faq dd{break-inside:avoid;margin-bottom:30px}}
.faq dt{font-weight:900;font-size:1.12rem;padding-top:26px;letter-spacing:-.02em;
  border-top:1px solid var(--filete)}
.faq dd{margin:8px 0 26px;color:var(--apagado)}

/* ── cierre (amarillo) ── */
.closing{padding:92px 0 100px}
.closing .wrap{display:grid;gap:44px;align-items:center;justify-items:center}
@media (min-width:900px){
  .closing .wrap{grid-template-columns:1.25fr .75fr;gap:64px;justify-items:start}}
.closing h2{font-size:clamp(2.1rem,5.8vw,3.6rem);max-width:15ch;text-wrap:balance;line-height:.98}
.closing p{margin-top:18px;max-width:46ch;font-weight:600;font-size:1.08rem}
/* El ícono de la app: lo que se busca en la tienda, no un adorno. */
.closing-mark{width:min(190px,54vw);height:auto;
  filter:drop-shadow(0 24px 48px rgba(18,32,47,.34))}
@media (min-width:900px){.closing-mark{width:min(220px,100%);justify-self:center}}

/* ── pie (tinta) ── */
footer{padding:48px 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center;
  color:var(--apagado);font-size:.95rem}
footer img{height:23px;opacity:.9}
footer nav{margin-left:auto;display:flex;gap:26px}
footer a{text-decoration:none}
footer a:hover{color:var(--claro);text-decoration:underline;text-underline-offset:4px}

@media (max-width:899px){
  .br-wide{display:none}
  .hero{padding-top:56px}
  .cta-note{margin-bottom:44px}
  .hero .frame{margin-bottom:0}
  .hero figcaption{margin-bottom:56px}
}

/* ── manejes lo que manejes (tinta) ── */
.drivers{padding:96px 0}
.drivers h2{font-size:clamp(2.1rem,5.4vw,3.4rem)}
.drivers .intro{color:#C4D1DE;margin:16px 0 44px;max-width:46ch;font-size:1.05rem}
.drivers .grid{display:grid;gap:0}
@media (min-width:820px){.drivers .grid{grid-template-columns:1fr 1fr;column-gap:64px}}
.drivers .grid > div{padding:26px 0;border-top:1px solid var(--filete)}
.drivers .ico{width:34px;height:34px;color:var(--amarillo);margin-bottom:14px}
.drivers h3{font-size:1.22rem;margin-bottom:8px}
.drivers .grid p{color:#A7B7C7;max-width:42ch}

/* ── la pantalla del hero, dibujada: mapa de noche ──
   Todo dentro va en `em` sobre un cuerpo en `cqw`: la pantalla se escala como
   un teléfono de verdad y el texto no parte en dos cuando el marco encoge. */
.frame{container-type:inline-size}
.screen{position:relative;aspect-ratio:240/520;overflow:hidden;
  font-size:5.2cqw;line-height:1.3;background:var(--tinta-honda);color:var(--claro)}
/* Calles de noche: trama tenue en navy sobre tinta honda. */
.map{position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(90,120,150,.10) 0 1.5px, transparent 1.5px 34px),
    repeating-linear-gradient(0deg,  rgba(90,120,150,.10) 0 1.5px, transparent 1.5px 40px),
    radial-gradient(130% 96% at 32% 2%, #17304a 0%, #0E2033 44%, var(--tinta-honda) 100%)}
.map svg{position:absolute;inset:0;width:100%;height:100%}
/* La ruta (azul, tu trayecto) y el pin del aviso adelante (amarillo). */
.route-glow{fill:none;stroke:#2E6BD6;stroke-opacity:.35;stroke-width:11;stroke-linecap:round}
.route{fill:none;stroke:#4B86FF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.road{fill:none;stroke:rgba(150,178,205,.16);stroke-linecap:round}
.road-major{fill:none;stroke:rgba(165,195,224,.22);stroke-linecap:round}

.alert-card{position:absolute;left:.7em;right:.7em;top:1.3em;z-index:2;
  background:rgba(20,34,50,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(234,239,245,.12);border-radius:1.15em;padding:.78em .85em;
  display:flex;gap:.68em;align-items:center;box-shadow:0 .8em 2em rgba(3,8,15,.5)}
.alert-card .icon{flex:0 0 auto;width:2.5em;height:2.5em;border-radius:.74em;background:#3D62D6;
  position:relative}
.alert-card .icon::after{content:"";position:absolute;left:.56em;right:.56em;top:.86em;
  height:.74em;border-radius:.4em .4em .14em .14em;background:#fff}
.alert-card .body{flex:1 1 auto;min-width:0}
.alert-card .body b{display:block;color:#fff;font-size:.95em;letter-spacing:-.01em;
  white-space:nowrap;font-weight:800}
.alert-card .body .where{display:block;color:#A7B7C7;font-size:.72em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.alert-card .conf{display:inline-flex;align-items:center;gap:.3em;margin-top:.3em;
  color:#CDE3CF;font-size:.6em;font-weight:700}
.alert-card .conf::before{content:"";width:1.1em;height:1.1em;border-radius:50%;flex:0 0 auto;
  background:#2F7A4A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center/.7em no-repeat}
.alert-card .distance{flex:0 0 auto;color:#fff;font-weight:900;font-size:1.3em;
  letter-spacing:-.03em;white-space:nowrap}
.alert-card .distance small{font-size:.48em;font-weight:700;margin-left:.1em;color:#A7B7C7}

/* El pin del aviso sobre el mapa, latiendo. */
.pin{position:absolute;z-index:1;left:58%;top:30%;width:2.9em;height:2.9em;transform:translate(-50%,-50%)}
.pin .dotpin{position:absolute;inset:0;border-radius:50% 50% 50% 8%;transform:rotate(45deg);
  background:var(--amarillo);box-shadow:0 .5em 1.1em rgba(0,0,0,.45)}
.pin .glyph{position:absolute;inset:0;transform:rotate(0);display:grid;place-items:center}
.pin .glyph::after{content:"";width:1.1em;height:.9em;border-radius:.26em .26em .1em .1em;
  background:var(--tinta);box-shadow:0 -.32em 0 -.16em var(--tinta)}
.pin .ping{position:absolute;left:50%;top:38%;width:1em;height:1em;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(255,196,0,.5);animation:ping 2.4s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes ping{0%{transform:translate(-50%,-50%) scale(1);opacity:.6}
  70%,100%{transform:translate(-50%,-50%) scale(4.6);opacity:0}}

.dial{position:absolute;left:.85em;bottom:1.05em;z-index:2;display:flex;align-items:center;gap:.5em}
.dial .speed{width:3.5em;height:3.5em;border-radius:50%;background:rgba(20,34,50,.9);
  display:grid;place-content:center;text-align:center;box-shadow:0 .4em 1.1em rgba(0,0,0,.4)}
.dial .speed b{display:block;color:#fff;font-size:1.1em;line-height:1;font-weight:900}
.dial .speed span{color:#9FB0C2;font-size:.46em;font-weight:700;letter-spacing:.08em}
.dial .limit{width:2.7em;height:2.7em;border-radius:50%;background:#fff;
  border:.32em solid #D8352A;display:grid;place-content:center;color:#12202F;
  font-weight:900;font-size:1em}

/* ── documentos: privacidad y términos ── */
.doc{padding:56px 0 96px}
.doc .wrap{max-width:760px}
.doc .back{margin-bottom:26px}
.doc .back a{color:var(--apagado);text-decoration:none;font-weight:700;font-size:.95rem}
.doc .back a:hover{color:var(--tinta)}
.doc h1{font-size:clamp(2rem,5vw,2.9rem);margin-bottom:12px}
.doc .dates{color:var(--apagado);font-size:.93rem;margin-bottom:30px}
.doc .standfirst{font-size:1.14rem;line-height:1.6;margin-bottom:28px}
.doc h2{font-size:1.35rem;margin:46px 0 14px;padding-top:22px;font-weight:800;letter-spacing:-.02em;
  border-top:1px solid var(--filete)}
.doc p{margin-bottom:14px;color:#33465B}
.doc a{color:var(--tinta);text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--amarillo);text-underline-offset:3px}
.notice{background:#FFF6D9;border-left:4px solid var(--amarillo);border-radius:0 10px 10px 0;
  padding:16px 18px;margin:8px 0 30px;font-size:.98rem}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:.96rem}
.doc th{text-align:left;font-size:.8rem;letter-spacing:.02em;color:var(--apagado);
  font-weight:800;padding:0 14px 10px 0;border-bottom:2px solid var(--filete)}
.doc td{padding:13px 14px 13px 0;border-bottom:1px solid var(--filete);
  vertical-align:top;color:#33465B}
.doc td b{color:var(--tinta)}
.doc table tbody tr:last-child td{border-bottom:0}
.bullets{list-style:none;padding:0;margin:0 0 16px}
.bullets li{position:relative;padding:11px 0 11px 26px;border-top:1px solid var(--filete);
  color:#33465B}
.bullets li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:9px;
  border-radius:50%;background:var(--amarillo)}
.bullets li:first-child{border-top:0}
@media (max-width:620px){
  .doc table,.doc thead,.doc tbody,.doc tr,.doc td,
  .doc th{display:block;width:100%}
  .doc thead{display:none}
  .doc td{padding:6px 0;border-bottom:0}
  .doc tbody tr{padding:14px 0;border-bottom:1px solid var(--filete)}
}

/* ── distintivos de tienda ──
   Arte oficial de Google y de Apple, sin modificar. Cada uno se muestra a la
   misma altura visible y con el espacio libre que pide su guía: un cuarto de
   la altura del distintivo. El PNG de Google ya lo trae dentro; el SVG de
   Apple no, así que se lo damos con margen. */
.stores{margin-top:34px}
.stores-note{font-size:.95rem;font-weight:700;color:var(--apagado);
  margin-bottom:12px}
.stores .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.badge{display:block;width:auto;transition:transform .16s ease,filter .16s ease}
.badge:hover{transform:translateY(-2px);filter:brightness(1.04)}
.badge-play{height:62px}                 /* 50 px visibles + su espacio libre */
.badge-apple{height:50px;margin:12px}    /* 50 px + un cuarto alrededor */
@media (max-width:420px){
  .badge-play{height:54px}
  .badge-apple{height:43px;margin:11px}
}
.on-yellow .stores-note{color:#3C4C5E}