/* Base de la v2: variables de marca, fondo fijo (la calle), barra flotante, botones y portada.
   Los demás frentes (recorrido, pricing, cierre) tienen su propio CSS y reutilizan estas variables y .btn. */
:root{
  --navy:#0B2733;
  --navy-deep:#071A22;
  --navy-line:#14404F;
  --teal:#2FD5B8;
  --teal-deep:#0FA48B;
  --cream:#F5F2EA;
  --paper:#FAFAF7;
  --line:#D8D4C9;
  --line-soft:#E4E0D6;
  --ink:#0B2733;
  --ink-muted:#46545A;
  --ink-faint:#6E7A80;
  --on-navy:#F5F2EA;
  --on-navy-muted:#9DB4BA;
  --shadow:0 24px 60px -28px rgba(11,39,51,0.30);
  --radius:18px;
  --radius-sm:12px;
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--navy); /* respaldo mientras carga la calle */
  color:var(--ink);
  font-family:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Space Grotesk', Arial, sans-serif; font-weight:700; line-height:1.1; margin:0; text-wrap:balance; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

/* ---------- Fondo: la calle, fija. Nunca cambia ni se mueve al hacer scroll ---------- */
.fondo{
  position:fixed; inset:0; z-index:0;
  background:var(--navy) url("../assets/pos-1-calle.webp") center / cover no-repeat;
}

/* El contenido va siempre por encima del fondo */
main{ position:relative; z-index:1; }

/* ---------- Barra flotante: fija y centrada ---------- */
.barra-fija{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:50; width:min(94vw, 640px);
  background:rgba(255,255,255,0.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(11,39,51,0.08); border-radius:999px;
  box-shadow:0 12px 32px -16px rgba(11,39,51,0.35);
}
.barra{ display:flex; align-items:center; justify-content:space-between; gap:8px; height:60px; padding:0 8px; }
.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; padding-left:8px; }
.brand svg{ width:26px; height:26px; flex:none; }
.brand .word{ font-family:'Space Grotesk', Arial, sans-serif; font-weight:700; font-size:17px; color:var(--navy); }
.brand .word em{ font-style:normal; color:var(--teal-deep); }
.barra nav{ display:flex; align-items:center; gap:6px; }

/* ---------- Botones de la página pública (radio 999px, mismo movimiento que el sitio) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', Arial, sans-serif; font-weight:600; font-size:13px;
  padding:9px 16px; border-radius:999px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; white-space:nowrap; line-height:1.2;
  transition:transform 160ms var(--ease-out), background 180ms ease, border-color 180ms ease;
}
@media (hover:hover) and (pointer:fine){ .btn:hover{ transform:translateY(-1px); } }
.btn:active{ transform:scale(0.97); transition-duration:100ms; }
.btn:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.btn-linea{ border-color:var(--line); color:var(--navy); background:transparent; }
.btn-linea:hover{ border-color:var(--navy); background:rgba(11,39,51,0.04); }
.btn-menta{ background:var(--teal); color:var(--navy-deep); }
.btn-menta:hover{ background:#4EE2C8; }
/* Versión grande (14,5 px) para los llamados dentro de las secciones */
.btn-grande{ font-size:14.5px; padding:14px 26px; min-height:46px; }

@media (max-width:560px){
  .brand .word{ display:none; }
  .btn{ padding:9px 12px; font-size:12.5px; }
}
/* 360 px: barra más compacta para que nada se recorte */
@media (max-width:380px){
  .barra-fija{ width:calc(100vw - 16px); top:12px; }
  .barra{ gap:4px; padding:0 6px; }
  .brand{ padding-left:4px; }
  .barra nav{ gap:4px; }
  .btn{ padding:9px 10px; font-size:12px; }
}

/* ---------- Portada: frase y, debajo, el video en un celular ---------- */
.portada{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  padding:112px 20px 56px;
  text-align:center;
}
.frase{
  max-width:760px;
  background:rgba(250,250,247,0.92);
  border:1.5px solid var(--navy); border-radius:var(--radius);
  padding:26px 32px;
  box-shadow:0 24px 60px -28px rgba(11,39,51,0.45);
}
.frase h1{ font-size:clamp(1.9rem, 4.6vw, 3rem); color:var(--navy); }
@media (max-width:480px){ .frase{ padding:20px 20px; } }

/* Celular */
.telefono{
  width:clamp(210px, 24vw, 280px);
  aspect-ratio:9 / 19;
  background:#0b0b0c;
  border-radius:42px;
  padding:10px;
  box-shadow:0 0 0 1.5px #2a2d30, 0 34px 70px -24px rgba(0,0,0,0.65);
  position:relative;
}
.telefono::before{ /* cámara frontal */
  content:""; position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:64px; height:18px; border-radius:999px; background:#000; z-index:2;
}
.pantalla{
  all:unset; box-sizing:border-box;
  position:relative; width:100%; height:100%;
  background:#000; border-radius:32px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  cursor:pointer;
}
.pantalla:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.play{
  width:68px; height:68px; border-radius:50%;
  background:var(--teal); color:var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
  transition:transform 160ms var(--ease-out), background 180ms ease;
}
.play svg{ width:26px; height:26px; margin-left:3px; }
.pantalla:hover .play{ background:#4EE2C8; transform:scale(1.04); }
.pantalla:active .play{ transform:scale(0.97); }
.click-aqui{ font-family:'Space Grotesk', Arial, sans-serif; font-weight:600; font-size:15px; color:#fff; letter-spacing:0.02em; }
.telefono video{ width:100%; height:100%; object-fit:contain; background:#000; border-radius:32px; }

/* Pantalla ancha (horizontal): la frase a la izquierda y el celular con el video a la derecha, sin salirse de la pantalla. */
@media (min-width:900px) and (orientation:landscape){
  .portada{ flex-direction:row; gap:72px; padding:96px 56px 40px; text-align:left; }
  .frase{ max-width:560px; padding:34px 38px; }
  .frase h1{ font-size:clamp(2rem, 3.6vw, 3.2rem); }
  .telefono{ width:auto; height:min(76svh, 660px); }
}

/* Barra con 4 botones (Iniciar sesión · Pricing · Tutoriales · Saber más): compacta en celular para que quepan sin salirse. */
@media (max-width:480px){
  .btn{ padding:8px 9px; font-size:11.5px; }
  .barra nav{ gap:3px; }
  .brand{ padding-left:2px; }
  .brand svg{ width:22px; height:22px; }
}
@media (max-width:380px){
  .brand{ display:none; }
  .barra{ justify-content:center; }
}
@media (max-width:340px){
  .btn{ padding:8px 7px; font-size:11px; }
}