/* BMR · site novo. Tokens do guia de marca v2.0 (out/2026). */
/* só as quatro faces aprovadas: 255, 300, 500, 700. Regular 400 e SemiBold 600 não existem na família. */
@font-face{font-family:"RT Dromo";src:url(/fonts/RTDromo-Thin.otf) format("opentype");font-weight:255;font-display:swap}
@font-face{font-family:"RT Dromo";src:url(/fonts/RTDromo-Light.otf) format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"RT Dromo";src:url(/fonts/RTDromo-Medium.otf) format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"RT Dromo";src:url(/fonts/RTDromo-Bold.otf) format("opentype");font-weight:700;font-display:swap}

:root{
  --campo:#0E0E0F;      /* fundo (guia). A copy cita #171717; troque aqui se o Paulo preferir */
  --superficie:#1E1E1C;
  --off:#F4F1EA;
  --yel:#FFF660;
  --ink:#171717;        /* tinta sobre amarelo */
  --mute:#8E8E82;
  --weak:#5E5E55;       /* só fio e contorno, nunca texto */
  --line:rgba(244,241,234,.10);
  --pad:clamp(20px,4vw,56px);
  --display:"RT Dromo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --nav-h:68px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{background:var(--campo);color:var(--off);font-family:var(--mono);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--yel);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* tipografia */
.display,h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.04}
h1{font-size:clamp(44px,8.2vw,112px);letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(34px,5.4vw,76px)}
h3{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em}
.lbl{display:inline-block;font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.lbl.y{color:var(--yel)}
.mono{font-family:var(--mono)}
.lead{font-size:clamp(15px,1.25vw,18px);color:var(--off);max-width:62ch}
.muted{color:var(--mute)}
.wrap{padding-inline:var(--pad);max-width:1600px;margin-inline:auto}
section{position:relative}
.sec{padding-block:clamp(72px,11vw,160px)}
.rule{border-top:1px solid var(--line)}

/* pendências (some quando as {preencher}/{confirmar} forem resolvidas) */
.pend{font:500 11px/1.4 var(--mono);letter-spacing:.04em;text-transform:none;color:#ff8a65;border:1px dashed #ff8a65;padding:1px 6px;border-radius:4px;white-space:normal}

/* botões */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--off);transition:transform .2s,background .2s,color .2s;min-height:44px}
.btn:hover{background:var(--off);color:var(--ink)}
.btn.y{background:var(--yel);color:var(--ink);border-color:var(--yel)}
.btn.y:hover{transform:translateY(-2px);background:var(--off);border-color:var(--off)}

/* menu */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-inline:var(--pad);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.nav a{padding:12px 0}
.nav-l,.nav-r{display:flex;gap:28px;align-items:center}
.nav-r{justify-content:flex-end}
.nav a:hover{color:var(--yel)}
.logo{display:block;padding:0!important;line-height:0}
.wm{display:block;width:100%;height:auto}
.logo .wm{width:120px} /* mínimo do guia: 120 px de largura */
.pill{display:inline-flex;gap:8px;align-items:center;padding:13px 18px!important;border-radius:999px;background:rgba(30,30,28,.85);border:1px solid var(--line);backdrop-filter:blur(10px)}
.pill:hover{color:var(--ink)!important;background:var(--off)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:999px;background:rgba(30,30,28,.85);font:500 10px var(--mono);letter-spacing:.1em}
.mnav{display:none}
@media(max-width:960px){
  .nav{grid-template-columns:auto 1fr;gap:12px}
  .nav-l,.nav-r a:not(.pill){display:none}
  .nav-l{display:none}
  .logo{grid-column:1}
  .nav-r{grid-column:2;gap:10px}
  .nav-r{justify-content:flex-end}
  .nav-r .pill{font-size:9px;line-height:1.25;padding:10px 14px!important;max-width:150px;text-align:left}
  .burger{display:inline-grid;place-items:center}
  .nav .logo{order:-1}
  .mnav{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:49;background:var(--campo);padding:20px var(--pad) 32px;border-bottom:1px solid var(--line);flex-direction:column;gap:6px;font:500 13px var(--mono);letter-spacing:.1em;text-transform:uppercase}
  .mnav.open{display:flex}
  .mnav a{padding:14px 0;border-bottom:1px solid var(--line)}
}

/* rodapé */
.foot{padding:clamp(64px,9vw,120px) var(--pad) 40px;border-top:1px solid var(--line);margin-top:0}
.foot-sig{display:block;width:240px;max-width:100%;height:auto;margin:0 auto 64px 0;max-width:1600px} /* assinatura completa: mínimo 200 px */
.foot-g{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;max-width:1600px;margin:auto}
.foot h4{font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:20px}
.foot li{list-style:none;margin-bottom:10px;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.foot a:hover{color:var(--yel)}
.soc{display:flex;gap:14px;margin-top:26px}
.soc a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%}
.soc svg{width:18px;height:18px;fill:currentColor}
.foot-b{max-width:1600px;margin:64px auto 0;font:500 11px var(--mono);letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
@media(max-width:760px){.foot-g{grid-template-columns:1fr;gap:36px}}

/* placeholders de mídia */
.ph{position:relative;display:grid;place-items:end start;padding:14px;background:linear-gradient(135deg,#1E1E1C,#141413);border:1px dashed rgba(244,241,234,.18);color:var(--mute);font:500 10px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;overflow:hidden}
.ph.bw{filter:grayscale(1)}
.fluted{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,rgba(0,0,0,.28) 2px 20px,rgba(255,255,255,.035) 20px 22px),
  linear-gradient(115deg,#0E0E0F 0%,#34332f 45%,#0E0E0F 100%)}
.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* hero com BMR gigante */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding:var(--nav-h) var(--pad) 90px;overflow:hidden;position:relative}
.hero{background:var(--campo) url(/brand/campo.svg) center/cover no-repeat}
.hero .ghost{position:absolute;inset:0;display:grid;place-items:center;opacity:.05;pointer-events:none;user-select:none}
.hero .ghost .wm{width:min(92vw,1500px)}
.hero-in{position:relative;display:grid;gap:22px;justify-items:center}
.hero h1{font-size:clamp(80px,17vw,260px);line-height:.9}
h1.wmh{line-height:0;width:min(78vw,860px)}
.bandhero h1.wmh{width:min(60vw,520px)}
.hero .sub{font:500 12px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;max-width:46ch}
.hero .explore{position:absolute;bottom:34px;left:50%;translate:-50% 0;font:500 11px var(--mono);letter-spacing:.14em;color:var(--mute);display:grid;gap:6px;justify-items:center}
.hero .explore:hover{color:var(--yel)}

/* home: descubra */
.desc{position:relative}
.dmenu{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:5;display:grid;place-content:center;justify-items:center;gap:22px;pointer-events:none;text-align:center}
.dmenu ul{list-style:none;display:grid;gap:4px}
.dmenu a{pointer-events:auto;display:inline-block;font:500 clamp(22px,3.4vw,44px)/1.2 var(--display);letter-spacing:-.02em;color:var(--off);opacity:.5;transition:opacity .3s}
.dmenu a.on{opacity:1;color:var(--yel)}
.dmenu a.on::before{content:"[ ";color:var(--yel)}
.dmenu a.on::after{content:" ]";color:var(--yel)}
.dpanel{height:100svh;position:relative;overflow:hidden;background:var(--campo)}
.dpanel .ph,.dpanel .cover{position:absolute;inset:0;height:100%}
.dpanel .ph{place-items:end start;border:0;padding:var(--pad)}

/* estúdio */
.bandhero{position:relative;min-height:clamp(520px,42vw,820px);border-radius:0 0 36px 36px;box-shadow:0 30px 70px rgba(0,0,0,.55);overflow:hidden;display:flex;align-items:center;padding:calc(var(--nav-h) + 32px) var(--pad) 48px;z-index:2}
.bandhero .txt{position:relative;display:grid;gap:18px;max-width:900px}
.bandhero h1{font-size:clamp(72px,12vw,200px)}
.bandhero p{font-family:var(--display);font-weight:300;font-size:clamp(20px,2.4vw,34px);line-height:1.2;letter-spacing:-.01em}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.card{position:relative;display:grid;gap:12px}
.card.wide{grid-column:span 2}
.vid{position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--superficie);border:1px solid var(--line)}
.card.wide .vid{aspect-ratio:2/.8}
.vid video{width:100%;height:100%;object-fit:cover}
.card .nm{display:flex;justify-content:space-between;gap:12px;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.card .tp{position:absolute;left:14px;bottom:14px;padding:8px 12px;border-radius:999px;background:var(--off);color:var(--ink);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:0;translate:0 6px;transition:.25s}
.card:hover .tp,.card:focus-within .tp{opacity:1;translate:0 0}
@media(hover:none){.card .tp{opacity:1;translate:0 0}}
@media(max-width:820px){.works{grid-template-columns:1fr 1fr}.card.wide{grid-column:span 2}}
@media(max-width:520px){.works{grid-template-columns:1fr}.card.wide{grid-column:auto}.card.wide .vid{aspect-ratio:16/10}}

.fazer-h{display:grid;gap:22px;margin-bottom:clamp(40px,6vw,90px)}
.steps .row{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-block:clamp(28px,3.4vw,52px);border-top:1px solid var(--line);align-items:start}
.steps .row:last-child{border-bottom:1px solid var(--line)}
.steps .row p{max-width:54ch;color:var(--off)}
@media(max-width:760px){.steps .row{grid-template-columns:1fr;gap:14px}}

.gal{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,32px);align-items:start}
.gal .lbl-c{grid-column:1/-1;text-align:center;margin-bottom:clamp(20px,4vw,60px)}
.gal figure{display:grid;gap:10px;margin-top:var(--mt,0)}
.gal .ph{aspect-ratio:var(--ar,4/5);border-radius:6px}
.gal figcaption{font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:760px){.gal{grid-template-columns:1fr 1fr}.gal figure{grid-column:auto!important;margin-top:0!important}}

/* academy */
.acad-hero .hero-in{gap:26px}
.acad-hero h1{font-size:clamp(40px,7vw,104px)}
.note{font:400 12px/1.6 var(--mono);color:var(--mute);max-width:60ch}
.counter{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,72px)}
.head.c{text-align:center;justify-items:center}

.stack{display:grid;gap:0}
.scard{position:sticky;top:calc(var(--nav-h) + var(--i)*22px);display:grid;grid-template-columns:1.1fr .9fr;gap:32px;min-height:clamp(380px,56vh,560px);padding:clamp(24px,3.4vw,48px);margin-bottom:clamp(18px,3vw,36px);background:var(--superficie);border:1px solid var(--line);border-radius:28px;overflow:hidden}
.scard .num{position:absolute;top:10px;left:26px;font:700 clamp(120px,15vw,230px)/1 var(--display);letter-spacing:-.06em;color:var(--off);opacity:.06}
.scard .tx{position:relative;display:grid;gap:18px;align-content:end}
.scard h3{font:500 13px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.scard p{max-width:50ch}
.scard .cnt{font:500 11px var(--mono);letter-spacing:.1em;color:var(--mute)}
.scard .ph{border-radius:16px;min-height:220px}
.cta{margin-top:clamp(28px,4vw,56px);display:flex;justify-content:center}
@media(max-width:820px){.scard{grid-template-columns:1fr;position:relative;top:auto}.scard .ph{order:-1}}

.rotw{display:grid;gap:8px;justify-items:center;text-align:center}
.rotw h2{font-size:clamp(40px,7.5vw,112px)}
.rot b{font-weight:inherit;display:inline-block;transition:opacity .35s,translate .35s}
.rot.out b{opacity:0;translate:0 10px}
.seals{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.seal{padding:12px 18px;border:1px solid var(--line);border-radius:999px;font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--superficie)}
.mid{display:grid;gap:30px;justify-items:center;text-align:center}

.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.tab{padding:11px 18px;border:1px solid var(--line);border-radius:999px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;min-height:44px}
.tab[aria-selected=true]{background:var(--off);color:var(--ink);border-color:var(--off)}
.proj-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.proj{display:grid;gap:12px;text-align:left;padding:18px;border:1px solid var(--line);border-radius:22px;background:var(--superficie);transition:border-color .2s}
.proj:hover{border-color:var(--off)}
.proj .ph{aspect-ratio:4/3;border-radius:12px}
.proj[hidden]{display:none}
.proj .nm{font:500 13px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.proj.soon{opacity:.5;cursor:default}
@media(max-width:820px){.proj-g{grid-template-columns:1fr}}
dialog{margin:auto;width:min(760px,92vw);max-height:90vh;overflow:auto;background:var(--superficie);color:var(--off);border:1px solid var(--line);border-radius:26px;padding:clamp(24px,4vw,48px)}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog .x{position:sticky;top:0;float:right;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--campo)}
dialog h3{margin-bottom:16px}
dialog dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:22px 0;font-size:14px}
dialog dt{color:var(--mute);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
dialog ol,dialog ul{list-style:none;display:grid;gap:8px;margin:12px 0 24px}
dialog h4{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--yel);margin-top:22px}

.choose{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,100px);align-items:start}
.cbox{display:grid;gap:18px;padding:clamp(24px,3vw,44px);border:1px solid var(--line);border-radius:28px;background:var(--superficie)}
.cbox .big{width:min(100%,300px)}
.stamp{justify-self:start;padding:8px 16px;border:2px solid var(--yel);color:var(--yel);border-radius:8px;font:500 13px var(--mono);letter-spacing:.1em;rotate:-3deg}
.cbox p{padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:820px){.choose{grid-template-columns:1fr}}

