@import url('https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Manrope:wght@200..800&display=swap');

/* ============================================================
   OFICINA PSI — identidade oficial
   Cores: creme #FBFFF3 · verde #D9FF88 · petróleo #004147
          petróleo escuro #001A1C · quase preto #000D0E
   Fontes: Funnel Sans (principal/títulos) · Manrope (texto)
   ============================================================ */
:root{
  --creme:#FBFFF3;
  --verde:#D9FF88;
  --petroleo:#004147;
  --petroleo-esc:#001A1C;
  --tinta:#000D0E;
  --linha:rgba(0,65,71,.16);
  --linha-clara:rgba(251,255,243,.18);
  --display:"Funnel Sans",-apple-system,Helvetica,Arial,sans-serif;
  --texto:"Manrope",-apple-system,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--creme);color:var(--tinta);font-family:var(--texto);font-weight:400;line-height:1.62;-webkit-font-smoothing:antialiased}
/* height:auto é necessário: os atributos width/height do <img> viram CSS e
   sobrescreveriam o aspect-ratio usado nos recortes */
img{display:block;max-width:100%;height:auto}
button{cursor:pointer;font-family:var(--display)}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 56px}

/* tipografia — Funnel Sans nos títulos */
h1,h2,h3,h4{font-family:var(--display);color:var(--petroleo);letter-spacing:-.02em}
h1{font-size:clamp(38px,5vw,62px);line-height:1.04;font-weight:800}
h2{font-size:clamp(26px,3.1vw,42px);line-height:1.12;font-weight:700;margin-bottom:16px}
h3{font-size:23px;font-weight:700}
h4{font-size:19px;font-weight:600}
.kicker{display:block;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--petroleo);opacity:.62;margin-bottom:16px}
.lede{font-size:18px;opacity:.84;max-width:520px;margin-top:20px}
/* marcação verde — grifo dentro da frase (nunca texto corrido) */
.mark{background:linear-gradient(transparent 64%,var(--verde) 64%);font-weight:800}
.dark .mark{background:none;color:var(--verde)}

