@charset "UTF-8";
/* ============================================================
   TOKENS
   ============================================================ */
/* Tema CLARO. Os nomes dos tokens s\0000e3o os mesmos da LP escura \002014 o que muda \0000e9 o valor:
   --ink* passam a ser as superf\0000edcies claras (0 \002192 3) e --bone/--mute passam a ser texto.
   --on-orange \0000e9 a cor de texto usada sobre o laranja da marca. */
:root{
  --ink:#FFFFFF; --ink-2:#F7F3EE; --ink-3:#E6DED5; --ink-4:#C8BCAF;
  --orange:#F26300; --orange-lift:#C9500A; --orange-ink:#A8480A;
  --on-orange:#221610;
  --bone:#1C1714; --mute:#574F48; --mute-2:#7C736B;
  --paper:#F6F0E8; --paper-ink:#3D352F; --paper-2:#FFFFFF;
  --wa:#25D366; --wa-dark:#1BA851;

  --font-display:'Archivo','Archivo Narrow','Arial Narrow',system-ui,sans-serif;
  --font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --s--1:clamp(.8rem,.775rem + .12vw,.875rem);
  --s-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --s-1:clamp(1.2rem,1.12rem + .4vw,1.4rem);
  --s-2:clamp(1.5rem,1.32rem + .9vw,2rem);
  --s-3:clamp(1.95rem,1.62rem + 1.7vw,2.9rem);
  --s-4:clamp(2.4rem,1.85rem + 2.8vw,4rem);
  --s-5:clamp(2.75rem,1.95rem + 3.9vw,4.45rem);

  --gutter:clamp(20px,5vw,40px);
  --maxw:1200px;
  --band:clamp(56px,8vw,104px);
  --radius:4px;
  --radius-lg:10px;
  --rule:1px solid var(--ink-3);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);

  --z-base:1; --z-sticky:100; --z-header:200; --z-backdrop:300; --z-modal:400; --z-saida:450;
}
@supports (color: oklch(0.5 0.1 50)){
  :root{
    --ink-2:oklch(.966 .006 72); --ink-3:oklch(.898 .010 72); --ink-4:oklch(.790 .016 72);
    --orange:oklch(.672 .196 45.5); --orange-lift:oklch(.575 .168 45); --orange-ink:oklch(.512 .148 46);
    --bone:oklch(.196 .010 58); --mute:oklch(.420 .013 60); --mute-2:oklch(.548 .012 62);
    --paper:oklch(.955 .013 76); --paper-ink:oklch(.30 .010 55);
  }
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--font-body); font-size:var(--s-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* textura fina de oficina \002014 quase impercept\0000edvel; no tema claro \0000e9 uma trama escura suave */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:repeating-linear-gradient(115deg,rgba(28,23,20,.022) 0 1px,transparent 1px 7px);
}
main,header,footer{position:relative; z-index:var(--z-base)}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:800; line-height:1.02;
  letter-spacing:-.02em; font-stretch:82%; text-wrap:balance}
h1{font-size:var(--s-5)} h2{font-size:var(--s-3)} h3{font-size:var(--s-2)} h4{font-size:var(--s-1); line-height:1.12}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.band{padding-block:var(--band)}
.lede{max-width:64ch; color:var(--mute); font-size:var(--s-1); line-height:1.5; margin-top:16px}
.tight{max-width:68ch}
::selection{background:var(--orange); color:var(--on-orange)}
/* fora de tela, mas lido por buscadores e leitores de tela */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
/* o header \0000e9 sticky: as \0000e2ncoras param abaixo dele, n\0000e3o atr\0000e1s */
:where(section,main)[id]{scroll-margin-top:92px}

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--orange-lift); outline-offset:3px; border-radius:2px;
}
.skip{position:absolute; left:-9999px; top:0; background:var(--orange); color:var(--on-orange);
  padding:12px 20px; font-weight:700; z-index:calc(var(--z-modal) + 1)}
.skip:focus{left:12px; top:12px}

/* ============================================================
   BOT\0000d5ES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 26px; border:2px solid transparent; border-radius:var(--radius);
  font-family:var(--font-display); font-stretch:88%; font-weight:800; font-size:1.0rem;
  letter-spacing:.01em; text-transform:uppercase; cursor:pointer; text-align:center;
  transition:background-color .18s var(--ease-soft), border-color .18s var(--ease-soft),
             color .18s var(--ease-soft), transform .18s var(--ease);
}
.btn--primary{background:var(--orange); color:var(--on-orange); border-color:var(--orange)}
.btn--primary:hover{background:var(--orange-lift); border-color:var(--orange-lift); color:#FFF; transform:translateY(-2px)}
.btn--wa{background:var(--wa); color:#0E2B18; border-color:var(--wa-dark)}
.btn--wa:hover{background:var(--wa-dark); border-color:var(--wa-dark); color:#FFF; transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--bone); border-color:var(--ink-4)}
.btn--ghost:hover{border-color:var(--orange); color:var(--orange-lift); transform:translateY(-2px)}
.btn--sm{min-height:44px; padding:10px 18px; font-size:.9rem}
.btn--full{width:100%}
.btn svg{width:20px; height:20px; fill:currentColor; flex:none}
@media (prefers-reduced-motion: reduce){ .btn:hover{transform:none} }

/* ============================================================
   FAIXA ROLANTE (topo)
   Trilho duplicado + translate de -50% = la\0000e7o cont\0000ednuo sem salto.
   M\0000e1scara apaga as pontas; o hover (ou o foco do teclado) pausa,
   para dar tempo de ler e clicar no curso.
   ============================================================ */