.road{position:relative;display:grid;gap:0;max-width:880px;margin-inline:auto;padding-left:34px}
.road::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--weak)}
.phase{position:relative;padding:0 0 clamp(30px,4vw,56px) 28px}
.phase::before{content:"";position:absolute;left:-34px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--campo);border:1px solid var(--off)}
.phase:first-child::before{background:var(--yel);border-color:var(--yel)}
.phase .d{font:500 12px var(--mono);letter-spacing:.1em;color:var(--yel);margin-bottom:6px}
.phase h3{font:500 14px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.phase p{color:var(--mute);max-width:56ch}

.vagas{display:grid;gap:30px;justify-items:center;text-align:center;padding:clamp(40px,6vw,96px) var(--pad);border-radius:36px;background:var(--superficie);border:1px solid var(--line)}
.ben{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%}
.ben div{padding:22px;border:1px solid var(--line);border-radius:18px;font-size:14px;text-align:left;background:var(--campo)}
@media(max-width:900px){.ben{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ben{grid-template-columns:1fr}}

.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,100px);align-items:start}
.story .ph{aspect-ratio:4/5;border-radius:18px}
.story .txt{display:grid;gap:18px;max-width:52ch}
.sig{font:500 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
@media(max-width:820px){.story{grid-template-columns:1fr}}

.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,100px);align-items:start}
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font:500 clamp(16px,1.6vw,22px)/1.3 var(--display);letter-spacing:-.01em;min-height:44px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font:400 22px var(--mono);color:var(--yel)}
.acc details[open] summary::after{content:"–"}
.acc details p{padding:0 0 24px;max-width:60ch;color:var(--mute)}
@media(max-width:820px){.faq{grid-template-columns:1fr}}

/* formulário */
.form{display:grid;gap:16px;max-width:560px;margin-inline:auto}
.form label{display:grid;gap:8px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.form input,.form select{width:100%;min-height:48px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--superficie);color:var(--off);font:300 16px var(--mono)}
.form input:focus,.form select:focus{border-color:var(--off);outline:0}
.form .chk{display:flex;gap:12px;align-items:flex-start;font:400 13px/1.5 var(--mono);letter-spacing:0;text-transform:none;color:var(--off)}
.form .chk input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--yel)}
.form .ok{display:none;padding:20px;border:1px solid var(--yel);border-radius:14px;color:var(--yel)}
.form.done .ok{display:block}
.form.done > :not(.ok){display:none}

