/* Landing pública de Looqit (spec 005).
   Hereda la paleta celeste y la tipografía condensada del producto: una landing que no
   se parece a lo que promete es una promesa rota en el primer clic (§4.4). */

:root{
  --bg:#080D12; --bg2:#0D141B; --panel:#121A22; --panel2:#0F161D; --line:#1E2A35;
  --line2:#2A3946; --ink:#EAF1F7; --muted:#8FA0B0; --faint:#5A6B7A;
  --accent:#38C6F4; --accent2:#7BE0FF; --accent-ink:#04212B; --accent-rgb:56,198,244;
  --good:#34B37A; --warn:#E0A552;
  --disp:"Avenir Next Condensed","Helvetica Neue Condensed","Arial Narrow",ui-sans-serif,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.acc{color:var(--accent)}

/* ---------- Barra superior ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(8,13,18,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:22px;
  font-weight:700;letter-spacing:.06em}
.brand .tick{width:15px;height:15px;background:var(--accent);
  clip-path:polygon(0 0,100% 0,100% 65%,65% 100%,0 100%);
  box-shadow:0 0 18px rgba(var(--accent-rgb),.7)}
.navlinks{display:flex;gap:28px;font-size:14.5px;color:var(--muted)}
.navlinks a:hover{color:var(--ink)}
.navcta{display:flex;gap:10px;align-items:center}

.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:14px;padding:11px 20px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:transform .12s,filter .12s,border-color .15s,background .15s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--accent);color:var(--accent-ink);
  box-shadow:0 6px 26px -6px rgba(var(--accent-rgb),.65)}
.btn-p:hover{filter:brightness(1.09)}
.btn-g{border-color:var(--line2);color:var(--ink);background:rgba(255,255,255,.02)}
.btn-g:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.07)}
.btn-sm{padding:8px 15px;font-size:13px}
.btn-lg{padding:14px 28px;font-size:16px}

/* ---------- Héroe ---------- */
.hero{position:relative;text-align:center;padding:96px 0 72px;overflow:hidden}
.hero::before{  /* resplandor: dos halos desfasados, no un degradado plano */
  content:"";position:absolute;top:-340px;left:50%;transform:translateX(-50%);
  width:1200px;height:760px;pointer-events:none;
  background:
    radial-gradient(ellipse 45% 50% at 50% 55%,rgba(var(--accent-rgb),.24),transparent 70%),
    radial-gradient(ellipse 30% 40% at 32% 45%,rgba(120,90,255,.16),transparent 70%);
  filter:blur(28px);
}
.hero>*{position:relative}

.pill{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.045);border:1px solid var(--line2);
  border-radius:999px;padding:6px 16px 6px 7px;font-size:13.5px;color:var(--muted);
  margin-bottom:26px;
}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--good);
  box-shadow:0 0 10px var(--good);flex-shrink:0;margin-left:6px}

.hero h1{font-size:clamp(42px,7.4vw,80px);margin-bottom:22px}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--accent) 10%,var(--accent2) 55%,#B49CFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .sub{color:var(--muted);font-size:clamp(16px,2.1vw,19px);max-width:610px;
  margin:0 auto 34px}
.hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .fine{color:var(--faint);font-size:13px;margin-top:18px}

/* ---------- Franja de compatibilidad ---------- */
.strip{padding:20px 0 64px;text-align:center}
.strip .lbl{color:var(--faint);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.16em;margin-bottom:22px}
.strip ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;
  justify-content:center;flex-wrap:wrap}
.strip li{
  display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14.5px;
  border:1px solid var(--line);background:var(--panel2);border-radius:9px;padding:9px 16px;
}
.strip li svg{opacity:.8;flex-shrink:0}
.strip li.soon{opacity:.5}
.strip li.soon::after{content:"pronto";font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--faint);border:1px solid var(--line2);
  border-radius:4px;padding:1px 5px}

/* ---------- Clientes ---------- */
.clientes{padding:56px 0;text-align:center;border-top:1px solid var(--line)}
.clientes .lbl{color:var(--faint);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.16em;margin:0 0 26px}
.logos{list-style:none;margin:0;padding:0;display:flex;gap:34px;
  justify-content:center;align-items:center;flex-wrap:wrap}
.logos li{display:flex;align-items:center;gap:11px;color:var(--muted);
  font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:.02em;
  /* Los logos reales van en escala de grises y se colorean al pasar el cursor: así una
     fila de marcas dispares no compite con el resto de la página. */
  filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s}
