/* ============================================================
   INNAP · Home
   Folha do layout aprovado, recuperada do modelo original.
   Só mudam as fontes (arquivos locais) e a textura (arquivo).
   ============================================================ */
@font-face{font-family:'NewBlack';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/NewBlackTypeface-SemiBold.otf) format('opentype')}
@font-face{font-family:'NewBlack';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/NewBlackTypeface-Regular.otf) format('opentype')}
@font-face{font-family:'Lenia Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/LeniaSans-Regular.ttf) format('truetype')}
@font-face{font-family:'Lenia Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/LeniaSans-SemiBold.ttf) format('truetype')}
@font-face{font-family:'Lenia Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/LeniaSans-Bold.ttf) format('truetype')}


/* ============================================================
   INNAP · Design System: editorial, mundo claro (Marfim)
   ============================================================ */
:root{
  --green:#0C6B5E; --green-2:#0a594f; --petrol:#003640;
  --graphite:#1F2626; --ochre:#C08A2E; --rose:#E5D2C0;
  --ivory:#F2EEE7; --paper:#FBFAF7; --white:#ffffff;
  --ink:#1F2626; --muted:#5c6a67;
  --line:rgba(31,38,38,.13); --line-2:rgba(31,38,38,.06);

  --display:"NewBlack","Arial Narrow",system-ui,sans-serif;
  --sans:"Lenia Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
  --label:"Lenia Sans",system-ui,sans-serif;

  --fs-hero:clamp(2.4rem,4.6vw,4.3rem);
  --fs-h2:clamp(1.85rem,3.6vw,2.9rem);
  --fs-h3:clamp(1.12rem,1.8vw,1.45rem);
  --fs-lead:clamp(1.02rem,1.35vw,1.2rem);
  --fs-body:1.05rem;
  --fs-eyebrow:.73rem;

  --gut:clamp(20px,5vw,64px);
  --sec:clamp(84px,11vw,152px);
  --radius:16px; --radius-lg:24px;
  --shadow:0 24px 60px -40px rgba(0,54,64,.26);
  --shadow-sm:0 10px 26px -20px rgba(0,54,64,.3);
  --ease:cubic-bezier(.22,.61,.36,1);
  --circuito:url("circuito-escuro.svg");
  --circuito-claro:url("circuito-claro.svg");
  --pattern:var(--circuito);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.62;font-weight:400;
  letter-spacing:-.003em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
::selection{background:var(--green);color:var(--ivory)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec);position:relative}
.eyebrow{font-family:var(--label);font-size:.84rem;font-weight:500;text-transform:none;
  letter-spacing:normal;color:var(--green);display:inline-flex;align-items:center;gap:.7em;margin:0}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.55}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--muted);font-weight:400}
.muted{color:var(--muted)}

.logo{height:26px;width:auto;display:block;color:var(--green)}
.logo.ivory{color:var(--ivory)}

/* ---- Botões ---- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans);font-weight:600;font-size:.97rem;
  letter-spacing:-.005em;padding:.9em 1.5em;border-radius:999px;position:relative;
  transition:transform .45s var(--ease),background .32s var(--ease),color .32s var(--ease),box-shadow .45s var(--ease),border-color .32s;white-space:nowrap}
.btn .arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-primary{background:var(--green);color:var(--ivory);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--petrol);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.btn-lg{padding:1.05em 1.85em;font-size:1rem}
.on-dark .btn-ghost{border-color:rgba(242,238,231,.3);color:var(--ivory)}
.on-dark .btn-ghost:hover{border-color:var(--ivory);color:var(--ivory)}
.on-dark .btn-primary{background:var(--ivory);color:var(--petrol)}
.on-dark .btn-primary:hover{background:var(--rose)}
.pill-mini{font-size:.9rem;padding:.55em .95em}

.tlink{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--green);font-size:.97rem;transition:gap .35s var(--ease),color .3s}
.tlink .arw{transition:transform .35s var(--ease)}
.tlink:hover{gap:.8em;color:var(--petrol)}
.tlink:hover .arw{transform:translateX(3px)}
.on-dark .tlink{color:var(--ivory)}
.on-dark .tlink:hover{color:var(--rose)}

/* ============================================================ HEADER */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;padding:16px 0;padding-top:calc(16px + env(safe-area-inset-top,0px));
  transition:background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease)}
.hdr.scrolled{background:rgba(242,238,231,.85);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line);padding-block:10px}
.hdr .wrap{display:flex;align-items:center;gap:24px}
.brand{flex-shrink:0;display:flex;align-items:center}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{padding:.55em .8em;border-radius:999px;font-weight:500;font-size:.94rem;color:var(--ink);transition:color .3s,background .3s}
.nav a:hover{color:var(--green);background:rgba(12,107,94,.07)}
.nav .has-menu{position:relative}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:6px}
.menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px;min-width:236px;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu a{display:flex;align-items:center;justify-content:space-between;padding:.6em .75em;border-radius:10px;font-weight:500;font-size:.92rem}
.menu a small{font-family:var(--label);font-size:.84rem;color:var(--muted);letter-spacing:normal;text-transform:none}
.menu .sep{height:1px;background:var(--line);margin:6px 4px}
.menu .see{color:var(--green);font-weight:600}
/* header sobre a foto do hero (antes do scroll) */
.hdr:not(.scrolled) .logo{color:var(--ivory)}
.hdr:not(.scrolled) .nav{background:rgba(31,38,38,.26);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 6px}
.hdr:not(.scrolled) .nav a{color:var(--ivory)}
.hdr:not(.scrolled) .nav a:hover{color:var(--ivory);background:rgba(255,255,255,.16)}
.hdr:not(.scrolled) .btn-ghost{border-color:rgba(255,255,255,.44);color:var(--ivory)}
.hdr:not(.scrolled) .btn-ghost:hover{border-color:var(--ivory);color:var(--ivory)}
.hdr:not(.scrolled) .burger{color:var(--ivory)}
.hdr:not(.scrolled) .burger:hover{background:rgba(255,255,255,.16)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;color:var(--ink)}
.burger:hover{background:rgba(12,107,94,.08)}
.burger svg{width:22px;height:22px}
.msheet{position:fixed;inset:0;z-index:60;background:var(--petrol);color:var(--ivory);transform:translateY(-100%);
  transition:transform .55s var(--ease);display:flex;flex-direction:column;padding:calc(22px + env(safe-area-inset-top,0px)) var(--gut) calc(28px + env(safe-area-inset-bottom,0px));overflow:auto}
.msheet.open{transform:translateY(0)}
.msheet-top{display:flex;align-items:center;justify-content:space-between}
.msheet-close{width:44px;height:44px;color:var(--ivory);border-radius:12px;display:flex;align-items:center;justify-content:center}
.msheet-close:hover{background:rgba(255,255,255,.1)}
.mnav{display:flex;flex-direction:column;margin:auto 0;gap:2px}
.mnav a{font-family:var(--display);font-size:clamp(1.7rem,7vw,2.5rem);font-weight:600;padding:.26em 0;color:var(--ivory);border-bottom:1px solid rgba(242,238,231,.14);transition:color .3s,padding-left .35s var(--ease)}
.mnav a:hover{color:var(--rose);padding-left:.3em}
.msheet-cta{display:flex;flex-direction:column;gap:12px;margin-top:24px}

/* ============================================================ HERO (editorial split) */
.hero{position:relative;background:var(--petrol);display:flex;align-items:center;min-height:clamp(620px,92vh,900px);overflow:hidden;padding-bottom:clamp(56px,6vw,88px)}
.hero-visual{position:absolute;inset:0;z-index:0}
.hslides{position:absolute;inset:0}
.hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hslide.is-on{opacity:1}
.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:58% 30%}
.hdots{position:absolute;right:clamp(18px,3vw,40px);bottom:clamp(120px,11vw,160px);z-index:3;display:flex;gap:8px}
.hdot{width:8px;height:8px;border-radius:999px;background:rgba(242,238,231,.5);border:0;padding:0;cursor:pointer;transition:background .35s var(--ease),width .35s var(--ease)}
.hdot.on{background:var(--ivory);width:24px}
.hero-visual::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(0,54,64,.88) 0%,rgba(0,54,64,.64) 32%,rgba(0,54,64,.24) 62%,rgba(0,54,64,.1) 100%)}
.hero-visual::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,54,64,.4) 0%,rgba(0,54,64,0) 26%,rgba(0,54,64,0) 60%,rgba(0,54,64,.34) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-text{max-width:660px;padding-block:clamp(110px,15vh,150px)}
.hero .eyebrow{color:var(--rose)}
.hero-eyebrow{margin-bottom:26px}
.hero h1{font-size:var(--fs-hero);font-weight:600;letter-spacing:-.018em;line-height:1.02;max-width:14ch;color:var(--ivory)}
.hero h1 .accent{color:var(--rose)}
h2 .accent{color:var(--green)}
.hero-sub{margin-top:26px;max-width:46ch;font-size:var(--fs-lead);color:rgba(242,238,231,.87);line-height:1.55}
.hero-cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
.hero-load{opacity:0;transform:translateY(18px);animation:rise 1s var(--ease) forwards}
.hero-eyebrow.hero-load{animation-delay:.05s}.hero h1.hero-load{animation-delay:.15s}.hero-sub.hero-load{animation-delay:.32s}.hero-cta.hero-load{animation-delay:.46s}
@keyframes rise{to{opacity:1;transform:none}}
@media (max-width:900px){
  .hero{min-height:clamp(560px,86vh,780px)}
  .hero-visual img{object-position:62% 24%}
  .hero-visual::before{background:linear-gradient(180deg,rgba(0,54,64,.6) 0%,rgba(0,54,64,.34) 38%,rgba(0,54,64,.78) 100%)}
  .hero-visual::after{background:none}
  .hero-text{padding-block:clamp(96px,16vh,130px);max-width:none}
  .hero h1{max-width:16ch}
  .hdots{bottom:clamp(96px,14vw,130px)}
}

