
/* Mismo sistema de tokens que el home. Helvetica, sin archivos de tipografía. */
:root{
  --bg:#160305; --bg-2:#100204;
  --surface:oklch(0.185 0.048 12); --surface-2:oklch(0.225 0.055 12);
  --fg:#FAF4EF; --fg-2:oklch(0.75 0.02 30); --fg-3:oklch(0.60 0.02 28);
  --line:oklch(1 0 0 / 10%); --line-lo:oklch(1 0 0 / 5.5%);
  --brand:#8F0D35; --glow:#D54563; --rose:#F0C4C8;
  --btn-bg:#FAF4EF; --btn-fg:#160305;
  --err:#ff8095;
  --aura:.85;
  --v-dev:#D54563; --v-ai:#B24BE8; --v-sec:#E0A030;
  --font:'Helvetica Neue',Helvetica,Arial,'Liberation Sans',sans-serif;
  --w:1220px; --pad:30px;
}
[data-pia="light"]{
  --bg:oklch(0.985 0.004 45); --bg-2:oklch(0.966 0.005 42);
  --surface:oklch(0.997 0.002 60); --surface-2:oklch(0.955 0.006 40);
  --fg:oklch(0.205 0.035 16); --fg-2:oklch(0.44 0.022 20); --fg-3:oklch(0.60 0.018 25);
  --line:oklch(0.205 0.035 16 / 13%); --line-lo:oklch(0.205 0.035 16 / 7%);
  --glow:#A81E42; --rose:#8F0D35;
  --btn-bg:#8F0D35; --btn-fg:#ffffff;
  --err:#b3123a;
  --aura:.78;
  --v-dev:#B8203F; --v-ai:#7B2BB0; --v-sec:#A8721A;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--font);background:var(--bg);color:var(--fg);font-size:16px;line-height:1.55;
     min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;
     -webkit-font-smoothing:antialiased;transition:background .35s,color .35s;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:4px;}

/* ── NAV ── */
#nav{position:relative;z-index:3;}
.nav-in{max-width:var(--w);margin:0 auto;padding:0 var(--pad);height:78px;display:flex;align-items:center;gap:20px;}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;}
.chip{position:relative;display:flex;align-items:center;}
.chip::before{content:'';position:absolute;inset:-80% -34%;z-index:0;
  background:radial-gradient(ellipse at 42% 52%,color-mix(in oklab,var(--brand) 62%,transparent),transparent 68%);
  filter:blur(10px);opacity:.7;}
[data-pia="light"] .chip::before{opacity:.13;}
.chip img{position:relative;z-index:1;height:30px;width:auto;}
.pia-light{display:none;}
[data-pia="light"] .pia-dark{display:none;}
[data-pia="light"] .pia-light{display:block;}
.brand-t{font-weight:600;font-size:17px;letter-spacing:-.02em;}
.brand-t span{opacity:.55;}
.back{font-size:14.5px;color:var(--fg-2);transition:color .2s;}
.back:hover{color:var(--fg);}
.tool{border:1px solid var(--line);border-radius:9px;height:38px;min-width:38px;padding:0 10px;
      display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;
      letter-spacing:.04em;color:var(--fg-2);transition:border-color .2s,color .2s;}
.tool:hover{color:var(--fg);border-color:var(--glow);}
.tool svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ico-sun{display:none;}
[data-pia="light"] .ico-sun{display:block;}
[data-pia="light"] .ico-moon{display:none;}

/* ── ARCOS ── */
.auras{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:var(--aura);}
.aura{position:absolute;border-radius:50%;border:2px solid transparent;border-top-color:var(--c);
      filter:blur(7px) drop-shadow(0 0 34px var(--c));}