.ticker{
  position:relative; z-index:calc(var(--z-header) + 1);
  background:#1B1614; border-bottom:2px solid var(--orange); overflow:hidden;
}
.ticker__mask{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.ticker__track{
  display:flex; width:max-content; align-items:stretch;
  animation:corre 64s linear infinite;
}
@keyframes corre{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track{animation-play-state:paused}
.ticker__item{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  padding:0 clamp(14px,1.6vw,20px); min-height:40px; background:none; border:0;
  font-family:var(--font-display); font-weight:700; font-stretch:86%; font-size:.82rem;
  letter-spacing:.05em; text-transform:uppercase; color:#CFC6BE; white-space:nowrap;
  transition:color .2s var(--ease-soft);
}
.ticker__item::before{
  content:""; width:5px; height:5px; flex:none; rotate:45deg; background:var(--orange);
  transition:scale .2s var(--ease), background-color .2s var(--ease-soft);
}
button.ticker__item{cursor:pointer}
button.ticker__item:hover{color:#FFF}
button.ticker__item:hover::before{scale:1.5; background:var(--orange-lift)}
.ticker__item--dado{color:#F6F3F0}
.ticker__item--dado b{color:var(--orange); font-weight:800; letter-spacing:.03em}
@media (max-width:639px){ .ticker__item{font-size:.75rem; min-height:36px} }
@media (prefers-reduced-motion: reduce){
  .ticker__track{animation:none}
  .ticker__mask{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(255,255,255,.96); border-bottom:var(--rule);
  transition:box-shadow .28s var(--ease-soft), border-color .28s var(--ease-soft);
}
@supports (backdrop-filter: blur(8px)){
  .site-header{background:rgba(255,255,255,.86); backdrop-filter:blur(10px)}
}
/* ganha peso s\0000f3 depois que a p\0000e1gina sai do topo */
.site-header.is-fixa{box-shadow:0 12px 28px -24px rgba(28,23,20,.75); border-bottom-color:var(--ink-4)}
.site-header .wrap{display:flex; align-items:center; gap:clamp(16px,3vw,36px); min-height:70px}
.brand{display:flex; align-items:baseline; gap:7px; font-family:var(--font-display);
  font-weight:900; font-stretch:78%; font-size:1.5rem; letter-spacing:-.01em; text-transform:uppercase}
.brand b{color:var(--bone); font-weight:900}
.brand span{color:var(--orange); font-size:.95rem; letter-spacing:.06em}
.brand__txt{display:flex; align-items:baseline; gap:7px}
.brand__txt[hidden]{display:none}
.brand__logo{height:43px; width:auto; max-width:210px; object-fit:contain}
.brand--foot .brand__logo{height:51px; max-width:250px}
.site-nav{display:none; gap:26px; margin-left:auto; align-items:center}
.site-nav a{font-size:.94rem; font-weight:600; color:var(--mute); transition:color .18s}
.site-nav a:hover{color:var(--bone)}
.header-cta{margin-left:auto}
@media (min-width:1000px){
  .site-nav{display:flex}
  .header-cta{margin-left:0}
}
@media (max-width:479px){
  .header-cta .btn{padding:10px 14px; font-size:.82rem}
  .header-cta .btn svg{display:none}
  .brand__logo{height:32px}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; overflow:clip; background:var(--ink)}
/* o banner \0000c9 o hero: t\0000edtulo, selos e bot\0000e3o v\0000eam desenhados na arte.
   O bloco inteiro \0000e9 o link para o cat\0000e1logo \002014 da\0000ed n\0000e3o haver texto por cima. */
.hero-banner{
  display:block; position:relative; line-height:0; isolation:isolate;
  transition:filter .3s var(--ease-soft);
}
.hero-banner img{width:100%; height:auto; display:block}
/* v\0000e9u quente no hover: confirma que o banner \0000e9 clic\0000e1vel sem lavar o texto da arte */
.hero-banner::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(115deg,rgba(242,99,0,.14),rgba(242,99,0,.03) 55%,rgba(242,99,0,.12));
  transition:opacity .3s var(--ease-soft);
}
.hero-banner:hover::after,.hero-banner:focus-visible::after{opacity:1}
.hero-banner:hover{filter:saturate(1.04)}
.hero-banner:focus-visible{outline:3px solid var(--orange-lift); outline-offset:-3px}

/* ============================================================
   BUSCADOR
   ============================================================ */
.finder{background:var(--ink-2); border-block:var(--rule)}
.finder form{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding-block:22px}
.field{flex:1 1 260px; min-width:0}
.field label{display:block; font-family:var(--font-display); font-weight:700; font-stretch:84%;
  font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--mute); margin-bottom:7px}
.field input,.field select{
  width:100%; min-height:50px; padding:12px 14px; background:var(--ink); color:var(--bone);
  border:1px solid var(--ink-4); border-radius:var(--radius); font-size:1rem;
  transition:border-color .18s;
}
.field select{appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237C736B'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:22px}
.field input::placeholder{color:var(--mute-2)}
.field input:hover,.field select:hover,.field input:focus,.field select:focus{border-color:var(--orange)}
.finder .btn{flex:0 0 auto}
@media (max-width:639px){ .finder .btn{width:100%} }

/* ============================================================
   BARRA DE FATOS
   ============================================================ */
.facts{border-bottom:var(--rule)}
.facts ul{display:flex; flex-wrap:wrap; padding-block:clamp(24px,3vw,34px)}
.facts li{flex:1 1 180px; padding:8px clamp(14px,2vw,26px); display:flex; flex-direction:column; gap:4px}
.facts li + li{border-left:var(--rule)}
@media (max-width:719px){
  .facts li{flex:1 1 50%}
  .facts li:nth-child(odd){border-left:0}
  .facts li:nth-child(n+3){border-top:var(--rule); padding-top:18px; margin-top:10px}
}
.facts .k{font-family:var(--font-display); font-weight:900; font-stretch:78%; font-style:italic;
  font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem); line-height:1; color:var(--orange); letter-spacing:-.02em}
.facts .l{font-size:.92rem; color:var(--mute); line-height:1.3}

/* ============================================================
   CAT\0000c1LOGO
   ============================================================ */
.catalog__head{display:flex; flex-wrap:wrap; gap:20px 40px; align-items:flex-end; justify-content:space-between}
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:clamp(26px,3vw,34px)}
.chip{
  background:transparent; border:1px solid var(--ink-4); color:var(--mute);
  padding:10px 16px; min-height:44px; border-radius:60px; cursor:pointer; font-size:.9rem; font-weight:600;
  transition:border-color .18s, color .18s, background-color .18s;
}
.chip:hover{border-color:var(--orange); color:var(--bone)}
.chip[aria-pressed="true"]{background:var(--orange); border-color:var(--orange); color:var(--on-orange); font-weight:700}
.chip .n{opacity:.7; font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"] .n{opacity:.75}

.count{margin-top:22px; font-size:.94rem; color:var(--mute)}
.count b{color:var(--bone)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:clamp(16px,2vw,24px); margin-top:18px}
.card{
  display:flex; flex-direction:column; text-align:left; background:var(--ink-2);
  border:1px solid var(--ink-3); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  padding:0; transition:border-color .22s var(--ease-soft), transform .22s var(--ease), box-shadow .22s var(--ease-soft);
}
.card:hover{border-color:var(--orange); transform:translateY(-4px); box-shadow:0 22px 34px -26px rgba(28,23,20,.55)}
.card__thumb{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink-3)}
.card__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-soft)}
.card:hover .card__thumb img{transform:scale(1.06)}
.card__thumb::after{content:""; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(to top,rgba(26,22,20,.9),transparent)}
.card__tags{position:absolute; top:10px; left:10px; display:flex; gap:6px; z-index:2}
.tag{font-family:var(--font-display); font-weight:800; font-stretch:84%; font-size:.68rem;
  letter-spacing:.07em; text-transform:uppercase; padding:5px 9px; border-radius:3px}