/* ============================================================ BARRA INSTITUCIONAL */
.instwrap{position:relative;z-index:4;margin-top:calc(-1 * clamp(52px,6vw,88px))}
.instglass{display:grid;grid-template-columns:repeat(4,1fr);border-radius:22px;overflow:hidden;
  background:rgba(251,250,247,.74);backdrop-filter:blur(22px) saturate(1.45);-webkit-backdrop-filter:blur(22px) saturate(1.45);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 34px 80px -50px rgba(0,54,64,.55)}
.instcell{padding:clamp(22px,2.6vw,30px) clamp(15px,1.7vw,24px);position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:7px;min-height:112px}
.instcell + .instcell::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:rgba(31,38,38,.15)}
.instcell b{font-family:var(--display);font-size:clamp(.92rem,1.05vw,1.06rem);font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.2;text-wrap:balance}
.instcell span{font-size:.82rem;color:var(--muted);line-height:1.4;text-wrap:pretty}

/* ============================================================ TÍTULOS DE SEÇÃO */
.head{display:flex;flex-direction:column;gap:16px;max-width:56ch}
.head h2{font-size:var(--fs-h2)}
.head .lead{max-width:52ch}
.head-row{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:end;max-width:none}
.head-row .head{gap:14px}
.head-row .lead{max-width:40ch;padding-bottom:.35em}
@media (max-width:820px){.head-row{grid-template-columns:1fr;align-items:start;gap:16px}.head-row .lead{max-width:52ch}}