/* ferramentas */
.tools-hero .hero-in{gap:26px}
.proof{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* sobre */
.manifest{min-height:100svh;display:grid;align-content:center;gap:28px;padding:calc(var(--nav-h) + 40px) var(--pad) 80px}
.manifest p,.manifest h1{font:500 clamp(34px,7.6vw,120px)/1.02 var(--display);letter-spacing:-.035em;color:var(--mute);text-transform:uppercase}
.manifest b{font-weight:500;color:var(--off)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
.pillars div{display:grid;gap:14px;align-content:start;padding-top:22px;border-top:1px solid var(--line)}
.pillars p,.mv p{color:var(--mute)}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.member{display:grid;gap:12px}
.member .ph{aspect-ratio:3/4;border-radius:16px}
.member .n{font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.member .r{font:500 11px var(--mono);letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
@media(max-width:900px){.team{grid-template-columns:1fr 1fr}}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,100px)}
.mv div{display:grid;gap:16px;align-content:start}
@media(max-width:820px){.mv{grid-template-columns:1fr}}

/* time */
.move{display:grid;grid-template-columns:.5fr 1.5fr;gap:clamp(24px,5vw,80px)}
.move p{font:300 clamp(20px,2.3vw,34px)/1.25 var(--display);letter-spacing:-.015em;margin-bottom:28px}
@media(max-width:820px){.move{grid-template-columns:1fr}}
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,40px)}
.vals div{display:grid;gap:12px;align-content:start;padding-top:20px;border-top:1px solid var(--line)}
.vals p{color:var(--mute);font-size:14px}
@media(max-width:900px){.vals{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.vals{grid-template-columns:1fr}}

/* contato */
.contact{min-height:80svh;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,6vw,100px);padding:calc(var(--nav-h) + 60px) var(--pad) 80px;align-items:end}
.contact h1{font-size:clamp(56px,9.5vw,150px)}
.cinfo{display:grid;gap:30px}
.cinfo div{display:grid;gap:8px}
.cinfo .v{font:500 14px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.cinfo .v a{margin-right:14px}
.cinfo a:hover{color:var(--yel)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.trio figure{display:grid;gap:10px}
.trio .ph{aspect-ratio:4/5;border-radius:6px}
.trio figcaption{font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:820px){.contact{grid-template-columns:1fr}.trio{grid-template-columns:1fr}}

/* jurídico */
.legal{max-width:820px;margin-inline:auto;padding:calc(var(--nav-h) + 80px) var(--pad) 100px}
.legal h1{font-size:clamp(40px,6vw,80px);margin-bottom:12px}
.legal .upd{color:var(--mute);margin-bottom:56px}
.legal h2{font:700 17px/1.3 var(--display);letter-spacing:-.01em;margin:36px 0 8px}
.legal p{color:var(--off);margin-bottom:10px}
.legal em{color:var(--mute);font-style:italic}
.warn{margin-bottom:34px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== copy do site no ar ===== */
em.y{font-style:normal;color:var(--yel)}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}
.statement{font:500 clamp(24px,3.4vw,52px)/1.12 var(--display);letter-spacing:-.025em;max-width:26ch}
.home-hero .hero-in{gap:24px;max-width:1100px}
.home-hero h1{font-size:clamp(44px,7.4vw,112px);max-width:16ch;line-height:1}
.claim{font:300 clamp(20px,2.4vw,34px)/1.2 var(--display);letter-spacing:-.015em;max-width:30ch}
.home-hero .lead{max-width:62ch;margin-inline:auto}

.clients{padding:clamp(28px,4vw,56px) 0;border-block:1px solid var(--line);overflow:hidden;display:grid;gap:22px}
.clients .lbl{text-align:center;padding-inline:var(--pad);color:var(--mute)}

.quote{display:grid;gap:18px;margin:0 0 clamp(36px,5vw,72px);padding:clamp(22px,3vw,40px);border:1px solid var(--line);border-radius:24px;background:var(--superficie);max-width:900px}
.quote blockquote{font:300 clamp(18px,1.8vw,26px)/1.3 var(--display);letter-spacing:-.01em}
.quote a{color:var(--yel);text-decoration:underline;text-underline-offset:3px}
.quote figcaption{font:500 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.quote figcaption strong{color:var(--off);font-weight:500}

.svc .lbl{margin-bottom:12px}
.svc h3{font-size:clamp(30px,4vw,60px)}
.svc-t{font:500 clamp(20px,2vw,30px)/1.15 var(--display);letter-spacing:-.02em;margin-bottom:22px;max-width:24ch}
.svc-l{list-style:none;display:grid}
.svc-l li{padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.svc-l li::before{content:"→ ";color:var(--yel)}

.filter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,48px)}
.filter>div{display:grid;gap:18px;align-content:start;padding:clamp(22px,3vw,40px);border:1px solid var(--line);border-radius:24px;background:var(--superficie)}
.fl{list-style:none;display:grid;gap:0}
.fl li{padding:14px 0 14px 28px;border-top:1px solid var(--line);position:relative}
.fl li::before{position:absolute;left:0;top:14px;font-weight:500}
.fl.yes li::before{content:"→";color:var(--yel)}
.fl.no li{color:var(--mute)}
.fl.no li::before{content:"×";color:var(--mute)}
@media(max-width:820px){.filter{grid-template-columns:1fr}}

.form textarea{width:100%;min-height:140px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--superficie);color:var(--off);font:300 16px/1.5 var(--mono);resize:vertical}
.form textarea:focus{border-color:var(--off);outline:0}
.form .ok h3{margin-bottom:8px;color:var(--yel)}
.form .ok .lead{margin-bottom:10px;color:var(--off)}
.contact h1{font-size:clamp(44px,7.2vw,112px);max-width:11ch}
.foot-d{max-width:46ch;margin:-36px 0 56px;color:var(--mute)}
.vid{aspect-ratio:860/780}
.card.wide .vid{aspect-ratio:1760/780}
@media(max-width:520px){.card.wide .vid{aspect-ratio:1760/780}}

/* ===== hero com gradiente da marca (scripts/gen_hero.py) ===== */
.hero{background:var(--campo) url(/brand/hero-gradiente-2560x1440.webp) center/cover no-repeat}
@media(max-width:760px){.hero{background-image:url(/brand/hero-gradiente-mobile-1170x1700.webp)}}

/* ===== escala menor, como a referência (outline.global) ===== */
:root{--col:1344px}
body{font-size:14px}
h1{font-size:clamp(32px,4.4vw,64px)}
h2{font-size:clamp(24px,3vw,44px)}
h3{font-size:clamp(17px,1.6vw,24px)}
.lead{font-size:clamp(14px,1.05vw,16px)}
.wrap{max-width:calc(var(--col) + 2*var(--pad))}
.nav{padding-inline:max(var(--pad),calc((100vw - var(--col))/2));font-size:12px}
.foot{padding-inline:max(var(--pad),calc((100vw - var(--col))/2))}
.foot-g,.foot-b{max-width:none}
.sec{padding-block:clamp(56px,7vw,104px)}
.btn{padding:12px 20px;font-size:11px;min-height:42px}
.hero .sub{font-size:11px}
.hero h1{font-size:clamp(30px,3.8vw,56px)!important;line-height:1.05}
.home-hero h1{max-width:18ch}
.home-hero .hero-in{gap:18px;max-width:780px}
.claim{font-size:clamp(16px,1.5vw,22px)}
.home-hero .lead{max-width:56ch}
.hero .ghost{opacity:.04}
.hero .ghost .wm{width:min(76vw,1200px)}
h1.wmh{width:min(60vw,400px)}
.bandhero{min-height:clamp(420px,32vw,620px)}
.bandhero h1.wmh{width:min(46vw,300px)}
.bandhero p{font-size:clamp(16px,1.6vw,22px)}
.statement{font-size:clamp(20px,2.1vw,30px)}
.svc h3{font-size:clamp(22px,2.4vw,34px)}
.svc-t{font-size:clamp(17px,1.5vw,22px)}
.dmenu a{font-size:clamp(18px,2.2vw,30px)}
.scard{min-height:clamp(320px,46vh,460px)}
.scard .num{font-size:clamp(90px,11vw,170px)}
.rotw h2{font-size:clamp(28px,4.4vw,64px)}
.manifest p{font-size:clamp(26px,4.6vw,68px)}
.contact h1{font-size:clamp(30px,4.4vw,64px)}
.move p{font-size:clamp(17px,1.6vw,24px)}
.quote blockquote{font-size:clamp(16px,1.4vw,20px)}
.legal h1{font-size:clamp(30px,4vw,52px)}
.acc summary{font-size:clamp(15px,1.3vw,18px)}
.cbox .big{width:min(100%,220px)}
.explore{font-size:10px}
.bandhero{padding-inline:max(var(--pad),calc((100vw - var(--col))/2))}

/* hero: título é a frase de abertura; "BMR" do fundo vira só textura */
.home-hero h1{max-width:22ch;line-height:1.08}
.hero .ghost{opacity:.016}

/* Descubra: o menu central acompanha as 4 dobras e trava no fim da última (não desce para a seção seguinte) */
.desc{display:grid}
.dmenu,.dpanels{grid-area:1/1}
.dmenu{align-self:start;margin-bottom:0}

/* ===== toda seção ocupa uma dobra (100svh), conteúdo centralizado ===== */
main > section{min-height:100svh}
.sec{display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--nav-h) + 24px) clamp(40px,6vh,72px)}
.sec > .wrap{width:100%}
.clients{min-height:100svh;align-content:center;padding-block:var(--nav-h) 0;gap:36px}
.clients .lbl{font-size:12px}
.contact{min-height:100svh;align-items:center}
.bandhero{min-height:100svh}
.bandhero .cover{object-position:72% 50%}
.fazer-h{margin-bottom:clamp(24px,4vh,48px)}
.head{margin-bottom:clamp(24px,4vh,48px)}
.story-txt .txt{max-width:56ch;margin-inline:auto;display:grid;gap:18px}
.story-txt .txt p{font:300 clamp(17px,1.5vw,22px)/1.4 var(--display)}
.story-txt .txt .sig{font:500 11px/1.6 var(--mono)}
/* seções com muito conteúdo: compactar para caber numa dobra */
.proj .ph{aspect-ratio:16/10}
.acc summary{padding-block:16px}
.form{gap:12px}
.form input,.form select{min-height:44px;padding-block:9px}
.form textarea{min-height:96px}
.scard{min-height:calc(100svh - var(--nav-h) - 48px);align-items:stretch}
.scard .ph{min-height:0}
.gal .ph{max-height:46svh}
.proj-g{gap:14px}
@media(min-width:1000px){
  .road{max-width:none;padding-left:0;grid-template-columns:repeat(5,1fr);gap:28px;padding-top:34px}
  .road::before{left:0;right:0;top:5px;bottom:auto;width:auto;height:1px}
  .phase{padding:0}
  .phase::before{left:0;top:-34px}
  .phase:first-child::before{left:0}
}
/* ajustes finos para fechar exatamente uma dobra */
.steps .row{padding-block:clamp(14px,2.6vh,28px);gap:24px}
.svc-t{margin-bottom:12px}
.svc-l{grid-template-columns:1fr 1fr;column-gap:24px}
.svc-l li{padding:8px 0;font-size:13px}
.story .ph{max-height:58svh;width:100%}
@media(max-width:760px){.svc-l{grid-template-columns:1fr}}

/* Descubra: menu mono pequeno no centro, item ativo entre colchetes (prévia aprovada) */
.dmenu{gap:14px}
.dmenu ul{gap:2px}
.dmenu a{font:400 clamp(15px,1.35vw,21px)/1.25 var(--mono);letter-spacing:.01em;text-transform:uppercase;color:var(--off);opacity:.55}
/* O item selecionado em amarelo. Ele acompanha a rolagem sozinho: o
   IntersectionObserver do main.js move a classe `.on` conforme a foto que
   entra na tela, então a cor segue junto sem mais nada. */
.dmenu a.on{opacity:1;color:var(--yel)}
.dmenu a.on::before{content:"[ ";color:var(--yel)}
.dmenu a.on::after{content:" ]";color:var(--yel)}
.dpanel .cover{object-fit:cover}

/* ===== ritmo do Estúdio =====
   A regra geral desta folha dá 100svh a toda seção: cada bloco vira uma
   dobra inteira, e a página sai com 8,8 dobras e ar morto no meio. Aqui o
   espaço acompanha o conteúdo, e não o contrário.

   As medidas saíram da página que o Paulo mandou como referência, medida a
   1440x900: o hero termina antes da dobra (o trabalho aparece por baixo e
   convida a descer), as faixas de trabalho se encaixam sem respiro entre si,
   a faixa de marca é um divisor de ~240px e não uma dobra, e os serviços
   andam a um passo curto e constante.

   Escopado em [data-pg] para não mexer em Academy, Sobre, Time e Contato,
   que continuam com o ritmo de uma dobra por seção. */
main[data-pg="estudio"] > section { min-height: 0; }

/* O hero para antes do fim da tela: o que vem embaixo tem que espiar. */
main[data-pg="estudio"] .bandhero { min-height: clamp(460px, 76svh, 760px); }

/* Sem dobra para centralizar dentro, o conteúdo volta a começar no topo. */
main[data-pg="estudio"] .sec {
  display: block;
  padding-block: clamp(56px, 7.5vh, 104px);
}

/* As três faixas de trabalho são uma coisa só: encostam umas nas outras. */
main[data-pg="estudio"] #resultados      { padding-bottom: clamp(16px, 2.2vh, 28px); }
main[data-pg="estudio"] #resultados-2,
main[data-pg="estudio"] #resultados-3    { padding-top: 0; padding-bottom: clamp(16px, 2.2vh, 28px); }
main[data-pg="estudio"] #resultados-3    { padding-bottom: clamp(56px, 7.5vh, 104px); }

/* A faixa de marca é divisor, não dobra. */
main[data-pg="estudio"] .clients {
  min-height: 0;
  padding-block: clamp(44px, 6vh, 88px);
}

/* Do título da seção para o conteúdo dela. */
main[data-pg="estudio"] .fazer-h { margin-bottom: clamp(20px, 2.6vh, 34px); }