.a1{--c:var(--v-dev);width:164%;left:-32%;top:70px; height:660px;}
.a2{--c:var(--v-ai); width:130%;left:-15%;top:124px;height:580px;}
.a3{--c:var(--v-sec);width:100%;left:0;   top:180px;height:500px;}
@media(max-width:820px){
  .a1{width:230%;left:-65%;height:420px;}
  .a2{width:180%;left:-40%;height:380px;top:56px;}
  .a3{width:140%;left:-20%;height:340px;top:92px;}
}

/* ── MAIN ── */
main{position:relative;flex:1;display:flex;align-items:center;justify-content:center;
     padding:clamp(30px,6vw,64px) var(--pad) clamp(50px,7vw,80px);}
.card{position:relative;z-index:2;width:100%;max-width:460px;text-align:center;
      padding:clamp(32px,4vw,46px) clamp(26px,3.4vw,40px);}
.card::before{content:'';position:absolute;inset:0;border-radius:18px;pointer-events:none;
  border:1.6px solid var(--line);background:color-mix(in oklab,var(--surface) 62%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .35s ease,box-shadow .35s ease;}
.card:hover::before,.card:focus-within::before{
  border-color:color-mix(in oklab,var(--glow) 70%,transparent);
  box-shadow:0 0 30px -10px color-mix(in oklab,var(--glow) 60%,transparent),
             inset 0 0 0 1px color-mix(in oklab,var(--glow) 16%,transparent);}
.card > *{position:relative;z-index:1;}
.card-mark{display:flex;justify-content:center;margin-bottom:26px;}
.card-mark .chip img{height:42px;}
h1{font-size:clamp(26px,3.2vw,34px);font-weight:500;letter-spacing:-.028em;line-height:1.15;}
.sub{font-size:15px;color:var(--fg-2);line-height:1.6;margin-top:12px;}

form{margin-top:30px;text-align:left;}
label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--fg-2);margin-bottom:9px;}
input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
      padding:14px 16px;font-size:17px;font-family:var(--font);color:var(--fg);outline:none;
      text-align:center;letter-spacing:.06em;font-variant-numeric:tabular-nums;
      transition:border-color .2s,box-shadow .2s;}
input::placeholder{color:var(--fg-3);letter-spacing:.04em;}
input:focus{border-color:var(--glow);box-shadow:0 0 0 3px color-mix(in oklab,var(--glow) 18%,transparent);}
input.is-error{border-color:var(--err);}
input.is-success{border-color:#3fbf7f;}
.err{font-size:13px;color:var(--err);margin-top:10px;min-height:19px;opacity:0;transition:opacity .2s;}
.err.visible{opacity:1;}
.send{width:100%;border-radius:10px;background:var(--btn-bg);color:var(--btn-fg);padding:14px 22px;
      font-size:15px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px;
      margin-top:16px;transition:opacity .2s,transform .2s;}
.send:hover{transform:translateY(-1px);}
.send:disabled{opacity:.65;cursor:default;transform:none;}
.spin{width:15px;height:15px;border:2px solid color-mix(in oklab,var(--btn-fg) 30%,transparent);
      border-top-color:var(--btn-fg);border-radius:50%;animation:sp .7s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}
.foot-note{margin-top:28px;padding-top:22px;border-top:1px solid var(--line-lo);
           font-size:13.5px;color:var(--fg-3);text-align:center;}
.foot-note a{color:var(--fg);font-weight:500;border-bottom:1px solid var(--line);}
.foot-note a:hover{color:var(--glow);border-color:var(--glow);}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.001ms!important;}}

/* ══════════════════════════════════════════════════════════════════════════
   CAPA TELÉFONO — frontera 1080 px: el ancho al que el menú ya se vuelve
   hamburguesa, igual que en la home. TODO lo que sea de la CABECERA y del PIE
   en teléfono va acá adentro y en ningún otro lado; arriba de esta línea vive
   la computadora y no se toca.
   Alcance de esta capa: cabecera y pie. Las media queries del CONTENIDO de
   esta página siguen arriba, donde estaban.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:1080px){

  /* ── Cabecera ── */
  @media(max-width:520px){.brand-t{display:none;}.back{display:none;}}

}