.logos li:hover{filter:none;opacity:1}
.logos li img{max-height:34px;width:auto;display:block}

/* Marca visible de "esto es un relleno". Va con el logo de ejemplo y desaparece sola
   cuando se carga uno real: una sección de clientes con una marca inventada, sin avisar,
   es un respaldo falso. */
.logos li.ejemplo{border:1px dashed var(--line2);border-radius:10px;padding:12px 18px;
  filter:none;opacity:1}
.logos li.ejemplo .marca{font-family:var(--mono);font-size:9.5px;font-weight:400;
  text-transform:uppercase;letter-spacing:.12em;color:var(--faint);
  border:1px solid var(--line2);border-radius:4px;padding:2px 6px}
.clientes .aviso{color:var(--faint);font-size:12.5px;margin:20px 0 0}

/* ---------- Secciones ---------- */
.sec{padding:88px 0}
.sec-head{text-align:center;max-width:660px;margin:0 auto 46px}
.tag{
  display:inline-block;font-family:var(--disp);font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.35);
  background:rgba(var(--accent-rgb),.08);border-radius:999px;padding:5px 15px;margin-bottom:18px;
}
.sec-head h2{font-size:clamp(30px,4.6vw,46px);margin-bottom:14px}
.sec-head p{color:var(--muted);margin:0;font-size:17px}

/* ---------- Demostración ---------- */
.demo{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.tab{
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:9px 17px;font-size:14px;cursor:pointer;font-family:inherit;
  transition:.15s;text-align:left;
}
.tab:hover{border-color:var(--line2);color:var(--ink)}
.tab[aria-selected="true"]{
  border-color:var(--accent);color:var(--ink);background:rgba(var(--accent-rgb),.1);
}

.screen{
  border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  background:var(--panel2);box-shadow:0 30px 90px -40px rgba(0,0,0,.9);
}
.screen .bar{
  display:flex;align-items:center;gap:8px;padding:11px 15px;
  background:var(--panel);border-bottom:1px solid var(--line);
}
.screen .bar i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block}
.screen .bar .url{
  margin-left:10px;font-family:var(--mono);font-size:11.5px;color:var(--faint);
}
.stage{display:grid;grid-template-columns:1.15fr .85fr;min-height:430px}
.canvas{padding:24px;border-right:1px solid var(--line);display:flex;
  flex-direction:column;gap:16px}
.chatcol{padding:20px;display:flex;flex-direction:column;gap:14px;background:var(--panel2)}

.msg{max-width:100%;font-size:14.5px;line-height:1.62}
.msg.u{align-self:flex-end;background:rgba(var(--accent-rgb),.12);
  border:1px solid rgba(var(--accent-rgb),.32);border-radius:12px 12px 3px 12px;
  padding:10px 14px;max-width:88%}
.msg.a{color:var(--muted);border-left:2px solid var(--line2);padding-left:14px}
.msg.a b{color:var(--ink);font-weight:600}
.typing{display:inline-flex;gap:4px;align-items:center;padding:4px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);
  animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.src{
  margin-top:auto;border:1px solid var(--line);background:rgba(0,0,0,.28);
  border-radius:9px;padding:11px 13px;font-size:12px;color:var(--faint);
}
.src .h{display:flex;align-items:center;gap:7px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;margin-bottom:7px}
.src code{font-family:var(--mono);color:var(--accent);font-size:11.5px;
  display:block;white-space:pre-wrap;word-break:break-word;line-height:1.5}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.kpi .v{font-family:var(--disp);font-size:27px;font-weight:700;letter-spacing:-.01em}
.kpi .l{color:var(--faint);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.07em;margin-top:2px}
.kpi.hi .v{color:var(--accent)}

.chart{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:16px 17px;flex:1}
.chart h4{margin:0 0 14px;font-family:var(--disp);font-size:15px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}

.bars{display:flex;flex-direction:column;gap:10px}
.bar-row{display:grid;grid-template-columns:1fr 62px;gap:12px;align-items:center;
  font-size:13px}
