/* UPGRADEIA · shared styles (index.html + cursos.html) */
:root{
  --canvas:#0A1020;
  --panel:#111A2E;
  --panel-2:#0E1628;
  --accent:#2F8BFF;
  --accent-hover:#5AA8FF;
  --accent-muted:rgba(47,139,255,.18);
  --cyan:#3FD8F2;
  --text-secondary:#9AA8BF;
  --text-primary:#E8EDF5;
  --line:rgba(154,168,191,.16);
  --line-strong:rgba(154,168,191,.42);
  --ease-out:cubic-bezier(.22,.8,.24,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --f-display:'Syne',system-ui,sans-serif;
  --f-body:'Figtree',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --gutter:clamp(20px,5vw,72px);
  --tshadow:0 1px 2px rgba(5,8,18,.95),0 3px 12px rgba(5,8,18,.78),0 10px 44px rgba(5,8,18,.8);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;animation:pageIn .9s var(--ease-out) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-.01em;margin:0}
p{margin:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--accent);color:var(--canvas);padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
main:focus{outline:none}

/* the one environment: fixed background layer behind everything */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env::before{content:"";position:absolute;width:90vmax;height:90vmax;left:-20vmax;top:-30vmax;background:radial-gradient(circle,rgba(47,139,255,.13) 0%,rgba(47,139,255,0) 62%);animation:drift 70s ease-in-out -12s infinite alternate}
.env::after{content:"";position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75 0 0 0 0 .8 0 0 0 0 .9 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(55vw,40vh)}100%{transform:translate(20vw,90vh)}}

/* labels */
.kicker{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);display:inline-flex;align-items:baseline;gap:.7em}
.kicker::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--accent),var(--cyan));align-self:center}

/* buttons */
.btn{--bg:transparent;display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--f-body);font-weight:600;font-size:16px;line-height:1;padding:16px 26px;border-radius:999px;text-decoration:none;border:1px solid var(--line-strong);color:var(--text-primary);background:var(--bg);cursor:pointer;transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out),transform .35s var(--ease-out),color .35s var(--ease-out);text-shadow:none}
.btn:hover{border-color:var(--text-primary);transform:translateY(-1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#06101F}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn .arr{transition:transform .35s var(--ease-out)}
.btn:hover .arr{transform:translateX(3px)}
@media (pointer:coarse){.btn{min-height:44px}.brand{min-height:44px}.foot a{display:inline-flex;align-items:center;min-height:44px}}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--gutter);transition:background-color .5s var(--ease-out),padding .5s var(--ease-out),border-color .5s var(--ease-out);border-bottom:1px solid transparent}
.nav.solid{background:rgba(10,16,32,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px;border-bottom-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:40px;height:32px;flex:none}
.wordmark{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:.01em;line-height:1}
.wordmark b{font-weight:800;background:linear-gradient(90deg,var(--accent),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav ul{display:flex;align-items:baseline;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{font-size:15px;color:var(--text-secondary);text-decoration:none;transition:color .3s var(--ease-out)}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--text-primary)}
.nav .btn{padding:12px 20px;font-size:15px}
.menu-btn{display:none;background:none;border:1px solid var(--line-strong);color:var(--text-primary);border-radius:999px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:16px;height:1.5px;background:currentColor;position:relative;transition:transform .35s var(--ease-out),opacity .35s var(--ease-out)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-5px}.menu-btn span::after{top:5px}
.nav.open .menu-btn span{background:transparent}
.nav.open .menu-btn span::before{transform:translateY(5px) rotate(45deg)}
.nav.open .menu-btn span::after{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:1180px){
  .nav ul{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;align-items:flex-start;gap:6px;padding:88px var(--gutter) 28px;background:rgba(10,16,32,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transform:translateY(-102%);transition:transform .5s var(--ease-out);z-index:-1}
  .nav.open ul{transform:none}
  .nav ul a{font-size:20px;display:block;padding:8px 0}
  .menu-btn{display:inline-flex}
  .nav .nav-cta{display:none}
}

/* sections */
.section{position:relative;padding:clamp(96px,14vh,160px) var(--gutter)}
.wrap{max-width:1200px;margin:0 auto}
.h2{font-size:clamp(34px,5vw,64px);max-width:16ch}
.lede{color:var(--text-secondary);font-size:clamp(17px,1.5vw,19px);max-width:56ch}

/* reveal choreography */
.reveal .r{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in .r{opacity:1;transform:none}
.reveal.in .r:nth-child(2){transition-delay:.08s}
.reveal.in .r:nth-child(3){transition-delay:.16s}
.reveal.in .r:nth-child(4){transition-delay:.24s}
.reveal.in .r:nth-child(5){transition-delay:.32s}
.reveal.in .r:nth-child(6){transition-delay:.4s}
.reveal.done .r,.reveal.done .r:nth-child(n){transition-delay:0s!important}

/* forms */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--text-primary);background:rgba(10,16,32,.7);border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out);width:100%}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6F7D95}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(17,26,46,.9)}
.form-msg{min-height:1.6em;font-size:15px;color:var(--text-secondary);transition:opacity .4s var(--ease-out)}
.form-msg.ok{color:var(--text-primary)}
.privacy-note{display:flex;gap:10px;align-items:flex-start;margin-top:4px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--text-secondary);max-width:62ch}
.privacy-note svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--accent)}
.privacy-note a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--line-strong);white-space:nowrap;transition:border-color .3s var(--ease-out)}
.privacy-note a:hover{border-color:var(--accent)}

/* footer */
.foot{padding:72px var(--gutter) 40px;border-top:1px solid var(--line)}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}
.foot p{color:var(--text-secondary);font-size:15px}
.foot a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:border-color .3s var(--ease-out)}
.foot a:hover{border-color:var(--accent)}
.foot .legal{grid-column:1/-1;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:#6F7D95;padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr}}

/* pause everything when the tab is hidden */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .reveal .r{opacity:1;transform:none}
}