/* Versão bege: a mesma página da versão A, só com outra identidade (claro, jeito Apple, bege, preto e vermelho).
   Carrega depois do styles.css e troca cores e tipografia, sem mexer na estrutura.
   Anton fica só no nome DEMIAN MORARU, o resto é Inter Tight em caixa baixa com espaçamento apertado. */
:root{
  --bg:#F3EEE5; --bg-2:#E9E1D3; --ink:#121110; --muted:#6E665B; --faint:#A69D8F; --line:#DDD4C5;
  --acc:#D7262E;
  --display:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
}
.light{--bg:#F3EEE5;--bg-2:#E9E1D3;--ink:#121110;--muted:#6E665B;--faint:#A69D8F;--line:#DDD4C5;--acc:#D7262E}
.alt{--bg:#E9E1D3;--bg-2:#DFD6C6;background:var(--bg)}
/* faixas pretas: a mesma paleta invertida */
.hero,.marquee,.final,.story-wide,.front,#frentes,.dark{--bg:#121110;--bg-2:#1C1A18;--ink:#F3EEE5;--muted:#A69D8F;--faint:#6E665B;--line:#2E2B27;--acc:#E3262E}
.marquee,.story-wide,.front,#frentes{background:#121110;color:#F3EEE5}
footer{--bg:#F3EEE5;--ink:#121110;--muted:#6E665B;--line:#DDD4C5;background:#F3EEE5;color:#121110}
::selection{background:#121110;color:#F3EEE5}

/* tipografia: títulos em Inter Tight, caixa baixa, como na Apple */
.display{font-family:var(--display);font-weight:600;text-transform:none;letter-spacing:-.045em;line-height:.98}
.h2{font-size:clamp(2.75rem,6.6vw,7rem)}
.final .h2{font-size:clamp(3rem,8.4vw,8.5rem)}
.mirror-title .display{font-size:clamp(2.5rem,7vw,7.5rem)}
.guide .h2{font-size:clamp(2.75rem,6vw,6rem)}
.manifesto p{text-transform:none;font-weight:600;letter-spacing:-.04em;line-height:1.04;font-size:clamp(2.1rem,5vw,5.25rem)}
.marquee span{text-transform:none;font-weight:600;letter-spacing:-.03em}
.tl .yr{text-transform:none;font-weight:600;letter-spacing:-.04em;font-size:clamp(2.2rem,3.8vw,3.75rem)}
.front h3{text-transform:none;font-weight:600;letter-spacing:-.045em;font-size:clamp(2.5rem,5vw,5rem)}
.front .num{font-weight:600;letter-spacing:-.04em;color:#3A3631}
.pair .was,.pair b{text-transform:none;font-weight:600;letter-spacing:-.03em}
.menu a{text-transform:none;font-weight:600;letter-spacing:-.04em}
.pop-card h2{text-transform:none;font-weight:600;letter-spacing:-.045em}
/* o nome continua na fonte quadradona */
.display.hero-name,.foot-name{font-family:"Anton","Impact",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.02em}

/* botões: preto no bege, bege no preto */
.btn.fill{background:#121110;border-color:#121110;color:#F3EEE5}
.btn.fill:hover{background:#2E2B27;border-color:#2E2B27;color:#F3EEE5}
.hero .btn.fill,.final .btn.fill,.front .btn.fill,#frentes .btn.fill,.story-wide .btn.fill{background:#F3EEE5;border-color:#F3EEE5;color:#121110}
.hero .btn.fill:hover,.final .btn.fill:hover,.front .btn.fill:hover{background:#fff;border-color:#fff;color:#121110}
.btn:hover{background:var(--ink);color:var(--bg)}
.front .btn:not(.fill){border-color:#F3EEE5}
.front .btn:not(.fill):hover{background:#F3EEE5;color:#121110}

/* navegação: texto claro em cima do vídeo, vidro bege depois de rolar */
.nav:not(.solid){--ink:#F3EEE5;--muted:rgba(243,238,229,.78)}
.nav.solid{background:rgba(243,238,229,.78);border-bottom:1px solid var(--line)}
.nav.solid::after{display:none}

/* destaques */
.manifesto .w.key.on{color:var(--acc)}
.photo-dots button.on::after{background:var(--ink)}
.timeline .fill,.tl.on::before{background:var(--acc);border-color:var(--acc)}
.photo-stack,.gallery figure,.story-row figure,.guide-photo{background:#DDD4C5}
.light .round{border-color:rgba(18,17,16,.2)}
.pair .was{text-decoration-color:rgba(18,17,16,.28)}

/* fotos com cantos arredondados, jeito Apple */
.photo-stack,.story-row figure,.guide-photo,.hero-video{border-radius:18px}
.story-wide img{border-radius:0}
.hero,.final{color:var(--ink)}

/* seções pretas alternando com as claras (a jornada fica escura) */
.dark{background:#121110;color:#F3EEE5}
.dark .round{border-color:rgba(243,238,229,.28);color:#F3EEE5}
.dark .round:hover{background:#F3EEE5;color:#121110}
.dark .photo-stack{background:#1C1A18}
.dark .tl::before{background:#121110}
.dark .btn:not(.fill){border-color:#F3EEE5}
.dark .btn.fill{background:#F3EEE5;border-color:#F3EEE5;color:#121110}
.photo-dots button.on::after{background:var(--acc)}

/* três frentes no formato da versão 2: três cartões lado a lado, foto por trás do título sumindo no cartão */
.f-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.f-card{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:250px clamp(24px,2.6vw,36px) clamp(26px,3vw,40px);background:#1C1A18;border-radius:18px;scroll-margin-top:90px}
.f-card > *{position:relative;z-index:2}
.f-card .f-bg{position:absolute;z-index:0;inset:0 0 auto 0;width:100%;height:380px;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.7)}
.f-card::before{content:"";position:absolute;z-index:1;inset:0 0 auto 0;height:381px;background:linear-gradient(180deg,rgba(28,26,24,0) 20%,rgba(28,26,24,.88) 66%,#1C1A18 92%)}
.f-card .kicker{display:block;font-size:.875rem;font-weight:500;color:#D2CBBF;margin-bottom:12px}
.f-card h3{font-family:var(--display);font-weight:600;letter-spacing:-.045em;font-size:clamp(2rem,3vw,2.75rem);line-height:1;margin:0 0 16px}
.f-card .tag{font-family:var(--display);font-size:1.1875rem;line-height:1.35;letter-spacing:-.01em;margin:0 0 12px;color:var(--ink)}
.f-card .who{color:var(--muted);font-size:.9375rem;margin:0 0 20px}
.f-card ul{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid rgba(243,238,229,.12)}
.f-card li{padding:12px 0;border-bottom:1px solid rgba(243,238,229,.12);font-size:.9375rem;color:var(--muted)}
.f-card li b{color:var(--ink);font-weight:500}
.f-card .btn{margin-top:auto;align-self:flex-start}
@media (max-width:1000px){.f-cards{grid-template-columns:1fr}}

/* ===== celular ===== */
@media (max-width:640px){
  /* abertura: nome maior, botões do mesmo tamanho um embaixo do outro */
  .hero .display.hero-name{font-size:27vw;line-height:.9}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta .btn{justify-content:center;width:100%}
  .cta-note{text-align:center}
  /* menos vazio entre as seções */
  .sec{padding:64px 0}
  .manifesto{padding:72px 0}
  .manifesto p{font-size:2rem}
  .sec-head{gap:14px;margin-bottom:32px}
  .h2{font-size:3rem}
  .final{padding:88px 0}
  .final .h2{font-size:3.25rem}
  .final .row{flex-direction:column;align-items:stretch}
  .final .row .btn{justify-content:center}
  /* jornada: marcos mais compactos */
  .tl{padding-bottom:36px}
  .tl .yr{font-size:2.25rem}
  /* reflexo: sem o espelho do título em tela pequena */
  .mirror-title .display{-webkit-box-reflect:below 0 linear-gradient(transparent,transparent);font-size:2.75rem}
  .mirror-title{margin-bottom:36px}
  .pair{padding:14px 0}
  .pair .was,.pair b{font-size:1.0625rem}
  /* frentes: foto do topo mais baixa */
  .f-card{padding-top:200px}
  .f-card .f-bg{height:300px}
  .f-card::before{height:301px}
  /* depoimentos: assinatura menor, foto menor */
  .depo-text{padding:56px 0 28px}
  .depo-hl{font-size:2.25rem;margin-bottom:22px}
  .depo-full{margin-bottom:22px}
  .depo-who{font-size:1rem;padding-top:20px}
  .depo-photo{width:72%;max-width:320px}
  .depo-slide{padding-bottom:72px}
  /* pop-up ocupa bem a tela */
  .pop-card{padding:28px 22px}
}

/* frentes em seção clara (depois que o reflexo saiu, para não juntar duas pretas), cartões continuam escuros */
#frentes.light{--bg:#F3EEE5;--bg-2:#E9E1D3;--ink:#121110;--muted:#6E665B;--faint:#A69D8F;--line:#DDD4C5;--acc:#D7262E;background:#F3EEE5;color:#121110}
.f-sub{margin:0;font-size:1.0625rem;font-weight:500;color:var(--muted)}
.f-card{--ink:#F3EEE5;--muted:#A69D8F;color:#F3EEE5}
.f-card .btn.fill{background:#F3EEE5;border-color:#F3EEE5;color:#121110}
.f-card .btn.fill:hover{background:#fff;border-color:#fff;color:#121110}
/* depoimentos num bege um tom abaixo, para separar das frentes */
.depo{background:#E9E1D3}
.depo-arrow{background:rgba(233,225,211,.85)}

/* ===== depoimentos (28/10): cartão escuro próprio, longe do formato do Rony ===== */
.dp{background:#E9E1D3;overflow:visible}
.dp .depo-slides{cursor:grab}
.dp-card{position:relative;margin-top:clamp(70px,8vw,120px);background:#121110;color:#F3EEE5;border-radius:24px;padding:0 clamp(24px,4vw,64px) clamp(26px,3vw,40px)}
.dp .depo-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:end;min-height:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.dp .depo-slide.on{opacity:1;visibility:visible;transition:opacity .6s ease}
/* a foto sai pela borda de cima do cartão */
.dp-photo{align-self:end;margin-top:clamp(-110px,-8vw,-60px);display:flex;justify-content:center}
.dp-photo img{display:block;width:100%;max-width:500px;max-height:560px;object-fit:contain;object-position:bottom center;filter:grayscale(1) contrast(1.05);user-select:none}
.dp-text{padding:clamp(40px,5vw,72px) 0 clamp(12px,2vw,24px)}
.dp-mark{display:block;font-family:var(--display);font-weight:600;font-size:clamp(5rem,9vw,8rem);line-height:.6;color:#E3262E;height:.45em}
.dp-hl{margin:0 0 22px;font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.08;font-size:clamp(1.75rem,2.8vw,2.75rem)}
.dp-full{margin:0 0 28px;color:#A69D8F;font-size:.9375rem;line-height:1.65;max-width:38em}
.dp-who{margin:0;display:flex;flex-direction:column;gap:4px}
.dp-who b{font-size:1.0625rem;font-weight:600}
.dp-who span{font-size:.875rem;color:#A69D8F;line-height:1.5;max-width:34em}
/* navegação: contador, barra de progresso e setas */
.dp-nav{display:flex;align-items:center;gap:16px;padding-top:22px;border-top:1px solid #2E2B27}
.depo-count{font-family:var(--display);font-weight:600;font-size:1.0625rem;letter-spacing:-.02em;white-space:nowrap}
.depo-count i{font-style:normal;color:#6E665B}
.dp-bar{flex:1;height:2px;background:#2E2B27;position:relative;overflow:hidden;border-radius:2px}
.dp-bar b{position:absolute;inset:0;background:#E3262E;transform-origin:0 50%;transform:scaleX(.5);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.dp .depo-arrow{position:static;width:44px;height:44px;border-radius:50%;border:1px solid #3A3631;background:transparent;color:#F3EEE5;font-size:1.0625rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.dp .depo-arrow:hover{background:#F3EEE5;color:#121110;border-color:#F3EEE5}
@media (max-width:860px){
  .dp .depo-slide{grid-template-columns:1fr;gap:0}
  .dp-photo{margin-top:-64px}
  .dp-photo img{max-width:300px;max-height:340px}
  .dp-text{padding:24px 0 8px}
  .dp-hl{font-size:1.625rem}
}
@media (prefers-reduced-motion:reduce){.dp .depo-slide,.dp .depo-slide.on,.dp-bar b{transition:none}}
.dp .depo-slide{padding-bottom:0}
/* foto presa na base do cartão e mais alta que ele: a cabeça passa da borda de cima */
@media (min-width:861px){
  .dp-card{margin-top:clamp(110px,10vw,150px)}
  .dp .depo-slide{display:block;position:relative;padding-left:46%}
  .dp-photo{position:absolute;left:0;bottom:0;width:42%;height:calc(100% + 120px);margin:0;display:block}
  .dp-photo img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:bottom center}
  .dp-text{min-height:380px;display:flex;flex-direction:column;justify-content:center}
}
@media (max-width:860px){
  .dp .depo-slide{display:block;align-self:start}
  .dp-card{margin-top:96px}
  .dp-photo{margin-top:-80px}
}
@media (min-width:861px){
  .dp .depo-slide{padding-left:50%}
  .dp-photo{left:-1%;width:49%;height:auto;top:auto;display:flex;align-items:flex-end;justify-content:center}
  .dp-photo img{width:100%;height:auto;max-height:calc(100% + 0px);object-fit:contain}
  .dp-photo{max-height:none}
  .dp-photo img{max-height:560px}
}

/* depoimentos (28/10, 2): fotos coloridas, e a foto se dissolve no fundo do cartão em vez de acabar num corte */
.dp-photo img{filter:none;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 26%),linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to top,transparent 0,#000 26%),linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);mask-composite:intersect}
/* um brilho suave atrás da pessoa, para ela não parecer colada no preto */
.dp-photo{isolation:isolate}
.dp-photo::before{content:"";position:absolute;z-index:-1;left:8%;right:8%;bottom:0;height:78%;background:radial-gradient(ellipse at 50% 70%,rgba(243,238,229,.10),rgba(243,238,229,0) 70%);pointer-events:none}
@media (max-width:860px){.dp-photo{position:relative}}
/* no celular o cartão acompanha a altura do depoimento da vez (sem vazio nos curtos) */
@media (max-width:860px){
  .dp .depo-slide{display:none}
  .dp .depo-slide.on{display:block;animation:dpIn .5s ease}
}
@keyframes dpIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dp .depo-slide.on{animation:none}}

/* depoimentos (28/10, 3): sem recorte, a foto inteira num espaço próprio (moldura arredondada ao lado do texto) */
.dp-card{margin-top:clamp(36px,5vw,64px)}
.dp .depo-slide{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(26px,3vw,40px) 0 0}
.dp-photo,.dp-photo::before{all:unset}
.dp-photo{display:block;position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#1C1A18;margin:0}
.dp-photo img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none;-webkit-mask-image:none;mask-image:none}
.dp-text{min-height:0;padding:0;display:block}
@media (min-width:861px){
  .dp .depo-slide{padding-left:0}
  .dp-photo{position:relative;left:auto;bottom:auto;width:auto;height:auto}
  .dp-photo img{width:100%;height:100%}
}
@media (max-width:860px){
  .dp .depo-slide{grid-template-columns:1fr;gap:22px}
  .dp-photo{aspect-ratio:1/1;margin-top:0}
  .dp-card{margin-top:28px}
}
.dp-nav{margin-top:clamp(26px,3vw,40px)}
@media (max-width:860px){
  .dp .depo-slide{display:none}
  .dp .depo-slide.on{display:grid}
  .dp-text{padding-top:30px}
}

/* ===== 28/10 (4): cantos retos em tudo que é cartão e foto; depoimento simétrico ===== */
.photo-stack,.photo-stack img,.story-row figure,.guide-photo,.hero-video,.f-card,.dp-card,.dp-photo,.tl-img,.pop-card,.gallery figure,.masonry figure{border-radius:0}
.dp-bar{border-radius:0}
/* cartão do depoimento com o mesmo respiro nos quatro lados; texto começa na altura do topo da foto e o nome termina na base dela */
.dp-card{--dpp:clamp(24px,4vw,56px);padding:var(--dpp)}
.dp .depo-slide{padding:0;align-items:stretch}
.dp-text{display:flex;flex-direction:column;padding:0}
.dp-mark{font-size:3.5rem;line-height:.8;height:.5em;margin:0 0 14px}
.dp-who{margin-top:auto;padding-top:24px}
.dp-nav{margin-top:var(--dpp);padding-top:var(--dpp)}
@media (max-width:860px){.dp-text{padding-top:6px}.dp-who{margin-top:0}}
/* fotos dos depoimentos já vêm enquadradas iguais (rosto do mesmo tamanho e na mesma altura): a moldura não corta nada */
.dp-photo picture{display:block;width:100%;height:100%}
.dp-photo img{object-position:50% 50%}
/* a largura da foto vem da coluna (e a altura da proporção), nunca o contrário: assim ela não invade o texto em tela nenhuma */
.dp .depo-slide{align-items:stretch}
.dp-photo{align-self:start;width:100%;min-width:0;height:auto}
.dp-photo picture,.dp-photo img{width:100%;height:100%;max-width:100%}
.dp-text{min-width:0}
/* foto e texto começam na mesma linha; o nome vem logo depois do texto; o conjunto fica centralizado na altura do cartão */
.dp .depo-slide{align-items:start;align-content:center}
.dp-text{display:block}
.dp-who{margin-top:0;padding-top:24px}

/* ===== depoimentos (28/10, 5): seção inteira estilo Rony, identidade nossa ===== */
.dq{position:relative;background:#E9E1D3;color:#121110;overflow:hidden}
.dq .depo-slides{display:grid;cursor:grab}
.dq .depo-slide{grid-area:1/1;position:relative;display:flex;align-items:center;min-height:min(calc(100svh - 74px),820px);
  padding:clamp(72px,8vw,110px) 0 150px;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.dq .depo-slide.on{opacity:1;visibility:visible;transition:opacity .6s ease}
/* foto ocupa a metade direita inteira e se dissolve no bege pela esquerda e por baixo */
.dq-photo{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:0}
.dq-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 22%,#000 46%),linear-gradient(to top,transparent 0,#000 22%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 22%,#000 46%),linear-gradient(to top,transparent 0,#000 22%);mask-composite:intersect}
.dq-in{position:relative;z-index:1;width:100%}
.dq-text{max-width:min(560px,46%)}
.dq-eyebrow{margin:0 0 26px;font-size:.8125rem;font-weight:500;color:#6E665B}
.dq .dp-mark{display:block;font-family:var(--display);font-weight:600;font-size:4rem;line-height:.8;height:.5em;color:#D7262E;margin:0 0 14px}
.dq .dp-hl{margin:0 0 20px;font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.06;font-size:clamp(1.9rem,3vw,3rem);color:#121110}
.dq .dp-full{margin:0 0 26px;font-size:.9375rem;line-height:1.65;color:#4A443C}
.dq .dp-who{margin:0;padding-top:20px;border-top:1px solid rgba(18,17,16,.18);display:flex;flex-direction:column;gap:4px}
.dq .dp-who b{font-size:1.0625rem;font-weight:600}
.dq .dp-who span{font-size:.875rem;color:#6E665B;line-height:1.5}
/* setas sempre à vista: embaixo do texto, dentro da seção */
.dq-navwrap{position:absolute;left:0;right:0;bottom:clamp(36px,5vw,56px);z-index:2}
.dq .dq-nav{display:flex;align-items:center;gap:12px;max-width:min(560px,46%);margin:0;padding:0;border:0}
.dq .depo-arrow{position:static;width:52px;height:52px;border-radius:50%;border:1px solid #121110;background:#121110;color:#F3EEE5;font-size:1.125rem;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.dq .depo-arrow:hover{background:#D7262E;border-color:#D7262E}
.dq .depo-arrow[data-dir="-1"]{background:transparent;color:#121110}
.dq .depo-arrow[data-dir="-1"]:hover{background:#121110;color:#F3EEE5;border-color:#121110}
.dq .depo-count{margin-left:10px;font-family:var(--display);font-weight:600;font-size:1.0625rem;color:#121110;white-space:nowrap}
.dq .depo-count i{font-style:normal;color:#A69D8F}
.dq .dp-bar{flex:1;height:2px;background:rgba(18,17,16,.15);position:relative;overflow:hidden}
.dq .dp-bar b{position:absolute;inset:0;background:#D7262E;transform-origin:0 50%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
@media (max-width:860px){
  .dq .depo-slide{display:none;min-height:0;padding:0 0 120px}
  .dq .depo-slide.on{display:block;animation:dpIn .5s ease}
  .dq-photo{position:relative;width:100%;height:min(92vw,420px)}
  .dq-photo img{object-position:50% 20%;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 35%);mask-image:linear-gradient(to top,transparent 0,#000 35%)}
  .dq-text{max-width:none;margin-top:-30px}
  .dq .dq-nav{max-width:none}
  .dq-navwrap{bottom:36px}
}
@media (prefers-reduced-motion:reduce){.dq .depo-slide,.dq .depo-slide.on,.dq .dp-bar b{transition:none;animation:none}}
/* foto vertical no computador (mostra cabeça e ombros, sem zoom exagerado) */
.dq-photo picture{display:block;width:100%;height:100%}
.dq-photo img{object-position:50% 18%}
/* setas acompanham a rolagem enquanto a seção está na tela: nunca somem, mesmo em depoimento longo ou tela baixa */
.dq-navwrap{position:sticky;bottom:0;left:auto;right:auto;margin-top:-120px;height:120px;display:flex;align-items:center;pointer-events:none;
  background:linear-gradient(to top,#E9E1D3 55%,rgba(233,225,211,0))}
.dq-navwrap .dq-nav{pointer-events:auto;width:100%}
@media (min-width:861px){.dq-navwrap{background:linear-gradient(to top,#E9E1D3 55%,rgba(233,225,211,0)) 0 0/50% 100% no-repeat}}
.dq{overflow:clip}
/* foto menor (nítida: nunca maior que o original) dentro da margem do site, se dissolvendo no bege por todos os lados */
@media (min-width:861px){
  .dq-photo{top:calc(50% - 40px);bottom:auto;transform:translateY(-50%);right:max(var(--pad),calc((100vw - 1320px) / 2 + var(--pad)));
    width:min(34vw,430px);height:auto;aspect-ratio:4/5}
  .dq-photo img{object-position:50% 50%;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 72%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0,#000 28%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 72%,transparent 100%);mask-composite:intersect}
}
@media (max-width:860px){.dq-photo{height:min(80vw,360px)}.dq-photo img{object-position:50% 50%}}
@media (max-width:860px){
  .dq-photo{width:min(72vw,300px);height:auto;aspect-ratio:1/1;margin:32px auto 0}
  .dq-photo img{object-position:50% 50%;
    -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
  .dq-text{margin-top:8px}
}
@media (max-width:860px){
  .dq-photo{aspect-ratio:4/5;width:min(64vw,280px)}
  .dq-photo img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 74%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 74%,transparent 100%);mask-composite:intersect}
}
/* 28/10 (10): foto quadrada, sem esmaecer, cantos retos */
.dq-photo{aspect-ratio:1/1;border-radius:0;overflow:hidden}
.dq-photo img{-webkit-mask-image:none!important;mask-image:none!important;object-fit:cover;object-position:50% 50%}
@media (min-width:861px){.dq-photo{width:min(34vw,430px)}}
@media (max-width:860px){.dq-photo{width:min(72vw,300px);aspect-ratio:1/1}}

/* frentes: ao passar o mouse, a foto acende (cor e luz) e o cartão sobe um pouco */
.f-card{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
.f-card .f-bg{transition:filter .6s ease,transform .8s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  .f-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(18,17,16,.22)}
  .f-card:hover .f-bg{filter:grayscale(0) contrast(1.02) brightness(.95)}
}
.f-card:focus-within{transform:translateY(-8px)}
.f-card:focus-within .f-bg{filter:grayscale(0) brightness(.95)}
@media (prefers-reduced-motion:reduce){.f-card,.f-card .f-bg{transition:filter .3s ease}.f-card:hover,.f-card:focus-within{transform:none}.f-card:hover .f-bg{transform:none}}
/* cartões das frentes são clicáveis inteiros */
.f-card{cursor:pointer}
/* 13 fotos na jornada: bolinhas menores */
.photo-dots{gap:0;flex-wrap:wrap;justify-content:center}
.photo-dots button{width:18px}
.photo-dots button::after{width:6px;height:6px;margin:-3px 0 0 -3px}

/* ===== Do papel à rua (28/10): fotos distribuídas com propósito ===== */
.craft{overflow:clip}
.craft-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,96px);align-items:center}
.craft-street{margin-top:clamp(80px,10vw,150px);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.craft-copy .h2{margin:14px 0 20px}
.craft-copy .body{max-width:24em}
/* óculos: duas fotos sobrepostas, como em cima da mesa */
.craft-desk{position:relative;aspect-ratio:5/4}
.craft-desk figure{position:absolute;margin:0;overflow:hidden;box-shadow:0 24px 50px rgba(18,17,16,.18)}
.craft-desk img{display:block;width:100%;height:100%;object-fit:cover}
.cd-a{left:0;top:0;width:74%;aspect-ratio:3/2}
.cd-b{right:0;bottom:0;width:56%;aspect-ratio:3/2;border:8px solid #E9E1D3}
/* campanha: fotos soltas em alturas diferentes, "levitando" com a rolagem */
.float-field{position:relative;height:clamp(520px,52vw,720px)}
.ff{position:absolute;margin:0;overflow:hidden;box-shadow:0 22px 44px rgba(18,17,16,.2);will-change:transform}
.ff img{display:block;width:100%;height:100%;object-fit:cover}
.ff1{left:0;top:4%;width:46%;aspect-ratio:3/2}
.ff2{right:2%;top:0;width:40%;aspect-ratio:3/2}
.ff3{left:22%;top:42%;width:26%;aspect-ratio:2/3}
.ff4{right:0;top:44%;width:44%;aspect-ratio:3/2}
.ff5{left:2%;bottom:0;width:30%;aspect-ratio:3/2}
@media (max-width:860px){
  .craft-row,.craft-street{grid-template-columns:1fr}
  .craft-desk{aspect-ratio:4/3.4}
  .float-field{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .ff{position:relative;inset:auto;width:auto;aspect-ratio:3/2}
  .ff1{grid-column:1/-1}
  .ff3{grid-row:span 2;aspect-ratio:auto}
  .ff:nth-child(even){margin-top:24px}
}
@media (min-width:861px){
  .craft-street{grid-template-columns:1fr;gap:clamp(28px,3vw,44px)}
  .craft-street .craft-copy{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
  .craft-street .craft-copy .h2{margin:0}
  .craft-street .craft-copy .body{margin:0;max-width:26em}
  .float-field{height:clamp(560px,50vw,740px)}
  .ff1{left:0;top:2%;width:38%;aspect-ratio:3/2}
  .ff2{left:41%;top:12%;width:30%;aspect-ratio:3/2}
  .ff3{right:0;top:0;width:24%;aspect-ratio:2/3}
  .ff4{left:6%;top:50%;width:36%;aspect-ratio:3/2}
  .ff5{left:45%;top:56%;width:28%;aspect-ratio:3/2}
}
@media (min-width:861px){
  .ff{right:auto;bottom:auto}
  .ff1{left:0;top:4%;width:36%}
  .ff2{left:39%;top:14%;width:31%}
  .ff3{left:auto;right:0;top:0;width:25%}
  .ff4{left:5%;top:52%;width:35%}
  .ff5{left:44%;top:58%;width:28%}
}

/* ===== CTAs ao longo da página (29/10): página de captação ===== */
.cta-inline{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line)}
.cta-inline p{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.025em;font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.2;max-width:24em;color:var(--ink)}
.dark .cta-inline .btn.fill{background:#F3EEE5;border-color:#F3EEE5;color:#121110}
.dark .cta-inline .btn.fill:hover{background:#D7262E;border-color:#D7262E;color:#fff}
.cta-inline .btn.fill:hover{background:#D7262E;border-color:#D7262E;color:#fff}
.manifesto .cta-inline{max-width:880px}
/* celular: botão fixo embaixo da tela depois da abertura, some no fechamento */
.cta-bar{display:none}
@media (max-width:860px){
  .cta-inline{flex-direction:column;align-items:stretch}
  .cta-inline .btn{justify-content:center}
  .cta-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(243,238,229,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid #DDD4C5;
    transform:translateY(110%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .cta-bar.on{transform:none}
  .cta-bar .btn{width:100%;justify-content:center}
  body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){.cta-bar{transition:none}}

/* ===== A história em fotos (rascunho 30/10): 4 capítulos x 5 fotos, um por vez ===== */
.hist-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,48px)}
.hist-head .h2{margin:14px 0 0}
.hist-head .body{margin:0;max-width:24em}
.htabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin-bottom:clamp(26px,3vw,40px)}
.htab{position:relative;display:flex;align-items:baseline;gap:12px;padding:18px 4px 0;background:none;border:0;color:var(--muted);font:600 clamp(.95rem,1.2vw,1.1rem)/1.2 var(--display);letter-spacing:-.01em;text-align:left;cursor:pointer;transition:color .25s}
.htab span{font:600 .75rem var(--body);letter-spacing:.08em}
.htab::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.htab:hover,.htab.on{color:var(--ink)}
.htab.on::before{transform:scaleX(1)}
.htab:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.hpane{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,2fr);gap:clamp(24px,3.4vw,52px);align-items:end}
.hpane[hidden]{display:none}
.hpane:not([hidden]){animation:hIn .5s ease both}
@keyframes hIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hcopy h3{margin:0 0 12px;font-family:var(--display);font-weight:600;letter-spacing:-.025em;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.15}
.hcopy p{margin:0 0 22px;color:var(--muted);line-height:1.55}
.hnext{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;background:none;border:0;color:var(--ink);font:600 .95rem var(--body);cursor:pointer;border-bottom:1px solid currentColor}
.hnext:hover{color:var(--acc)}
.hgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:clamp(420px,40vw,600px)}
.hf{position:relative;margin:0;overflow:hidden;background:#DED4C3}
.hf:first-child{grid-row:1/3}
.hf img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.hf:hover img{transform:scale(1.03)}
.hf figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;font:600 .8rem var(--body);color:#F3EEE5;background:linear-gradient(transparent,rgba(18,17,16,.6))}
/* lugar reservado para a foto do HD (só no rascunho) */
.hf.ph{display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed rgba(18,17,16,.28);background:repeating-linear-gradient(135deg,#E4DACA 0 12px,#DED4C3 12px 24px)}
.hf.ph small{display:block;margin-bottom:6px;padding:0 10px;font:600 .68rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hf.ph b{font-family:var(--display);font-weight:600;font-size:clamp(.95rem,1.3vw,1.15rem);color:var(--ink);padding:0 10px}
@media (max-width:860px){
  .htabs{display:flex;overflow-x:auto;gap:22px;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
  .htabs::-webkit-scrollbar{display:none}
  .htab{flex:0 0 auto;padding-top:16px;padding-bottom:4px}
  .hpane{grid-template-columns:1fr;align-items:start}
  .hcopy{order:2}
  .hgrid{grid-template-columns:1fr 1fr;grid-template-rows:none;height:auto}
  .hf{aspect-ratio:1/1}
  .hf:first-child{grid-row:auto;grid-column:1/-1;aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){.hpane:not([hidden]){animation:none}.hf:hover img{transform:none}}
/* depoimentos (02/11): nome e bio maiores, colados na foto, para saber quem fala antes de ler */
.dq-side .dq-photo{position:relative;top:auto;right:auto;bottom:auto;transform:none;width:100%;margin:0}
.dq .dq-side .dp-who{margin:20px 0 0;padding:0;border:0;gap:6px}
.dq .dq-side .dp-who::before{content:"";display:block;width:36px;height:3px;background:#D7262E;margin-bottom:12px}
.dq .dq-side .dp-who b{font-family:var(--display);font-size:clamp(1.5rem,2vw,1.875rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:#121110}
.dq .dq-side .dp-who span{font-size:1rem;line-height:1.5;color:#4A443C}
@media (min-width:861px){
  .dq-side{position:absolute;z-index:1;top:calc(50% - 40px);transform:translateY(-50%);
    right:max(var(--pad),calc((100vw - 1320px) / 2 + var(--pad)));width:min(32vw,400px,calc(100svh - 340px))}
}
@media (max-width:860px){
  .dq-side{width:min(80vw,340px);margin:32px auto 0;text-align:center}
  .dq-side .dq-photo{width:min(64vw,280px);margin:0 auto}
  .dq .dq-side .dp-who::before{margin:0 auto 12px}
  .dq .dq-side .dp-who b{font-size:1.5rem}
  .dq .dq-side .dp-who span{font-size:.9375rem}
  .dq-text{margin-top:28px}
}
/* 02/11 (2): "Aprendi fazendo" mais junto; cartões das frentes sem foto; história só com as fotos */
#jornada .h2 .split-line + .split-line{margin-top:-.2em}
.f-card{padding-top:clamp(30px,3vw,44px)}
.f-card::before{display:none}
.hpane{display:block}
/* 03/11: jornada só em texto (espaço da foto reservado), cartão da mentoria com método, fotos numa grade única */
.photo-slot{background:#1C1A18}
.photo-slot::after{display:none}
.tl p + p{margin-top:12px}
.f-card .who + .who{margin-top:-8px}
.f-card .f-list-t{margin:4px 0 10px;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.f-card .f-close{margin:-8px 0 28px;font-family:var(--display);font-size:1.0625rem;line-height:1.4;color:var(--ink)}
.hgal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(10px,2vw,24px)}
.hgal .hf{aspect-ratio:1/1}
@media (max-width:860px){.hgal{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.hgal .hf:first-child{grid-row:auto}
/* 03/11 (2): jornada só em texto, coluna da esquerda parada (título, abertura e botão) */
.jg-text{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.journey-side{position:sticky;top:110px}
.journey-side .h2{margin:22px 0 clamp(26px,3vw,40px)}
.journey-side .lead{max-width:26em}
.journey-side .cta-inline{flex-direction:column;align-items:flex-start;gap:18px;margin-top:clamp(28px,3vw,44px)}
.jg-text .timeline{margin-top:8px}
@media (max-width:900px){.journey-side{position:static}.jg-text .timeline{margin-top:36px}}
@media (max-width:900px){.jg-text{grid-template-columns:1fr;gap:0}}
/* 03/11 (3), celular: links do menu legíveis no fundo escuro; depoimento com cartão de quem fala (foto pequena + nome ao lado) e setas fora do rodapé */
.menu a{color:#F3EEE5}
.menu a.acc{color:var(--acc)}
@media (max-width:860px){
  .dq::before{content:"Quem conhece o Demian";display:block;padding:52px var(--pad) 0;font-size:.8125rem;font-weight:500;color:#6E665B}
  .dq-eyebrow{display:none}
  .dq .depo-slide{padding:0}
  .dq-side{display:flex;align-items:center;gap:16px;width:auto;margin:22px var(--pad) 0;text-align:left}
  .dq-side .dq-photo{flex:0 0 96px;width:96px;margin:0;aspect-ratio:1/1}
  .dq .dq-side .dp-who{margin:0}
  .dq .dq-side .dp-who::before{margin:0 0 10px}
  .dq .dq-side .dp-who b{font-size:1.375rem}
  .dq .dq-side .dp-who span{font-size:.875rem;line-height:1.45}
  .dq-text{margin-top:26px}
  .dq-navwrap{position:relative;bottom:auto;margin-top:0;height:auto;padding:26px var(--pad) 56px;background:none}
  .dq .dp-hl{font-size:1.75rem}
}
/* 03/11 (4): formulário com o texto do diagnóstico; título mais longo cabe menor */
.apply-side h1{font-size:clamp(2.6rem,4.6vw,5rem)}
.side-text p{margin:0}
.side-text p + p{margin-top:16px}
.apply-side{justify-content:flex-start;gap:clamp(24px,3vw,40px)}
@media (max-width:900px){.side-text{font-size:1rem}}
/* 03/11 (5), celular: a abertura nunca entra embaixo do cabeçalho (tela baixa do Safari com as barras) e fica mais compacta */
@media (max-width:820px){
  .hero{padding-top:92px}
  .hero .display.hero-name{font-size:23vw}
  .hero-row{margin-top:18px;padding-top:20px;gap:18px}
  .hero-lede{font-size:1.0625rem}
  .hero-cta .btn.big{padding-top:15px;padding-bottom:15px}
  .cta-note{font-size:.875rem}
}
/* 04/11: grade de fotos com o retrato do Demian em destaque (2x2) */
.hgal{grid-auto-flow:dense}
.hgal .hf-big{grid-column:span 2;grid-row:span 2}
.hgal .hf.hf-big{grid-row:span 2}
/* 04/11 (3): abertura com o vídeo vertical do Demian */
.hero-som{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid rgba(243,238,229,.35);background:rgba(18,17,16,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#F3EEE5;font:600 .8125rem var(--body);cursor:pointer}
.hero-som:hover{background:rgba(18,17,16,.8)}
.hero-som .ico{font-size:.9rem;line-height:1}
@media (min-width:821px){
  .hero{--vw:min(28vw,calc((100svh - 200px) * .5625));--vr:max(var(--pad),calc((100vw - 1320px) / 2 + var(--pad)))}
  .hero-media video{filter:grayscale(1) blur(26px) brightness(.42);transform:scale(1.15);object-position:50% 50%}
  .hero-vert{position:absolute;z-index:1;right:var(--vr);bottom:clamp(28px,5vh,56px);width:var(--vw);aspect-ratio:9/16;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
  .hero-vert video{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06)}
  .hero .wrap{padding-right:calc(var(--pad) + var(--vw) + 56px)}
  .hero-row{grid-template-columns:1fr;gap:26px}
  .hero-cta{justify-content:flex-start}
  .hero-som{right:calc(var(--vr) + 14px);bottom:calc(clamp(28px,5vh,56px) + 14px)}
}
@media (max-width:820px){
  .hero-vert{display:none}
  .hero-media video{object-position:50% 35%}
  .hero-som{top:142px;right:var(--pad);width:46px;height:46px;padding:0;justify-content:center}
  .hero-som .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hero-som .ico{font-size:1.1rem}
}
/* 04/11 (4): retrato do Demian em bolinha ao lado do "Aprendi fazendo." */
.j-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.j-head .h2{margin-bottom:0}
.j-avatar{flex:0 0 auto;width:clamp(112px,11vw,170px);height:auto;aspect-ratio:1/1;border-radius:50%!important;object-fit:cover;object-position:50% 50%;border:3px solid var(--acc);padding:4px;background:#121110;margin-bottom:6px}
.journey-side .j-head + .lead{margin-top:clamp(26px,3vw,40px)}
@media (max-width:900px){.j-avatar{width:104px}.j-head{align-items:center}}
.journey-side .j-head .h2{margin:22px 0 0}
/* 04/11 (5): sem desfoque ao vivo no vídeo (travava): no computador o fundo é uma imagem já desfocada e o vídeo de fundo some */
@media (min-width:821px){
  .hero-media{background:#121110 url(assets/abertura-fundo-desktop.jpg?v=2) center/cover no-repeat}
  .hero-media video{display:none}
}
/* 04/11 (6): bolinha do Demian com borda branca; vídeo da abertura mais claro */
.j-avatar{border-color:#F3EEE5}
.hero-vert video{filter:grayscale(1) contrast(1.04) brightness(1.18)}
@media (max-width:820px){
  .hero-media video{filter:grayscale(1) contrast(1.05) brightness(.9)}
  .hero-media::after{background:linear-gradient(180deg,rgba(11,11,10,.45) 0%,rgba(11,11,10,.05) 30%,rgba(11,11,10,.55) 66%,var(--bg) 100%)}
}
/* 04/11 (7): vídeo de volta ao fundo inteiro atrás do nome também no computador (sem o quadro à direita) */
@media (min-width:821px){
  .hero-media{background:#121110}
  .hero-media video{display:block;filter:grayscale(1) contrast(1.05) brightness(.8);transform:none;object-position:50% 62%}
  .hero .wrap{padding-right:var(--pad)}
  .hero-row{grid-template-columns:1.1fr 1fr;gap:40px}
  .hero-cta{justify-content:flex-end}
}
/* 04/11 (9): bolinha maior e alinhada à altura do "Aprendi fazendo." (topo do Aprendi até a base do fazendo.) */
.journey-side .j-head{margin-top:22px;align-items:center;justify-content:flex-start;gap:clamp(20px,2.4vw,36px)}
.journey-side .j-head .h2{margin:0}
.j-avatar{width:calc(clamp(2.75rem,6.6vw,7rem) * 1.9);max-width:200px;margin:0;padding:5px}
@media (max-width:900px){.j-avatar{width:124px}.journey-side .j-head{justify-content:space-between}}
/* 04/11 (10): abertura sem vídeo, fundo preto */
.hero{background:#121110}
/* 04/11 (11): formulário dentro da página principal */
.apply-home{min-height:0;scroll-margin-top:74px;border-top:1px solid var(--line)}
.apply-home .apply-side,.apply-home .apply-form{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.apply-home .apply-side h2{font-size:clamp(2.6rem,4.6vw,5rem)}
@media (max-width:900px){.apply-home .apply-side{padding-top:56px}}