/* ═══════════════════════════════════════════════════════════════
   VENDÚ — BASE
   Lo que comparten TODAS las páginas: tokens, reset, nav, botones,
   footer y movimiento. Se carga una vez y el navegador lo cachea.

   Antes esto vivía copiado dentro de cada .html. Si tocabas el nav
   tenías que acordarte de los tres sitios — y el footer de privacidad
   ya se había quedado atrás.

   Lo específico de cada página va en su propio archivo (home.css,
   roadmap.css, privacidad.css) porque .head y .fecha significan cosas
   distintas en roadmap y en privacidad, y juntarlas las rompería.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Los tokens son los MISMOS de la app (lib/theme/app_colors.dart).
   El sitio no inventa una identidad: extiende la que ya existe.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --green:#00C62A;      /* marca — encima va texto NEGRO, nunca blanco */
  --green-text:#007916; /* verde legible sobre blanco (el arreglo WCAG) */
  --green-dim:#00c62a1f;
  --dark:#393939;
  --yellow:#FBFB00;
  --red:#FF3B30;
  --red-text:#BC0005;

  --bg:#F4F5F6; --surface:#FFFFFF; --surface2:#EDEDED;
  --border:#E4E5E7; --border2:#D3D5D8;
  --ink:#393939; --muted:#767676; --faint:#A6A6A6;

  /* Gradiente real de la tarjeta "Cobrado hoy" del dashboard */
  --hero-a:#00432A; --hero-b:#006E45;

  /* Escala de formas de MD3, igual que AppShape */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:28px; --r-full:999px;
  /* Elevación de 2 capas, igual que AppElevation */
  --e2:0 2px 4px #0000000f, 0 4px 12px #0000000a;
  --e5:0 6px 10px #0000001a, 0 16px 32px #00000014;

  --sans:Roboto,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e100e; --surface:#171a17; --surface2:#202420;
    --border:#292e29; --border2:#394039;
    --ink:#e9ece9; --muted:#9aa39a; --faint:#6d756d;
    --green-text:#3ee060; --green-dim:#00c62a24; --red-text:#ff6b63;
    --e2:0 2px 6px #0006, 0 6px 16px #0000004d;
    --e5:0 8px 16px #00000073, 0 20px 40px #0006;
  }
}
:root[data-theme="light"]{
  --bg:#F4F5F6; --surface:#FFFFFF; --surface2:#EDEDED;
  --border:#E4E5E7; --border2:#D3D5D8;
  --ink:#393939; --muted:#767676; --faint:#A6A6A6;
  --green-text:#007916; --green-dim:#00c62a1f; --red-text:#BC0005;
  --e2:0 2px 4px #0000000f, 0 4px 12px #0000000a;
  --e5:0 6px 10px #0000001a, 0 16px 32px #00000014;
}
:root[data-theme="dark"]{
  --bg:#0e100e; --surface:#171a17; --surface2:#202420;
  --border:#292e29; --border2:#394039;
  --ink:#e9ece9; --muted:#9aa39a; --faint:#6d756d;
  --green-text:#3ee060; --green-dim:#00c62a24; --red-text:#ff6b63;
  --e2:0 2px 6px #0006, 0 6px 16px #0000004d;
  --e5:0 8px 16px #00000073, 0 20px 40px #0006;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* MD3: el botón es una PÍLDORA. Igual que AppButton. */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  padding:12px 20px;border-radius:var(--r-full);font-family:var(--sans);
  font-size:14px;font-weight:700;text-decoration:none;transition:transform .12s ease}