.bar-row .nm{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .tr{grid-column:1/-1;height:7px;background:rgba(255,255,255,.05);
  border-radius:4px;overflow:hidden;margin-top:-4px}
/* `display:block` es obligatorio: .fl es un <span> dentro de .tr, que no es contenedor
   flex ni grid, así que sin esto queda inline y descarta width/height (barras de 0×0). */
.bar-row .fl{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  width:0;transition:width .85s cubic-bezier(.22,1,.36,1)}
.bar-row .vl{text-align:right;font-family:var(--mono);font-size:12px;color:var(--ink)}

.cols{display:flex;align-items:flex-end;gap:6px;height:140px}
.cols .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:6px;height:100%}
.cols .c .b{width:100%;border-radius:4px 4px 0 0;height:0;
  background:linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.25));
  transition:height .8s cubic-bezier(.22,1,.36,1)}
.cols .c.part .b{background:linear-gradient(180deg,var(--warn),rgba(224,165,82,.2))}
.cols .c .m{font-size:10px;color:var(--faint);font-family:var(--mono)}

.note{font-size:12.5px;color:var(--faint);text-align:center;margin-top:16px}

/* ---------- Pasos ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:24px 22px;
  position:relative;transition:border-color .2s,transform .2s}
.step:hover{border-color:var(--line2);transform:translateY(-2px)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.3);border-radius:6px;padding:2px 8px;
  display:inline-block;margin-bottom:14px}
.step h3{font-size:21px;margin-bottom:9px}
.step p{color:var(--muted);font-size:14.5px;margin:0}

/* ---------- Seguridad ---------- */
.sec.safe{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.safes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.safe-c{border:1px solid var(--line);border-radius:12px;padding:24px 22px;background:var(--panel2)}
.safe-c .ic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.28);
  margin-bottom:15px}
.safe-c h3{font-size:19px;margin-bottom:8px}
.safe-c p{color:var(--muted);font-size:14.5px;margin:0}
.safe-c b{color:var(--ink);font-weight:600}

/* ---------- Formulario ---------- */
.cta-sec{position:relative;overflow:hidden}
.cta-sec::before{
  content:"";position:absolute;inset:auto 0 -420px 0;height:640px;pointer-events:none;
  background:radial-gradient(ellipse 40% 50% at 50% 50%,rgba(var(--accent-rgb),.15),transparent 70%);
  filter:blur(30px);
}
.cta-sec>*{position:relative}
.form{
  max-width:660px;margin:0 auto;background:var(--panel2);border:1px solid var(--line2);
  border-radius:14px;padding:30px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.f label{font-size:13px;color:var(--muted)}
.f label .req{color:var(--accent)}
.f input,.f select,.f textarea{
  background:var(--bg);border:1px solid var(--line2);color:var(--ink);
  padding:11px 13px;font-size:15px;font-family:inherit;border-radius:8px;width:100%;
}
.f textarea{resize:vertical;min-height:82px}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .btn{width:100%}
.msgbox{border-radius:8px;padding:11px 14px;font-size:14px;margin-bottom:14px}
.msgbox.err{background:rgba(224,82,82,.12);border:1px solid #E05252;color:#F1A2A2}
.done{text-align:center;padding:26px 10px}
.done .big{font-family:var(--disp);font-size:30px;margin-bottom:10px}
.done p{color:var(--muted);margin:0}

/* ---------- Pie ---------- */
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--faint);font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap}
footer a:hover{color:var(--ink)}

/* ---------- Aparición al hacer scroll ----------
   Deliberadamente bajo `.js`: sin esa clase el contenido se ve, punto. Si se oculta por
   CSS a secas y el JavaScript falla —un error, un script bloqueado, una extensión—, todo
   lo que está debajo del héroe queda invisible para siempre, formulario incluido. Una
   animación no puede ser un requisito para leer la página. */
.js .rev{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.js .rev.in{opacity:1;transform:none}

/* El encabezado es sticky: sin esto, saltar a un ancla deja el título tapado. */
section[id]{scroll-margin-top:82px}

/* ---------- Móvil ---------- */
@media (max-width:900px){
  .stage{grid-template-columns:1fr}
  .canvas{border-right:none;border-bottom:1px solid var(--line)}
  .steps,.safes{grid-template-columns:1fr}
  .navlinks{display:none}
}
@media (max-width:560px){
  .hero{padding:64px 0 48px}
  .sec{padding:62px 0}
  .grid2{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .form{padding:22px}
  .btn-lg{width:100%}
  .hero .actions{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .rev{opacity:1;transform:none}
}