.tag--ead{background:rgba(255,255,255,.94); color:var(--bone)}
.tag--free{background:var(--orange); color:var(--on-orange)}
.card__body{padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; gap:8px}
.card__axis{font-family:var(--font-display); font-weight:700; font-stretch:84%; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--orange-lift); min-height:2.4em; line-height:1.2}
.card h4{color:var(--bone); min-height:2.24em}
.card__meta{font-size:.85rem; color:var(--mute); display:flex; gap:12px; flex-wrap:wrap}
.card__meta span{display:flex; align-items:center; gap:5px}
.card__go{margin-top:auto; padding-top:12px; border-top:1px solid var(--ink-3);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-weight:700; font-size:.9rem; color:var(--orange-lift)}
.card__go svg{width:16px; height:16px; fill:currentColor; transition:translate .22s var(--ease)}
.card:hover .card__go svg{translate:4px 0}

.grid__empty{border:1px dashed var(--ink-4); border-radius:var(--radius-lg); padding:clamp(28px,5vw,48px);
  text-align:center; margin-top:18px}
.grid__empty h3{margin-bottom:10px}
.grid__empty p{color:var(--mute); max-width:46ch; margin-inline:auto; margin-bottom:20px}
.more{display:flex; justify-content:center; margin-top:32px}

/* ============================================================
   BLOCO PAPEL \002014 SISTEC
   ============================================================ */
