:root{
  --navy:#0A1128; --navy2:#0E1634; --card:#101A3D; --line:#23306030;
  --line-solid:#2A3866;
  --ink:#EEF0FA; --muted:#9AA4CC;
  --pink:#F4BBD9; --lav:#B9A6F0;
  --grad:linear-gradient(100deg, #FFFFFF 0%, var(--pink) 45%, var(--lav) 100%);
  --display:'Archivo', system-ui, sans-serif;
  --body:'Instrument Sans', system-ui, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; color-scheme:dark}
body{
  background:var(--navy); color:var(--ink); font-family:var(--body);
  font-size:16px; line-height:1.6; overflow-x:hidden;
}
img,svg{display:block}
a{color:inherit; text-decoration:none}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.wrap{max-width:1080px; margin:0 auto; padding:0 clamp(18px,4vw,32px)}
:focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:6px}

/* ===== NAV ===== */
nav{
  position:sticky; top:0; z-index:20;
  background:rgba(10,17,40,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:11px}
.brand .mark{width:34px; height:34px}
.brand .word{
  font-family:var(--display); font-weight:900; letter-spacing:.14em; font-size:1.02rem;
}
.nav-cta{
  font-size:.82rem; font-weight:600; border:1px solid var(--line-solid);
  border-radius:999px; padding:8px 18px; transition:all .2s;
}
.nav-cta:hover{border-color:var(--pink); color:var(--pink)}

/* ===== HERO ===== */
.hero{position:relative; padding:clamp(64px,10vh,110px) 0 70px; text-align:center; overflow-x:clip}
.hero::before{
  content:''; position:absolute; inset:-30% -20% auto;
  height:120%;
  background:
    radial-gradient(640px 340px at 70% 20%, rgba(185,166,240,.16), transparent 65%),
    radial-gradient(560px 320px at 25% 10%, rgba(244,187,217,.12), transparent 60%);
  pointer-events:none;
}
.hero-shell{
  position:absolute; right:-140px; top:40px; width:480px; opacity:.10;
  pointer-events:none; animation:drift 14s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:rotate(-4deg) translateY(0)} to{transform:rotate(3deg) translateY(18px)}}
