/* ============================================================================
   NEXRIDEBAY — cara publica. Hoja compartida por home / drivers / fleets / network.

   Por que una sola hoja y no cuatro: las cuatro paginas son el mismo producto y
   comparten cabecera, pie, tarjetas y botones. Cuatro hojas se desincronizan a la
   primera correccion de color; una sola no puede.

   Sin CDN, sin framework, sin fuente remota: la portada tiene que pintar completa
   en el primer viaje de red, en un telefono, con datos moviles malos. Todo lo
   "visual" de esta hoja es CSS o SVG en linea; no hay ni una imagen que descargar.

   Las variables de color vienen de apps/passenger-web/landing.css a proposito.
   Quien salta de la portada a la app tiene que sentir que no cambio de producto.
   Aqui se AMPLIA el sistema (superficies, radios, tipografia) pero no se
   contradice: --ink, --card, --line, --text, --muted y --accent valen lo mismo.
   ========================================================================== */

:root{
  /* --- heredado tal cual de landing.css (no tocar los valores) --- */
  --ink:#06101d;
  --card:#0d1b2a;
  --line:#28415b;
  --text:#edf5ff;
  --muted:#9fb2c8;
  --accent:#67f1b4;
  --accent-ink:#06101d;

  /* --- ampliaciones propias de la cara publica --- */
  --card-2:#10243a;          /* superficie elevada; es el mismo tono que ya usa la app */
  --line-soft:#1c3149;       /* separadores que no deben competir con el borde de tarjeta */
  --text-soft:#c2d3e4;       /* parrafo largo: baja el contraste sin bajar de AA */
  --accent-dim:#67f1b41f;    /* relleno tenue para chips y botones fantasma */
  --accent-edge:#67f1b455;   /* borde del boton fantasma */
  --warn:#ffd479;            /* avisos honestos (ej. "el cobro no esta activo") */

  --wrap:1080px;             /* ancho maximo de lectura en escritorio */
  --pad:18px;                /* respiracion lateral en movil; igual que la app */
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:99px;

  /* Pila de sistema: cero peticiones de fuente. La portada no espera a nadie. */
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,ui-sans-serif,system-ui,sans-serif;
  color-scheme:dark;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  /* El mismo halo del landing de la app. Es gradiente, no imagen: no pesa nada. */
  background-image:radial-gradient(120% 62% at 12% -8%,#1c4260 0,#071522 46%,#040a12 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  /* Cinturon de seguridad para 390px: si algo se pasa de ancho, se corta el
     desbordamiento en vez de convertir toda la pagina en scroll lateral. */
  overflow-x:hidden;
}

img,svg{max-width:100%;height:auto}

/* Todo lo que sea contenedor de texto ancho respeta el mismo carril. */
.wrap{width:min(100%,var(--wrap));margin-inline:auto;padding-inline:var(--pad)}

/* --- foco visible -----------------------------------------------------------
   Un anillo unico para toda la cara publica. :focus-visible y no :focus para no
   dibujar el anillo a quien navega con el dedo, pero si a quien usa teclado. */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

/* Salto al contenido: primer tabulador de cada pagina. Fuera de pantalla hasta
   que recibe foco, entonces aterriza arriba a la izquierda. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 16px;border-radius:0 0 var(--r-sm) 0;
  background:var(--accent);color:var(--accent-ink);
  font-weight:900;text-decoration:none;
}
.skip:focus{left:0}

/* ===========================================================================
   CABECERA Y NAVEGACION
   =========================================================================== */

.bar{
  position:sticky;top:0;z-index:30;
  background:#06101de6;
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.barIn{
  width:min(100%,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) var(--pad) 10px;
}

/* La marca. Se escribe NEXRIDEBAY, en mayusculas, siempre. */
.wordmark{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;                       /* objetivo tactil, tambien en el logo */
  color:var(--text);text-decoration:none;
  font-weight:900;letter-spacing:.14em;font-size:14px;
}
.wordmark .mark{
  display:grid;place-items:center;flex:none;
  width:32px;height:32px;border-radius:10px;
  background:var(--accent);color:var(--accent-ink);
  font-style:normal;font-size:17px;font-weight:900;letter-spacing:0;
}

/* Boton hamburguesa. Solo existe en movil; en escritorio se oculta y la lista
   se muestra siempre. */
.navToggle{
  margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-width:44px;min-height:44px;padding:0 13px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card-2);color:var(--text);
  font:inherit;font-size:12px;font-weight:900;letter-spacing:.08em;
  cursor:pointer;
}
.navToggle .bars{display:block;width:16px;height:2px;background:currentColor;position:relative}
.navToggle .bars::before,.navToggle .bars::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;
}
.navToggle .bars::before{top:-5px}
.navToggle .bars::after{top:5px}