/* reveal (v4) */
.rev{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* header */
.hd{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
  padding:15px 56px;background:rgba(251,255,243,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
.hd-logo{display:block;line-height:0}
.hd-logo img{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-family:var(--display);font-size:15px;font-weight:500;color:var(--tinta);opacity:.72;padding:8px 13px;text-decoration:none;position:relative;transition:opacity .2s}
.nav a:hover,.nav a.active{opacity:1;color:var(--petroleo)}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--verde);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.6,.2,1)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.btn{opacity:1;color:var(--petroleo)}
.nav a.btn-solid{color:var(--creme)}
.nav a.btn::after{display:none}
.burger{display:none;background:none;border:none;font-size:22px;color:var(--petroleo)}

/* botões — Funnel Sans Medium */
.btn{display:inline-block;font-family:var(--display);text-align:center;text-decoration:none;font-size:15px;font-weight:500;
  padding:13px 26px;border-radius:2px;border:2px solid var(--petroleo);color:var(--petroleo);background:transparent;transition:all .2s}
.btn-solid{background:var(--petroleo);color:var(--creme)}
.btn-solid:hover{background:var(--petroleo-esc);box-shadow:3px 3px 0 var(--verde)}
.btn-line:hover{background:#fff;box-shadow:3px 3px 0 var(--linha)}
.btn-sm{padding:9px 18px;font-size:14px}
.btn-light{border-color:var(--creme);color:var(--creme)}
.btn-light:hover{background:rgba(251,255,243,.08);box-shadow:3px 3px 0 var(--verde)}
.btn-verde{background:var(--verde);border-color:var(--verde);color:var(--petroleo)}
.btn-verde:hover{box-shadow:3px 3px 0 rgba(0,65,71,.3)}
.btn-ink{background:var(--tinta);border-color:var(--tinta);color:var(--creme)}
.btn-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* hero */
.hero{padding:78px 0 74px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-ill{display:flex;align-items:center;justify-content:center;min-height:300px}
.hero-ill picture{display:block;width:100%;max-width:440px}
.hero-ill img{width:100%;height:auto}
.hero-ill--home picture{max-width:540px}
/* As ilustrações animadas são WebP com transparência real (não vídeo): aparecem já no
   primeiro quadro, sem fundo, sem flash branco. Quem pede menos movimento vê um quadro fixo. */

/* origem */
.origem{padding:64px 0 78px}
.origem-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.origem .prose p{max-width:62ch;font-size:18px}
.prose p{font-size:17px;opacity:.86;margin-bottom:16px;max-width:520px}
.punch{font-family:var(--display);font-weight:800;font-size:clamp(23px,2.5vw,31px)!important;line-height:1.18;color:var(--petroleo);opacity:1!important;
  background:linear-gradient(transparent 66%,var(--verde) 66%);display:inline;letter-spacing:-.02em}


/* seções escuras — inverter o campo de leitura */
.dark{background:var(--petroleo-esc);color:#dce7e4}
.dark h2,.dark h3,.dark h4{color:var(--creme)}
.dark .kicker{color:var(--verde);opacity:.92}
.sec{padding:clamp(76px,10vh,128px) 0}
.center{text-align:center}
.center .kicker,.center h2{margin-left:auto;margin-right:auto}
.center h2{max-width:780px}
.sub{max-width:620px;margin:0 auto;opacity:.8;font-size:17px}

/* quem somos — foto única da dupla */
.duo{max-width:760px;margin:44px auto 0;border-radius:6px;overflow:hidden;border:2px solid rgba(251,255,243,.22);box-shadow:14px 14px 0 rgba(217,255,136,.24)}
.duo img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 40%}
.duo-cap{display:block;text-align:center;margin-top:14px;font-size:13px;opacity:.6;letter-spacing:.04em}
.bios{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:52px;max-width:900px;margin-inline:auto;text-align:left}
.bio h3{font-size:24px}
.bio .role{display:block;font-family:var(--display);color:var(--verde);font-size:14px;font-weight:500;letter-spacing:.06em;margin:2px 0 14px}
.bio ul{list-style:none;margin:0 0 18px}
.bio li{position:relative;padding:8px 0 8px 22px;font-size:15px;opacity:.9;border-bottom:1px solid var(--linha-clara)}
.bio li::before{content:"";position:absolute;left:0;top:17px;width:12px;height:2px;background:var(--verde)}

/* bloco janela */
.win{background:#fff;border:2px solid var(--petroleo);border-radius:2px;box-shadow:8px 8px 0 var(--petroleo);transition:transform .25s,box-shadow .25s}
.win:hover{transform:translate(-2px,-2px);box-shadow:11px 11px 0 var(--petroleo)}
.win-bar{display:flex;gap:8px;padding:13px 18px;border-bottom:2px solid var(--petroleo)}
.dot{width:13px;height:13px;border-radius:100px}
.dot-line{border:2px solid var(--petroleo)}.dot-teal{background:var(--petroleo)}.dot-lime{background:var(--verde);border:2px solid var(--petroleo)}
.win-body{padding:26px 30px 30px}
.win-body p{font-size:15.5px;opacity:.85;margin-top:6px}
.win-ill{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.win-ill img{height:100%;width:auto;object-fit:contain}
.meta{list-style:none;margin-top:20px}
.meta li{display:flex;gap:12px;padding:9px 0;font-size:14.5px;border-bottom:1px solid var(--linha);align-items:baseline}
.meta strong{flex-shrink:0;width:84px;font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--petroleo);opacity:.7}
.soon{font-family:var(--display);font-size:11.5px;background:var(--verde);border:1px solid var(--petroleo);border-radius:100px;padding:2px 9px;margin-left:6px;color:var(--petroleo);font-weight:600}
.win-cta{display:inline-block;font-family:var(--display);margin-top:18px;font-weight:700;font-size:15px;color:var(--petroleo);text-decoration:none;
  background:linear-gradient(transparent 66%,var(--verde) 66%);transition:letter-spacing .2s}
.win:hover .win-cta{letter-spacing:.015em}

/* ---- FORMATOS: carrossel de caixas com slide ----
   Posição controlada por transform (não por scroll nativo): evita as travadas do
   scroll-snap no Safari/iOS e não depende de offsetParent. Arrastar = pointer events. */
.carousel{margin-top:48px}
.viewport{overflow:hidden;padding:14px 0 22px}
.track{position:relative;display:flex;gap:36px;will-change:transform;
  transition:transform .55s cubic-bezier(.2,.6,.2,1);touch-action:pan-y;cursor:grab;user-select:none}
.track.dragging{transition:none;cursor:grabbing}
.slide{flex:0 0 72%;opacity:.5;transform:scale(.97);text-decoration:none;
  transition:opacity .4s cubic-bezier(.2,.6,.2,1),transform .4s cubic-bezier(.2,.6,.2,1);
  -webkit-user-drag:none;user-select:none}
.slide img{-webkit-user-drag:none;pointer-events:none}
.slide.featured{opacity:1;transform:scale(1)}
.slide>*{width:100%;text-align:left}
.ind{display:flex;justify-content:center;margin-top:24px}
.dots{position:relative;display:flex;gap:18px;padding-right:44px}
.dots button{width:20px;height:20px;border-radius:100px;background:#fff;border:2px solid var(--petroleo);padding:0;transition:background .25s,transform .25s}
.dots button:hover{transform:scale(1.12)}
.dots button.on{background:var(--verde)}
.cursor{position:absolute;left:22px;top:16px;transition:transform .45s cubic-bezier(.2,.6,.2,1);pointer-events:none}
.cursor svg{width:30px;height:30px;display:block;transform:rotate(-18deg)}

/* para quem */
.forwho{display:grid;grid-template-columns:6fr 5fr;gap:56px;align-items:center}
.statement{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.5vw,31px);line-height:1.32;color:var(--creme);letter-spacing:-.02em}
.statement strong{color:var(--verde);font-weight:800}
.forwho-ill{display:flex;align-items:center;justify-content:center}
.forwho-ill img{width:100%;max-width:520px;height:auto}

/* turmas */
.turmas-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:48px}
.turma .win-body{display:flex;flex-direction:column}
.tag{align-self:flex-start;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--verde);border:1px solid var(--petroleo);border-radius:100px;padding:4px 13px;color:var(--petroleo);margin-bottom:12px}
.tag-line{background:#fff}
.turma h3{font-size:clamp(20px,2.1vw,25px);max-width:420px}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.chips span{font-family:var(--display);font-size:12.5px;font-weight:500;color:var(--petroleo);background:var(--creme);border:1px solid var(--linha);border-radius:100px;padding:6px 13px}
.dates{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--linha)}
.date{font-family:var(--display);font-weight:600;font-size:16px;color:var(--petroleo);border:2px solid var(--petroleo);border-radius:2px;padding:6px 13px;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.date:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--verde)}
.date em{font-family:var(--display);font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--verde);border:1px solid var(--petroleo);border-radius:100px;padding:2px 7px}
.date.past{opacity:.4;text-decoration:line-through;pointer-events:none}
.turma .btn{margin-top:22px;align-self:flex-start}