/* Os três serviços andam no mesmo passo. O vão entre eles já era constante;
   o que saía do compasso era a altura da primeira linha, cujo texto é mais
   curto que o das outras duas (159px contra 179 e 180). `min-height` só
   acrescenta ar na mais curta: nenhuma linha é cortada, e em tela estreita,
   onde elas empilham e crescem, a regra não morde. */
@media (min-width: 900px) {
  main[data-pg="estudio"] .steps .row.svc { min-height: 180px; }
}

/* ===== véu do hero em vídeo =====
   O hero nunca teve camada de escurecimento: o texto sentava direto no
   fundo, e dava certo porque o fundo era um gradiente escuro feito por nós.
   Vídeo muda de brilho enquanto toca, e a legibilidade tem que valer no
   quadro MAIS CLARO, não na média.

   Medido em 11 quadros reais deste vídeo, extraídos fora do navegador
   (dentro dele o decodificador fica suspenso em aba oculta e repinta sempre
   o mesmo quadro — uma medição assim passa por acidente). Sem véu, a
   luminância atrás do texto chega a 1,0, branco puro: o offwhite daria
   1,2:1 e o texto sumiria. O vídeo é escuro com estouros de luz aos 3s e
   aos 10s, e é neles que a conta tem que fechar.

   O erro fácil aqui é escurecer tudo até o texto aparecer. Testado: um véu
   denso o bastante (prato .72, piso .30) passa com 6,3:1 e deixa a dobra
   com brilho médio 0,025 — vídeo preto, que é o contrário de premium.

   A saída foi tratar a faixa dinâmica do próprio vídeo em vez de cobri-lo.
   Varridas 48 combinações de filtro e véu: esta guarda 37% mais textura
   (desvio 0,0241 contra 0,0176) e ainda passa. */
.com-veu video.cover {
  object-fit: cover;
  z-index: 0;
  filter: contrast(.85) brightness(.80) blur(3px);
  /* O desfoque come a borda e deixaria uma moldura transparente de 3px.
     A escala de 1.04 empurra esse corte para fora do quadro. */
  transform: scale(1.04);
}

/* O desfoque não é estética solta: razão de contraste mede diferença de
   luz, não ruído. Aos 2,5s o parágrafo cai sobre um padrão de alta
   frequência e some no detalhe mesmo passando em 5,9:1. Três pixels tiram
   a miudeza, mantêm a forma e a cor do plano, e é o que torna a tipografia
   dura contra fundo macio — o oposto de cobrir tudo de preto. */

/* O véu é concêntrico, e não lateral, porque o texto da home é centralizado:
   um prato radial sob o bloco, um piso para o pior quadro, e uma sombra no
   pé que assenta o EXPLORAR. */
.com-veu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(118% 82% at 50% 46%,
      rgba(14,14,15,.70) 0%,
      rgba(14,14,15,.504) 46%,
      rgba(14,14,15,.06) 100%),
    linear-gradient(to top,
      rgba(14,14,15,.55) 0%,
      rgba(14,14,15,0) 30%),
    rgba(14,14,15,.18);
}

/* O conteúdo sobe acima do véu. O EXPLORAR fica de fora desta regra de
   propósito: ele já é `position:absolute`, preso ao pé da dobra, e trocar
   para `relative` o soltava dali — a 1440 ele voltava a colidir com os
   botões. Para quem já está posicionado, basta o z-index. */
/* ---- a textura, por cima do véu ----
   O Paulo pediu o mesmo efeito da foto do Estúdio. Medido na própria
   imagem (`capa-bmr-desktop-3200x1120.webp`), e o resultado corrigiu duas
   suposições minhas:

   - a persiana NÃO vem do CSS. A classe `.fluted` existe, mas fica atrás de
     uma imagem opaca e nunca aparece. O efeito está queimado na foto.
   - e não são listras duras, como a `.fluted` desenha. O perfil de um
     período é uma rampa — 97, 96, 95, 93, 90, 86, 83, 80, 78, 76, 76, 76 e
     de volta — ou seja vidro canelado, não risco de tubo.

   Medidas da foto: período de 20px na fonte, que na tela a 1440 dá 12px
   (correlação 0,974), com modulação de ±12% no original. É isso que está
   reproduzido aqui, com a mesma rampa e o mesmo passo.

   O grão fica: é o mesmo feTurbulence do `body::before`, em frequência mais
   alta e escala menor — mais miúdo e mais seco.

   A persiana custou margem de contraste, e isso tem explicação: diferente
   das linhas horizontais que ela substituiu, ela tem faixas CLARAS, e elas
   levantam o fundo. Baixar o claro quase não ajudou (4,73 para 4,82): o
   piso é o vídeo, não a textura. O que devolveu a folga foi firmar o véu
   de .55 para .60, que custou 0,004 de brilho da dobra e trouxe o pior
   texto de 4,82 de volta para 5,35:1. */
.com-veu::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.03) 0px,
      rgba(0,0,0,.18) 6px,
      rgba(255,255,255,.03) 12px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size: auto, 160px 160px;
}

/* No estreito o passo acompanha a foto de celular, que é mais fechada:
   1170px de fonte com período de 17px dão cerca de 6px na tela. */
@media (max-width: 760px) {
  .com-veu::after {
    background-image:
      repeating-linear-gradient(90deg,
        rgba(255,255,255,.03) 0px,
        rgba(0,0,0,.18) 3px,
        rgba(255,255,255,.03) 6px),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  }
}

/* O .hero nasce com respiro assimétrico (68 em cima, 90 embaixo) e isso
   deixava o bloco 22px abaixo do centro. Como o EXPLORAR é absoluto, o
   respiro de baixo não serve a ninguém aqui: igualado, o texto fica no
   centro de verdade. */
.home-hero.com-veu { padding-bottom: var(--nav-h); }

/* O véu e a textura ficam ATRÁS do vídeo, e isso é escolha do Paulo.
   Com tudo em z-index 0, o ::before vem antes do <video> no HTML e é
   pintado por baixo dele — ou seja, não escurece nada. Em 02/10/2026 ele
   foi posto na frente (z-index 1) e a dobra ficou mais escura e legível;
   o Paulo pediu de volta: "pode deixar com contraste duro mesmo, e o grão
   bem pesado". O que dá a leitura hoje é o próprio tratamento do vídeo
   (P&B, brilho .78 e a curva dura do pontilhado), não o véu.
   Não "conserte" a ordem sem ele pedir. */
.com-veu .hero-in { position: relative; z-index: 1; }
.com-veu .explore { z-index: 1; }

/* O EXPLORAR era cinza apagado e dava 2,8:1 sobre o vídeo — some. Sobre
   fundo em movimento ele vai a offwhite, e aí passa a 7,6:1. Não é só
   contraste: é o único convite para descer a página. */
.com-veu .explore { color: var(--off); }
.com-veu .explore:hover { color: var(--yel); }

/* No estreito o EXPLORAR sai de posição absoluta e entra na pilha.
   Preso ao pé por `bottom:34px`, ele colidia com o botão "Como funciona"
   quando o texto crescia: medido, -1px de folga a 375 (iPhone SE e 13 mini)
   e -34px a 320. O defeito é anterior ao vídeo, mas ficou à vista agora que
   ele é offwhite em vez de cinza apagado. Em fluxo, não há largura em que
   possa encostar. */
@media (max-width: 760px) {
  .home-hero .explore {
    position: static;
    translate: none;
    margin-top: clamp(20px, 4vh, 36px);
  }
}

/* ===== os respiros da primeira dobra no celular =====
   Pedido do Paulo: "a headline tá muito colada no topo". Medido a 375x812:
   o título começava 52px abaixo do menu, e embaixo dos botões sobravam
   137px até o EXPLORAR e mais 120 até o fim da tela. Com o EXPLORAR em
   fluxo, a dobra virou uma grade de duas linhas e o espaço livre era
   repartido entre elas — o texto subia.

   Agora é uma coluna: o bloco de texto tem margem automática dos dois
   lados e fica no meio do espaço entre o menu e o EXPLORAR, que desce para
   o pé. O centro do bloco cai no centro da tela.

   O parágrafo ganha uma medida mais curta que o título: em mono de 14px ele
   ia de borda a borda, sem ar dos lados. Os dois botões ficam com a mesma
   largura — empilhados com 196 e 158px, as bordas não se alinhavam. */
@media (max-width: 760px) {
  .home-hero.com-veu {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--nav-h) + 24px) var(--pad) 28px;
  }
  .home-hero .hero-in { margin-block: auto; gap: 20px; }
  .home-hero .lead { max-width: 34ch; }
  .home-hero .btns {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
  }
  .home-hero .btns .btn { width: min(100%, 264px); justify-content: center; }
  .home-hero .explore { margin-top: 28px; }
}

/* Quem pediu menos movimento não recebe um fundo que se mexe sozinho.
   O vídeo some e fica o poster, que é o primeiro quadro dele. */
@media (prefers-reduced-motion: reduce) {
  .com-veu video.cover { display: none; }
}

/* ===== o vídeo em preto e branco =====
   Medido: a foto do Estúdio tem saturação 0,000 (cinza puro) e toda a
   fotografia do site é P&B — existe até uma classe `.bw` com grayscale
   para isso. Vídeo colorido num sistema em P&B nunca ia parecer da mesma
   família, e era essa a quebra de unidade.

   A refração de verdade foi construída e testada, e está descartada: com
   esta filmagem ela lê como glitch de VHS, não como vidro. O motivo é o
   material — deslocamento horizontal sobre imagem de alta frequência rasga
   em degraus. A foto do Estúdio aguenta porque é uma figura só, com áreas
   grandes e lisas. Fica a modulação de brilho, que é o que a foto faz. */
.com-veu video.cover {
  filter: grayscale(1) contrast(.95) brightness(.84) blur(2px);
  transform: scale(1.04);
}

/* O pontilhado entra DEPOIS do grayscale, para o grão sair neutro: as
   funções de filtro do CSS valem da esquerda para a direita. O desfoque
   sai — ele existia para tirar miudeza, e aqui a curva dura já faz isso
   de um jeito que tem desenho. */
