/* Página de obrigado — Sprint ISR · CT-MED Academy
   Mesma identidade visual da landing page (navy + laranja, Figtree).
   Celular primeiro; a partir de 1100px o hero segue as proporções da landing (--u = 1% da largura útil). */

@font-face{font-family:"Figtree";src:url(fonts/figtree-var.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --navy-950:#040b15;
  --navy-900:#061020;
  --navy-850:#08152a;
  --line:#1a3050;
  --line-soft:rgba(110,155,215,.2);
  --text:#f3f6fb;
  --soft:#dbe3ee;
  --muted:#a9b8cc;
  --orange:#ff7a0f;
  --orange-hi:#ff9530;

  --frame:min(100cqw,1560px);
  --u:calc(var(--frame) / 100);
  --pad:clamp(20px,5.6cqw,44px);
  --radius:14px;

  --fs-title:clamp(38px,11.4cqw,68px);
  --fs-lead:clamp(17px,4.7cqw,22px);
  --fs-body:clamp(15.5px,4.1cqw,18px);
  --fs-h2:clamp(26px,7cqw,40px);
  --fs-eyebrow:11.5px;
  --fs-card-t:clamp(17px,4.7cqw,21px);
  --fs-card:clamp(15px,4cqw,17px);
  --fs-fact:clamp(14px,3.8cqw,16.5px);
}
@media (min-width:1100px){
  :root{
    --pad:calc(var(--u) * 4);
    --radius:calc(var(--u) * .8);
    --fs-title:calc(var(--u) * 4.5);
    --fs-lead:calc(var(--u) * 1.72);
    --fs-body:max(14.5px,calc(var(--u) * 1.36));
    --fs-h2:calc(var(--u) * 2.45);
    --fs-eyebrow:max(10.5px,calc(var(--u) * .86));
    --fs-card-t:max(15.5px,calc(var(--u) * 1.52));
    --fs-card:max(13.5px,calc(var(--u) * 1.28));
    --fs-fact:max(12.5px,calc(var(--u) * 1.13));
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--navy-950);color:var(--text);font-family:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,dl,dd,dt{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}

.page{container-type:inline-size;overflow-x:clip}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.5em;height:1.5em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic--fill{fill:currentColor;stroke:none}
.skip{position:fixed;left:12px;top:-80px;z-index:99;padding:10px 14px;border-radius:8px;background:#fff;color:#08152a;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ---------- peças compartilhadas ---------- */
.eyebrow{display:flex;align-items:center;gap:1.25em;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:#d3dcea}
.eyebrow::before{content:"";flex:none;width:3.3em;height:2px;background:var(--orange)}

.live-tag{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;font-size:clamp(13px,3.6cqw,17px);font-weight:800;letter-spacing:.09em;text-transform:uppercase;line-height:1}
.chip{display:inline-flex;align-items:center;gap:.55em;padding:.58em 1em .56em;border-radius:999px;white-space:nowrap}
.chip--ok{background:linear-gradient(180deg,#ff8f24,#ff7405);color:#170f06;box-shadow:0 6px 22px -6px rgba(255,116,5,.75)}
.chip--online{padding-left:.8em;border:1.5px solid var(--orange);background:rgba(255,122,15,.14);color:#fff}
.chip .ic{width:1.3em;height:1.3em;stroke-width:2;color:var(--orange-hi)}
.chip--ok .ic{color:#170f06;stroke-width:2.6}

.cta{position:relative;display:flex;align-items:center;justify-content:center;gap:.7em;min-height:62px;padding:.85em 1.4em;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#ff8f24 0%,#ff7405 100%);color:#170f06;font-size:clamp(13.5px,3.85cqw,20px);font-weight:800;letter-spacing:0;text-transform:uppercase;text-decoration:none;text-align:center;
  box-shadow:0 14px 36px -12px rgba(255,116,5,.7),inset 0 1px 0 rgba(255,255,255,.38);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.cta::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);opacity:0}
.cta:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 20px 44px -12px rgba(255,116,5,.85),inset 0 1px 0 rgba(255,255,255,.38)}
.cta:hover::after{opacity:1;left:120%;transition:left .65s ease}
.cta:active{transform:translateY(0)}
.cta .ic{width:1.35em;height:1.35em}
.cta .ic--arrow{width:1.05em;height:1.05em;stroke-width:2.8;transition:transform .18s ease}
.cta:hover .ic--arrow{transform:translate(3px,-3px)}

.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:var(--fs-fact)}
.fact{display:flex;align-items:center;gap:.8em;min-width:0;padding:.9em .85em;border:1px solid var(--line);border-radius:var(--radius);background:rgba(5,13,25,.88)}
.fact .ic{width:2.05em;height:2.05em;color:var(--orange);stroke-width:1.5}
.fact dt{font-size:.7em;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#c9d4e2;line-height:1.3}
.fact dd{font-weight:700;line-height:1.25;white-space:nowrap}
.fact .fact__note{font-size:.72em;font-weight:400;color:#bfcbda;white-space:normal}

.brand{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;font-size:22px}
.brand img{height:2.05em;width:auto}
.brand__name{display:flex;flex-direction:column;font-weight:800;line-height:1;letter-spacing:.01em}
.brand__name small{display:flex;align-items:center;gap:.5em;margin-top:.42em;font-size:.4em;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:#cdd7e4}
.brand__name small::before,.brand__name small::after{content:"";flex:1;height:1px;background:currentColor;opacity:.6}

/* ---------- cena: foto do monitor + professores ---------- */
.stage{position:relative;--sw:min(100cqw,640px);width:var(--sw);height:calc(var(--sw) * .96);margin-inline:auto}
.scene{position:absolute;top:0;right:-1%;width:126%;aspect-ratio:1487/1058}
.scene__plate{width:100%;height:100%}
.scene__lamp{position:absolute;left:63.21%;top:0;width:24.21%;height:auto;animation:lamp 1.15s steps(1,end) infinite}
@keyframes lamp{0%{opacity:1}55%{opacity:.28}}
.scene::after{content:"";position:absolute;inset:-1px;pointer-events:none;
  background:linear-gradient(90deg,var(--navy-950) 0%,rgba(4,11,21,.42) 15%,transparent 31%),linear-gradient(0deg,var(--navy-950) 1%,transparent 32%)}
.person{position:absolute;max-width:none;height:auto;-webkit-mask-image:linear-gradient(#000 68%,transparent 97%);mask-image:linear-gradient(#000 68%,transparent 97%);animation:entrar 1.1s cubic-bezier(.2,.8,.2,1) both}
.person--gil{left:0;top:17.5%;width:52%}
.person--diego{left:27%;top:22%;width:51%;animation-delay:.14s}
@keyframes entrar{from{opacity:0;transform:translateY(3.5%) scale(.965)}}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(60% 50% at 8% 0%,rgba(40,96,170,.2),transparent 70%),var(--navy-950)}
.hero__inner{position:relative;z-index:2;margin-top:calc(var(--sw,min(100cqw,640px)) * -.13);padding:0 var(--pad) 48px;max-width:640px;margin-inline:auto}
.hero__copy>.brand{position:absolute;z-index:3;left:var(--pad);top:calc(min(100cqw,640px) * -.83 + 16px)}
h1{font-size:var(--fs-title);font-weight:900;letter-spacing:-.032em;line-height:1.02;margin-top:.36em;text-shadow:0 4px 30px rgba(0,0,0,.5)}
h1 span{color:var(--orange)}
.hero__lead{margin-top:.75em;font-size:var(--fs-lead);font-weight:600;line-height:1.3;color:#eef2f8;max-width:34em}
.hero__lead b{color:#fff;font-weight:800}

/* aviso da live: o dado principal da página, em destaque */
.aviso{position:relative;margin-top:26px;padding:20px 20px 20px 24px;border:1px solid rgba(255,122,15,.55);border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(255,122,15,.16),rgba(255,122,15,.04) 60%),rgba(8,19,36,.92);box-shadow:0 18px 44px -24px rgba(255,116,5,.55)}
.aviso::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--orange)}
.aviso .eyebrow{color:var(--orange-hi)}
.aviso p:not(.eyebrow){margin-top:.8em;font-size:calc(var(--fs-body) * 1.06);line-height:1.5;color:var(--soft)}
.aviso b{color:#fff;font-weight:800}
.aviso .hl{color:var(--orange-hi);font-weight:800;white-space:nowrap}
.aviso .live{color:#fff;font-weight:800}
.hero .facts{margin-top:28px;order:4}
.hero__copy{display:flex;flex-direction:column}
.hero__info{display:contents}
.hero .aviso{order:1}
.hero .acesso{order:2}
.hero .membros{order:3}

/* passo principal: botão do grupo + link da área de membros */
.acesso{margin-top:28px}
.acesso__label{display:flex;align-items:center;gap:.7em;margin-bottom:12px;font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#d3dcea}
.acesso__label i{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--orange);color:#170f06;font-style:normal;font-weight:800;letter-spacing:0;font-size:1.15em}
.acesso .cta{width:100%}
.acesso__hint{margin-top:12px;text-align:center;font-size:calc(var(--fs-body) * .9);line-height:1.4;color:var(--muted)}
.membros{margin-top:26px;padding-top:20px;border-top:1px solid rgba(140,165,205,.25);text-align:center;font-size:calc(var(--fs-body) * .98);color:var(--soft)}
.membros a{display:inline-flex;align-items:center;gap:.4em;margin-top:.25em;font-weight:700;color:var(--orange-hi);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em;transition:color .15s ease}
.membros a:hover{color:#fff}
.membros .ic{width:1em;height:1em;stroke-width:2.4}

/* ---------- seções ---------- */
.sec{position:relative;isolation:isolate;overflow:hidden;padding:60px 0;border-top:1px solid var(--line-soft);background:var(--navy-900)}
.sec--foto::before{content:"";position:absolute;inset:0;z-index:-1;background:url(monitor.webp) 0 42%/cover no-repeat;opacity:.13;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.sec__inner{position:relative;z-index:1;max-width:640px;margin-inline:auto;padding-inline:var(--pad)}
.sec__head h2{margin-top:.6em;font-size:var(--fs-h2);font-weight:700;line-height:1.15;letter-spacing:-.016em;text-wrap:balance}
.sec__head h2 em{font-style:normal;color:var(--orange)}
.sec__head + *{margin-top:30px}

.steps{display:grid;gap:12px;counter-reset:step}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:start;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(8,19,36,.78)}
.step::before{counter-increment:step;content:counter(step);grid-row:span 2;display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;border:1.5px solid var(--orange);background:rgba(255,122,15,.14);color:var(--orange-hi);font-size:var(--fs-card-t);font-weight:800}
.step h3{font-size:var(--fs-card-t);font-weight:700;line-height:1.2;letter-spacing:-.01em;align-self:end}
.step p{font-size:var(--fs-card);line-height:1.45;color:var(--soft)}
.step a{color:var(--orange-hi);font-weight:700}
.step a:hover{color:#fff}

.recebe{display:grid;gap:10px;margin-top:12px}
.recebe li{display:flex;align-items:center;gap:.9em;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(5,13,25,.7);font-size:var(--fs-card);font-weight:600}
.recebe .ic{width:1.9em;height:1.9em;color:var(--orange);stroke-width:1.5}

.fecho{padding:56px 0 64px;text-align:center;background:var(--navy-950);border-top:1px solid var(--line-soft)}
.fecho__quote{max-width:22em;margin-inline:auto;font-size:var(--fs-h2);font-weight:800;line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
.fecho__quote em{font-style:normal;color:var(--orange)}
.fecho__sub{max-width:34em;margin:1em auto 0;font-size:var(--fs-body);color:var(--soft)}
.fecho .brand{margin-top:34px;opacity:.9}
.fecho__nota{max-width:42em;margin:22px auto 0;padding-inline:var(--pad);font-size:12.5px;line-height:1.5;color:#8ea0b8}

/* ---------- desktop ---------- */
@media (min-width:1100px){
  .stage--hero{position:absolute;top:0;right:calc((100cqw - var(--frame)) / 2);width:calc(var(--u) * 64);height:auto;aspect-ratio:1487/1058;margin:0}
  .stage--hero .scene{right:0;width:100%}
  .stage--hero .person--gil{left:-1.6%;top:10.4%;width:49.3%}
  .stage--hero .person--diego{left:25.8%;top:14.8%;width:47.7%}

  .hero__inner{display:block;width:var(--frame);max-width:none;margin:0 auto;padding:calc(var(--u) * 1.8) var(--pad) calc(var(--u) * 3.4)}
  .hero__info{display:block}
  .hero .aviso,.hero .acesso,.hero .membros,.hero .facts{order:0}
  .hero__copy{display:grid;grid-template-columns:calc(var(--u) * 46) minmax(0,1fr);grid-template-rows:repeat(6,auto);column-gap:calc(var(--u) * 3.6);justify-items:stretch}
  .hero__copy>*{grid-column:1}
  .hero__copy>.brand{justify-self:start}
  .hero__copy>.live-tag{justify-self:start}
  .hero__info{grid-column:2;grid-row:1 / -1;align-self:end;margin-top:calc(var(--u) * 29)}
  .hero__info .aviso{margin-top:0}
  .hero__copy>.brand{position:static;font-size:calc(var(--u) * 2.3)}
  .live-tag{font-size:max(14px,calc(var(--u) * 1.24));letter-spacing:.1em}
  .hero .live-tag{margin-top:calc(var(--u) * 2.7)}
  .hero h1{margin-top:calc(var(--u) * 1.15);max-width:calc(var(--u) * 34)}
  .hero__lead{margin-top:calc(var(--u) * 1.15);max-width:calc(var(--u) * 32.5)}
  .aviso{padding:calc(var(--u) * 1.5) calc(var(--u) * 1.8) calc(var(--u) * 1.5) calc(var(--u) * 2.1)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u) * .4)}
  .hero .facts{margin-top:calc(var(--u) * .5)}
  .acesso{margin-top:calc(var(--u) * 2.4)}
  .cta{min-height:calc(var(--u) * 4.9);font-size:calc(var(--u) * 1.5);border-radius:calc(var(--u) * .7)}
  .membros{margin-top:calc(var(--u) * 1.8);padding-top:calc(var(--u) * 1.5)}

  .sec__inner{max-width:var(--frame)}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * 1)}
  .step{grid-template-columns:1fr;padding:calc(var(--u) * 1.8)}
  .step::before{grid-row:auto;margin-bottom:calc(var(--u) * .6)}
  .recebe{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u) * 1);margin-top:calc(var(--u) * 1)}
}
@media (min-width:1640px){
  .scene{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 5%);mask-image:linear-gradient(270deg,transparent 0,#000 5%)}
}
@media (min-width:641px) and (max-width:1099px){
  .scene{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 9%);mask-image:linear-gradient(270deg,transparent 0,#000 9%)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .person{animation:none}
  .scene__lamp{animation:none;opacity:.7}
  .cta,.cta .ic{transition:none}
}