.paper{background:var(--paper); color:var(--paper-ink); border-block:var(--rule)}
.paper h2,.paper h3,.paper h4{color:#161210}
.paper .lede{color:#5A5049}
.paper a{color:var(--orange-ink); font-weight:600; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1.5px; transition:color .18s}
.paper a:hover{color:#8C3B00}
.proof{display:grid; gap:clamp(28px,4vw,52px); grid-template-columns:1fr; margin-top:clamp(30px,4vw,44px)}
@media (min-width:900px){ .proof{grid-template-columns:minmax(0,.95fr) minmax(0,1fr); align-items:start} }
.consulta{
  border:1px solid #D9D2CB; border-radius:6px; background:var(--paper-2); overflow:hidden;
  box-shadow:0 18px 40px -28px rgba(22,18,16,.5);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86rem;
}
.consulta__bar{background:#161210; color:#F6F3F0; padding:10px 14px; display:flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; font-weight:700}
.consulta__bar .dot{width:8px; height:8px; border-radius:50%; background:#3FBE5E; flex:none}
.consulta__body{padding:18px 16px; display:grid; gap:9px}
.consulta__row{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  border-bottom:1px dashed #D9D2CB; padding-bottom:8px}
.consulta__row:last-of-type{border-bottom:0; padding-bottom:0}
.consulta__row dt{color:#7A6F66; min-width:112px; flex:none}
.consulta__row dd{margin:0; color:#161210; font-weight:600}
.consulta__stamp{display:inline-flex; align-items:center; gap:7px; margin:14px 16px 18px;
  background:#0F7A32; color:#fff; padding:7px 13px; border-radius:3px;
  font-family:var(--font-display); font-weight:800; font-stretch:84%; font-size:.78rem;
  letter-spacing:.07em; text-transform:uppercase}
.consulta__cap{font-family:var(--font-body); font-size:.82rem; color:#6B6058; margin-top:12px; line-height:1.45}
.steps{counter-reset:s; display:grid; gap:2px}
.steps li{counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:16px;
  padding:20px 0; border-bottom:1px solid #E2DCD5}
.steps li:first-child{border-top:1px solid #E2DCD5}
.steps li::before{
  content:counter(s,decimal-leading-zero); font-family:var(--font-display); font-weight:900; font-stretch:78%;
  font-size:1.5rem; color:var(--orange-ink); line-height:1; padding-top:2px; font-variant-numeric:tabular-nums
}
.steps b{display:block; color:#161210; font-size:1.05rem; margin-bottom:3px}
.steps p{color:#5A5049; font-size:.96rem}

/* ============================================================
   DATASHEET \002014 POR QUE UNICORP
   ============================================================ */
.sheet{margin-top:clamp(28px,4vw,42px); border-top:var(--rule)}
.sheet__row{display:grid; grid-template-columns:1fr; gap:6px 32px; padding:22px 0; border-bottom:var(--rule);
  align-items:baseline}
@media (min-width:760px){ .sheet__row{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)} }
.sheet__row dt{font-family:var(--font-display); font-weight:800; font-stretch:82%; font-size:1.12rem;
  letter-spacing:-.01em; color:var(--bone); display:flex; align-items:center; gap:11px}
.sheet__row dt svg{width:22px; height:22px; stroke:var(--orange); fill:none; stroke-width:1.7; flex:none}
.sheet__row dd{margin:0; color:var(--mute); max-width:62ch}
.sheet__row.is-key dt{color:var(--orange-lift)}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.voices{display:grid; gap:clamp(18px,2.5vw,28px); grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  margin-top:clamp(28px,4vw,40px)}
.voice{border-top:3px solid var(--orange); padding-top:20px; display:flex; flex-direction:column}
.voice__head{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px}
.voice .who{width:58px; height:58px; border-radius:50%; background:var(--ink-3); flex:none; outline:2px solid var(--orange); outline-offset:2px;
  display:grid; place-items:center; object-fit:cover;
  font-family:var(--font-display); font-weight:800; font-stretch:84%; color:var(--orange-lift); font-size:1rem}
.voice .who--vago{background:transparent; border:1.5px dashed var(--ink-4); color:var(--mute); font-size:1.4rem}
.voice__head b{color:var(--bone); font-weight:700; display:block; line-height:1.2}
.voice__role{color:var(--mute); font-size:.88rem}
.voice blockquote{margin:0; font-size:1rem; line-height:1.55; color:var(--bone)}
.voice__rate{margin-top:auto; padding-top:16px; color:var(--mute); font-size:.9rem;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.voice__rate b{color:var(--bone)}
.voice__rate .stars{color:var(--orange-lift); letter-spacing:.1em; font-size:1rem; line-height:1}
.todo{display:inline-block; background:rgba(242,99,0,.09); border:1px dashed var(--orange-lift);
  color:var(--orange-lift); font-size:.76rem; font-weight:700; padding:2px 8px; border-radius:3px;
  letter-spacing:.02em; vertical-align:middle}
.award{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:clamp(30px,4vw,42px);
  border:var(--rule); border-radius:var(--radius-lg); padding:20px 22px; background:var(--ink-2)}
.award .stars{color:var(--orange-lift); letter-spacing:.14em; font-size:1.15rem; line-height:1}
.award p{color:var(--mute); font-size:.96rem}
.award b{color:var(--bone)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{margin-top:clamp(28px,4vw,40px); border-top:var(--rule); max-width:900px}
.faq details{border-bottom:var(--rule)}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-family:var(--font-display); font-weight:700; font-stretch:86%; font-size:clamp(1.05rem,1rem + .3vw,1.22rem);
  color:var(--bone); line-height:1.25; transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--orange-lift)}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:14px; height:14px; margin-top:-7px;
  border-right:2px solid var(--orange); border-bottom:2px solid var(--orange);
  rotate:45deg; transition:rotate .25s var(--ease); transform-origin:60% 60%;
}
.faq details[open] summary::after{rotate:225deg}
.faq .answer{padding:0 0 22px; color:var(--mute); max-width:70ch}
.faq .answer b{color:var(--bone); font-weight:600}
.faq .answer + .answer{padding-top:0}

/* ============================================================
   FECHAMENTO
   ============================================================ */
.close{background:var(--ink-2); border-top:var(--rule)}
.close__grid{display:grid; gap:clamp(30px,4vw,56px); grid-template-columns:1fr; align-items:start}
@media (min-width:900px){ .close__grid{grid-template-columns:minmax(0,1fr) minmax(0,440px)} }
.checks{margin-top:26px; display:grid; gap:13px}
.checks li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; color:var(--mute)}
.checks li b{color:var(--bone); font-weight:600}
.checks svg{width:21px; height:21px; stroke:var(--orange); fill:none; stroke-width:2; margin-top:2px; flex:none}
.form{background:var(--ink); border:var(--rule); border-radius:var(--radius-lg); padding:clamp(22px,3vw,30px);
  box-shadow:0 26px 48px -38px rgba(28,23,20,.5)}
.form h3{margin-bottom:6px}
.form > p{color:var(--mute); font-size:.94rem; margin-bottom:20px}
.form .field{margin-bottom:15px; flex:none}
.form .row{display:grid; grid-template-columns:1fr 96px; gap:12px}
.form .privacy{margin-top:14px; font-size:.82rem; color:var(--mute-2); line-height:1.45}
.err{display:block; color:#B3261E; font-size:.84rem; margin-top:6px; min-height:0}
[aria-invalid="true"]{border-color:#B3261E !important}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:var(--rule); padding-block:clamp(44px,6vw,68px) 30px; font-size:.94rem}
.foot{display:grid; gap:clamp(28px,4vw,44px); grid-template-columns:1fr}
@media (min-width:760px){ .foot{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))} }
.foot p{color:var(--mute); max-width:38ch; margin-top:14px}
.foot h4{font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
  font-stretch:88%; margin-bottom:14px}
.foot li{margin-bottom:9px}
.foot a{color:var(--bone); transition:color .18s}
.foot a:hover{color:var(--orange-lift)}
.oficial{margin-top:20px; display:grid; gap:8px}
.oficial li{margin:0}
.oficial a{display:inline-flex; align-items:flex-start; gap:9px; border:var(--rule); border-radius:var(--radius);
  padding:9px 13px; color:var(--mute); font-size:.86rem; line-height:1.35;
  transition:border-color .18s, color .18s}
.oficial a::before{content:"\002197"; color:var(--orange); font-weight:700; flex:none}
.oficial a:hover{border-color:var(--orange); color:var(--bone)}
.oficial b{color:var(--bone); font-weight:600}
.social{display:flex; gap:10px; margin-top:20px}
.social a{width:40px; height:40px; border:var(--rule); border-radius:var(--radius); display:grid; place-items:center;
  transition:border-color .18s, background-color .18s}
.social a:hover{border-color:var(--orange); background:rgba(242,99,0,.08)}
.social svg{width:19px; height:19px; fill:var(--mute)}
.social a:hover svg{fill:var(--orange-lift)}
.legal{margin-top:clamp(34px,4vw,48px); padding-top:24px; border-top:var(--rule);
  color:var(--mute-2); font-size:.84rem; line-height:1.6; display:grid; gap:6px}

/* ============================================================
   STICKY MOBILE
   ============================================================ */
.dock{
  position:fixed; inset:auto 0 0 0; z-index:var(--z-sticky); display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.97); border-top:2px solid var(--orange);
  box-shadow:0 -14px 30px -22px rgba(28,23,20,.6);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  translate:0 110%; transition:translate .32s var(--ease);
}
.dock.is-on{translate:0 0}
.dock__txt{flex:1; min-width:0; line-height:1.2}
.dock__txt b{display:block; font-family:var(--font-display); font-weight:800; font-stretch:84%;
  font-size:.95rem; color:var(--bone)}
.dock__txt span{font-size:.8rem; color:var(--orange-lift); font-weight:600}
@media (min-width:900px){ .dock{display:none} }
@media (max-width:899px){ body{padding-bottom:0} .has-dock{padding-bottom:78px} }

/* ============================================================
   MODAL
   ============================================================ */
.modal{position:fixed; inset:0; z-index:var(--z-modal); display:none; align-items:flex-start; justify-content:center;
  padding:clamp(12px,4vh,48px) 12px; overflow-y:auto; background:rgba(12,10,9,.82)}
.modal.is-open{display:flex; animation:veu .26s var(--ease-soft) both}
@keyframes veu{from{background:rgba(12,10,9,0)} to{background:rgba(12,10,9,.82)}}
.modal[hidden]:not(.is-open){display:none}
@supports (backdrop-filter: blur(4px)){ .modal.is-open{backdrop-filter:blur(4px)} }
.modal__card{position:relative; width:min(100%,760px); background:var(--ink); border:var(--rule);
  border-radius:var(--radius-lg); overflow:hidden; animation:pop .3s var(--ease) both;
  box-shadow:0 40px 80px -46px rgba(20,16,14,.75)}
@keyframes pop{from{opacity:0; translate:0 16px; scale:.985} to{opacity:1; translate:0 0; scale:1}}
.modal__close{position:absolute; top:12px; right:12px; z-index:3; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--ink-4); background:rgba(255,255,255,.92); color:var(--bone); cursor:pointer;
  font-size:1.2rem; line-height:1; display:grid; place-items:center; transition:background-color .18s, border-color .18s}
.modal__close:hover{background:var(--orange); border-color:var(--orange); color:var(--on-orange)}
.modal__hero{position:relative; aspect-ratio:16/7; background:var(--ink-3); overflow:hidden}
.modal__hero img{width:100%; height:100%; object-fit:cover}
.modal__hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top,var(--ink) 3%,rgba(255,255,255,0) 46%,rgba(20,16,14,.34))}
.modal__axis{position:absolute; left:16px; bottom:14px; z-index:2}
.modal__body{padding:clamp(20px,3vw,30px)}
.modal__meta{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:12px; color:var(--mute); font-size:.92rem}
.modal__meta b{color:var(--bone); font-weight:600}
.modal__nota{margin-top:18px; border:1px solid var(--orange); border-radius:var(--radius);
  background:rgba(242,99,0,.06); padding:13px 16px; font-size:.95rem; color:var(--bone)}
.modal__nota b{color:var(--orange-lift)}
.modal__about{margin-top:18px; color:var(--mute)}
.modal h4.sec{margin-top:24px; margin-bottom:12px; font-size:1.05rem; letter-spacing:.02em;
  text-transform:uppercase; font-stretch:86%; color:var(--mute)}
/* grade curricular \002014 disciplina + carga hor\0000e1ria, como consta no plano de curso */
.dis{display:grid; gap:2px; border-top:var(--rule)}
.dis .item{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 2px; border-bottom:var(--rule); font-size:.92rem; color:var(--bone)}
.dis .item .hr{flex:none; font-family:var(--font-display); font-weight:700; font-stretch:86%;
  font-size:.82rem; letter-spacing:.04em; color:var(--orange-lift); font-variant-numeric:tabular-nums}
.dis__total{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:12px 2px 0; font-size:.92rem; color:var(--mute)}
.dis__total b{color:var(--bone)}
.atua{margin-top:2px; display:grid; gap:9px}
.atua li{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
  color:var(--mute); font-size:.95rem}
.atua li::before{content:""; width:7px; height:7px; margin-top:.55em; border-radius:50%;
  background:var(--orange); flex:none}
.modal .form{margin-top:26px; background:var(--ink-2)}

/* ============================================================
   POPUP DE SA\0000cdDA
   ============================================================ */
.saida{position:fixed; inset:0; z-index:var(--z-saida); display:none; align-items:center; justify-content:center;
  padding:16px; overflow-y:auto; background:rgba(10,8,7,.86)}
.saida.is-open{display:flex}
.saida[hidden]:not(.is-open){display:none}
@supports (backdrop-filter: blur(4px)){ .saida.is-open{backdrop-filter:blur(5px)} }
.saida__card{position:relative; width:min(100%,880px); background:var(--ink); border:1px solid var(--ink-3);
  box-shadow:0 44px 80px -48px rgba(20,16,14,.8);
  border-radius:var(--radius-lg); overflow:hidden; display:grid; grid-template-columns:1fr;
  animation:sobe .38s var(--ease) both; margin:auto}
@media (min-width:720px){ .saida__card{grid-template-columns:minmax(0,340px) minmax(0,1fr)} }
/* sem a imagem, o card vira coluna \0000fanica e encolhe \002014 n\0000e3o sobra buraco */
.saida__card--so-texto{grid-template-columns:1fr !important; width:min(100%,540px)}
@keyframes sobe{from{opacity:0; translate:0 22px; scale:.98} to{opacity:1; translate:0 0; scale:1}}
/* o arquivo \0000e9 um p\0000f4ster fechado, com moldura e texto pr\0000f3prios:
   no desktop ele aparece inteiro (contain sobre preto, sem corte);
   no celular vira uma tira s\0000f3 com a foto, para n\0000e3o roubar a dobra do bot\0000e3o */
.saida__art{position:relative; background:var(--ink-2); min-height:0}
.saida__art img{width:100%; height:100%; display:block; object-fit:cover}
@media (max-width:719px){
  .saida__art{aspect-ratio:16/7}
  .saida__art img{object-position:center 32%}
}
@media (min-width:720px){
  .saida__art{aspect-ratio:auto}
  .saida__art img{object-position:52% 40%}
}
.saida__body{padding:clamp(24px,3.5vw,38px); display:flex; flex-direction:column}
.saida__body h2{font-size:clamp(1.65rem,1.4rem + 1.2vw,2.35rem); margin-bottom:14px}
.saida__body h2 em{font-style:italic; color:var(--orange)}
.saida__body p{color:var(--mute); max-width:44ch}
.saida__lista{margin-top:18px; display:grid; gap:9px}
.saida__lista li{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
  color:var(--mute); font-size:.95rem}
.saida__lista li b{color:var(--bone); font-weight:600}
.saida__lista svg{width:19px; height:19px; stroke:var(--orange); fill:none; stroke-width:2.2; margin-top:3px; flex:none}
.saida__acoes{margin-top:auto; padding-top:26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.saida__depois{background:none; border:0; padding:10px 4px; min-height:44px; cursor:pointer;
  color:var(--mute); font-size:.95rem; text-decoration:underline; text-underline-offset:3px}
.saida__depois:hover{color:var(--bone)}
.saida__fechar{position:absolute; top:12px; right:12px; z-index:3; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--ink-4); background:rgba(255,255,255,.94); color:var(--bone); cursor:pointer;
  font-size:1.2rem; line-height:1; display:grid; place-items:center;
  transition:background-color .18s, border-color .18s, color .18s}
.saida__fechar:hover{background:var(--orange); border-color:var(--orange); color:var(--on-orange)}
@media (prefers-reduced-motion: reduce){ .saida__card{animation:none} }

/* ------------------------------------------------------------
   POPUP DE TRIAGEM \002014 aluno x interessado
   A arte da triagem \0000e9 foto sangrada, n\0000e3o p\0000f4ster com moldura: o
   enquadramento do rosto pede recorte pr\0000f3prio, diferente do
   object-position padr\0000e3o de .saida__art.
   ------------------------------------------------------------ */
#triagem .saida__art picture{display:contents}
#triagem .saida__art img{object-fit:cover; object-position:center 28%}
@media (max-width:719px){ #triagem .saida__art img{object-position:center} }
.triagem__acoes{margin-top:26px; display:grid; gap:12px}
@media (min-width:520px){ .triagem__acoes{grid-template-columns:1fr 1fr} }
.triagem__acoes .btn{width:100%; justify-content:center; text-align:center}
.triagem__nota{margin-top:16px; font-size:.86rem; color:var(--mute-2)}

/* ============================================================
   REVEAL (progressivo \002014 vis\0000edvel por padr\0000e3o sem JS)
   ============================================================ */
.js [data-reveal]{opacity:0; translate:0 22px}
.js [data-reveal].is-in{opacity:1; translate:0 0;
  transition:opacity .6s var(--ease-soft), translate .7s var(--ease)}
.js .hero [data-reveal]{translate:0 26px}

/* ============================================================
   REFINOS DE INTERA\0000c7\0000c3O
   Cada um responde a uma a\0000e7\0000e3o do visitante \002014 nada anima sozinho.
   ============================================================ */
/* o tra\0000e7o laranja do depoimento cresce ao entrar em tela */
.js .voice[data-reveal]{border-top-color:transparent}
.js .voice[data-reveal].is-in{border-top-color:var(--orange); transition:border-color .5s var(--ease-soft) .25s,
  opacity .6s var(--ease-soft), translate .7s var(--ease)}

/* linha do datasheet: o \0000edcone e o t\0000edtulo avan\0000e7am um passo no hover */
.sheet__row{transition:background-color .22s var(--ease-soft)}
.sheet__row:hover{background:linear-gradient(90deg,rgba(242,99,0,.05),transparent 62%)}
.sheet__row dt{transition:translate .22s var(--ease)}
.sheet__row:hover dt{translate:4px 0}

/* passos numerados do bloco SISTEC */
.steps li{transition:background-color .22s var(--ease-soft)}
.steps li:hover{background:rgba(242,99,0,.045)}
.steps li::before{transition:color .22s var(--ease-soft), scale .22s var(--ease); transform-origin:left center}
.steps li:hover::before{color:var(--orange); scale:1.08}

/* chips do cat\0000e1logo: o n\0000famero acompanha o estado */
.chip .n{transition:opacity .18s var(--ease-soft)}
.chip:hover .n{opacity:1}

/* FAQ: a resposta abre com altura animada onde o navegador suporta */
@supports (interpolate-size: allow-keywords){
  .faq details::details-content{
    block-size:0; overflow:clip; opacity:0;
    transition:block-size .34s var(--ease), opacity .26s var(--ease-soft), content-visibility .34s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto; opacity:1}
}

/* campos: o foco tamb\0000e9m levanta a borda inteira, n\0000e3o s\0000f3 a cor */
.field input,.field select{transition:border-color .18s var(--ease-soft), box-shadow .18s var(--ease-soft)}
.field input:focus,.field select:focus{box-shadow:0 0 0 3px rgba(242,99,0,.14)}

/* bot\0000f5es: sombra curta que some quando o bot\0000e3o volta ao lugar */
.btn--primary,.btn--wa{box-shadow:0 10px 22px -18px rgba(28,23,20,.9)}
.btn--primary:hover,.btn--wa:hover{box-shadow:0 16px 26px -18px rgba(28,23,20,.75)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1; translate:none}
  .js .voice[data-reveal]{border-top-color:var(--orange)}
  .card:hover{transform:none}
  .card:hover .card__thumb img{transform:none}
  .sheet__row:hover dt{translate:none}
  .hero-banner:hover{filter:none}
}
@media print{ .dock,.site-header,.ticker,.finder{display:none} body{background:#fff; color:#000} }


/* ============================================================
   ADI\0000c7\0000d5ES DA LP RJ
   O CSS base \0000e9 o mesmo da p\0000e1gina institucional de T\0000e9cnicos
   (tokens, .wrap, .band, .btn, .field, .form, .card, .dis, .sheet).
   Aqui entram s\0000f3 as pe\0000e7as que a institucional n\0000e3o tinha:
   o formul\0000e1rio dentro do hero, a p\0000e1gina de curso e a de obrigado.
   ============================================================ */

/* ---------- HERO COM FORMUL\0000c1RIO ----------
   A institucional converte com 27% de scroll mediano: a pessoa
   decide no topo. Por isso o formul\0000e1rio nasce na primeira tela,
   e no celular ele vem antes de qualquer bloco de conte\0000fado. */
.lead-hero{background:var(--ink-2); border-bottom:var(--rule); padding-block:clamp(26px,4vw,52px)}
.lead-hero__grid{display:grid; gap:clamp(26px,3.5vw,48px); grid-template-columns:1fr; align-items:start}
@media (min-width:980px){
  .lead-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,452px)}
}
.lead-hero h1{font-size:var(--s-3); letter-spacing:-.01em}
.lead-hero .lede{margin-top:14px; max-width:54ch}
.lead-hero__art{margin-top:clamp(20px,3vw,28px); border-radius:var(--radius-lg); overflow:hidden;
  border:var(--rule); display:none}
@media (min-width:980px){ .lead-hero__art{display:block} }
.lead-hero__art img{display:block; width:100%; height:auto}

.crumb{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.85rem; color:var(--mute-2);
  margin-bottom:clamp(14px,2vw,20px)}
.crumb a{color:var(--mute); text-decoration:none; border-bottom:1px solid var(--ink-3)}
.crumb a:hover{color:var(--orange-lift); border-color:var(--orange)}
.crumb span[aria-current]{color:var(--bone); font-weight:600}

/* O card do formul\0000e1rio. Mesma linguagem de .form, com eleva\0000e7\0000e3o
   suficiente para ler como "a a\0000e7\0000e3o desta p\0000e1gina". */
.form--hero{background:var(--paper-2); border:var(--rule); border-radius:var(--radius-lg);
  padding:clamp(20px,2.6vw,28px); box-shadow:0 26px 44px -34px rgba(28,23,20,.5)}
@media (min-width:980px){ .form--hero{position:sticky; top:96px} }
.form--hero h2{font-size:var(--s-1); margin-bottom:6px}
.form--hero > p{color:var(--mute); font-size:.95rem; margin-bottom:18px}
.form--hero .field + .field, .form--hero .row + .field, .form--hero .field + .row{margin-top:14px}
.form--hero .row{display:flex; gap:14px; flex-wrap:wrap}
.form--hero button[type="submit"]{margin-top:20px}
.form--hero .privacy{margin-top:12px; font-size:.8rem; color:var(--mute-2)}
.form__curso{display:flex; align-items:center; gap:10px; background:var(--ink-2); border:var(--rule);
  border-radius:var(--radius); padding:12px 14px; margin-bottom:16px; font-size:.95rem; color:var(--mute)}
.form__curso b{color:var(--bone); font-weight:600}
.form__curso svg{width:20px; height:20px; flex:none; fill:none; stroke:var(--orange); stroke-width:1.8}

/* selos curtos sob o formul\0000e1rio e no hero */
.selos{display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(18px,2.4vw,24px)}
.selo{display:inline-flex; align-items:center; gap:7px; background:var(--paper-2); border:var(--rule);
  border-radius:999px; padding:7px 14px; font-size:.82rem; color:var(--mute);
  font-family:var(--font-display); font-weight:600; font-stretch:86%}
.selo svg{width:15px; height:15px; fill:none; stroke:var(--orange); stroke-width:2}

/* ---------- P\0000c1GINA DE CURSO ---------- */
.curso-meta{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:16px; color:var(--mute); font-size:.95rem}
.curso-meta b{color:var(--bone); font-weight:600}
.bloco + .bloco{margin-top:clamp(30px,4vw,44px)}
.bloco h2{font-size:var(--s-2)}
.bloco h3{font-size:var(--s-1); margin-bottom:10px}
.bloco p{color:var(--mute); max-width:66ch}
.atua{margin-top:12px; display:grid; gap:10px; list-style:none; padding:0}
.atua li{position:relative; padding-left:26px; color:var(--mute)}
.atua li::before{content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
  background:var(--orange); border-radius:2px}
.grade-nota{margin-top:14px; font-size:.87rem; color:var(--mute-2); max-width:66ch}

/* ---------- P\0000c1GINA DE OBRIGADO ---------- */
.ok{min-height:100dvh; display:grid; place-items:center; padding-block:clamp(40px,7vw,80px);
  background:var(--ink-2)}
.ok__card{width:100%; max-width:660px; background:var(--paper-2); border:var(--rule);
  border-radius:var(--radius-lg); padding:clamp(28px,4.5vw,52px); text-align:center;
  box-shadow:0 30px 60px -40px rgba(28,23,20,.55)}
.ok__mark{width:74px; height:74px; margin:0 auto clamp(20px,3vw,26px); border-radius:50%;
  background:var(--wa); display:grid; place-items:center;
  animation:okpop .5s var(--ease) both}
.ok__mark svg{width:38px; height:38px; fill:none; stroke:#0E2B18; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round}
@keyframes okpop{from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1}}
@media (prefers-reduced-motion: reduce){ .ok__mark{animation:none} }
.ok h1{font-size:var(--s-2)}
.ok__lede{margin-top:14px; color:var(--mute); max-width:52ch; margin-inline:auto}
.ok__curso{margin-top:clamp(20px,3vw,26px); background:var(--ink-2); border:var(--rule);
  border-radius:var(--radius); padding:14px 18px; font-size:.95rem; color:var(--mute)}
.ok__curso b{color:var(--bone); font-weight:600}
.passos{margin-top:clamp(24px,3.5vw,34px); text-align:left; display:grid; gap:2px;
  border-top:var(--rule)}
.passos li{display:flex; gap:14px; padding:16px 2px; border-bottom:var(--rule); align-items:flex-start}
.passos .n{flex:none; width:28px; height:28px; border-radius:50%; background:var(--orange);
  color:var(--on-orange); display:grid; place-items:center; font-family:var(--font-display);
  font-weight:800; font-size:.85rem}
.passos b{display:block; color:var(--bone); font-family:var(--font-display); font-stretch:86%}
.passos span.t{color:var(--mute); font-size:.92rem}
.ok__foot{margin-top:clamp(24px,3.5vw,32px); display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.ok__legal{margin-top:20px; font-size:.8rem; color:var(--mute-2)}

/* ---------- DOCK MOBILE ----------
   Reaproveita a barra fixa da institucional, mas aponta para o
   formul\0000e1rio desta p\0000e1gina em vez do WhatsApp. */
.dock--rj{position:fixed; inset:auto 0 0 0; z-index:var(--z-sticky); background:var(--paper-2);
  border-top:var(--rule); padding:10px var(--gutter); display:flex; gap:12px; align-items:center;
  justify-content:space-between; box-shadow:0 -12px 24px -20px rgba(28,23,20,.6)}
.dock--rj .dock__txt{font-size:.85rem; color:var(--mute); line-height:1.25}
.dock--rj .dock__txt b{display:block; color:var(--bone); font-family:var(--font-display); font-stretch:86%}
@media (min-width:900px){ .dock--rj{display:none} }
@media (max-width:899px){ body.has-dock{padding-bottom:84px} }

/* ---------- LEITURA DA P\0000c1GINA DE CURSO ----------
   Texto corrido em coluna estreita (o olho n\0000e3o persegue linha longa) e
   grade curricular em duas colunas no desktop, para a lista n\0000e3o virar
   uma tira de 27 linhas sozinha no meio da tela. */
.leitura{max-width:860px}
@media (min-width:1000px){
  .dis{grid-template-columns:1fr 1fr; column-gap:clamp(24px,3vw,44px)}
  .dis .item{border-top:1px solid var(--ink-3)}
}
.dis{border-top:none}
.dis .item:first-child{border-top:1px solid var(--ink-3)}

/* ---------- GRADE 2\0000d72 NO CELULAR ----------
   A ordem do cursos-rj.json coloca os quatro cursos de maior sa\0000edda na
   frente; em duas colunas eles aparecem juntos, antes do primeiro scroll.
   O card encolhe o necess\0000e1rio para caber sem quebrar o nome. */
@media (max-width:639px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .card__body{padding:12px 12px 14px; gap:6px}
  .card__axis{font-size:.63rem; letter-spacing:.06em}
  .card h4{font-size:.98rem; min-height:2.6em; line-height:1.18}
  .card__meta{font-size:.76rem; gap:8px}
  .card__go{font-size:.78rem; padding-top:10px}
  .card__tags .tag{font-size:.62rem; padding:3px 7px}
}

/* Chips no celular: 12 eixos empilhados comiam seis linhas de altura e
   empurravam a grade para fora da tela. Viram uma faixa que rola. */
@media (max-width:639px){
  .chips{flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter)}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none; scroll-snap-align:start}
}

/* WhatsApp e cidade dividem a linha em grade fixa. Com flex o select de
   cidade (92 munic\0000edpios) pedia largura m\0000ednima e ca\0000eda para a linha de baixo,
   deixando meia linha vazia ao lado do telefone. */
.form--hero .row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.form--hero .row .field{flex:initial; min-width:0}
/* o + .field da regra geral empurrava a cidade 14px para baixo do telefone */
.form--hero .row .field + .field{margin-top:0}
@media (max-width:399px){ .form--hero .row{grid-template-columns:1fr} }

/* ---------- O ATRIBUTO hidden PRECISA VALER AQUI ----------
   `.card` \0000e9 display:flex e `.more` \0000e9 display:flex no CSS da institucional.
   Uma regra de classe vence o display:none que o navegador aplica a [hidden],
   ent\0000e3o os cards escondidos continuavam na tela: a grade abria com os 56.
   Estas tr\0000eas regras fazem o hidden valer \002014 \0000e9 o que mant\0000e9m a grade nos 16.
   (Os popups j\0000e1 t\0000eam regra pr\0000f3pria: .saida[hidden]:not(.is-open)) */
.card[hidden]{display:none !important}
.more[hidden]{display:none !important}
.grid__empty[hidden]{display:none !important}

/* ============================================================
   P\0000c1GINA DE OBRIGADO \002014 vers\0000e3o em duas colunas
   Foto de quem vai atender \0000e0 esquerda, mensagem \0000e0 direita.
   Toda anima\0000e7\0000e3o \0000e9 opcional: com prefers-reduced-motion tudo
   aparece pronto, sem movimento.
   ============================================================ */
.ok{position:relative; overflow:hidden}
.ok__confete{position:fixed; inset:0; pointer-events:none; z-index:5}
.ok__card{max-width:1040px; padding:0; overflow:hidden; text-align:left}
.ok__grid{display:grid; grid-template-columns:1fr}
@media (min-width:900px){ .ok__grid{grid-template-columns:minmax(0,380px) minmax(0,1fr)} }

.ok__foto{position:relative; min-height:230px; background:var(--ink-3)}
.ok__foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 22%}
@media (min-width:900px){ .ok__foto{min-height:100%} }
.ok__foto::after{content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(to top,rgba(28,23,20,.78),transparent)}
.ok__assina{position:absolute; left:20px; right:20px; bottom:16px; z-index:2; color:#FFF}
.ok__assina b{display:block; font-family:var(--font-display); font-stretch:86%; font-size:1.02rem}
.ok__assina span{font-size:.84rem; opacity:.9}

.ok__corpo{padding:clamp(26px,3.4vw,46px)}
.ok__marca{display:flex; align-items:center; gap:14px; padding-bottom:18px; margin-bottom:22px;
  border-bottom:var(--rule)}
.ok__marca img{height:38px; width:auto}
.ok__marca span{font-family:var(--font-display); font-weight:700; font-stretch:84%;
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute-2)}

/* o check se desenha em vez de aparecer */
.ok__mark{width:58px; height:58px; margin:0 0 20px; border-radius:50%; background:var(--wa);
  display:grid; place-items:center; animation:okpop .45s var(--ease) both}
.ok__mark svg{width:30px; height:30px; fill:none; stroke:#0E2B18; stroke-width:2.8;
  stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:32; stroke-dashoffset:32;
  animation:oktraco .5s var(--ease-soft) .25s forwards}
@keyframes oktraco{to{stroke-dashoffset:0}}

.ok h1{font-size:var(--s-2)}
.ok h1 em{font-style:normal; color:var(--orange-lift)}
.ok__lede{margin-top:14px; color:var(--mute); max-width:56ch; margin-inline:0}
.ok__curso{display:inline-flex; align-items:center; gap:10px; margin-top:20px; background:var(--ink-2);
  border:var(--rule); border-radius:999px; padding:10px 18px; font-size:.92rem; color:var(--mute)}
.ok__curso b{color:var(--bone); font-weight:600}
/* o check herdava tamanho de nada e estourava dentro da p\0000edlula */
.ok__curso svg{width:16px; height:16px; flex:none; fill:none; stroke:var(--orange);
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.passos{margin-top:clamp(22px,3vw,30px)}
.passos li{align-items:flex-start}
.ok__foot{justify-content:flex-start; margin-top:clamp(22px,3vw,30px)}
.ok__legal{margin-top:18px; font-size:.79rem; color:var(--mute-2); max-width:60ch}

/* entrada em cascata dos blocos da coluna de texto */
.ok__corpo > *{animation:oksobe .5s var(--ease) both}
.ok__corpo > *:nth-child(1){animation-delay:.05s}
.ok__corpo > *:nth-child(2){animation-delay:.12s}
.ok__corpo > *:nth-child(3){animation-delay:.19s}
.ok__corpo > *:nth-child(4){animation-delay:.26s}
.ok__corpo > *:nth-child(5){animation-delay:.33s}
.ok__corpo > *:nth-child(6){animation-delay:.40s}
.ok__corpo > *:nth-child(7){animation-delay:.47s}
.ok__corpo > *:nth-child(8){animation-delay:.54s}
@keyframes oksobe{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  .ok__mark, .ok__mark svg, .ok__corpo > *{animation:none}
  .ok__mark svg{stroke-dashoffset:0}
  .ok__confete{display:none}
}