.pontilhado video.cover {
  filter: grayscale(1) brightness(.92) url(#pontilhado) brightness(.78);
}

/* No celular o tratamento já vem gravado no arquivo (`home-mobile.mp4`),
   então o filtro sai — aplicar de novo escureceria duas vezes. A escala
   também: ela existia para esconder a borda do desfoque, que não há aqui.
   O mesmo 760px do `<source media>` que escolhe o arquivo. */
@media (max-width: 760px) {
  .pontilhado video.cover { filter: none; transform: none; }
}

/* O iPhone desenha um botão de play por cima do vídeo quando segura o
   autoplay (economia de bateria). Num fundo de cenário isso parece defeito;
   o play volta pelo primeiro toque, em main.js. */
.com-veu video.cover::-webkit-media-controls-start-playback-button,
.com-veu video.cover::-webkit-media-controls { display: none !important; -webkit-appearance: none; }

/* O <svg> do filtro não ocupa espaço: carrega só a definição. */
.filtro-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

/* O prato do véu ficou mais denso de propósito (.60 para .70). Não é só
   contraste: o pontilhado nasce perto do limiar, então ele MORRE sozinho
   no escuro. Medido nos quadros reais, o prato mais forte derruba o ruído
   atrás do texto de 0,043 para 0,029 e sobe o pior contraste de 4,88 para
   6,09:1 — o grão continua vivo nas bordas da dobra, onde é enfeite, e
   se cala onde atrapalharia a leitura. */

/* ===== os colchetes do menu =====
   Pedido do Paulo: o hover dos itens de menu da Outline. Medido no site
   deles, e a primeira leitura estava errada — eu tinha reproduzido um
   estica horizontal de 20ms que existe lá, mas não é o que se vê. O que se
   vê é isto:

   - em repouso os colchetes estão no lugar, com cor de alfa 0
     (rgba(232,232,232,0)) — invisíveis, mas presentes;
   - no hover eles ganham cor e se AFASTAM da palavra: medido, a palavra
     anda 3,1px e o colchete direito 6,2px, ou seja ~3px de cada lado;
   - a palavra não muda de forma.

   Aqui eles ficam fora do fluxo (absolutos dentro da palavra), para o
   menu da BMR não ganhar espaçamento em repouso. A cor é `inherit`: o
   item ativo continua com os colchetes da cor da palavra, e no hover os
   dois ficam amarelos juntos, como no seletor do Descubra. */
.nl-t { position: relative; display: inline-block; }
.nl-c {
  position: absolute;
  top: 0;
  color: inherit;
  opacity: 0;
  transition: opacity .28s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.nl-e { right: 100%; margin-right: .18em; transform: translateX(3px); }
.nl-d { left: 100%;  margin-left: .18em;  transform: translateX(-3px); }

.nl:hover .nl-c,
.nl:focus-visible .nl-c,
.nl[aria-current="page"] .nl-c { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nl-c { transition: none; }
}

/* ===== grão no fundo da página inteira =====
   O grão global já existia, mas a 5% e com z-index 100 — por cima de
   tudo, inclusive do texto. Fraco demais para aparecer no fundo e, ainda
   assim, encostando na tipografia. Pedido do Paulo: um grão que pegue o
   fundo da página inteira.

   Ele foi para trás do conteúdo (z-index -1) e subiu para 9%. O
   `isolation` no body é o que garante essa ordem: sem ele, o -1 poderia
   cair atrás do fundo do próprio body e sumir. O html não tem fundo, então
   o do body vai para a tela inteira e o grão pinta logo acima dele.

   Onde há fundo opaco — o vídeo do hero, as fotos — o grão fica por baixo
   e não aparece, e é o certo: essas áreas têm textura própria. */
body { isolation: isolate; }

/* ===== profundidade na última dobra =====
   Um gradiente praticamente invisível: uma luz de 4,5% de offwhite no
   centro, onde está o título, que se dissolve até as bordas, e um leve
   escurecimento no pé que leva o olho ao rodapé. É transparente, então o
   grão do fundo continua aparecendo através dele. */
.cta-fundo {
  background:
    radial-gradient(70% 85% at 50% 40%,
      rgba(244,241,234,.045) 0%,
      rgba(244,241,234,.018) 45%,
      rgba(244,241,234,0) 75%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,.28) 100%);
}

/* ===== marca d'água da última dobra =====
   Pedido do Paulo: o wordmark da BMR bem expandido, muito sutil, no mesmo
   gesto da marca d'água da /ferramentas. Lá ele cabe inteiro na tela; aqui
   passa da largura dela (112vw) e sangra pelas laterais, que é o
   "expandido". A seção corta o que sobra, para não criar rolagem lateral.

   A opacidade é 2,5%: sobre o campo #0E0E0F isso sobe o tom de 14 para
   uns 20 — se vê quando se procura, e só. O texto fica acima dela. */
.cta-fundo { position: relative; overflow: hidden; }

/* ===== o CTA é faixa, não dobra, em todas as páginas =====
   Pedido do Paulo em 02/10/2026: o CTA de todas igual ao do Estúdio, "que
   tá muito mais bonito". O conteúdo já era o mesmo (rótulo, título, linha,
   botão, 217px de bloco); a diferença era só a altura. Fora do Estúdio a
   regra geral dava 100svh à seção, e o bloco boiava no meio de 896px de
   campo vazio. No Estúdio ele vira faixa de 352px, com o mesmo respiro em
   cima e embaixo — e é esse o padrão agora, em qualquer página. */
main > section.cta-fundo {
  min-height: 0;
  display: block;
  padding-block: clamp(56px, 7.5vh, 104px);
}
.cta-fundo > .wrap { position: relative; z-index: 1; }
.cta-ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  user-select: none;
  opacity: .025;
}
.cta-ghost .wm { width: 112vw; max-width: none; height: auto; }

/* ===== o ticker oficial de logos =====
   Trazido do site publicado (site/public/estilo.css), com os tokens daqui.
   O logo do cliente entra em offwhite: o sistema é de três cores, e cor de
   cliente dentro dele vira ruído (guia de marca, p.25, regra 08). A altura
   de cada um vem no --h, no HTML — ver o comentário de LOGOS no build. */
.clients { border-block: 0; }
.carrossel { display: flex; overflow: hidden; border-block: 1px solid var(--line); }
.trilho { display: flex; width: max-content; animation: desfilar 42s linear infinite; }
.carrossel:hover .trilho { animation-play-state: paused; }
.fila { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.fila li {
  display: flex; align-items: center; justify-content: center;
  height: 78px; padding: 0 clamp(24px, 3vw, 44px);
  border-right: 1px solid var(--line);
}
.fila .logo {
  height: var(--h, 24px); width: auto; max-width: 180px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .6; transition: opacity .2s;
}
.carrossel:hover .fila .logo { opacity: .85; }
.fila .nome {
  font: 500 17px/1 var(--display); letter-spacing: -.02em;
  color: var(--mute); white-space: nowrap; transition: color .2s;
}
.carrossel:hover .fila .nome { color: var(--off); }
@keyframes desfilar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trilho { animation: none; width: 100%; overflow-x: auto; }
  .trilho .fila[aria-hidden] { display: none; }
}
@media (max-width: 560px) { .fila li { height: 64px; } }

/* ===== a abertura dos Serviços, no Estúdio =====
   Pedido do Paulo: mais profundidade e o texto preenchendo melhor a dobra.
   Medido antes, a 1440×900: o bloco usava 956 dos 1440px, o título tinha
   30px numa caixa de 495px e a metade direita ficava vazia.

   Agora são duas colunas: o título, bem maior, à esquerda; o card da
   citação à direita, assentado na base do título. A diagonal (título no
   alto à esquerda, citação embaixo à direita) é o que faz o bloco ocupar a
   dobra sem esticar nada. No estreito volta a ser uma coluna só.

   A profundidade é da mesma família da última dobra: uma luz quase
   invisível atrás do título, e o card como vidro escuro — um gradiente
   interno de 4,5% a 1%, uma linha de luz na borda de cima e uma sombra
   longa e macia que o descola do fundo. */
main[data-pg="estudio"] #servicos {
  background:
    radial-gradient(60% 75% at 22% 38%,
      rgba(244,241,234,.04) 0%,
      rgba(244,241,234,.015) 45%,
      rgba(244,241,234,0) 75%);
}

@media (min-width: 900px) {
  main[data-pg="estudio"] #servicos .wrap {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    column-gap: clamp(40px, 5vw, 96px);
    align-items: end;
  }
  main[data-pg="estudio"] #servicos .fazer-h { margin-bottom: 0; }
  main[data-pg="estudio"] #servicos .statement {
    font-size: clamp(34px, 3.7vw, 60px);
    line-height: 1.06;
    max-width: 19ch;
  }
  main[data-pg="estudio"] #servicos .quote { margin: 0; max-width: none; }
  /* Ao lado de um título de ~53px, a citação a 20px ficava miúda. */
  main[data-pg="estudio"] #servicos .quote blockquote { font-size: clamp(18px, 1.6vw, 24px); }
}

main[data-pg="estudio"] #servicos .quote {
  background:
    linear-gradient(180deg, rgba(244,241,234,.045), rgba(244,241,234,.01)),
    var(--superficie);
  box-shadow:
    inset 0 1px 0 rgba(244,241,234,.09),
    0 40px 80px -40px rgba(0,0,0,.75);
}

/* ===== o letreiro do Academy =====
   Pedido do Paulo: trocar a marquise de wordmarks por uma entrada de
   lettering como a abertura de Stranger Things — só o contorno, com um
   brilho, muito grão, bem devagar, cinematográfico e quase imperceptível.

   Três movimentos sobrepostos, todos lentos:
   - cada uma das oito peças do wordmark nasce afastada do centro e
     transparente, e anda até o lugar em 9s, uma depois da outra;
   - o conjunto inteiro recua, de 118% para 100%, em 18s — a "câmera" se
     afastando, que é o que dá a sensação de abertura de filme;
   - depois de montado, o brilho respira, num ciclo de 7s.

   Contorno de 1px que não engrossa com o tamanho (`non-scaling-stroke`),
   e o brilho é feito com duas sombras, uma curta e uma larga. A camada toda
   fica a 14%: se vê quando se procura.

   O grão é uma camada própria, por cima do letreiro e por baixo do texto,
   que pula de posição em oito passos por segundo — é o pulo que faz ele
   parecer película, e não textura parada. Por estar abaixo do texto, ele
   não mexe na leitura. */