.kicker{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  font-size:.74rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--pink); border:1px solid var(--line-solid); border-radius:999px; padding:7px 16px;
  background:rgba(244,187,217,.06);
}
.kicker .dot{width:7px; height:7px; border-radius:50%; background:var(--pink); animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
h1{
  font-family:var(--display); font-weight:800; line-height:1.06; letter-spacing:-.01em;
  font-size:clamp(2.1rem, 5.4vw, 3.7rem); max-width:18ch; margin:0 auto 18px;
}
.hero p.lead{color:var(--muted); max-width:54ch; margin:0 auto 34px; font-size:clamp(1rem,2vw,1.12rem)}
.hero p.lead b{color:var(--ink); font-weight:600}

/* ===== FORM ===== */
.signup{max-width:520px; margin:0 auto; position:relative; text-align:left}
.signup .row{display:flex; gap:10px}
.signup input[type=email]{
  flex:1; min-width:0; background:var(--navy2); border:1px solid var(--line-solid);
  border-radius:12px; padding:14px 16px; color:var(--ink); font-size:.95rem; font-family:var(--body);
}
.signup input[type=email]::placeholder{color:var(--muted)}
.signup button{
  font-family:var(--display); font-weight:700; font-size:.92rem; letter-spacing:.03em;
  background:var(--grad); color:#1B1030; border:none; border-radius:12px;
  padding:14px 22px; cursor:pointer; white-space:nowrap; transition:transform .15s, filter .15s;
}
.signup button:hover{transform:translateY(-1px); filter:brightness(1.05)}
@media (max-width:540px){
  .signup .row{flex-direction:column}
  .signup input[type=email],.signup button{width:100%}
}
.consent{display:flex; gap:9px; align-items:flex-start; margin-top:12px; font-size:.76rem; color:var(--muted)}
.consent input{margin-top:3px; accent-color:#D9A8E8; width:15px; height:15px; flex:none}
.consent a{text-decoration:underline; text-underline-offset:2px}
.form-msg{margin-top:12px; font-size:.84rem; display:none}
.form-msg.err{display:block; color:#F08A8A}
.form-msg.ok{display:block; color:#8AE0B0}
.signup .hp{position:absolute; left:-5000px; opacity:0}  /* honeypot anti-bots */
.micro{margin-top:14px; font-size:.74rem; color:var(--muted); text-align:center}
.micro i{color:var(--pink); margin-right:5px}
.success{
  display:none; text-align:center; background:var(--card); border:1px solid var(--line-solid);
  border-radius:16px; padding:28px 22px;
}
.success i{font-size:1.8rem; color:#8AE0B0; margin-bottom:10px}
.success h3{font-family:var(--display); font-weight:800; margin-bottom:6px}
.success p{color:var(--muted); font-size:.88rem}

/* ===== SECCIONES ===== */
section{padding:64px 0}
.sec-head{text-align:center; max-width:60ch; margin:0 auto 42px}
.sec-head .eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--lav); margin-bottom:12px;
}
.sec-head h2{
  font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,3.4vw,2.2rem);
  line-height:1.15; letter-spacing:-.01em;
}
.sec-head p{color:var(--muted); margin-top:12px; font-size:.96rem}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.card{
  background:var(--card); border:1px solid var(--line-solid); border-radius:16px; padding:26px 22px;
  transition:transform .2s, border-color .2s;
}
.card:hover{transform:translateY(-3px); border-color:#465694}
.card .ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(244,187,217,.14), rgba(185,166,240,.14));
  color:var(--pink); font-size:1.05rem; margin-bottom:16px;
}
.card h3{font-family:var(--display); font-weight:700; font-size:1.02rem; margin-bottom:8px}
.card p{color:var(--muted); font-size:.88rem}

/* pasos: la secuencia sí es información real (1→2→3) */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0; counter-reset:paso}
.step{position:relative; padding:10px 26px 10px 0; counter-increment:paso}
.step::before{
  content:counter(paso, decimal-leading-zero);
  font-family:var(--display); font-weight:900; font-size:2.4rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block; margin-bottom:8px; opacity:.95;
}
.step:not(:last-child)::after{
  content:''; position:absolute; top:34px; right:6px; width:calc(100% - 86px); max-width:140px;
  height:1px; background:linear-gradient(90deg, var(--line-solid), transparent);
}
.step h3{font-family:var(--display); font-weight:700; font-size:1rem; margin-bottom:6px}
.step p{color:var(--muted); font-size:.86rem}
@media (max-width:760px){ .step:not(:last-child)::after{display:none} .step{padding-right:0} }

/* sobre gilardoni */
.about{
  display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center;
  background:var(--card); border:1px solid var(--line-solid); border-radius:20px;
  padding:clamp(24px,4vw,44px);
}
.about .shell-lg{width:clamp(120px,18vw,190px)}
.about h2{font-family:var(--display); font-weight:800; font-size:clamp(1.3rem,2.8vw,1.8rem); margin-bottom:12px}
.about p{color:var(--muted); font-size:.94rem}
.about p + p{margin-top:10px}
.about em{color:var(--ink); font-style:normal; font-weight:600}
@media (max-width:680px){ .about{grid-template-columns:1fr; text-align:center} .about .shell-lg{margin:0 auto} }

/* FAQ */
.faq{max-width:680px; margin:0 auto}
.faq details{
  border:1px solid var(--line-solid); border-radius:14px; background:var(--card);
  padding:16px 20px; margin-bottom:10px;
}
.faq summary{
  cursor:pointer; font-weight:600; font-size:.94rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'\2b'; color:var(--pink); font-weight:700; font-size:1.05rem}
.faq details[open] summary::after{content:'\2212'}
.faq details p{color:var(--muted); font-size:.86rem; margin-top:10px}

/* CTA final */
.final{
  text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:
    radial-gradient(500px 260px at 50% 0%, rgba(185,166,240,.12), transparent 70%),
    var(--navy2);
}
.final h2{
  font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,3.6vw,2.4rem);
  max-width:22ch; margin:0 auto 14px; line-height:1.12;
}
.final > .wrap > p{color:var(--muted); margin-bottom:30px}