/* ============================================================ PONTO DE PARTIDA */
.profiles{margin-top:clamp(48px,5vw,64px);display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(22px,3vw,44px);align-items:stretch}
.profile-tabs{display:flex;flex-direction:column;gap:12px}
.ptab{display:flex;align-items:center;gap:16px;text-align:left;padding:22px 24px;border-radius:var(--radius);border:1px solid var(--line);background:var(--paper);transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.ptab:hover{transform:translateX(4px)}
.ptab .num{font-family:var(--label);font-size:.84rem;font-weight:400;color:var(--muted);letter-spacing:normal}
.ptab .lbl{font-family:var(--display);font-weight:600;font-size:1.12rem}
.ptab .dot{margin-left:auto;width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .35s,box-shadow .35s}
.ptab[aria-selected="true"]{border-color:var(--green);box-shadow:var(--shadow-sm)}
.ptab[aria-selected="true"] .dot{background:var(--ochre);box-shadow:0 0 0 5px rgba(192,138,46,.16)}
.ptab[aria-selected="true"] .lbl{color:var(--green)}
.profile-panel{border-radius:var(--radius-lg);background:var(--petrol);color:var(--ivory);padding:clamp(30px,4vw,50px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:290px}
.profile-panel .pp-eye{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--rose)}
.profile-panel h3{font-size:clamp(1.5rem,2.7vw,2.05rem);color:var(--ivory);max-width:17ch;margin-top:14px}
.profile-panel p{color:rgba(242,238,231,.74);margin-top:14px;max-width:42ch}

/* ============================================================ NATUROPATIA */
.anchor{background:var(--petrol);color:var(--ivory);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.anchor::before{content:"";position:absolute;inset:0;background-image:var(--pattern);background-size:360px 360px;pointer-events:none}
.anchor-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,70px);padding:clamp(40px,5.5vw,80px);align-items:center;position:relative;z-index:1}
.anchor .kicker{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.anchor .kicker .n{font-family:var(--display);font-size:clamp(2.4rem,5vw,4rem);font-weight:600;color:var(--ochre);line-height:.8}
.anchor .kicker .meta{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;color:var(--rose);text-transform:none;line-height:1.55}
.anchor h2{font-size:clamp(1.85rem,3.4vw,2.7rem);color:var(--ivory);max-width:17ch}
.anchor .eyebrow{color:var(--rose)}
.anchor p{color:rgba(242,238,231,.76);margin-top:22px;max-width:44ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;text-transform:none;padding:.6em 1em;border:1px solid rgba(242,238,231,.24);border-radius:999px;color:var(--ivory)}
.anchor-side{border-left:1px solid rgba(242,238,231,.16);padding-left:clamp(0px,3vw,48px)}
.anchor-side .big{font-family:var(--display);font-size:clamp(3.2rem,6.5vw,5.6rem);font-weight:600;color:var(--ivory);line-height:.88;font-variant-numeric:tabular-nums}
.anchor-side .big.two{color:var(--ochre)}
.anchor-side .lbl{font-size:.9rem;color:rgba(242,238,231,.6);margin-top:6px;margin-bottom:28px;display:block}
.anchor .btn{margin-top:34px}

/* ============================================================ OUTRAS FORMAÇÕES */
.flist{margin-top:clamp(48px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.fitem{padding:clamp(30px,3vw,40px) clamp(22px,2vw,30px);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.fitem:first-child{border-left:0;padding-left:0}
.fitem:last-child{padding-right:0}
.fitem .ic{width:32px;height:32px;color:var(--green)}
.fitem .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fitem .tag{font-family:var(--label);font-size:.84rem;font-weight:400;color:var(--muted);letter-spacing:normal;text-transform:none}
.fitem h3{font-size:1.3rem}
.fitem .desc{color:var(--muted);font-size:.93rem;line-height:1.6;flex:1}
.fitem .desc strong{color:var(--ink);font-weight:600;display:block;margin-bottom:5px}
.fitem .tlink{margin-top:6px}
.formacoes-foot{margin-top:clamp(40px,4vw,52px);display:flex;justify-content:center}

/* ---- Faixa verde com o pattern de trajetórias ---- */
.band{background:var(--green);color:var(--ivory);position:relative;overflow:hidden}
.band > .wrap{position:relative;z-index:1}
.band .eyebrow{color:var(--rose)}
.band h2{color:var(--ivory)}
.band h2 .accent{color:var(--rose)}
.band .lead{color:rgba(242,238,231,.78)}
.band .flist{border-top-color:rgba(242,238,231,.24)}
.band .fitem{border-left-color:rgba(242,238,231,.24)}
.band .fitem .ic{color:var(--rose)}
.band .fitem .tag{color:rgba(242,238,231,.62)}
.band .fitem h3{color:var(--ivory)}
.band .fitem .desc{color:rgba(242,238,231,.74)}
.band .fitem .desc strong{color:var(--ivory)}
@media (max-width:900px){.band .fitem{border-top-color:rgba(242,238,231,.24)}}
@media (max-width:900px){
  .flist{grid-template-columns:1fr 1fr;border-top:0}
  .fitem{border-left:0;border-top:1px solid var(--line);padding:28px 0}
  .fitem:nth-child(even){border-left:1px solid var(--line);padding-left:28px}
  .fitem:last-child{padding-right:0}
}
@media (max-width:560px){
  .flist{grid-template-columns:1fr}
  .fitem:nth-child(even){border-left:0;padding-left:0}
}

/* ============================================================ PROCESSO / TRAJETÓRIA
   Caminho com as curvas da marca, desenhado conforme o scroll. */
.proc{margin-top:clamp(46px,5vw,64px);position:relative}
.proc-rail{display:block;width:100%;height:70px}
.proc-rail .p-bg{fill:none;stroke:rgba(31,38,38,.19);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.proc-rail .p-fg{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.proc-rail .p-halo{fill:rgba(12,107,94,.12);opacity:0;transition:opacity .5s var(--ease)}
.proc-rail .p-dot{fill:var(--ivory);stroke:var(--line);stroke-width:2;transition:fill .5s var(--ease),stroke .5s var(--ease)}
.proc-rail .on .p-dot{fill:var(--green);stroke:var(--green)}
.proc-rail .on .p-halo{opacity:1}
.proc-cols{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:0}
.pcol{padding-right:clamp(18px,2.4vw,34px)}
.pcol .k{display:block;font-family:var(--display);font-size:clamp(1.8rem,2.5vw,2.4rem);font-weight:600;color:var(--green);
  opacity:.26;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:opacity .55s var(--ease)}
.pcol.on .k{opacity:1}
.pcol h4{font-family:var(--display);font-size:1.1rem;font-weight:600;margin:16px 0 8px}
.pcol p{font-size:.92rem;color:var(--muted);line-height:1.55;max-width:23ch}
.proc--years .pcol .k{font-size:clamp(1.3rem,1.8vw,1.7rem)}
@media (max-width:900px){
  .proc-rail{display:none}
  .proc-cols{grid-template-columns:repeat(2,1fr);gap:30px 14px}
  .pcol .k{opacity:1}
  .pcol{padding-top:22px;border-top:1px solid var(--line)}
}
@media (max-width:560px){.proc-cols{grid-template-columns:1fr}}
.exp-grid{margin-top:clamp(32px,4vw,44px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.exp{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:10px}
.exp .t{font-family:var(--label);font-size:.84rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--green)}
.exp h4{font-family:var(--display);font-weight:600;font-size:1.1rem}
.exp p{font-size:.92rem;color:var(--muted);line-height:1.55}
.sec-foot{margin-top:clamp(32px,4vw,44px)}

/* ============================================================ CERTIFICAÇÃO */
.mods{margin-top:clamp(48px,5vw,60px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mod{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(28px,3vw,38px);background:var(--paper);display:flex;flex-direction:column;gap:16px;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.mod:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.mod .mtag{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--muted)}
.mod h3{font-size:1.5rem}
.mod .who{display:flex;align-items:center;gap:10px;padding:.75em .9em;background:var(--ivory);border-radius:12px;font-size:.9rem;font-weight:600;line-height:1.3}
.mod .who .b{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
.mod .who.fam .b{background:var(--ochre)}
.mod p{font-size:.94rem;color:var(--muted);line-height:1.55}

/* ============================================================ PROFESSORES */
.profs{margin-top:clamp(48px,5vw,60px);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prof{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/3.8;display:flex;align-items:flex-end;
  background:linear-gradient(155deg,var(--rose),#e7dccd 55%,#d9ccb9);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.prof:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.prof .mono{position:absolute;left:0;right:0;top:0;bottom:30%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:clamp(3rem,4.6vw,4.2rem);color:var(--green);opacity:.85}
.prof .ph-tag{position:absolute;top:16px;right:18px;font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--graphite);opacity:.38;z-index:2}
.prof .pinfo{position:relative;z-index:2;width:100%;padding:70px 22px 22px;background:linear-gradient(180deg,rgba(31,38,38,0),rgba(31,38,38,.78) 70%);color:var(--ivory)}
.prof .area{font-family:var(--label);font-size:.84rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--rose)}
.prof h3{font-size:1.14rem;margin-top:7px;color:var(--ivory);line-height:1.2}
.prof-cta{background:var(--green)}
.prof-cta .pinfo{background:none;padding:24px 22px}
.prof-cta .arw{position:absolute;top:20px;right:22px;z-index:2;color:var(--ivory);font-size:1.15rem;transition:transform .45s var(--ease)}
.prof-cta:hover .arw{transform:translate(3px,-3px)}

/* ============================================================ CONTEÚDOS */
.arts{margin-top:clamp(48px,5vw,60px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.art{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(28px,3vw,36px);background:var(--paper);display:flex;flex-direction:column;gap:14px;min-height:290px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.art:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.art .kicker{font-family:var(--label);font-size:.84rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--ochre)}
.art h3{font-size:1.28rem;line-height:1.15}
.art p{font-size:.95rem;color:var(--muted);line-height:1.6;flex:1}

/* ============================================================ CTA FINAL */
.cta-final{background:var(--green);color:var(--ivory);border-radius:var(--radius-lg);padding:clamp(48px,7vw,100px) clamp(30px,5vw,80px);text-align:center;position:relative;overflow:hidden}
.cta-final::before{content:"";position:absolute;inset:0;background-image:var(--pattern);background-size:360px 360px;pointer-events:none}
.cta-final > *{position:relative;z-index:1}
.cta-final .eyebrow{color:var(--rose);justify-content:center}
.cta-final h2{font-size:clamp(2rem,4.4vw,3.4rem);color:var(--ivory);max-width:19ch;margin:22px auto 0}
.cta-final p{color:rgba(242,238,231,.84);max-width:50ch;margin:24px auto 0;font-size:var(--fs-lead)}
.cta-final .row{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============================================================ FOOTER */
.foot{background:var(--graphite);color:var(--ivory)}
.foot .wrap{padding-block:clamp(56px,7vw,84px)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(242,238,231,.14)}
.foot .logo{margin-bottom:22px}
.foot-top .lead{color:rgba(242,238,231,.64);max-width:34ch;font-size:1rem}
.fcol h5{font-family:var(--label);font-size:.84rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--rose);margin:0 0 18px}
.fcol a{display:block;padding:.34em 0;color:rgba(242,238,231,.78);font-size:.96rem;transition:color .3s,padding-left .35s var(--ease)}
.fcol a:hover{color:var(--ivory);padding-left:.35em}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;padding-top:32px;font-size:.86rem;color:rgba(242,238,231,.56)}
.foot-bot .legal{display:flex;gap:20px;align-items:center}
.foot-bot .legal a:hover{color:var(--ivory)}

/* ============================================================ MODAL */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:center}
.modal.open{display:flex}
.modal-scrim{position:absolute;inset:0;background:rgba(0,54,64,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s}
.modal.open .modal-scrim{opacity:1}
.modal-card{position:relative;width:100%;max-width:640px;max-height:92vh;overflow:auto;background:var(--ivory);border-radius:24px 24px 0 0;padding:clamp(28px,4vw,44px);transform:translateY(30px);opacity:0;transition:transform .5s var(--ease),opacity .4s}
.modal.open .modal-card{transform:none;opacity:1}
@media(min-width:720px){.modal{align-items:center}.modal-card{border-radius:24px;margin:20px}}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.modal-head h3{font-size:clamp(1.5rem,3vw,1.95rem);max-width:15ch}
.modal-head .eyebrow{margin-bottom:12px}
.mclose{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s,transform .3s}
.mclose:hover{background:var(--paper);transform:rotate(90deg)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.82rem;font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{font:inherit;font-size:.96rem;padding:.8em .9em;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);transition:border-color .3s,box-shadow .3s;width:100%}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(12,107,94,.1)}
.check{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--muted);line-height:1.45}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--green);flex-shrink:0}
.form-foot{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.form-note{font-size:.8rem;color:var(--muted);text-align:center}
.form-success{text-align:center;padding:30px 0}
.form-success .ok{width:64px;height:64px;border-radius:50%;background:var(--green);color:var(--ivory);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.form-success h3{font-size:1.55rem;margin-bottom:12px}
.form-success p{color:var(--muted);max-width:36ch;margin:0 auto}

/* ============================================================ REVEAL (JS-gated) */
.js-reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-reveal.in{opacity:1;transform:none}

/* ============================================================ RESPONSIVO */
@media (max-width:960px){
  .nav{display:none}.burger{display:flex}
  .profiles{grid-template-columns:1fr}
  .anchor-inner{grid-template-columns:1fr;gap:32px}
  .anchor-side{border-left:0;border-top:1px solid rgba(242,238,231,.16);padding-left:0;padding-top:30px;display:flex;gap:44px;flex-wrap:wrap;align-items:center}
  .anchor-side .btn{margin-top:0}
  .exp-grid{grid-template-columns:1fr}
  .mods{grid-template-columns:1fr}
  .profs{grid-template-columns:1fr 1fr}
  .arts{grid-template-columns:1fr}
  .instwrap{margin-top:-44px}
  .instglass{grid-template-columns:1fr 1fr}
  .instcell:nth-child(3)::before{display:none}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .profs{grid-template-columns:1fr}
  .instglass{grid-template-columns:1fr}
  .instcell + .instcell::before{display:none}
  .instcell{border-top:1px solid rgba(31,38,38,.1)}
  .instcell:first-child{border-top:0}
  .foot-top{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero-load{opacity:1!important;transform:none!important}
  .js-reveal{opacity:1!important;transform:none!important}
}

/* ============================================================ MOVIMENTO
   Esconde só quando a animação assume. Sem script, a página é inteira. */
.anim [data-reveal]{opacity:0}
.anim [data-reveal].in{opacity:1}
.palavra{display:inline-block;overflow:hidden;vertical-align:top}
.palavra__i{display:inline-block;will-change:transform}
.hero h1 .accent .palavra__i{color:var(--rose)}
@media (prefers-reduced-motion:reduce){
  .anim [data-reveal]{opacity:1}
}

/* foto real no cartão de professor, no lugar das iniciais */
.prof-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.prof:hover .prof-img{transform:scale(1.045)}
.prof .pinfo{background:linear-gradient(180deg,rgba(31,38,38,0),rgba(31,38,38,.82) 68%)}

/* três pilares sob o CTA do hero: linha discreta, não compete com o título */
.hero-notes{
  display:flex;flex-wrap:wrap;gap:clamp(22px,3.2vw,46px);
  margin-top:clamp(34px,4vw,52px);padding-top:26px;
  border-top:1px solid rgba(242,238,231,.18);max-width:660px;
}
.hero-notes > div{display:flex;flex-direction:column;gap:5px;max-width:190px}
.hero-notes span{
  font-family:var(--label);font-size:.84rem;font-weight:400;
  text-transform:none;letter-spacing:normal;color:var(--rose);
}
.hero-notes b{font-weight:400;font-size:.9rem;line-height:1.45;color:rgba(242,238,231,.8)}
@media (max-width:640px){.hero-notes > div{max-width:none;flex:1 1 100%}}

/* ============================================================
   AJUSTES DA REVISÃO
   ============================================================ */

/* sem traço decorativo antes do eyebrow */
.eyebrow::before{display:none}
.eyebrow{gap:0}

/* ---------------------------------------------------------- hero: cartões flutuantes
   Sem script eles são uma linha sob o CTA. Com script, sobem para
   cima da foto e se revezam, um de cada vez, em pontos diferentes. */
.hero-flut{
  display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(32px,4vw,48px);padding-top:24px;
  border-top:1px solid rgba(242,238,231,.16);max-width:660px;
}
.hero-flut__item{display:flex;flex-direction:column;gap:5px;flex:1 1 170px;max-width:210px}
.hero-flut__item span{
  font-family:var(--label);font-size:.84rem;font-weight:400;
  text-transform:none;letter-spacing:normal;color:var(--rose);
}
.hero-flut__item b{font-weight:400;font-size:.9rem;line-height:1.45;color:rgba(242,238,231,.82)}

.anim .hero-flut{
  position:absolute;inset:0;margin:0;padding:0;border:0;max-width:none;
  display:block;pointer-events:none;z-index:3;
}
/* ancorados pela base e pela direita: assim nunca sobem para o rosto,
   qualquer que seja a altura do hero */
.anim .hero-flut__item{
  position:absolute;right:var(--r);bottom:var(--b);left:auto;top:auto;
  width:min(268px,26vw);max-width:none;
  background:rgba(251,250,247,.94);backdrop-filter:blur(14px) saturate(1.3);
  border-radius:16px;padding:18px 20px;gap:7px;
  box-shadow:0 26px 60px -34px rgba(0,54,64,.65);
  opacity:0;transform:translateY(14px) scale(.97);
}
.anim .hero-flut__item span{color:var(--green)}
.anim .hero-flut__item b{color:var(--ink);font-size:.95rem}
@media (max-width:1100px){
  .anim .hero-flut{position:static;display:flex;flex-wrap:wrap;gap:18px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(242,238,231,.16);max-width:660px}
  .anim .hero-flut__item{position:static;width:auto;flex:1 1 170px;max-width:210px;background:none;backdrop-filter:none;box-shadow:none;padding:0;border-radius:0;opacity:1;transform:none}
  .anim .hero-flut__item span{color:var(--rose)}
  .anim .hero-flut__item b{color:rgba(242,238,231,.82);font-size:.9rem}
}

/* ---------------------------------------------------------- ponto de partida
   Lista editorial, não aba com card. Clica e a linha abre. */
.jornada{margin-top:clamp(40px,4.5vw,60px);border-top:1px solid var(--line)}
.jornada__bloco{border-bottom:1px solid var(--line)}
.jornada__linha{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(16px,2.4vw,34px);padding:clamp(22px,2.6vw,30px) 0;
  text-align:left;cursor:pointer;background:none;border:0;
  transition:padding-left .4s var(--ease),color .3s;
}
.jornada__linha:hover{padding-left:10px}
.jornada__n{
  font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  color:var(--muted);transition:color .3s;
}
.jornada__rot{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.25rem,2.2vw,1.85rem);line-height:1.1;letter-spacing:-.01em;
  color:var(--ink);transition:color .3s;
}
.jornada__sinal{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);
  transition:transform .45s var(--ease),border-color .3s,background .3s,color .3s;
}
.jornada__sinal svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.jornada__bloco.is-active .jornada__n{color:var(--ochre)}
.jornada__bloco.is-active .jornada__rot{color:var(--green)}
.jornada__bloco.is-active .jornada__sinal{transform:rotate(45deg);background:var(--green);border-color:var(--green);color:var(--ivory)}

.jornada__painel{overflow:hidden;height:0}
.jornada__dentro{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,64px);
  padding:0 0 clamp(30px,3.4vw,42px);align-items:start;
}
.jornada__dentro h3{
  font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.12;max-width:17ch;color:var(--ink);
}
.jornada__dentro p{color:var(--muted);max-width:42ch;margin-bottom:18px}
@media (max-width:820px){.jornada__dentro{grid-template-columns:1fr;gap:18px}}

/* ---------------------------------------------------------- curso em destaque
   Painel com a trama à esquerda, texto legível à direita. */
.destaque{
  margin-top:clamp(40px,4.5vw,60px);
  display:grid;grid-template-columns:.86fr 1.14fr;
  border-radius:var(--radius-lg);overflow:hidden;background:var(--paper);
  box-shadow:0 30px 70px -52px rgba(0,54,64,.5);
}
.destaque__visual{
  position:relative;background:var(--petrol);min-height:clamp(380px,42vw,520px);
  display:flex;align-items:flex-end;padding:clamp(26px,2.6vw,36px);
}
.destaque__visual::before{
  content:"";position:absolute;inset:0;
  background-image:var(--pattern);background-size:330px 330px;opacity:.9;
}
.destaque__visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,54,64,0) 45%,rgba(0,54,64,.78) 100%);
}
.destaque__n{
  position:absolute;top:clamp(24px,2.4vw,34px);left:clamp(26px,2.6vw,36px);z-index:2;
  font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  color:rgba(242,238,231,.65);
}
.destaque__nome{position:relative;z-index:2}
.destaque__nome h3{
  font-size:clamp(2.1rem,3.6vw,3rem);line-height:1;color:var(--ivory);letter-spacing:-.02em;
}
.destaque__nome span{
  display:block;margin-top:10px;font-family:var(--label);font-size:.84rem;font-weight:400;
  text-transform:none;letter-spacing:normal;color:var(--rose);
}
.destaque__copy{padding:clamp(34px,3.6vw,56px);display:flex;flex-direction:column;gap:18px;justify-content:center}
.destaque__copy h2{font-size:clamp(1.7rem,2.9vw,2.4rem);max-width:19ch}
.destaque__copy p{color:var(--muted);max-width:46ch}
.destaque__nums{display:flex;gap:clamp(26px,3vw,48px);margin-top:6px}
.destaque__nums b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(2.1rem,3.4vw,3rem);line-height:1;color:var(--green);letter-spacing:-.02em;
}
.destaque__nums span{display:block;margin-top:6px;font-size:.86rem;color:var(--muted)}
.destaque__nums div:last-child b{color:var(--ochre)}
.destaque .chips .chip{border-color:var(--line);color:var(--ink)}
.destaque .btn{align-self:flex-start;margin-top:8px}
@media (max-width:900px){
  .destaque{grid-template-columns:1fr}
  .destaque__visual{min-height:280px}
}

/* ---------------------------------------------------------- linha do tempo */
.tempo{
  display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(34px,5vw,86px);align-items:start;
  margin-top:clamp(40px,4.5vw,58px);
}
.tempo__texto h2{font-size:clamp(2rem,3.8vw,3.1rem);max-width:13ch;color:var(--ivory)}
.tempo__texto p{color:rgba(242,238,231,.76);max-width:44ch;margin-top:20px}
.tempo__texto .btn{margin-top:30px}
.tempo__frase{
  margin-top:clamp(34px,4vw,50px);padding-top:26px;
  border-top:1px solid rgba(242,238,231,.18);
  font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.35rem);
  line-height:1.3;color:var(--rose);max-width:26ch;
}
.tempo__lista{list-style:none;margin:0;padding:0 0 0 clamp(26px,2.6vw,38px);position:relative}
.tempo__lista::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;
  background:rgba(242,238,231,.22);
}
.tempo__lista .tempo__prog{
  content:"";position:absolute;left:0;top:8px;width:1px;height:0;
  background:var(--ochre);
}
.tempo__item{position:relative;padding-bottom:clamp(30px,3.4vw,44px)}
.tempo__item:last-child{padding-bottom:0}
.tempo__item::before{
  content:"";position:absolute;left:calc(-1 * clamp(26px,2.6vw,38px) - 4.5px);top:9px;
  width:10px;height:10px;border-radius:50%;background:var(--petrol);
  border:2px solid rgba(242,238,231,.3);transition:background .4s,border-color .4s,transform .4s var(--ease);
}
.tempo__item.on::before{background:var(--ochre);border-color:var(--ochre);transform:scale(1.15)}
.tempo__ano{
  font-family:var(--label);font-size:.84rem;font-weight:400;
  text-transform:none;letter-spacing:normal;color:var(--rose);
}
.tempo__item h4{margin-top:8px;font-size:clamp(1.1rem,1.7vw,1.4rem);color:var(--ivory)}
.tempo__item p{margin-top:8px;color:rgba(242,238,231,.74);font-size:.95rem;max-width:44ch}
@media (max-width:900px){.tempo{grid-template-columns:1fr}}

/* ---------------------------------------------------------- próximas turmas */
.turmas{
  margin-top:clamp(36px,4vw,52px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.turma{
  padding:clamp(24px,2.6vw,34px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;
  transition:background .4s var(--ease);
}
.turma:hover{background:var(--paper)}
.turma__data{
  font-family:var(--label);font-size:.84rem;font-weight:400;
  letter-spacing:normal;color:var(--ochre);
}
.turma h4{font-size:1.16rem;color:var(--ink)}
.turma p{font-size:.92rem;color:var(--muted)}

/* ---------------------------------------------------------- chamada final
   Faixa inteira, sem bloco arredondado dentro do container. */
.final{
  position:relative;background:var(--green);color:var(--ivory);
  padding-block:clamp(72px,9vw,124px);padding-inline:var(--gut);
  text-align:center;overflow:hidden;
}
.final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--pattern);background-size:360px 360px;opacity:.55;
}
.final > div{position:relative;z-index:1;max-width:1200px;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.final .eyebrow{color:var(--rose);justify-content:center}
.final h2{font-size:clamp(2rem,4.4vw,3.4rem);color:var(--ivory);max-width:19ch;margin-top:20px}
.final p{color:rgba(242,238,231,.86);max-width:50ch;margin-top:22px;font-size:var(--fs-lead)}
.final .row{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============================================================
   SEGUNDA REVISÃO
   ============================================================ */

/* ---- jornada: marcar no hover, foco discreto, painel com respiro ---- */
.jornada__linha:focus-visible{outline:none}
.jornada__linha:focus-visible .jornada__rot{text-decoration:underline;text-underline-offset:6px}
.jornada__bloco{transition:background .35s var(--ease)}
.jornada__bloco:hover{background:rgba(12,107,94,.045)}
.jornada__bloco:hover .jornada__rot{color:var(--green)}
.jornada__bloco:hover .jornada__n{color:var(--ochre)}
.jornada__bloco:hover .jornada__sinal{border-color:var(--green);color:var(--green)}
.jornada__bloco.is-active{background:rgba(12,107,94,.05)}
.jornada__linha{padding-inline:clamp(14px,1.6vw,22px)}
.jornada__dentro{padding:6px clamp(14px,1.6vw,22px) clamp(30px,3.4vw,42px)}

/* ---- trilho: o texto de cada etapa aparece quando a linha chega ---- */
.anim .pcol h4,.anim .pcol p{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.anim .pcol.on h4,.anim .pcol.on p{opacity:1;transform:none}
.anim .pcol.on p{transition-delay:.08s}

/* ---- linha do tempo: bolinha centrada no fio ---- */
.tempo__item::before{left:calc(-1 * clamp(26px,2.6vw,38px) - 7px)}
.anim .tempo__item h4,.anim .tempo__item p,.anim .tempo__ano{
  opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.anim .tempo__item.on h4,.anim .tempo__item.on p,.anim .tempo__item.on .tempo__ano{opacity:1;transform:none}
.anim .tempo__item.on h4{transition-delay:.06s}
.anim .tempo__item.on p{transition-delay:.12s}

/* ---- próximas turmas: três por linha, fica equilibrado ---- */
.turmas{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.turmas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.turmas{grid-template-columns:1fr}}

/* ---- conteúdos: respiro depois da faixa escura ---- */
#conteudos{padding-top:var(--sec)!important}

/* faixa da linha do tempo: petróleo, para não repetir o verde */
.tempo-sec{position:relative;background:var(--petrol);color:var(--ivory);overflow:hidden}
.tempo-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--pattern);background-size:360px 360px;opacity:.5;
}
.tempo-sec > .wrap{position:relative;z-index:1}

/* ============================================================
   TERCEIRA REVISÃO · copy do protótipo v0.12
   ============================================================ */

/* menu de formações no cabeçalho */
.menu .menu-nota{display:block;padding:0 .75em .6em;font-family:var(--sans);font-size:.8rem;
  line-height:1.45;color:var(--muted);letter-spacing:0;text-transform:none}
@media (max-width:1180px){.hdr .nav-cta .portal{display:none}}

/* a vitrine passou a ter seis formações: três por linha */
.flist{grid-template-columns:repeat(3,1fr)}
.fitem{border-left:1px solid var(--line)}
.fitem:nth-child(3n+1){border-left:0;padding-left:0}
.fitem:nth-child(3n){padding-right:0}
.fitem:nth-child(n+4){border-top:1px solid var(--line)}
.band .fitem{border-left-color:rgba(242,238,231,.24)}
.band .fitem:nth-child(n+4){border-top-color:rgba(242,238,231,.24)}
@media (max-width:900px){
  .flist{grid-template-columns:1fr 1fr}
  .fitem,.fitem:nth-child(3n+1){border-left:0;border-top:1px solid var(--line);padding-left:0}
  .fitem:nth-child(even){border-left:1px solid var(--line);padding-left:28px}
  .fitem:nth-child(3n){padding-right:0}
  .band .fitem{border-top-color:rgba(242,238,231,.24)}
}
@media (max-width:620px){
  .flist{grid-template-columns:1fr}
  .fitem:nth-child(even){border-left:0;padding-left:0}
}

/* assinatura institucional na seção de história */
figure.tempo__frase{margin:0}
figure.tempo__frase blockquote{margin:0;font-family:var(--display);font-size:clamp(1.05rem,1.5vw,1.28rem);
  line-height:1.4;color:var(--ivory)}
figure.tempo__frase figcaption{margin-top:10px;font-family:var(--label);font-size:.84rem;font-weight:400;
  letter-spacing:normal;text-transform:none;color:rgba(242,238,231,.66)}

/* atalho de teclado para o conteúdo */
.pular{position:absolute;left:-9999px;top:0;z-index:100;background:var(--green);color:var(--ivory);
  padding:.75em 1.2em;border-radius:0 0 12px 0;font-weight:600}
.pular:focus{left:0}

/* painel de navegação no celular */
body.menu-aberto{overflow:hidden}
.mob{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;flex-direction:column;
  padding:20px var(--gut) 40px;overflow-y:auto;overscroll-behavior:contain}
.mob[hidden]{display:none}
.mob__topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.mob__topo .logo{color:var(--green)}
.mob__topo .burger{display:flex;color:var(--ink)}
.mob nav{display:flex;flex-direction:column}
.mob nav a{padding:.78em 0;border-bottom:1px solid var(--line);font-family:var(--display);
  font-size:1.3rem;font-weight:600;color:var(--ink)}
.mob nav a.mob__sub{font-family:var(--sans);font-size:1rem;font-weight:500;color:var(--muted);padding-left:16px}
.mob nav a.btn{margin-top:26px;border-bottom:0;justify-content:center;font-family:var(--sans);font-size:1rem}

/* pedido de orientação */
.lead{border:0;padding:0;background:transparent;max-width:min(860px,94vw);width:100%}
.lead::backdrop{background:rgba(31,38,38,.62);backdrop-filter:blur(3px)}
.lead__caixa{position:relative;background:var(--paper);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:clamp(26px,3.4vw,44px);max-height:88vh;overflow-y:auto}
.lead__x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:var(--muted)}
.lead__x:hover{background:rgba(12,107,94,.08);color:var(--green)}
.lead__x svg{width:20px;height:20px}
.lead__copy{max-width:52ch;margin-bottom:28px}
.lead__copy h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:12px 0 10px}
.lead__form{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.lead__form label{display:flex;flex-direction:column;gap:7px;font-family:var(--label);
  font-size:.72rem;font-weight:600;letter-spacing:normal;text-transform:none;color:var(--muted)}
.lead__form input,.lead__form select,.lead__form textarea{font:inherit;font-size:.98rem;
  letter-spacing:0;text-transform:none;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:12px;padding:.72em .9em;width:100%}
.lead__form textarea{resize:vertical;line-height:1.55}
.lead__form input:focus-visible,.lead__form select:focus-visible,.lead__form textarea:focus-visible{border-color:var(--green)}
.lead__full{grid-column:1/-1}
.lead__aceite{flex-direction:row;align-items:flex-start;gap:10px;font-family:var(--sans);
  font-size:.92rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);line-height:1.5}
.lead__aceite input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--green)}
.lead__form .btn{justify-content:center}
.lead__nota{font-size:.86rem;color:var(--muted);line-height:1.55}
.lead__ok{text-align:center;padding:24px 0 8px;display:flex;flex-direction:column;align-items:center;gap:12px}
.lead__selo{width:52px;height:52px;border-radius:50%;background:rgba(12,107,94,.1);color:var(--green);
  display:flex;align-items:center;justify-content:center}
.lead__selo svg{width:26px;height:26px}
.lead__ok h3{font-size:1.4rem}
.lead__ok p{color:var(--muted);max-width:44ch}
@media (max-width:680px){.lead__form{grid-template-columns:1fr}}
.nav .has-menu > a{display:inline-flex;align-items:center;gap:.4em}
.nav .caret{width:12px;height:12px;transition:transform .3s var(--ease)}
.has-menu:hover .caret,.has-menu:focus-within .caret{transform:rotate(180deg)}

/* no celular o CTA do cabeçalho vaza ao lado do botão de menu;
   ele continua no painel móvel */
@media (max-width:560px){.hdr .nav-cta .btn-primary{display:none}}

/* ============================================================
   QUARTA REVISÃO
   ============================================================ */

/* as provas do hero foram redistribuídas: o número na chamada final,
   as modalidades na seção de modalidades, a institucional no rodapé */
.mods__rotulo{display:flex;align-items:center;gap:16px;margin-top:clamp(34px,3.6vw,44px)}
.mods__rotulo span{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--green);white-space:nowrap}
.mods__rotulo::after{content:"";flex:1;height:1px;background:var(--line)}
.mods{margin-top:clamp(20px,2.2vw,26px)}