.nav{
  display:none;                          /* movil: cerrado por defecto */
  width:100%;
  padding:6px var(--pad) 14px;
  border-top:1px solid var(--line-soft);
}
.nav.open{display:block}
.nav ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.nav a{
  display:flex;align-items:center;
  min-height:48px;padding:0 12px;border-radius:var(--r-sm);
  color:var(--text-soft);text-decoration:none;
  font-size:15px;font-weight:700;
}
.nav a:hover{background:var(--card-2);color:var(--text)}
/* La pagina en la que estas ya no es un destino: se marca y no se disfraza de enlace. */
.nav a[aria-current="page"]{color:var(--accent);background:var(--accent-dim)}
.nav .navCta{
  margin-top:6px;justify-content:center;
  background:var(--accent-dim);border:1px solid var(--accent-edge);color:var(--accent);
  font-weight:900;letter-spacing:.06em;
}

@media (min-width:900px){
  .navToggle{display:none}
  .nav{display:block;width:auto;margin-left:auto;padding:0;border-top:0}
  .nav ul{display:flex;align-items:center;gap:2px}
  .nav a{min-height:44px;padding:0 13px;font-size:14px}
  .nav .navCta{margin-top:0;padding:0 16px}
}

/* ===========================================================================
   BOTONES
   Minimo 52px de alto: por encima de los 44px exigidos, porque un CTA fallado
   en movil no se reintenta, se abandona.
   =========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:14px 22px;
  border:1px solid transparent;border-radius:var(--r-md);
  font:inherit;font-size:15px;font-weight:900;letter-spacing:.06em;
  text-align:center;text-decoration:none;cursor:pointer;
  /* Un CTA de texto largo en 390px no puede empujar la pagina de lado. */
  max-width:100%;
}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--accent-dim);border-color:var(--accent-edge);color:var(--accent)}
.btn-ghost:hover{background:#67f1b42a}
.btn-quiet{background:var(--card-2);border-color:var(--line);color:var(--text)}
.btn-quiet:hover{border-color:var(--accent-edge);color:var(--accent)}
.btn:active{transform:translateY(1px)}

/* En movil los CTA van a ancho completo y apilados; en cuanto hay sitio, en fila. */
.ctaRow{display:grid;gap:12px;margin:26px 0 0}
@media (min-width:560px){
  .ctaRow{display:flex;flex-wrap:wrap}
  .ctaRow .btn{flex:0 1 auto}
}

/* ===========================================================================
   BLOQUES DE PAGINA
   =========================================================================== */

.hero{padding:34px 0 10px}
.eyebrow{
  margin:0 0 14px;color:var(--accent);
  font-size:11px;font-weight:900;letter-spacing:.18em;line-height:1.5;
}
/* La marca domina el hero. clamp() para que no haya un salto feo entre 390 y 1080. */
.hero h1{
  margin:0 0 16px;
  font-size:clamp(40px,11.4vw,76px);line-height:.98;letter-spacing:-.045em;font-weight:900;
  /* NEXRIDEBAY es una palabra larga: en 390px no se puede partir sin destrozar la
     marca, asi que se deja entera y es el clamp quien la hace caber. */
  overflow-wrap:break-word;
}
.hero h1 .sub{
  display:block;margin-top:12px;
  font-size:clamp(19px,5.2vw,30px);line-height:1.15;letter-spacing:-.02em;
  color:var(--accent);
}
.lede{margin:0 0 4px;color:var(--text-soft);font-size:16.5px;line-height:1.62;max-width:62ch}
.lede.tight{font-size:15px}

.block{padding:44px 0 0}
.block > h2{
  margin:0 0 10px;
  font-size:clamp(23px,6vw,32px);line-height:1.15;letter-spacing:-.025em;font-weight:900;
}
.block > .lede{margin-bottom:20px}
.kicker{
  margin:0 0 8px;color:var(--accent);
  font-size:11px;font-weight:900;letter-spacing:.16em;
}

.rule{height:1px;margin:44px 0 0;border:0;background:var(--line-soft)}

/* --- rejilla de tarjetas ---------------------------------------------------
   minmax(0,1fr) y no 1fr a secas: en un grid los hijos no bajan de su ancho
   min-content, asi que una sola linea larga (una URL, un precio) estira la
   columna entera y saca la tarjeta de la pantalla. En 390px eso se ve como la
   pagina corriendose de lado, y no en la fila culpable sino en todas. */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0}
@media (min-width:760px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}

.card{
  display:flex;flex-direction:column;gap:10px;
  padding:22px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);
  min-width:0;                            /* deja que el contenido se encoja de verdad */
}
.card h3{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.015em;font-weight:900}
.card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.card p strong{color:var(--text-soft)}
.cardIcon{
  display:grid;place-items:center;flex:none;
  width:42px;height:42px;border-radius:13px;
  background:var(--accent-dim);border:1px solid var(--accent-edge);
}
.cardIcon svg{width:21px;height:21px;display:block}
.cardTag{
  align-self:flex-start;
  padding:5px 11px;border-radius:var(--r-pill);
  background:var(--card-2);border:1px solid var(--line);
  color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.12em;
}
/* El enlace de la tarjeta baja al fondo para que en una fila de tarjetas de
   distinto alto todos los CTA queden alineados. */
