/* publico.css · la cara pública de LETRAS (landing, entrar, confirmar, baja).
   Misma paleta que la app privada. Fuentes AUTO-HOSPEDADAS: ni una petición a Google. */

@font-face{font-family:Kanit;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/kanit-300.woff2) format("woff2")}
@font-face{font-family:Kanit;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/kanit-400.woff2) format("woff2")}
@font-face{font-family:Kanit;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/kanit-500.woff2) format("woff2")}
@font-face{font-family:Kanit;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/kanit-700.woff2) format("woff2")}

:root{
  --bg:#06060c; --blue:#38A1DB; --pink:#EC74FC; --aub:#3C2E42; --yellow:#FFE100;
  --ink:#f3f0f7; --muted:#a59fb4; --faint:#6f6982;
  --line:rgba(255,255,255,.09); --glass:rgba(255,255,255,.045);
  --grad:linear-gradient(100deg,var(--blue),var(--pink));
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100svh;display:flex;flex-direction:column;
  font-family:Kanit,system-ui,sans-serif;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  /* overflow-x:clip hace que scrollWidth MIENTA al auditar responsive.
     Para medir de verdad: documentElement.style.overflowX='visible' y entonces medir. */
}

/* ---------- fondo vivo: blobs que respiran ---------- */
.fondo{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.30;will-change:transform}
.b1{width:52vw;height:52vw;background:var(--blue);top:-14vw;left:-10vw;animation:flota1 26s ease-in-out infinite}
.b2{width:44vw;height:44vw;background:var(--pink);bottom:-14vw;right:-8vw;animation:flota2 32s ease-in-out infinite}
.b3{width:36vw;height:36vw;background:var(--aub);top:38%;left:52%;opacity:.5;animation:flota3 38s ease-in-out infinite}
@keyframes flota1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,5vw) scale(1.12)}}
@keyframes flota2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,-4vw) scale(1.08)}}
@keyframes flota3{0%,100%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-58%,-6vw) scale(.92)}}
.grano{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- estructura ---------- */
.caja{width:min(1100px,92vw);margin:0 auto}
main{flex:1}

/* barra transparente que solo coge fondo al bajar: nunca un cuadro pegado encima */
.barra{position:fixed;top:0;left:0;right:0;z-index:50;padding:16px 0;transition:.28s}
.barra.baja{background:rgba(6,6,12,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:11px 0}
.barra .caja{display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{display:flex;align-items:center;gap:10px;font-weight:500;letter-spacing:.02em;text-decoration:none;color:var(--ink)}
.marca .m{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;flex:none}
.marca .m svg{width:17px;height:17px;color:#06060c}

/* ---------- tipografía ---------- */
h1{font-size:clamp(34px,6.4vw,64px);line-height:1.1;font-weight:300;margin:0 0 18px;letter-spacing:-.02em}
h2{font-size:clamp(22px,3.4vw,34px);font-weight:300;margin:0 0 14px;letter-spacing:-.01em}
.deg{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.12em;  /* sin esto, background-clip:text recorta el rabo de g, j, p */
}
/* En navegadores dentro de apps (WhatsApp, Instagram) sin soporte, el texto saldría
   TRANSPARENTE, o sea invisible. Con el fallback primero, siempre se lee. */
.deg{color:var(--blue)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){ .deg{color:transparent} }
p{line-height:1.65;color:var(--muted);margin:0 0 16px;font-weight:300}
.lead{font-size:clamp(16px,2.1vw,19px)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:500;padding:14px 26px;border-radius:14px;transition:.2s;text-decoration:none}
.btn.pri{background:var(--yellow);color:#20180b;box-shadow:0 0 0 rgba(255,225,0,0)}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(255,225,0,.26)}
.btn.pri:disabled{opacity:.55;cursor:progress;transform:none;box-shadow:none}
.btn.fan{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.fan:hover{border-color:var(--blue);transform:translateY(-2px)}
.btn .fl{transition:.2s}
.btn.fan:hover .fl{transform:translateX(4px)}

/* ---------- campos: nunca el look nativo del navegador ---------- */
label.et{display:block;font-size:13px;color:var(--muted);margin:0 0 7px;font-weight:400}
input[type=email],input[type=password],input[type=text]{
  width:100%;padding:14px 16px;border-radius:13px;border:1px solid var(--line);
  background:rgba(0,0,0,.32);color:var(--ink);font-family:inherit;font-size:15px;outline:none;transition:.18s}
input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(56,161,219,.16)}
input::placeholder{color:var(--faint)}

.chk{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:13.5px;color:var(--muted);line-height:1.5;font-weight:300}
.chk input{appearance:none;-webkit-appearance:none;flex:none;width:21px;height:21px;margin:1px 0 0;border-radius:7px;
  border:1px solid var(--line);background:rgba(0,0,0,.32);cursor:pointer;position:relative;transition:.16s}
.chk input:checked{background:var(--grad);border-color:transparent}
.chk input:checked::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #06060c;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.chk input:focus-visible{box-shadow:0 0 0 3px rgba(56,161,219,.3)}
.chk a{color:var(--blue)}

.nota{font-size:13px;padding:11px 14px;border-radius:12px;margin-top:12px;line-height:1.5}
.nota.mal{background:rgba(176,48,71,.16);border:1px solid rgba(176,48,71,.5);color:#ffd9df}

/* ---------- tarjeta de cristal ---------- */
.cristal{background:var(--glass);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,4vw,34px);
  backdrop-filter:blur(16px);box-shadow:0 24px 60px rgba(0,0,0,.35)}

/* ---------- éxito con efecto, nunca un párrafo verde ---------- */
.wow{display:none;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:8px 0}
.wow.on{display:flex}
.wow .anillo{position:relative;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(from 0deg,var(--blue),var(--pink),var(--yellow),var(--blue));animation:gira 3.4s linear infinite}
.wow .anillo::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#0a0a12}
.wow .anillo::after{content:"";position:absolute;inset:-22px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,161,219,.30),transparent 70%);animation:latido 2.4s ease-in-out infinite}
.wow svg.tick{position:relative;width:40px;height:40px;color:var(--ink)}
.wow svg.tick path{stroke-dasharray:40;stroke-dashoffset:40;animation:dibuja .7s cubic-bezier(.16,1,.3,1) .18s forwards}
.wow h3{margin:0;font-size:22px;font-weight:400}
.wow p{margin:0;max-width:44ch}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes latido{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.1)}}
@keyframes dibuja{to{stroke-dashoffset:0}}
.entra{opacity:0;transform:translateY(14px) scale(.985);animation:sube .62s cubic-bezier(.16,1,.3,1) forwards}
@keyframes sube{to{opacity:1;transform:none}}

/* ---------- pie ---------- */
footer{margin-top:auto;padding:46px 0 30px;border-top:1px solid var(--line);text-align:center}
footer .enl{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;margin-bottom:20px}
footer a{color:var(--muted);text-decoration:none;font-size:13.5px;position:relative;font-weight:300}
footer a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:var(--grad);transition:right .28s}
footer a:hover{color:var(--ink)}
footer a:hover::after{right:0}
footer .sep{height:1px;width:min(420px,70vw);margin:0 auto 18px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
footer .cop{font-size:12.5px;color:var(--faint)}
.vv{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:7px 14px;border-radius:999px;
  border:1px solid transparent;text-decoration:none;color:var(--faint);font-size:12.5px;transition:.22s}
.vv:hover{border-color:var(--line);background:var(--glass);color:var(--muted)}
.vv .corazon{width:13px;height:13px;color:var(--pink);animation:late 1.4s ease-in-out infinite;transform-origin:center}
.vv img{height:15px;display:block}
@keyframes late{0%,70%,100%{transform:scale(1)}10%{transform:scale(1.24)}22%{transform:scale(.96)}34%{transform:scale(1.2)}46%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}