.final__prova{display:flex;align-items:baseline;justify-content:center;gap:10px;
  margin-top:clamp(26px,3vw,34px)}
.final__prova b{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600;color:var(--ivory)}
.final__prova span{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:rgba(242,238,231,.66)}

.foot-prova{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px}
.foot-prova span{position:relative;font-family:var(--label);font-size:.84rem;font-weight:400;
  letter-spacing:normal;text-transform:none;color:rgba(242,238,231,.62)}
.foot-prova span + span::before{content:"";position:absolute;left:-12px;top:50%;
  width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.7}

/* citação da história: virou um bloco com peso próprio, em Lenia Sans,
   porque as aspas curvas da NewBlack saíam com cara de trema */
figure.tempo__frase{
  margin:clamp(50px,5.5vw,78px) 0 0;
  padding:clamp(30px,3.2vw,42px) 0 0;
  border:0;border-top:1px solid rgba(242,238,231,.18);
  border-radius:0;background:none;max-width:none;
  text-align:center;
}
figure.tempo__frase blockquote{
  margin:0 auto;max-width:32ch;
  font-family:var(--sans);font-weight:600;
  font-size:clamp(1.18rem,2vw,1.62rem);line-height:1.38;letter-spacing:-.008em;
  color:var(--ivory);text-wrap:balance;
}
figure.tempo__frase figcaption{margin-top:16px;font-family:var(--label);font-size:.84rem;font-weight:400;
  letter-spacing:normal;text-transform:none;color:var(--rose);opacity:.8}