.btn:active{transform:scale(.96)}
.btn:focus-visible{outline:2px solid var(--green-text);outline-offset:3px}
.btn-primary{background:var(--green);color:#000}
.btn-light{background:#fff;color:#000}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--border2)}
.btn-lg{padding:15px 26px;font-size:15px}


/* ═══════════════════════════════════════════════════════════════
   NAV

   Vive aquí y no en home.css porque lo usan TODAS las páginas. Estaba
   en home.css, que privacidad y las guías no cargan: por eso allí
   salía el nav viejo, con otro aspecto y con enlaces a secciones que
   ya no existen.

   Dos estados: transparente sobre el degradado del hero, y sólido en
   cuanto se baja. Las páginas interiores no tienen hero, así que nacen
   directamente en el estado sólido.
   ═══════════════════════════════════════════════════════════════ */
/* ── Nav sobre el degradado ──
   Logo a la izquierda, enlaces empujados a la derecha, nada más.
   Sin botón: en la referencia "Download" es un enlace igual que los
   otros, y aquí además competiría con la insignia de Google Play que
   está justo debajo — que es la que tiene que ganar. */
.nav3{position:fixed;top:0;left:0;right:0;z-index:60;padding:18px 0;
  /* base.css estiliza el ELEMENTO nav (fondo translúcido, borde
     inferior, blur) porque antes solo existía la barra normal. Esa
     regla también alcanza a este, y sin anularla el hero salía con una
     franja oscura encima del degradado. Aquí no hay barra: hay aire. */
  background:transparent;backdrop-filter:none;border-bottom:0;box-shadow:none;
  transition:background .25s ease,box-shadow .25s ease,padding .25s ease}
.nav3-in{display:flex;align-items:center;gap:24px}
.nav3-marca{display:flex;line-height:0;flex:none}
.nav3-marca img{height:27px;width:auto;display:block;
  filter:drop-shadow(0 1px 2px #00000024)}
.nav3.pegado .nav3-marca img{filter:none}
/* Hay DOS logos en el html y solo se enseña uno: el blanco sobre el
   degradado, el verde cuando el nav se vuelve sólido.
   El selector va acotado a .nav3-marca a propósito: `.lg-oscuro` a
   secas tiene especificidad (0,1,0) y pierde contra `.nav3-marca img`
   (0,1,1) de la línea de arriba — que es display:block. Con el
   selector corto se veían los dos logos a la vez. */
.nav3-marca .lg-oscuro{display:none}

/* margin-left:auto empuja el bloque entero al extremo derecho, que es
   la composición de la referencia: marca y navegación en los dos
   extremos, y todo el aire en medio. */
.nav3-links{display:flex;align-items:center;gap:30px;margin-left:auto;
  font-size:14.5px;font-weight:500;letter-spacing:.2px}
.nav3-links a{color:#fff;text-decoration:none;
  /* Arriba el degradado es claro y el blanco pierde contraste. Una
     sombra de 1px lo despega sin que se note como sombra. */
  text-shadow:0 1px 2px #0000002e;
  transition:color .15s ease,text-shadow .15s ease;white-space:nowrap}
.nav3-links a:hover{color:#fff}
.nav3-links a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:3px}
/* El último es la acción: mismo tamaño, más peso. Destaca sin ser un
   botón. */
.nav3-links a:last-child{font-weight:700;color:#fff}

/* Al pasar el hero necesita fondo propio y el logo oscuro: el blanco
   sobre fondo claro desaparecería. */
.nav3.pegado{background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);border-bottom:0;box-shadow:0 1px 0 var(--border);padding:13px 0}
.nav3.pegado .nav3-marca .lg-claro{display:none}
.nav3.pegado .nav3-marca .lg-oscuro{display:block}
.nav3.pegado .nav3-links a{color:var(--muted);text-shadow:none}
.nav3.pegado .nav3-links a:hover{color:var(--green-text)}
.nav3.pegado .nav3-links a:last-child{color:var(--green-text)}
.nav3.pegado .nav3-links a:focus-visible{outline-color:var(--green-text)}


/* En las páginas interiores no hay hero verde que lo sostenga: el nav
   ocupa sitio en el flujo en vez de flotar sobre nada. */
.nav3.nav3-fija{position:sticky}

/* ── Interruptor de tema ──
   Se enseña el icono de lo que vas a OBTENER al pulsarlo, no el del
   tema en que estás: un sol en modo oscuro significa "pasar a claro".
   Al revés confunde a todo el mundo. */
.tema{margin-left:22px;flex:none;display:grid;place-items:center;
  width:36px;height:36px;padding:0;border:0;cursor:pointer;border-radius:50%;
  background:#ffffff1f;color:#fff;
  transition:background .18s ease,transform .18s cubic-bezier(.22,1,.36,1)}
.tema:hover{background:#ffffff33;transform:scale(1.06)}
.tema:active{transform:scale(.96)}
.tema:focus-visible{outline:2px solid #fff;outline-offset:3px}
.tema svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}


/* ── RÓTULO DE SECCIÓN ──
   Toda la web es una página larga. Sin una marca clara arriba de cada
   bloque, el ojo no sabe que empezó otra cosa: solo ve titulos que se
   parecen. El rotulo es pequeño y en mayusculas para no competir con
   el h2 — anuncia, no grita. */
.kicker{display:block;font-size:11.5px;font-weight:800;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--green-text);margin-bottom:12px}

/* Sobre fondo oscuro el verde de marca se apaga y deja de leerse como
   etiqueta: ahi el rotulo va en blanco. */
.kicker-claro{color:#ffffffb3}

/* ── EYEBROW (la píldora sobre el título) ── */
.eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--green-dim);
  color:var(--green-text);padding:6px 13px;border-radius:var(--r-full);
  font-size:12px;font-weight:800;letter-spacing:.4px;margin-bottom:22px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green)}

/* ── Movimiento ──
   Aparicion al hacer scroll. Misma curva y duracion que el sitio de Neiyoz,
   para que las dos partes se sientan iguales. Usa `translate` y no `transform`
   porque .feat, .btn y .phone ya usan transform en sus estados: pisarlo los romperia. */
.reveal{opacity:0;translate:0 20px;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),translate .7s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;translate:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}

/* Rejillas: se observa el contenedor y los hijos entran escalonados. */
.stagger>*{opacity:0;translate:0 18px;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),translate .6s cubic-bezier(.22,1,.36,1)}
/* Sin esta linea los hijos se quedan en opacity:0 para siempre: los
   nth-child de abajo solo reparten el retardo, no muestran nada. */