/* páginas internas */
.diffs{display:grid;grid-template-columns:repeat(2,1fr);gap:38px 54px;margin-top:52px}
.diff{border-top:2px solid var(--petroleo);padding-top:18px}
.dark .diff{border-color:var(--verde)}
.diff-n{font-family:var(--display);font-weight:800;font-size:20px;color:var(--petroleo);opacity:.45}
.dark .diff-n{color:var(--verde);opacity:.8}
.diff h4{margin:8px 0 6px}
.diff p{font-size:15.5px;opacity:.84;max-width:440px}
.steps{display:flex;flex-direction:column;gap:4px}
.step{display:flex;gap:22px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--linha)}
.step:last-child{border-bottom:none}
.step-n{font-family:var(--display);font-weight:800;font-size:20px;color:var(--petroleo);opacity:.45;flex-shrink:0;min-width:34px}
.step p{font-size:15.5px;opacity:.82}
.split{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center}
.panel{background:#fff;border:2px solid var(--petroleo);border-radius:2px;padding:34px 36px;box-shadow:8px 8px 0 var(--verde)}
.panel h3{margin-bottom:8px}
.panel p{font-size:15.5px;opacity:.84;margin-bottom:18px}

/* contato */
.contato-grid{display:grid;grid-template-columns:7fr 4fr;gap:48px;align-items:start}
.form{display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:flex;flex-direction:column;gap:7px;font-family:var(--display);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--petroleo);opacity:.85}
.form input,.form select,.form textarea{font-family:var(--texto);font-size:16px;padding:12px 14px;border-radius:2px;
  border:2px solid var(--linha);background:var(--creme);color:var(--tinta);outline:none;transition:border-color .2s;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--petroleo)}
.form textarea{resize:vertical;min-height:130px}
.form .btn{align-self:flex-start;margin-top:4px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.side{display:flex;flex-direction:column;gap:16px}
.side-card{background:#fff;border:2px solid var(--petroleo);border-radius:2px;padding:22px 24px;box-shadow:5px 5px 0 var(--linha);transition:transform .2s,box-shadow .2s}
.side-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--verde)}
.side-card h4{margin-bottom:6px}
.side-card p{font-size:14.5px;opacity:.84;margin-bottom:8px}
.side-card a{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--petroleo);text-decoration:none;
  background:linear-gradient(transparent 66%,var(--verde) 66%)}
.side-card span{display:block;font-size:15px;opacity:.86}

/* tdah */
.tdah{background:var(--verde);border-top:2px solid var(--petroleo);border-bottom:2px solid var(--petroleo)}
.tdah-in{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;flex-wrap:wrap}
.tdah-in p{font-size:16px;color:var(--petroleo)}
.tdah-tag{display:block;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--petroleo);opacity:.7;margin-bottom:3px}

/* footer */
.ft{background:var(--petroleo-esc);color:#a9bdb9;padding:70px 0 28px}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.ft-logo img{height:26px;width:auto}
.ft h5{font-family:var(--display);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--verde);margin-bottom:15px;font-weight:600}
.ft a,.ft span{display:block;color:#a9bdb9;font-size:15px;padding:5px 0;opacity:.9;text-decoration:none}
.ft a:hover{color:var(--creme)}
.ft-note{font-size:12.5px;opacity:.55}
.ft-bottom{margin-top:46px;padding-top:22px;border-top:1px solid rgba(251,255,243,.14);font-size:13px;opacity:.55;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media(max-width:920px){
  .wrap{padding:0 24px}.hd{padding:13px 24px}.burger{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    background:var(--creme);border-bottom:1px solid var(--linha);padding:8px 24px 18px}
  .nav.open{display:flex}.nav a{padding:12px 0;font-size:17px}.nav a::after{display:none}
  .nav .btn{margin-top:10px}
  .hero-grid,.origem-grid,.forwho,.turmas-grid,.bios,.ft-grid,.diffs,.split{grid-template-columns:1fr;gap:36px}
  .hero{padding:44px 0}
  .slide{flex-basis:86%}
  .track{gap:20px}
  .duo{margin-top:32px}
}