/* as bolinhas do trilho acendem uma a uma, com um pulso curto */
.proc-rail g{transform-box:fill-box;transform-origin:center}

.proc-rail g.on{animation:proc-pulso .5s var(--ease)}
@keyframes proc-pulso{0%{transform:scale(1)}38%{transform:scale(1.5)}100%{transform:scale(1)}}
.proc-rail .on .p-halo{opacity:1}
@media (prefers-reduced-motion:reduce){.proc-rail g.on{animation:none}}

/* hover nos cartões: leve, só o suficiente para marcar que é um bloco */
.mod:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(12,107,94,.3)}
.mod .who{transition:background .35s var(--ease)}
.mod:hover .who{background:rgba(12,107,94,.1)}
.art:hover{transform:translateY(-6px)}
.art .tlink{transition:gap .35s var(--ease),color .3s}
.art:hover .tlink{gap:.85em;color:var(--petrol)}
.art .kicker{transition:color .35s var(--ease)}
.art:hover .kicker{color:var(--green)}
/* as turmas dividem as linhas da grade, então aqui o hover não levanta
   o cartão: ele acende a data e clareia o fundo */
.turma > *{transition:color .35s var(--ease),transform .4s var(--ease)}
.turma:hover > *{transform:translateX(4px)}
.turma:hover h4{color:var(--green)}
@media (prefers-reduced-motion:reduce){
  .mod:hover,.art:hover{transform:none}
}