.acad-hero .hero-in { position: relative; z-index: 2; }

.st-letreiro {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  pointer-events: none; overflow: hidden;
  opacity: .14;
  animation: st-respira 7s ease-in-out 18s infinite alternate;
}
.st-svg {
  width: min(88vw, 1250px); height: auto; overflow: visible;
  filter:
    drop-shadow(0 0 3px rgba(244,241,234,.55))
    drop-shadow(0 0 18px rgba(244,241,234,.22));
}
.st-g {
  transform-box: fill-box; transform-origin: center;
  animation: st-recua 18s cubic-bezier(.16, .7, .2, 1) both;
}
.st-p {
  fill: none; stroke: var(--off); stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center;
  animation: st-chega 9s cubic-bezier(.2, .65, .2, 1) both;
  animation-delay: calc(var(--i) * .32s + .4s);
}
@keyframes st-recua  { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes st-chega  {
  from { opacity: 0; transform: translateX(calc(var(--dx) * 1px)) scale(1.05); }
  35%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes st-respira { from { opacity: .14; } to { opacity: .19; } }

.st-grao {
  position: absolute; inset: -60%; z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  opacity: .12;
  mix-blend-mode: screen;
  animation: st-pelicula 1s steps(8) infinite;
}
@keyframes st-pelicula {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-7%, 4%); }
  25%  { transform: translate(5%, -6%); }
  37%  { transform: translate(-3%, 8%); }
  50%  { transform: translate(8%, 2%); }
  62%  { transform: translate(-6%, -5%); }
  75%  { transform: translate(3%, 6%); }
  87%  { transform: translate(-8%, -2%); }
  100% { transform: translate(0, 0); }
}

/* Quem pediu menos movimento vê o letreiro já montado e o grão parado. */
@media (prefers-reduced-motion: reduce) {
  .st-letreiro, .st-g, .st-p, .st-grao { animation: none; }
}

/* A headline do Academy fecha em três linhas no computador: cada linha é
   um <span class="ln"> em bloco. No celular a linha é curta demais para
   elas — quebras forçadas deixavam pedaços sozinhos ("precisa", "sua
   marca") e o título ia a cinco linhas desiguais. Lá os spans voltam a ser
   texto corrido e o navegador equilibra o comprimento das linhas.
   Spans e não " | ": o build apaga o espaço em volta da barra ao trocar por
   <br>, e escondido o <br> as palavras grudavam ("precisapara"). */
.acad-hero h1 .ln { display: block; }
@media (max-width: 760px) {
  .acad-hero h1 .ln { display: inline; }
  .acad-hero h1 { text-wrap: balance; }
}

/* O subtítulo do Academy é uma frase só, sem quebra escrita: o navegador
   equilibra as linhas em qualquer largura, e a medida curta o mantém
   mais estreito que o título, como bloco de apoio. */
.acad-hero .acad-sub { max-width: 74ch; text-wrap: balance; }

/* ===== contagem regressiva do Academy =====
   Pedido do Paulo em 02/10/2026: a turma fundadora abre em 23/12/2026, ao
   meio-dia de Brasília — e não em 1º de janeiro, "a galera não vai estar
   pronta para comprar". Ocupa o lugar da nota de rodapé do hero.

   Algarismos tabulares: sem eles o bloco dança a cada segundo, porque o 1
   é mais estreito que o 8. Cada unidade tem largura fixa pelo mesmo motivo. */
.contagem { display: grid; justify-items: center; gap: 12px; margin-top: 6px; }
.contagem-rot,
.contagem-data {
  font: 500 11px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.contagem-data { letter-spacing: .08em; text-transform: none; font-size: 12px; text-wrap: balance; }
/* O cinza da casa (--mute) some sobre o fundo oliva do hero em corpo de
   10 a 12px. Offwhite translúcido mantém a hierarquia e lê. */
.contagem-rot, .contagem-data, .contagem-n i { color: rgba(244,241,234,.72); }
.contagem-n { display: flex; align-items: flex-start; gap: clamp(6px, 1.2vw, 14px); }
.contagem-n > span:not(.sep) { display: grid; justify-items: center; gap: 6px; min-width: 2.6ch; }
.contagem-n b {
  font: 500 clamp(30px, 3.4vw, 48px)/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--off);
}
.contagem-n i {
  font: 500 10px var(--mono);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.contagem-n .sep {
  font: 500 clamp(26px, 3vw, 42px)/1 var(--mono);
  color: var(--mute);
  opacity: .5;
}
.contagem.aberta .contagem-n { display: none; }
.contagem.aberta .contagem-rot { color: var(--yel); }

/* ===== Como você vai aprender (Academy) =====
   Pedido do Paulo em 02/10/2026: trocar "Como eu ensino", e a dobra mais
   visual, com profundidade e melhor uso da tela no celular. Era um título
   que gira, uma linha e três pílulas boiando no meio de uma tela inteira.

   As pílulas viraram três cartões com as fotos P&B da casa, e o título
   conversa com eles: a palavra entre colchetes acende o cartão dela.

   Profundidade em três planos: a luz difusa no fundo da seção, os cartões
   de vidro escuro (realce de 1px no topo e sombra longa, a mesma receita
   dos Serviços do Estúdio) e a foto lá dentro, escurecida por baixo para
   o texto assentar. O número vazado é a camada da frente. */
.aprender {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(55% 60% at 50% 30%, rgba(244,241,234,.05) 0%, rgba(244,241,234,.015) 50%, rgba(244,241,234,0) 80%),
    radial-gradient(40% 50% at 85% 95%, rgba(255,246,96,.035) 0%, rgba(255,246,96,0) 70%);
}
.apr-topo { display: grid; gap: 22px; justify-items: center; text-align: center; }
.apr-topo .lead { max-width: 56ch; }
/* No largo o título vai numa linha só: empilhado em três, ele comia 200px
   e a dobra passava da tela (1042px a 1440x900). */
@media (min-width: 761px) {
  /* o vão entre as palavras é medido no corpo do título, e não no da seção:
     em .28em da letra pequena ele dava 4px, e o colchete grudava. */
  .aprender .rotw { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .28em; font-size: clamp(36px, 4.2vw, 64px); }
  .aprender .rotw h2 { font-size: clamp(36px, 4.2vw, 64px); }
}

.apr-cards {
  list-style: none;
  margin: clamp(36px, 5.5vh, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}
.apr-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(340px, 46vh, 500px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 2.2vw, 32px);
  /* o número fica solto no topo; este respiro é o lugar dele, para o texto
     nunca subir por cima: com texto longo, o cartão cresce em vez disso */
  padding-top: clamp(100px, 9vw, 150px);
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--superficie);
  box-shadow:
    inset 0 1px 0 rgba(244,241,234,.09),
    0 40px 80px -40px rgba(0,0,0,.8);
  transition: border-color .5s ease, translate .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease;
}
.apr-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.55) contrast(1.05);
  scale: 1.04;
  transition: filter .7s ease, scale 1.2s cubic-bezier(.22,1,.36,1);
}
/* o pé escuro onde o texto assenta, e um véu de cima que segura o número */
.apr-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(14,14,15,.94) 0%, rgba(14,14,15,.72) 34%, rgba(14,14,15,.12) 70%, rgba(14,14,15,.35) 100%);
}
.apr-n {
  position: absolute; top: clamp(14px, 1.8vw, 24px); left: clamp(20px, 2.2vw, 32px);
  font: 500 clamp(64px, 7vw, 112px)/.9 var(--display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,241,234,.38);
  letter-spacing: -.02em;
  transition: -webkit-text-stroke-color .5s ease, text-shadow .5s ease;
}
.apr-tx { display: grid; gap: 10px; }
.apr-tx h3 { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.05; }
.apr-tx p { font: 400 14px/1.55 var(--mono); color: rgba(244,241,234,.78); max-width: 34ch; }

/* o cartão da palavra que está no título */
.apr-card.on {
  border-color: rgba(244,241,234,.28);
  translate: 0 -6px;
  box-shadow:
    inset 0 1px 0 rgba(244,241,234,.14),
    0 50px 90px -40px rgba(0,0,0,.9);
}
.apr-card.on img { filter: grayscale(1) brightness(.72) contrast(1.08); scale: 1; }
.apr-card.on .apr-n {
  -webkit-text-stroke-color: var(--yel);
  text-shadow: 0 0 22px rgba(255,246,96,.25);
}
@media (hover: hover) {
  .apr-card:hover img { filter: grayscale(1) brightness(.72) contrast(1.08); scale: 1; }
}
.apr-cta { display: flex; justify-content: center; margin-top: clamp(32px, 5vh, 56px); }

/* No celular os cartões andam para o lado, com o próximo espiando na
   borda: a dobra cabe numa tela (título, linha, cartão, botão) em vez de
   empilhar três cartões altos e virar duas telas e meia de rolagem. */
@media (max-width: 760px) {
  /* Em duas linhas ("Aprendendo com" / "[Resultados] reais"), e não em
     três: empilhado, o título levava 133px dos 812 da tela. */
  .aprender .rotw { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .28em; row-gap: 0; font-size: clamp(30px, 9vw, 38px); }
  .aprender .rotw h2 { font-size: clamp(30px, 9vw, 38px); }
  .apr-topo .lead { font-size: 13.5px; text-wrap: balance; }
  .apr-tx p { font-size: 13px; }
  .apr-topo { gap: 16px; }
  .apr-cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 12px;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    scroll-padding-inline: var(--pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-top: 22px;
    padding-block: 6px;
  }
  .apr-cards::-webkit-scrollbar { display: none; }
  .apr-card { min-height: min(46svh, 380px); scroll-snap-align: start; border-radius: 18px; }
  .apr-card.on { translate: none; }
  .apr-cta { margin-top: 24px; }
}