.stagger.visible>*{opacity:1;translate:none}
.stagger.visible>*:nth-child(2){transition-delay:.05s}
.stagger.visible>*:nth-child(3){transition-delay:.10s}
.stagger.visible>*:nth-child(4){transition-delay:.15s}
.stagger.visible>*:nth-child(5){transition-delay:.20s}
.stagger.visible>*:nth-child(6){transition-delay:.25s}
.stagger.visible>*:nth-child(7){transition-delay:.30s}
.stagger.visible>*:nth-child(8){transition-delay:.35s}
.stagger.visible>*:nth-child(9){transition-delay:.40s}
.stagger.visible>*:nth-child(10){transition-delay:.45s}
.stagger.visible>*:nth-child(11){transition-delay:.50s}
.stagger.visible>*:nth-child(12){transition-delay:.55s}

/* Las capturas invitan a mirarlas de cerca. */
.shot .frame{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease}
.shot:hover .frame{transform:translateY(-6px);box-shadow:var(--e5)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  /* Sin transicion lo oculto se quedaria oculto para siempre: se muestra de una. */
  .reveal,.stagger>*{opacity:1;translate:none}
}

/* ═══════════════════════════════════════════════════════════════
   PIE

   Cuatro columnas: la marca ocupa el doble que las demás porque
   lleva el logo, la descripción y la insignia de Play.
   ═══════════════════════════════════════════════════════════════ */
.pie{border-top:1px solid var(--border);background:var(--surface2);
  padding:56px 0 30px;margin-top:0}

.pie-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}

.pie-marca img{height:26px;width:auto;display:block}
.pie-marca>p{margin:16px 0 22px;font-size:14px;line-height:1.6;
  color:var(--muted);max-width:34ch;text-wrap:pretty}
.pie-play{display:inline-block;line-height:0;border-radius:7px;
  transition:transform .16s cubic-bezier(.22,1,.36,1)}
.pie-play img{display:block;height:40px;width:auto}
.pie-play:hover{transform:translateY(-2px)}
.pie-play:focus-visible{outline:2px solid var(--green-text);outline-offset:4px}

.pie-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.pie-col h2{font-size:12px;font-weight:800;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--faint);margin:0 0 4px}
.pie-col a{font-size:14.5px;color:var(--muted);text-decoration:none;
  transition:color .15s ease}
.pie-col a:hover{color:var(--green-text)}
.pie-col a:focus-visible{outline:2px solid var(--green-text);outline-offset:3px;
  border-radius:3px}

.pie-fin{display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;
  margin-top:46px;padding-top:24px;border-top:1px solid var(--border)}
.pie-fin p{margin:0;font-size:13px;color:var(--faint)}
.pie-fin b{color:var(--muted);font-weight:700}
.pie-ver span{white-space:nowrap}

@media (max-width:900px){
  .pie{padding:44px 0 26px}
  /* La marca pasa a ocupar toda la fila y las tres listas se reparten
     debajo: en dos columnas, la marca dejaba una casi vacía. */
  .pie-grid{grid-template-columns:repeat(3,1fr);gap:34px 24px}
  .pie-marca{grid-column:1/-1}
  .pie-marca>p{max-width:46ch}
}
@media (max-width:560px){
  .pie-grid{grid-template-columns:1fr 1fr}
  .pie-fin{margin-top:34px}
}
@media (prefers-reduced-motion:reduce){.pie-play{transition:none}}