/* a chamada final centraliza os blocos mas o texto ficava alinhado à
   esquerda dentro deles: em duas linhas parecia desalinhado */
.final > div{text-align:center}
.final .eyebrow{align-self:center}

/* O painel suspenso de Formações é branco, mas ficava dentro da regra
   que pinta a navegação de marfim sobre o hero escuro: texto marfim
   sobre painel branco, ilegível. */
.hdr:not(.scrolled) .menu a{color:var(--ink)}
.hdr:not(.scrolled) .menu a:hover{color:var(--green);background:rgba(12,107,94,.07)}
.hdr:not(.scrolled) .menu .see{color:var(--green)}
.hdr:not(.scrolled) .menu .menu-nota{color:var(--muted)}

/* a olhada em verde sobre papel dava 4.36:1, abaixo do mínimo legível
   para texto pequeno em caixa alta; o verde escuro sobe para 5.2:1 */
.eyebrow{color:var(--green-2)}
.on-dark .eyebrow,.band .eyebrow,.final .eyebrow,.tempo-sec .eyebrow{color:var(--rose)}

/* rosa sobre o verde da chamada final dava 4.36:1; o marfim sobe para 6.3 */
.final .eyebrow{color:rgba(242,238,231,.92)}

.flist{border-bottom:1px solid var(--line)}
.band .flist{border-bottom-color:rgba(242,238,231,.24)}


/* Hover das formações. A placa acompanha o recuo de cada coluna: nas
   pontas o cartão não tem recuo lateral, e com um valor fixo a placa
   começava depois do texto em vez de antes dele. */
.fitem{--placa-e:8px;--placa-d:8px;position:relative;isolation:isolate;
  transition:transform .45s var(--ease)}
.fitem::before{content:"";position:absolute;z-index:-1;
  top:8px;bottom:8px;left:var(--placa-e);right:var(--placa-d);
  border-radius:14px;background:rgba(12,107,94,.07);
  opacity:0;transition:opacity .3s var(--ease)}
.fitem:hover::before{opacity:1}
.fitem:hover{transform:translateY(-3px)}
.fitem .ic,.fitem h3{transition:transform .45s var(--ease),color .35s var(--ease)}
.fitem:hover .ic{transform:scale(1.08)}
.fitem:hover h3{color:var(--green)}
.band .fitem::before{background:rgba(242,238,231,.1)}
.band .fitem:hover h3,.band .fitem:hover .ic{color:var(--rose)}
/* onde o recuo da coluna é zero, a placa avança para fora */
.fitem:first-child,.fitem:nth-child(3n+1){--placa-e:-20px}
.fitem:last-child,.fitem:nth-child(3n){--placa-d:-20px}
@media (prefers-reduced-motion:reduce){.fitem:hover{transform:none}}

/* selo de prévia: discreto, canto inferior esquerdo, fora do caminho */
.selo-previa{position:fixed;left:16px;bottom:16px;z-index:65;display:flex;align-items:center;gap:8px;
  padding:.5em .9em;border-radius:999px;background:rgba(31,38,38,.86);color:var(--ivory);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;text-transform:none;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.6);pointer-events:none}
.selo-previa span{font-weight:500;letter-spacing:normal;color:rgba(242,238,231,.66);
  padding-left:8px;border-left:1px solid rgba(242,238,231,.28)}
@media (max-width:700px){.selo-previa span{display:none}}
@media print{.selo-previa{display:none}}

/* ---------------------------------------------------------- abas de perfil
   Lista vertical à esquerda, painel à direita. Substitui a sanfona. */
.abas{display:grid;grid-template-columns:clamp(240px,26%,320px) 1fr;
  margin-top:clamp(40px,4.5vw,60px);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--white)}
.abas__lista{display:flex;flex-direction:column;background:var(--graphite)}
.abas__aba{position:relative;display:flex;align-items:center;gap:14px;
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px);text-align:left;
  color:rgba(242,238,231,.68);border-bottom:1px solid rgba(242,238,231,.1);
  transition:color .3s var(--ease),background .3s var(--ease)}
.abas__aba:last-child{border-bottom:0}
.abas__aba::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--ochre);transform:scaleY(0);transform-origin:center;
  transition:transform .35s var(--ease)}
.abas__aba:hover{color:var(--ivory);background:rgba(242,238,231,.05)}
.abas__aba.is-on{color:var(--ivory);background:rgba(242,238,231,.08)}
.abas__aba.is-on::before{transform:scaleY(1)}
.abas__n{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  color:rgba(242,238,231,.42)}
.abas__aba.is-on .abas__n{color:var(--ochre)}
.abas__rot{font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:-.005em}

.abas__palco{padding:clamp(30px,3.4vw,46px) clamp(28px,3.2vw,44px)}
.abas__painel{display:flex;flex-direction:column;align-items:flex-start}
.abas__painel[hidden]{display:none}
.abas__painel .eyebrow{color:var(--ochre)}
.abas__painel h3{margin-top:16px;font-size:clamp(1.5rem,2.6vw,2.15rem);max-width:20ch;line-height:1.12}
.abas__painel > p{margin-top:16px;max-width:52ch;color:var(--muted);font-size:var(--fs-lead);line-height:1.6}
.abas__painel .tlink{margin-top:26px}
.anim .abas__painel > *{opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.anim .abas__painel.is-on > *{opacity:1;transform:none}
.anim .abas__painel.is-on > *:nth-child(2){transition-delay:.05s}
.anim .abas__painel.is-on > *:nth-child(3){transition-delay:.1s}
.anim .abas__painel.is-on > *:nth-child(4){transition-delay:.15s}
@media (max-width:860px){
  .abas{grid-template-columns:1fr}
  .abas__lista{flex-direction:row;overflow-x:auto}
  .abas__aba{flex:1 0 auto;border-bottom:0;border-right:1px solid rgba(242,238,231,.1);
    flex-direction:column;align-items:flex-start;gap:6px}
  .abas__aba::before{top:auto;bottom:0;left:0;right:0;width:auto;height:3px;
    transform:scaleX(0);transform-origin:left}
  .abas__aba.is-on::before{transform:scaleX(1)}
}

/* ------------------------------------------ professores em destaque */
/* São três retratos, não quatro cartões: o quarto era um bloco verde
   sem rosto que abria um buraco na linha. O caminho para o diretório
   desceu para o pé da seção, como nas outras seções da página. */
.profs{grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,22px)}
@media (max-width:820px){.profs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.profs{grid-template-columns:1fr}}
.prof .prof-img{transition:transform .7s var(--ease)}
.prof:hover .prof-img{transform:scale(1.04)}
.sec-foot{display:flex;align-items:baseline;gap:14px 22px;flex-wrap:wrap}
.sec-foot__nota{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--muted)}

/* -------------------------------------- abas de perfil na identidade
   A composição da referência fica igual: lista numerada à esquerda em
   faixa escura, painel à direita. Muda o que vinha de fora do sistema:
   o grafite quase preto vira petróleo, o branco puro vira papel, e o
   acento na faixa escura passa a ser o rosé, que é o que o site usa
   sobre escuro em toda parte. O circuito da marca entra na coluna
   escura, discreto, como nas outras faixas petróleo. */
.abas{background:var(--paper);box-shadow:var(--shadow-sm)}
.abas__lista{position:relative;background:var(--petrol);isolation:isolate}
.abas__lista::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--circuito);background-size:360px 360px;opacity:.22}
.abas__aba{color:rgba(242,238,231,.66);border-bottom-color:rgba(242,238,231,.14)}
.abas__aba::before{background:var(--rose)}
.abas__aba:hover{background:rgba(242,238,231,.06)}
.abas__aba.is-on{background:rgba(242,238,231,.1)}
.abas__n{color:rgba(242,238,231,.62)}  /* .46 dava 3,6:1 num rótulo de 10px */
.abas__aba.is-on .abas__n{color:var(--rose)}
/* o eyebrow do painel está sobre fundo claro: segue o verde do resto
   do site, não o ocre, que aqui aparecia como cor avulsa */
.abas__painel .eyebrow{color:var(--green-2)}
.abas__painel h3{font-family:var(--display);color:var(--ink)}
.abas__painel .tlink{color:var(--green-2)}

/* o aceite do formulário: caixa à esquerda, texto à direita, sempre */
.lead__aceite{flex-direction:row!important;align-items:flex-start;gap:11px;
  font-family:var(--sans);font-size:.94rem;font-weight:400;color:var(--ink);line-height:1.5}
.lead__aceite input{width:19px;height:19px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--green)}
.lead__aceite span{flex:1 1 auto}

/* ------------------------------------- nome da formação em destaque
   Era um rótulo miúdo e apagado acima da chamada, do tamanho de uma
   legenda: quem batia o olho lia a frase e não sabia de que curso se
   tratava. Virou pastilha, com o nome em corpo de leitura. */
.fitem .tag{align-self:flex-start;padding:.42em .95em;border-radius:999px;
  font-family:var(--sans);font-size:.88rem;font-weight:600;line-height:1.35;
  background:rgba(12,107,94,.09);color:var(--green-2);
  border:1px solid rgba(12,107,94,.16);
  transition:background .35s var(--ease),border-color .35s var(--ease)}