/* ===== O que você vai acessar (Academy) =====
   Pedido do Paulo em 02/10/2026: fotos nos cartões e a seção mais visual,
   "como a Outline fez com o gradiente vermelho, com o nosso amarelo".
   Medido em outline.global/academy: o fundo da seção leva brilhos difusos
   de vermelho bem escuro (radial 41% x 46%, a 30%); o cartão é quase preto,
   com sombra em camadas; a foto ocupa o lado direito (65%) e se dissolve no
   preto em direção ao texto; o número é grande, cinza e fica atrás do
   título. No celular a foto sobe para o topo e se dissolve para baixo.

   Aqui o vermelho vira o amarelo da casa. Amarelo sobre preto acende muito
   mais que vermelho escuro, então a dose é menor: 7 a 10%, não 30%. */
#incluso {
  position: relative;
  background:
    radial-gradient(41% 46% at 12% 18%, rgba(255,246,96,.10) 0%, rgba(255,246,96,0) 100%),
    radial-gradient(41% 46% at 88% 52%, rgba(255,246,96,.085) 0%, rgba(255,246,96,0) 100%),
    radial-gradient(41% 46% at 30% 92%, rgba(255,246,96,.07) 0%, rgba(255,246,96,0) 100%);
}

/* o rótulo vira pílula, como o "Included" deles: gradiente na horizontal */
#incluso .pilula {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,246,96,.32);
  background: linear-gradient(90deg, rgba(255,246,96,.16) 0%, rgba(255,246,96,.04) 100%);
  justify-self: start;
  width: fit-content;
}

#incluso .scard {
  /* a regra geral dava uma tela inteira a cada cartão; aqui ele tem o
     porte do da Outline, e a pilha continua grudando ao rolar */
  min-height: clamp(340px, 50vh, 480px);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  background:
    radial-gradient(70% 90% at 0% 100%, rgba(255,246,96,.085) 0%, rgba(255,246,96,0) 70%),
    #0B0B0C;
  border: 1px solid rgba(244,241,234,.08);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(244,241,234,.07),
    0 1px 4px -1px rgba(0,0,0,.72),
    0 3px 12px -2px rgba(0,0,0,.66),
    0 40px 80px -30px rgba(0,0,0,.85);
  isolation: isolate;
}
/* a foto: à direita, ocupando 64% do cartão, e dissolvendo no preto */
#incluso .sc-foto {
  position: absolute;
  inset: 0 0 0 auto;
  width: 64%;
  z-index: -1;
}
/* Em cor, a pedido do Paulo: é a única seção do site com foto colorida,
   como nos cartões da Outline. O brilho baixa um pouco para a foto não
   gritar mais alto que o título. */
#incluso .sc-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.04) brightness(.86);
}
/* A dissolução é máscara, não tinta por cima: o fundo do cartão tem um
   brilho amarelo, e uma sombra de cor chapada deixava uma emenda vertical
   onde a foto começava. Com máscara a foto some no que estiver atrás. */
#incluso .sc-foto {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, rgba(0,0,0,.85) 50%, #000 68%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, rgba(0,0,0,.85) 50%, #000 68%);
}
#incluso .scard .tx {
  max-width: min(46%, 520px);
  gap: 16px;
}
/* o número atrás do título, como no deles: grande, cinza, encostado */
#incluso .scard .num {
  position: static;
  display: block;
  margin-bottom: -.42em;
  font: 700 clamp(84px, 9vw, 150px)/.9 var(--display);
  letter-spacing: -.05em;
  color: #232323;
  opacity: 1;
  pointer-events: none;
}
#incluso .scard h3 { position: relative; font-size: clamp(14px, 1.15vw, 17px); }
#incluso .scard p { color: rgba(244,241,234,.8); text-wrap: pretty; }
#incluso .scard .cnt { color: var(--yel); opacity: .8; }

/* No estreito a foto sobe para o topo e dissolve para baixo; o cartão
   tem a altura do conteúdo, e não mais uma tela inteira com um vão no
   meio. */
@media (max-width: 820px) {
  #incluso .scard {
    min-height: 0;
    padding: 0 22px 26px;
    align-items: start;
  }
  #incluso .sc-foto {
    position: relative;
    inset: auto;
    width: calc(100% + 44px);
    margin-inline: -22px;
    aspect-ratio: 4 / 3;
    z-index: 0;
  }
  #incluso .sc-foto {
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, rgba(0,0,0,.4) 22%, rgba(0,0,0,.9) 52%, #000 70%);
            mask-image: linear-gradient(0deg, transparent 0%, rgba(0,0,0,.4) 22%, rgba(0,0,0,.9) 52%, #000 70%);
  }
  #incluso .scard .tx { max-width: none; margin-top: -54px; position: relative; z-index: 1; }
  #incluso .scard .num { font-size: 92px; }
}

/* ===== Bastidores: uma história só, a da Ponto =====
   Pedido do Paulo em 02/10/2026: das histórias que vamos abrir, fica só a
   Ponto. Sem as outras, as abas não tinham o que filtrar e saíram; e um
   cartão de um terço da largura deixaria dois terços de vazio. Ele vira
   faixa: a foto larga (a única de 1760px na pasta de pôsteres, a da Ponto
   com a CBL) e o nome por cima, no pé. */
.proj-g.uma { grid-template-columns: 1fr; }
.proj-largo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  min-height: clamp(300px, 44vh, 460px);
  display: flex;
  align-items: flex-end;
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(244,241,234,.07), 0 40px 80px -30px rgba(0,0,0,.85);
}
.proj-largo .pl-foto { position: absolute; inset: 0; z-index: -1; }
.proj-largo .pl-foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.04) brightness(.8);
  transition: scale 1.2s cubic-bezier(.22,1,.36,1), filter .6s ease;
}
.proj-largo .pl-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.55) 32%, rgba(11,11,12,0) 65%);
}
.proj-largo .pl-tx { display: grid; gap: 10px; padding: clamp(22px, 3vw, 40px); }
.proj-largo .nm { font: 500 clamp(22px, 2.4vw, 36px)/1.05 var(--display); letter-spacing: -.02em; text-transform: none; }
.proj-largo .pl-ver { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(244,241,234,.75); transition: color .3s; }
@media (hover: hover) {
  .proj-largo:hover .pl-foto img { scale: 1.03; filter: contrast(1.04) brightness(.9); }
  .proj-largo:hover .pl-ver { color: var(--yel); }
}
#bastidores .head .lead .ln { display: block; }
/* No celular o corte em pé da foto larga mostrava só céu (a pessoa fica
   na beirada direita dela), então lá entra outra da Ponto, a da praia,
   pelo <picture>. */
.proj-largo picture { display: contents; }
@media (max-width: 760px) {
  #bastidores .head .lead .ln { display: inline; }
  #bastidores .head .lead { text-wrap: pretty; }
}

/* ===== Ferramentas: página em construção =====
   Pedido do Paulo em 02/10/2026: a plataforma ainda não vai ser lançada,
   então a página é só a dobra de cima — rótulo, BMR TOOLS e um campo de
   e-mail para a lista de espera. O campo e o botão moram numa pílula só,
   no largo; no estreito empilham, para o botão não espremer o e-mail.
   Sem `novalidate`: o navegador recusa e-mail mal escrito antes de o
   formulário dizer "pronto". */
.lista-email { width: min(100%, 500px); max-width: none; gap: 0; }
.le-linha {
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(244,241,234,.16);
  border-radius: 999px;
  background: rgba(14,14,15,.55);
  backdrop-filter: blur(6px);
  transition: border-color .25s;
}
.le-linha:focus-within { border-color: rgba(244,241,234,.5); }
.lista-email .le-linha input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0 18px;
}
.lista-email .le-linha input:focus { border: 0; }
.lista-email .le-linha .btn { flex: none; justify-content: center; }
.lista-email .ok { text-align: center; }
@media (max-width: 520px) {
  .le-linha { flex-direction: column; border-radius: 20px; padding: 8px; }
  .lista-email .le-linha input { text-align: center; }
}

/* ===== Sobre, mais visual =====
   Pedido do Paulo em 02/10/2026. A página era só texto: quatro dobras
   inteiras, o manifesto ocupando metade da largura e o resto vazio, os
   pilares e a missão em colunas de texto cinza miúdo. Ela passa a usar o
   vocabulário que o resto do site já tem — a foto canelada da capa, os
   cartões de foto de "Como você vai aprender", o vidro dos Serviços e o
   brilho amarelo difuso de "O que você vai acessar". Nada novo inventado:
   a página fica parecida com as irmãs. */

/* -- manifesto, como o About da Outline --
   Medido em outline.global/about: nada de foto ao lado. O texto fica no
   centro da tela, com fotos pequenas encaixadas entre as palavras; atrás,
   o nome da empresa gigante e quase apagado, sobre um fundo escuro com um
   brilho na cor da casa; e o "[BUT THERE'S MORE] ↓" embaixo, chamando para
   descer. Aqui o vermelho deles é o nosso amarelo, e o nome é o BMR. */
.sobre-manif {
  position: relative;
  overflow: hidden;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(38% 52% at 88% 62%, rgba(255,246,96,.09) 0%, rgba(255,246,96,0) 100%),
    radial-gradient(30% 40% at 10% 20%, rgba(255,246,96,.04) 0%, rgba(255,246,96,0) 100%);
}
.sm-ghost { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; user-select: none; opacity: .032; }
.sobre-manif h1 { font-size: clamp(40px, 5.4vw, 92px); line-height: 1; max-width: 14ch; }
@media (max-width: 760px) {
  .sobre-manif h1 { font-size: clamp(30px, 10vw, 48px); }
}
.sm-ghost .wm { width: 108vw; max-width: none; }
.sobre-manif h1 { position: relative; z-index: 1; }
/* as fotinhas entre as palavras: altura de uma letra maiúscula, cantos
   discretos, e em cor, como as deles */