/* footer */
footer{padding:30px 0 40px; color:var(--muted); font-size:.78rem}
.foot{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center}
.foot .links{display:flex; flex-wrap:wrap; gap:18px}
.foot a:hover{color:var(--pink)}

/* aparición al hacer scroll */
/* ===== LEGAL ===== */
.rgpd{margin-top:10px; font-size:.72rem; color:var(--muted)}
.rgpd summary{cursor:pointer; list-style:none; display:inline-flex; gap:6px; align-items:center; opacity:.9}
.rgpd summary::-webkit-details-marker{display:none}
.rgpd summary::before{content:'\f05a'; font-family:'Font Awesome 6 Free'; font-weight:900; color:var(--lav)}
.rgpd p{margin-top:8px; line-height:1.55; background:var(--navy2); border:1px solid var(--line-solid); border-radius:10px; padding:10px 12px}
.rgpd a, .consent a{color:var(--pink)}
.legal-overlay{
  position:fixed; inset:0; background:rgba(5,9,22,.82); backdrop-filter:blur(5px);
  z-index:60; display:none; align-items:center; justify-content:center; padding:18px;
}
.legal-overlay.open{display:flex}
.legal-box{
  background:var(--navy2); border:1px solid var(--line-solid); border-radius:18px;
  max-width:780px; width:100%; max-height:86vh; display:flex; flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.legal-head{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px 24px; border-bottom:1px solid var(--line-solid);
}
.legal-head h2{font-family:var(--display); font-weight:800; font-size:1.05rem}
.legal-close{
  background:none; border:1px solid var(--line-solid); color:var(--muted); cursor:pointer;
  width:34px; height:34px; border-radius:9px; font-size:.9rem; transition:all .15s; flex:none;
}
.legal-close:hover{color:var(--pink); border-color:var(--pink)}
.legal-body{overflow:auto; padding:20px 26px 28px; font-size:.85rem; color:var(--muted); line-height:1.7}
.legal-art{display:none}
.legal-art.show{display:block}
.legal-body h3{font-family:var(--display); color:var(--ink); font-size:.95rem; margin:20px 0 8px}
.legal-body h3:first-child{margin-top:0}
.legal-body p + p{margin-top:8px}
.legal-body ul{margin:8px 0 8px 18px}
.legal-body li{margin-bottom:5px}
.legal-body .updated{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--lav); margin-bottom:14px}
.ph{background:rgba(244,187,217,.12); color:var(--pink); padding:0 6px; border-radius:5px; font-weight:600; font-style:normal}
.legal-warning{
  border:1px dashed var(--pink); border-radius:10px; padding:10px 14px; font-size:.76rem;
  color:var(--pink); margin-bottom:16px; background:rgba(244,187,217,.05);
}
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
  .hero-shell{animation:none}
  .kicker .dot{animation:none}
  html{scroll-behavior:auto}
}
/* Clases equivalentes a los estilos inline del diseño original. */
.symbol-defs{position:absolute}
.hero-content{position:relative}
.section-compact{padding-top:10px}
.success-final{max-width:520px; margin:0 auto}
.is-hidden{display:none!important}
.success.is-visible{display:block}
/* Shell de las pantallas de cuenta y acceso, con el tema de la landing. */
:root{--base-ui-accent:#F4BBD9; --base-ui-accent-hover:#B9A6F0;
 --base-ui-accent-foreground:#1B1030; --base-ui-accent-hover-foreground:#1B1030}
.account-main{max-width:1080px; margin:0 auto; padding:56px clamp(18px,4vw,32px); min-height:75vh}
.account-main .base-ui h1{margin:0 0 20px; max-width:none; font-size:2rem}
.account-main .base-ui p{color:var(--muted)}
.account-main .base-ui input,.account-main .base-ui select{background:var(--navy2); color:var(--ink)}
.account-main .base-ui .auth-links a,.account-main .base-ui .auth-switch a{color:var(--pink)}