.card .btn{margin-top:auto}
.card ul{margin:0;padding:0 0 0 20px;color:var(--muted);font-size:14.5px;display:grid;gap:7px}
.card ul li{padding-left:2px;line-height:1.55}

/* --- pasos numerados -------------------------------------------------------
   Un contador CSS en vez de numeros escritos a mano: si manana se inserta un
   paso en medio, la numeracion sigue siendo correcta sin tocar el HTML. */
.steps{margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{position:relative;counter-increment:step;padding:0 0 22px 48px}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:-1px;
  display:grid;place-items:center;width:32px;height:32px;
  border-radius:11px;background:var(--card-2);border:1px solid var(--line);
  color:var(--accent);font-size:13px;font-weight:900;
}
.steps li::after{
  content:"";position:absolute;left:16px;top:35px;bottom:4px;width:1px;background:var(--line);
}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps b{display:block;font-size:15.5px;margin-bottom:3px}
.steps span{display:block;color:var(--muted);font-size:14.5px;line-height:1.6}

/* --- lista de hechos / confianza ------------------------------------------- */
.facts{margin:0;padding:0;list-style:none;display:grid;gap:16px}
@media (min-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}}
.facts li{position:relative;padding-left:26px}
.facts li::before{
  content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:4px;
  background:var(--accent-dim);border:1px solid var(--accent-edge);
}
.facts b{display:block;font-size:15px;margin-bottom:2px}
.facts span{display:block;color:var(--muted);font-size:14.5px;line-height:1.6}

/* --- panel destacado -------------------------------------------------------- */
.panel{
  padding:22px;border-radius:var(--r-lg);
  background:var(--card-2);border:1px solid var(--line);
}
.panel h3{margin:0 0 8px;font-size:18px;font-weight:900;letter-spacing:-.015em}
.panel p{margin:0 0 12px;color:var(--text-soft);font-size:14.5px;line-height:1.6}
.panel p:last-child{margin-bottom:0}

/* El aviso de que algo TODAVIA no ocurre. Existe como componente propio porque
   en este producto decir "aun no" es tan importante como decir "si". */
.note{
  display:flex;gap:12px;align-items:flex-start;
  margin:18px 0 0;padding:16px 18px;border-radius:var(--r-md);
  background:#ffd4790f;border:1px solid #ffd47938;
}
.note .noteIcon{flex:none;color:var(--warn);font-size:16px;font-weight:900;line-height:1.5}
.note p{margin:0;color:var(--text-soft);font-size:14px;line-height:1.6}
.note p strong{color:var(--warn)}
.note p + p{margin-top:8px}

/* --- precio ---------------------------------------------------------------- */
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.price b{font-size:clamp(30px,8vw,40px);font-weight:900;letter-spacing:-.03em;line-height:1}
.price span{color:var(--muted);font-size:14px;font-weight:700}

/* --- chips ----------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.chips li{
  padding:9px 13px;border-radius:var(--r-pill);
  background:var(--card-2);border:1px solid var(--line);
  color:var(--text-soft);font-size:12.5px;
}

/* --- cierre ---------------------------------------------------------------- */
.closing{
  margin:48px 0 0;padding:30px 22px;border-radius:var(--r-lg);
  background:var(--card-2);border:1px solid var(--line);text-align:center;
}
.closing h2{margin:0 0 10px;font-size:clamp(22px,6vw,29px);font-weight:900;letter-spacing:-.025em}
.closing .lede{margin-inline:auto;margin-bottom:0}
.closing .ctaRow{justify-content:center}

/* ===========================================================================
   PIE
   =========================================================================== */

footer.foot{margin-top:56px;border-top:1px solid var(--line-soft);background:#040a12b3}
.footIn{
  width:min(100%,var(--wrap));margin-inline:auto;
  padding:34px var(--pad) calc(30px + env(safe-area-inset-bottom));
}
.footCols{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.footCols{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}}
.footCols h2{margin:0 0 8px;color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.16em}
.footCols ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.footCols a{
  display:inline-flex;align-items:center;min-height:44px;   /* objetivo tactil tambien aqui */
  color:var(--muted);text-decoration:none;font-size:14px;
}
.footCols a:hover{color:var(--accent)}

.footEnd{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:grid;gap:10px;color:#7d92a9;
}
.footEnd p{margin:0;font-size:12px;line-height:1.6}
/* LAIVSE vive aqui y solo aqui: es la empresa madre, no la marca del producto. */
.footEnd .parent{font-size:11.5px;letter-spacing:.06em;color:#6f8399}

/* ===========================================================================
   MOVIMIENTO
   Nada de esta portada depende de una animacion para entenderse, asi que
   apagarlas por completo no rompe nada.
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .btn:active{transform:none}
}