.fitem:hover .tag{background:rgba(12,107,94,.14);border-color:rgba(12,107,94,.3)}
.band .fitem .tag{background:rgba(242,238,231,.13);color:var(--ivory);
  border-color:rgba(242,238,231,.26)}
.band .fitem:hover .tag{background:rgba(242,238,231,.2);border-color:rgba(242,238,231,.46)}
/* o ícone e a pastilha na mesma linha, para o nome subir de importância */
.fitem{gap:12px}
.fitem .ic{margin-bottom:2px}

/* ============================================================ CIRCUITO
   Um sistema só para a trama da marca, no lugar de seis opacidades
   diferentes espalhadas pela folha. Fica mais discreto do que estava,
   e entra e sai em fade quando a seção chega à dobra: o JavaScript
   marca quem está em vista. Sem JavaScript a trama simplesmente fica
   no lugar, na opacidade final, e nada se perde. */
:root{--circ:.14}
.anchor::before,.cta-final::before,.final::before,.tempo-sec::before,
.abas__lista::before,
.faixa-escura::before,.phero:not(.phero--foto)::before{
  opacity:var(--circ)}

/* com JavaScript, a trama nasce apagada e aparece ao entrar em cena */
.tem-circuito::before{opacity:0;transition:opacity 1.1s var(--ease)}
.tem-circuito.circuito-on::before{opacity:var(--circ)}

@media (prefers-reduced-motion:reduce){
  .tem-circuito::before{transition:none;opacity:var(--circ)}
}


/* ------------------------------------------ formulário de orientação
   Coluna única, que é o que a pesquisa de formulário aponta como o
   desenho de maior conclusão: o olho desce em linha reta e não fica
   decidindo se o próximo campo está ao lado ou abaixo. Rótulo sempre
   visível, nunca só placeholder. O grupo menor é que leva marca, e
   aqui é o opcional: num pedido de contato a pessoa presume que tudo
   é obrigatório, então dizer o que dá para pular é o que alivia. */
.lead__form{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,20px);max-width:560px}
.lead__form label{gap:8px;font-family:var(--sans);font-size:.95rem;font-weight:400;color:var(--ink)}
.lead__rot{display:flex;align-items:baseline;gap:8px;font-family:var(--sans);
  font-size:.92rem;font-weight:500;color:var(--ink)}
.lead__op{font-family:var(--sans);font-size:.82rem;font-weight:400;color:var(--muted)}
.lead__form input,.lead__form select,.lead__form textarea{font-size:1rem;padding:.78em .95em;
  border-radius:12px;border:1px solid var(--line)}
.lead__form input:focus-visible,.lead__form select:focus-visible,.lead__form textarea:focus-visible{
  border-color:var(--green);outline:2px solid rgba(12,107,94,.25);outline-offset:0}
.lead__enviar{justify-content:center;margin-top:4px;padding-block:.95em}
.lead__nota{font-size:.88rem;color:var(--muted);line-height:1.55}

