/* ============================================================
   BellaDevs — Landing
   ============================================================ */

:root{
  --bg:#0b0b12;
  --bg-alt:#0f0f1a;
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);
  --text:#eceaf5;
  --muted:#a3a0b8;
  --violet:#8b5cff;
  --pink:#ff5c8a;
  --cyan:#4ce0d2;
  --grad:linear-gradient(115deg,#8b5cff 0%,#c15cff 45%,#ff5c8a 100%);
  --radius:18px;
  --radius-sm:12px;
  --maxw:1000px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.75);
  --ease:cubic-bezier(.22,.68,.34,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:40px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,.brand-name{font-family:"Sora","Inter",system-ui,sans-serif;line-height:1.1;letter-spacing:-.03em}
h2{font-size:clamp(1.85rem,3.6vw,2.5rem);font-weight:700;margin:0 0 .4em}
p{margin:0 0 1em}
svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--violet);color:#fff}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--violet);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:"Sora",sans-serif;font-weight:600;font-size:.98rem;
  padding:.92em 1.9em;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s;
  white-space:nowrap;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 30px -12px rgba(160,80,255,.85)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(200,80,255,.95)}
.btn-block{display:flex;width:100%}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;place-items:center;
  padding:80px 0 110px;
  overflow:hidden;
}
.hero-glow{
  position:absolute;inset:-20% -10% auto -10%;height:1100px;pointer-events:none;
  background:
    radial-gradient(560px 420px at 30% 32%,rgba(139,92,255,.34),transparent 68%),
    radial-gradient(520px 380px at 70% 26%,rgba(255,92,138,.24),transparent 66%),
    radial-gradient(760px 460px at 50% 70%,rgba(76,224,210,.09),transparent 70%);
  filter:blur(6px);
}
.hero-inner{
  position:relative;
  display:grid;justify-items:center;text-align:center;gap:6px;
}

.code-mark{
  display:block;width:clamp(120px,20vw,190px);
  filter:drop-shadow(0 16px 40px rgba(139,92,255,.5));
  animation:mark-in 1s var(--ease) both;
}
.code-mark svg{width:100%;height:auto;overflow:visible}
.code-mark polyline,.code-mark line{
  stroke-dasharray:200;stroke-dashoffset:200;
  animation:draw 1.1s var(--ease) forwards;
}
.code-mark line{animation-delay:.22s}
.code-mark polyline:last-of-type{animation-delay:.44s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes mark-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

.wordmark{
  font-size:clamp(2.9rem,10vw,5.6rem);
  font-weight:800;
  margin:.28em 0 .55em;
  animation:fade-up .9s var(--ease) .55s both;
}
.hero .btn{animation:fade-up .9s var(--ease) .75s both}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.scroll-cue{
  position:absolute;left:50%;bottom:34px;translate:-50% 0;
  width:26px;height:42px;border:1.5px solid var(--border-strong);border-radius:999px;
  display:grid;justify-items:center;padding-top:8px;
  animation:fade-up .9s var(--ease) 1.1s both;
}
.scroll-cue span{width:4px;height:8px;border-radius:99px;background:var(--violet);animation:cue 1.9s var(--ease) infinite}
.scroll-cue:hover{border-color:var(--violet)}
@keyframes cue{50%{transform:translateY(14px);opacity:.2}}

/* ---------- Contacto ---------- */
.section{padding:clamp(64px,8vw,100px) 0}
.contact{background:var(--bg-alt);border-top:1px solid var(--border)}
.eyebrow{font-family:"Sora",sans-serif;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin:0 0 .9em}
.section-sub{color:var(--muted);margin:0}

.contact-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,56px);align-items:start}
.contact-list{display:grid;gap:12px;margin-top:26px;color:#d6d2e8;font-size:.97rem}
.contact-list li{display:flex;align-items:center;gap:11px}
.contact-list a{transition:color .2s}
.contact-list a:hover{color:var(--violet)}

.contact-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-size:.86rem;color:var(--muted);font-weight:500}
.field input,.field textarea{
  width:100%;font:inherit;font-size:.97rem;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:13px 15px;transition:border-color .2s,background .2s;resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:#7d7a92}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--violet);background:rgba(255,255,255,.08)}
.field.invalid input,.field.invalid textarea{border-color:var(--pink)}
.error{margin:0;font-size:.8rem;color:#ff8fae}
.form-note{margin:0;font-size:.8rem;color:var(--muted);text-align:center}
.form-status{margin:0;font-size:.95rem;color:var(--cyan);text-align:center;border:1px solid rgba(76,224,210,.35);background:rgba(76,224,210,.08);border-radius:var(--radius-sm);padding:12px}
.form-status.is-error{color:#ff8fae;border-color:rgba(255,92,138,.35);background:rgba(255,92,138,.08)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);background:var(--bg)}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 30px;
  padding-block:30px;
}
.brand{display:inline-flex;align-items:center;gap:11px}
.brand-mark{display:grid;place-items:center;filter:drop-shadow(0 6px 14px rgba(139,92,255,.45))}
.brand-name{font-weight:700;font-size:1.1rem}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.92rem;color:var(--muted)}
.footer-links a{transition:color .2s}
.footer-links a:hover{color:var(--violet)}
.copy{margin:0;font-size:.85rem;color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .contact-inner{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;text-align:center;padding-block:34px}
  .footer-links{justify-content:center}
}
@media (max-width:520px){
  body{font-size:16px}
  .hero{padding-bottom:120px}
  .contact-form{padding:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .code-mark polyline,.code-mark line{stroke-dashoffset:0}
}