.sobre-manif .chip {
  display: inline-block;
  width: 1.18em; height: .74em;
  margin-inline: .06em;
  vertical-align: .02em;
  border-radius: .1em;
  overflow: hidden;
  box-shadow: 0 .08em .3em rgba(0,0,0,.5);
}
.sobre-manif .chip img { width: 100%; height: 100%; object-fit: cover; }
.sm-mais {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 10px;
  margin-top: clamp(28px, 6vh, 72px);
  font: 500 12px var(--mono); letter-spacing: .12em;
  color: var(--yel); text-decoration: none;
}
.sm-mais span:last-child { font-size: 18px; transition: translate .3s ease; }
.sm-mais:hover span:last-child { translate: 0 4px; }
/* -- os 3 pilares: cartões de foto, como os de "Como você vai aprender" -- */
#pilares {
  background:
    radial-gradient(41% 46% at 15% 70%, rgba(255,246,96,.06) 0%, rgba(255,246,96,0) 100%),
    radial-gradient(41% 46% at 85% 30%, rgba(255,246,96,.05) 0%, rgba(255,246,96,0) 100%);
}
.pilares-cards { margin-top: 0; }
.pilares-cards .apr-card { color: inherit; text-decoration: none; }
.pil-ir {
  font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244,241,234,.7); transition: color .3s;
}
@media (hover: hover) {
  .pilares-cards .apr-card:hover { border-color: rgba(244,241,234,.28); translate: 0 -6px; }
  .pilares-cards .apr-card:hover .apr-n { -webkit-text-stroke-color: var(--yel); }
  .pilares-cards .apr-card:hover .pil-ir { color: var(--yel); }
}
.pilares-cards .apr-card:focus-visible { outline: 2px solid var(--yel); outline-offset: 4px; }

/* -- missão e visão: dois cartões de vidro com número vazado -- */
#missao-visao {
  background:
    radial-gradient(41% 46% at 25% 60%, rgba(255,246,96,.06) 0%, rgba(255,246,96,0) 100%),
    radial-gradient(41% 46% at 80% 40%, rgba(255,246,96,.045) 0%, rgba(255,246,96,0) 100%);
}
#missao-visao .mv { gap: clamp(14px, 1.6vw, 24px); }
#missao-visao .mv > div {
  position: relative;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(24px, 3vw, 44px);
  border-radius: 22px;
  border: 1px solid rgba(244,241,234,.08);
  background:
    linear-gradient(180deg, rgba(244,241,234,.045), rgba(244,241,234,.01)),
    var(--superficie);
  box-shadow: inset 0 1px 0 rgba(244,241,234,.09), 0 40px 80px -40px rgba(0,0,0,.75);
}
.mv-n {
  font: 500 clamp(56px, 6vw, 96px)/.9 var(--display);
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,246,96,.55);
}
#missao-visao .mv h3 { font-size: clamp(24px, 2.2vw, 34px); }
#missao-visao .mv p { color: rgba(244,241,234,.8); }

/* -- o time: as fotos do Paulo (a de perfil) e do Samuel (a da câmera, do
   Instagram dele), as duas em P&B, com o mesmo contraste e grão. */
.m-foto {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(244,241,234,.08);
  background: var(--superficie);
  box-shadow: inset 0 1px 0 rgba(244,241,234,.07), 0 30px 60px -30px rgba(0,0,0,.8);
}
.m-foto img { width: 100%; height: 100%; object-fit: cover; }
/* A foto das luzes (Estúdio) já é escura de origem; com o escurecimento
   dos cartões de "Como você vai aprender" ela virava silhueta. */
.pilares-cards .apr-card img { filter: grayscale(1) brightness(.7) contrast(1.05); }

/* ===== Contato, como o da Outline =====
   Pedido do Paulo em 02/10/2026. Medido em outline.global/contact: título
   no alto à esquerda; os contatos numa lista de duas colunas, cada item com
   um fio em cima e o rótulo entre colchetes na cor da casa; à direita,
   três fotos soltas em alturas diferentes, cada uma com uma legenda curta
   que é um valor da empresa; e o fundo escuro com um brilho de cor. As
   legendas aqui são os valores que a página Time já escreve. */
.contato-hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  background:
    radial-gradient(45% 60% at 82% 45%, rgba(255,246,96,.08) 0%, rgba(255,246,96,0) 100%),
    radial-gradient(35% 45% at 8% 90%, rgba(255,246,96,.04) 0%, rgba(255,246,96,0) 100%);
}
.ct-esq { display: grid; gap: 22px; align-content: center; }
.contato-hero h1 { max-width: 11ch; }
.ct-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 36px);
  margin-top: clamp(10px, 3vh, 36px);
}
.ct-item {
  display: grid; gap: 8px; align-content: start;
  padding: 16px 0 20px;
  border-top: 1px solid rgba(244,241,234,.22);
}
.ct-item .v { font: 500 13px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--off); text-decoration: none; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.ct-item .v a { color: inherit; text-decoration: none; }
.ct-item a:hover { color: var(--yel); }

/* as três fotos soltas: posição em porcentagem da caixa, então no
   celular a mesma composição só encolhe */
.ct-fotos { position: relative; height: min(68svh, 620px); }
.ct-f { position: absolute; margin: 0; display: grid; gap: 10px; }
.ct-f img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.85);
}
.ct-f figcaption {
  font: 500 10px/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244,241,234,.75);
}
.ct-f.f1 { top: 0; left: 30%; width: 30%; aspect-ratio: 3 / 4; grid-template-rows: auto 1fr; }
.ct-f.f1 figcaption { order: -1; }
.ct-f.f2 { bottom: 0; left: 0; width: 40%; aspect-ratio: 4 / 3; }
.ct-f.f2 figcaption { position: absolute; right: -2px; bottom: 6px; translate: 100% 0; padding-left: 14px; }
.ct-f.f3 { top: 34%; right: 0; width: 30%; aspect-ratio: 3 / 4; grid-template-rows: auto 1fr; }
.ct-f.f3 figcaption { order: -1; text-align: right; }

/* No estreito, soltas por porcentagem elas se amontoavam: viram uma
   fileira de três, em alturas desencontradas, com a legenda embaixo. */
@media (max-width: 820px) {
  .contato-hero { grid-template-columns: 1fr; row-gap: 32px; align-content: center; }
  .ct-fotos { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .ct-f { min-width: 0; }
  .ct-f, .ct-f.f1, .ct-f.f2, .ct-f.f3 { position: static; width: auto; aspect-ratio: auto; grid-template-rows: none; }
  .ct-f img { aspect-ratio: 3 / 4; height: auto; }
  .ct-f figcaption, .ct-f.f1 figcaption, .ct-f.f2 figcaption, .ct-f.f3 figcaption { order: 0; position: static; translate: none; padding: 0; text-align: left; font-size: 9px; }
  .ct-f.f1 { margin-top: 28px; }
  .ct-f.f3 { margin-top: 12px; }
}
@media (max-width: 420px) {
  .ct-lista { grid-template-columns: 1fr; }
}

/* ===== Time: o banco de talentos numa dobra só =====
   Pedido do Paulo em 02/10/2026: a página é para quem quer entrar no banco
   de talentos, e ela inteira cabe na primeira dobra. Saíram "o que move a
   gente", a lista aberta de áreas, o time (que já está no Sobre), os
   valores e as duas galerias, que eram quadros vazios esperando foto. O
   que fica: o convite, as quatro áreas como etiquetas e o formulário, num
   cartão de vidro ao lado. */
.talentos { place-items: center; text-align: left; }
.talentos .ghost { opacity: .03; }
.tl-in {
  position: relative; z-index: 1;
  width: min(100%, 1180px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.tl-esq { display: grid; gap: 20px; justify-items: start; }
.talentos h1 { font-size: clamp(48px, 7vw, 112px); line-height: .95; }
.talentos .lead { max-width: 44ch; }
.tl-areas { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tl-areas li {
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid rgba(255,246,96,.3);
  background: linear-gradient(90deg, rgba(255,246,96,.12), rgba(255,246,96,.03));
  font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.tl-form {
  max-width: none; margin: 0;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: 22px;
  border: 1px solid rgba(244,241,234,.08);
  background: linear-gradient(180deg, rgba(244,241,234,.045), rgba(244,241,234,.01)), var(--superficie);
  box-shadow: inset 0 1px 0 rgba(244,241,234,.09), 0 40px 80px -40px rgba(0,0,0,.8);
}
.tl-form .tl-full, .tl-form .ok { grid-column: 1 / -1; }
.tl-form input, .tl-form select { min-height: 44px; }
.tl-form .chk { font-size: 12px; }
@media (max-width: 860px) {
  .tl-in { grid-template-columns: 1fr; gap: 26px; }
  .talentos h1 { font-size: clamp(40px, 12vw, 60px); }
  .talentos .lead { font-size: 14px; }
}
@media (max-width: 480px) {
  .tl-form { gap: 10px; padding: 18px; }
  .tl-areas li { padding: 7px 11px; font-size: 10px; }
}

/* No celular o menu Descubra tinha alvos de 19px de altura, menos da
   metade do que um dedo acerta. O vão vertical vira área de toque. */
@media (max-width: 760px) {
  .dmenu a { padding-block: 10px; }
  .dmenu ul, .dmenu { row-gap: 0; }
}

/* ===== página de erro ===== */
.erro404 { text-align: center; }
.erro404 .hero-in { gap: 22px; }
.erro404 .e-n {
  font: 500 clamp(120px, 22vw, 300px)/.85 var(--display);
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,246,96,.55);
}

/* ===== formulários de verdade =====
   A isca de robô: um campo que a pessoa não vê e o robô preenche. Fora da
   tela, e não `display:none`, que alguns robôs sabem pular. */
.form .isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form { position: relative; }
.form .erro {
  grid-column: 1 / -1;
  padding: 12px 16px; border-radius: 12px;
  border: 1px solid rgba(255,140,90,.5); color: #FFB38F;
  font: 400 13px/1.5 var(--mono);
}
.form .erro[hidden] { display: none; }
.form button[disabled] { opacity: .6; cursor: progress; }

/* o @ da Ponto no subtítulo do Academy: o mesmo link do Estúdio, amarelo e
   sublinhado, para ficar claro que leva ao Instagram */
.acad-sub a { color: var(--yel); text-decoration: underline; text-underline-offset: 3px; }
.acad-sub a:hover { text-decoration-thickness: 2px; }