/* erro em linha: só aparece depois que a pessoa sai do campo */
.lead__erro{margin:0;font-family:var(--sans);font-size:.86rem;font-weight:400;
  color:#9E3B2E;display:flex;align-items:flex-start;gap:6px}
.lead__erro:empty{display:none}
.lead__erro::before{content:"!";flex:0 0 auto;width:16px;height:16px;margin-top:1px;
  border-radius:50%;background:#9E3B2E;color:var(--white);font-size:.72rem;font-weight:700;
  display:grid;place-items:center;line-height:1}
label.tem-erro input,label.tem-erro select,label.tem-erro textarea{border-color:#9E3B2E}
label.tem-erro .lead__rot{color:#9E3B2E}
.lead__aceite.tem-erro span{color:#9E3B2E}


/* ------------------------------------------------- menu de formações
   Entre o gatilho e o painel havia um vão de 10px. Ao descer o mouse
   para escolher um curso o ponteiro saía da área de hover no meio do
   caminho e o menu fechava sozinho. O vão continua no desenho, mas
   agora é coberto por uma ponte invisível, e o JavaScript ainda segura
   o menu aberto por um instante depois que o ponteiro sai. */
.menu::before{content:"";position:absolute;left:-8px;right:-8px;top:-14px;height:14px}
.has-menu.is-aberto .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.has-menu.is-aberto .caret{transform:rotate(180deg)}
.nav .has-menu > a{padding-block:.55em}


/* ----------------------------------------------- depoimento na emenda
   Cartão de vidro sobre a divisa entre a faixa escura e a seção
   seguinte. Duas coisas importam aqui, e a primeira não é o desfoque:
   vidro só se lê quando o que está atrás atravessa. Por isso o
   preenchimento é translúcido de verdade (55%), e a divisa das duas
   faixas passa visível por dentro do cartão. O desfoque existe para a
   trama da marca que corre atrás; sobre cor chapada ele não teria o
   que borrar. O brilho é um fio de luz na aresta de cima, não um véu
   branco por cima de tudo, que era o que antes tapava a transparência. */
.depo-wrap{position:relative;z-index:4;margin-top:calc(-1 * clamp(34px,3.6vw,52px))}
.depo{position:relative;margin:0 auto;max-width:660px;
  padding:clamp(30px,3.2vw,44px) clamp(28px,3.4vw,52px) clamp(26px,2.8vw,36px);
  border-radius:24px;
  background:rgba(251,250,247,.55);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             inset 0 -1px 0 rgba(255,255,255,.25),
             0 34px 70px -48px rgba(0,54,64,.6);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.depo blockquote{margin:0;max-width:22ch;font-family:var(--display);font-weight:600;
  font-size:clamp(1.22rem,2vw,1.68rem);line-height:1.24;letter-spacing:-.01em;
  color:var(--ink);text-wrap:balance}
.depo figcaption{margin-top:clamp(16px,1.8vw,22px);display:flex;align-items:center;
  justify-content:center;gap:14px}
.depo__assina{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.45em}
.depo__quem{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink)}
.depo__sep{color:var(--muted);opacity:.6}
.depo__onde{font-family:var(--sans);font-size:.88rem;font-weight:400;color:var(--muted)}
/* a foto de quem assina: uma bolinha ao lado do nome, com um anel claro
   que a separa do vidro. Sem foto, o cartão é só o nome, como sempre foi. */
.depo__foto{flex:0 0 auto;display:block;width:56px;height:56px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(255,255,255,.9);box-shadow:0 10px 22px -12px rgba(0,54,64,.6);
  background:var(--rose)}
.depo__foto img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:620px){.depo__foto{width:48px;height:48px}}
@media (max-width:620px){.depo{border-radius:20px}}
/* sem backdrop-filter o cartão fica sólido, porque translúcido sem
   desfoque sobre a faixa escura derrubaria a legibilidade do texto */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .depo{background:var(--paper);border-color:var(--line)}
}


/* O carrossel vive aqui, não na folha das páginas internas: a Home
   carrega só esta folha, e era por isso que o trilho de professores
   nascia sem largura de cartão nem cursor de arrasto. */
/* ---------------------------------------------------------- carrossel
   Trilho de rolagem com scroll-snap, não pilha trocando por opacidade.
   A rolagem é nativa: arrastar com o dedo ou com o trackpad funciona
   sem JavaScript nenhum. A foto seguinte fica espiando na borda, que é
   o que avisa que há mais. Nada gira sozinho. */
.carrossel{position:relative;margin-top:clamp(30px,3.4vw,44px)}
.carrossel__trilho{display:flex;gap:clamp(12px,1.4vw,18px);margin:0;padding:0 0 4px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carrossel__trilho::-webkit-scrollbar{display:none}
.carrossel__trilho:focus-visible{outline:2px solid var(--rose);outline-offset:6px;border-radius:var(--radius-lg)}
.carrossel__item{flex:0 0 min(88%,1000px);scroll-snap-align:center}
.carrossel__item > figure{margin:0}
.carrossel__item > figure img{width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius-lg);background:rgba(242,238,231,.06)}
/* a foto que não está no centro recua um passo, para o olho saber
   onde está a leitura */
.carrossel__item:not(.prof-slide){transition:opacity .4s var(--ease)}
@supports (animation-timeline:view()){
  /* só na galeria de fotos: com vários cartões à vista de uma vez, apagar
     tudo menos o do centro faz a fileira piscar */
  .carrossel__item:not(.prof-slide){animation:carrosselFoco linear both;animation-timeline:view(inline);
    animation-range:cover 12% cover 88%}
  @keyframes carrosselFoco{0%,100%{opacity:.42}45%,55%{opacity:1}}
}

.carrossel__barra{margin-top:clamp(18px,2vw,26px);display:flex;align-items:center;
  gap:16px 22px;flex-wrap:wrap}
.carrossel__pontos{display:flex;align-items:center;gap:8px}
.carrossel__ponto{width:9px;height:9px;padding:0;border-radius:50%;
  background:rgba(242,238,231,.34);transition:background .3s var(--ease),width .3s var(--ease)}
.carrossel__ponto:hover{background:rgba(242,238,231,.6)}
.carrossel__ponto[aria-current]{background:var(--rose);width:26px;border-radius:999px}
.carrossel__conta{font-family:var(--sans);font-size:.88rem;color:rgba(242,238,231,.7)}
.carrossel__conta b{color:var(--ivory);font-weight:600}
.carrossel__setas{margin-left:auto;display:flex;gap:10px}
.carrossel__seta{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(242,238,231,.3);color:var(--ivory);background:transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease),opacity .3s var(--ease)}
.carrossel__seta:hover:not(:disabled){border-color:var(--ivory);background:rgba(242,238,231,.12)}
.carrossel__seta:disabled{opacity:.3;cursor:default}
.carrossel__seta svg{width:21px;height:21px}
@media (max-width:620px){
  .carrossel__item:not(.prof-slide){flex-basis:92%}
  .carrossel__setas{margin-left:0}
  .carrossel__seta{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .carrossel__trilho{scroll-behavior:auto}
  .carrossel__item{animation:none;opacity:1}
}
.carrossel__trilho{cursor:grab}
.carrossel__trilho.esta-arrastando{cursor:grabbing;scroll-behavior:auto;user-select:none}
.carrossel__trilho.esta-arrastando img{pointer-events:none}
/* ------------------------------------------ professores em carrossel
   Atravessa a tela inteira: o trilho sai da coluna de texto e vai de
   borda a borda, com o recuo da página virando respiro no começo e no
   fim. Assim a fileira não parece uma grade cortada, e fica claro que
   ela continua para o lado. Mesma mecânica do carrossel de fotos:
   scroll-snap, arrasto com o mouse, setas e teclado. */
.profs-car{margin-top:clamp(40px,4.4vw,56px)}
.profs-car__trilho{
  margin-inline:calc(50% - 50vw);
  padding-inline:max(var(--gut),calc(50vw - 640px));
  padding-block:6px 10px;
  gap:clamp(14px,1.5vw,20px);
  scroll-padding-inline:max(var(--gut),calc(50vw - 640px));
}
.prof-slide{flex:0 0 clamp(228px,22vw,300px);scroll-snap-align:start}
.prof-slide .prof{width:100%;height:100%}
.profs-car .carrossel__barra{margin-top:clamp(20px,2.2vw,28px);color:var(--ink)}
.profs-car .carrossel__conta{color:var(--muted)}
.profs-car .carrossel__conta b{color:var(--ink)}
.profs-car .carrossel__seta{border-color:var(--line);color:var(--ink)}
.profs-car .carrossel__seta:hover:not(:disabled){border-color:var(--green);color:var(--green);background:rgba(12,107,94,.06)}
.profs-car .carrossel__trilho:focus-visible{outline-color:var(--green)}
/* cartão sem página própria não é link, mas continua com a mesma forma */
.prof-slide div.prof{cursor:default}
.prof-slide div.prof:hover{transform:none;box-shadow:none}
.prof-slide div.prof:hover .prof-img{transform:none}
@media (max-width:620px){
  .prof-slide{flex-basis:70%}
  .profs-car .carrossel__barra{gap:12px 16px}
}

/* ------------------------------------------------ abas: sem sobra
   As três abas dividem toda a altura do painel. Antes elas ocupavam só
   o alto e sobrava um bloco escuro vazio embaixo, que ainda por cima
   repetia a forma do bloco vazio da Naturopatia logo abaixo. */
.abas__lista{justify-content:stretch}
.abas__aba{flex:1 1 0;align-items:center;min-height:0}

/* ------------------------------------- bloco do destaque com textura
   Curvas de nível em rosa sobre o verde da marca. A trama do circuito
   sai daqui porque a textura já ocupa o quadro; o véu de baixo só
   segura o nome do curso. */
.destaque__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.destaque__visual::before{display:none}
.destaque__visual::after{background:linear-gradient(180deg,rgba(0,54,64,0) 34%,rgba(0,54,64,.55) 68%,rgba(0,54,64,.88) 100%)}
.destaque__n{text-shadow:0 1px 10px rgba(0,54,64,.45)}

/* ==========================================================
   GRADE DE FORMAÇÕES: UMA REGRA SÓ
   A placa do hover dependia de nth-child(3n) para saber onde
   ficava a ponta da linha. Só que a grade tem quatro contagens
   de coluna conforme a largura, e essas regras foram escritas
   para três. Em duas e em uma coluna, que é o celular, a placa
   caía no cartão errado: era por isso que o hover mudava de
   jeito a cada cartão.
   A troca: nenhum cartão perde mais o recuo lateral. Quem recua
   é a grade inteira, para fora, na mesma medida. O texto continua
   alinhado com a coluna da página, os fios continuam no lugar, e
   a placa passa a ser a mesma em todos os cartões, sem depender
   de contagem nenhuma.
   ========================================================== */
.flist{
  --col:3;
  --pad-f:clamp(20px,2vw,30px);
  grid-template-columns:repeat(var(--col),1fr);
  margin-inline:calc(-1 * var(--pad-f));
  gap:0;
}
.flist--2{--col:2}
.flist--3{--col:3}
.flist--4{--col:4}
@media (max-width:1000px){ .flist,.flist--3,.flist--4{--col:2} }
@media (max-width:640px){ .flist,.flist--2,.flist--3,.flist--4{--col:1} }

.fitem{
  padding:clamp(28px,3vw,38px) var(--pad-f);
  border-left:1px solid var(--line);
  border-top:0;
}
.band .fitem{border-left-color:rgba(242,238,231,.24);border-top-color:rgba(242,238,231,.24)}

/* fio à esquerda em todos menos no primeiro de cada linha,
   fio em cima a partir da segunda linha. Uma regra por contagem. */
.flist .fitem:nth-child(3n+1){border-left:0}
.flist .fitem:nth-child(n+4){border-top:1px solid var(--line)}
.flist--2 .fitem:nth-child(n+1){border-left:1px solid var(--line);border-top:0}
.flist--2 .fitem:nth-child(2n+1){border-left:0}
.flist--2 .fitem:nth-child(n+3){border-top:1px solid var(--line)}
.flist--4 .fitem:nth-child(n+1){border-left:1px solid var(--line);border-top:0}
.flist--4 .fitem:nth-child(4n+1){border-left:0}
.flist--4 .fitem:nth-child(n+5){border-top:1px solid var(--line)}
@media (max-width:1000px){
  .flist .fitem,.flist--3 .fitem,.flist--4 .fitem{border-left:1px solid var(--line);border-top:0}
  .flist .fitem:nth-child(2n+1),.flist--3 .fitem:nth-child(2n+1),.flist--4 .fitem:nth-child(2n+1){border-left:0}
  .flist .fitem:nth-child(n+3),.flist--3 .fitem:nth-child(n+3),.flist--4 .fitem:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .flist .fitem,.flist--2 .fitem,.flist--3 .fitem,.flist--4 .fitem{border-left:0;border-top:1px solid var(--line)}
  .flist .fitem:first-child,.flist--2 .fitem:first-child,
  .flist--3 .fitem:first-child,.flist--4 .fitem:first-child{border-top:0}
}
.band .fitem,.band .fitem:nth-child(n+1){border-left-color:rgba(242,238,231,.24);border-top-color:rgba(242,238,231,.24)}

/* a placa: igual em todo cartão, sem exceção e sem contagem */
.fitem{--placa-e:8px;--placa-d:8px}
.fitem:first-child,.fitem:last-child,
.fitem:nth-child(3n),.fitem:nth-child(3n+1){--placa-e:8px;--placa-d:8px}

/* ==========================================================
   CELULAR: RESPIRO E ALVO DE TOQUE
   O respiro entre seções era o mesmo do desktop, 84px em cima
   e 84 embaixo. Numa tela de 375 isso vira meia tela de vazio
   entre um assunto e outro, e a página passava de quinze mil
   pixels. Os links de seta tinham 25px de altura, metade do
   alvo mínimo confortável para o polegar.
   ========================================================== */
@media (max-width:640px){
  :root{--sec:clamp(52px,13vw,68px);--gut:22px}

  /* o hero cabe na tela: a coluna de texto não precisa de dois
     respiros de 96px dentro de uma dobra de 812 */
  .hero{min-height:auto;padding-bottom:40px}
  .hero-text{padding-block:clamp(84px,13vh,104px) 0}
  .hero-flut{margin-top:26px;padding-top:20px;gap:14px}
  .hero-flut__item{flex:1 1 100%;max-width:none;
    display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 10px}
  .hero-flut__item span{white-space:nowrap}
  .hero-cta{margin-top:26px;gap:10px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}

  /* a barra institucional encosta menos e ocupa menos */
  .instwrap{margin-top:-28px}
  .instcell{min-height:0;padding:20px}

  /* link de seta e link de rodapé: alvo de polegar */
  .tlink{padding-block:9px}
  .fcol a,.legal a{padding-block:7px;display:inline-block}
  .sec-foot{margin-top:clamp(24px,5vw,34px)}

  /* cartões e grades param de empilhar respiro sobre respiro */
  .flist{margin-top:clamp(28px,6vw,40px)}
  .fitem{padding-block:26px}
  .mods,.profs,.arts,.exp-grid{margin-top:clamp(28px,6vw,40px)}
  .head{gap:12px}
  .destaque{margin-top:clamp(28px,6vw,40px)}
  .abas{margin-top:clamp(28px,6vw,40px)}
  .depo-wrap{margin-top:calc(-1 * clamp(24px,6vw,40px))}
  .depo{padding:26px 22px 24px}
}

/* O recuo lateral é igual em todo cartão, e precisa vencer as regras
   antigas de nth-child que zeravam o recuo do primeiro de cada linha.
   Sem isto, no celular o texto de metade dos cartões encostava na
   borda da tela enquanto o da outra metade ficava 20px para dentro. */
.flist > .fitem:nth-child(n){padding-left:var(--pad-f);padding-right:var(--pad-f)}
@media (max-width:1000px){
  .flist > .fitem:nth-child(n){padding-left:var(--pad-f);padding-right:var(--pad-f)}
}
@media (max-width:640px){
  .flist > .fitem:nth-child(n){padding-left:var(--pad-f);padding-right:var(--pad-f);
    padding-top:26px;padding-bottom:26px}
}