/* ===================================================================
   Monalisa Vasconcelos — sistema compartilhado
   Base: protótipo travado (site-monalisa-prototipo.html). Tudo dentro
   deste bloco marcado "BASE TRAVADA" é idêntico ao original — não mexer
   sem aprovação. O que vem depois são extensões pra etapa (2): novas
   seções aprovadas, fichas do método, listas de case/blog, i18n, mobile.
   =================================================================== */

/* ---------- BASE TRAVADA (do protótipo original) ---------- */
:root{
  --indigo:#280F91;
  --indigo-deep:#1c0a6b;
  --cream:#FFF8EF;
  --acid:#F0FF04;
  --ink:#14103a;
  --line:rgba(255,248,239,.22);
  --line-dark:rgba(20,16,58,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Aileron','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--indigo);
  color:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.mono,.eyebrow,nav a,.btn{font-family:'JetBrains Mono',monospace;}

.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
/* quebra de linha manual que só existe no mobile — em telas largas o texto
   segue fluindo normal, sem forçar a quebra que faz sentido só na coluna
   estreita. */
.br-mobile{display:none}

nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 40px;
  background:rgba(46,27,158,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
nav .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.05em;font-size:14px;text-transform:uppercase;color:var(--cream);text-decoration:none}
nav .brand img{height:26px;width:auto;display:block}
nav ul{display:flex;gap:26px;list-style:none;align-items:center}
nav a{color:var(--cream);text-decoration:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.8;transition:opacity .2s,color .2s}
nav a:hover,nav a.active{opacity:1;color:var(--acid)}

/* acessibilidade: foco de teclado visível em todo elemento interativo —
   sem isso, quem navega só com teclado perde a referência de onde está. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--acid);outline-offset:3px;
}

/* respeita a preferência do sistema por menos movimento — desliga a
   animação decorativa do lattice e o scroll suave. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lattice{animation:none}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-toggle{display:none;background:none;border:none;color:var(--cream);cursor:pointer;padding:4px}

.eyebrow{
  display:inline-block;background:var(--acid);color:var(--indigo);
  font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 14px;
}
.btn{
  display:inline-block;background:var(--acid);color:var(--indigo);
  font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 28px;text-decoration:none;border:none;cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-outline{background:transparent;color:var(--cream);border:1.5px solid var(--cream)}
.btn-outline:hover{background:var(--cream);color:var(--indigo)}
.btn-outline.on-cream{color:var(--indigo);border-color:var(--indigo)}
.btn-outline.on-cream:hover{background:var(--indigo);color:var(--cream)}

.hero{
  /* teto de 900px (não só 100vh): o texto fica centralizado verticalmente
     (align-items:center) dentro da seção, mas a foto é ancorada no topo,
     colada na nav — as duas lógicas só coincidem numa faixa "normal" de
     proporção de tela. Sem teto, uma janela muito alta esticava o hero
     pra 100vh inteiro, e o texto (centralizado num espaço enorme) se
     descolava da foto (presa no topo), abrindo um vão vazio entre os
     dois. Com o teto, a seção para de crescer e a próxima seção começa
     mais cedo, sem sobra de espaço azul vazio. */
  min-height:min(100vh,900px);display:flex;align-items:center;position:relative;
  padding-top:80px;overflow:hidden;
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .eyebrow{margin-bottom:28px}
.hero h1{
  font-size:clamp(38px,7vw,92px);line-height:.98;font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--cream);
  /* min() com o cap em ch original: em telas largas o texto respeita o
     desenho (14ch), mas em telas médias (onde a foto — width:min(46vw,620px)
     — come mais espaço proporcionalmente) o cálculo em vw entra em ação
     antes que o texto passe por baixo da foto. */
  max-width:min(14ch,calc(54vw - 80px));
}
.hero h1 .acid{color:var(--acid)}
.hero .sub{
  margin-top:30px;font-size:clamp(17px,2vw,21px);max-width:min(52ch,calc(54vw - 80px));
  color:rgba(247,241,227,.85);line-height:1.5;
}
.hero .cta-row{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;max-width:calc(54vw - 80px)}
.lattice{
  position:absolute;top:50%;right:-120px;transform:translateY(-50%);
  width:620px;height:620px;opacity:.5;z-index:1;pointer-events:none;
}
.lattice path,.lattice line{stroke:var(--acid);stroke-width:1.4;fill:none;opacity:.55}
@keyframes drift{0%,100%{transform:translateY(-50%) rotate(0deg)}50%{transform:translateY(-52%) rotate(2deg)}}
.lattice{animation:drift 14s ease-in-out infinite}

section{padding:72px 0;position:relative}
.section-head{display:flex;align-items:baseline;gap:20px;margin-bottom:54px;flex-wrap:wrap}
.section-head h2{font-size:clamp(30px,4.5vw,52px);text-transform:uppercase;font-weight:800;letter-spacing:-.01em;line-height:1}

.sobre{background:var(--cream);color:var(--ink)}
.sobre .eyebrow{background:var(--indigo);color:var(--cream)}
.sobre h2{color:var(--indigo)}
.sobre .lead{font-size:clamp(20px,2.6vw,30px);line-height:1.4;max-width:24ch;font-family:'JetBrains Mono',monospace;font-weight:500;color:var(--indigo)}
.sobre-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.sobre-grid p{font-size:17px;color:#3a3550;margin-bottom:18px}
.sobre-grid strong{color:var(--indigo);font-weight:700}
.filters{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border:1px solid rgba(46,27,158,.18)}
.filter{padding:22px 18px;background:var(--cream)}
.filter h4{font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:var(--indigo);background:var(--acid);display:inline-block;padding:4px 10px;margin-bottom:12px}
.filter p{font-size:14px;line-height:1.45;color:#3a3550;margin:0}

.cases .eyebrow{margin-bottom:18px}
.case{
  display:grid;grid-template-columns:56px 1fr auto;gap:28px;align-items:center;
  padding:30px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--cream);
  transition:padding-left .25s, background .25s;
}
.case:last-child{border-bottom:1px solid var(--line)}
.case:hover{padding-left:16px;background:linear-gradient(90deg,rgba(232,255,0,.06),transparent)}
.case .idx{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;opacity:.6}
.case .cover{width:96px;height:72px;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.92;background:var(--indigo-deep)}
.case .body h3{font-size:clamp(20px,2.6vw,28px);text-transform:uppercase;font-weight:700;line-height:1.05;margin-bottom:8px}
.case .body p{font-size:15px;color:rgba(247,241,227,.7);max-width:60ch}
.case .body p strong{color:var(--cream);font-weight:700}
.case .meta{display:flex;align-items:center;gap:18px}
.case .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);background:var(--acid);padding:4px 10px;white-space:nowrap}
.case .arrow{font-size:26px;opacity:.5;transition:transform .25s,opacity .25s}
.case:hover .arrow{transform:translateX(6px);opacity:1;color:var(--acid)}

.band{background:var(--acid);color:var(--indigo);padding:70px 0;text-align:center}
.band p{font-family:'JetBrains Mono',monospace;font-size:clamp(24px,4vw,44px);font-weight:800;text-transform:uppercase;line-height:1.05;letter-spacing:-.01em;max-width:20ch;margin:0 auto}

.contato{background:var(--indigo-deep);text-align:center;padding:40px 0!important}
.contato h2{font-size:clamp(40px,8vw,110px);text-transform:uppercase;font-weight:800;line-height:.95;letter-spacing:-.02em}
.contato h2 .acid{color:var(--acid)}
.contato h2 .tag-highlight{background:var(--acid);color:var(--indigo);padding:.08em .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;display:inline-block;line-height:1.15}
.contato .sub{margin:20px auto 28px;max-width:44ch;font-size:18px;color:rgba(247,241,227,.8)}
.contato .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px}
/* blog: botão "Enviar mensagem" deste band específico vira creme (não
   amarelo) — pedido só pra esta banda, por isso escopado em .blog-cta e
   não em .btn direto (que continua amarelo nas outras páginas). */
.blog-cta .btn{background:var(--cream)}

footer{padding:40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
footer .brand{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
footer .brand img{height:22px;width:auto;display:block}
footer .soc{display:flex;gap:20px;align-items:center}
footer a{color:rgba(247,241,227,.7);text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
footer a:hover{color:var(--acid)}
footer .soc-whatsapp{display:flex;align-items:center}
.soc-contato-mobile{display:none}

/* reveal-on-scroll DESATIVADO: qualquer transform/opacity na seção inteira
   (mesmo só translateY) pinta a seção fora da sua posição de layout por
   uma fração de segundo, expondo o fundo do body entre ela e a seção
   anterior — esse é o "gap" que persistia mesmo depois do fix de opacidade.
   Seções aparecem direto no lugar certo, sem animação, para garantir que
   isso nunca mais aconteça. */
.reveal{}
.reveal.in{}

/* ---------- EXTENSÕES etapa (2) ---------- */

/* idioma: alterna via atributo [hidden] no JS, não via display inline.
   !important garante que [hidden] vença mesmo em elementos que também
   têm display próprio via classe (ex: .btn), caso do CTA WhatsApp/e-mail. */
[hidden]{display:none !important}

.lang-toggle{display:flex;align-items:center;gap:2px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em}
/* botões nativos (<button>) têm font-family próprio no stylesheet do
   navegador que vence a herança do .lang-toggle pai — sem esta linha
   explícita, PT/EN renderizavam em Arial em vez de JetBrains Mono. */
.lang-toggle button{font-family:inherit;background:none;border:1px solid var(--line);color:var(--cream);opacity:.55;padding:5px 9px;cursor:pointer;text-transform:uppercase;transition:opacity .2s,background .2s,color .2s}
.lang-toggle button.active{opacity:1;background:var(--acid);color:var(--indigo);border-color:var(--acid)}
.lang-toggle-mobile{display:none}

/* hero com foto */
.hero-photo{
  position:absolute;right:0;bottom:0;top:70px;
  width:min(46vw,620px);z-index:1;pointer-events:none;
  /* align-items:flex-start (não flex-end): a foto precisa tocar o topo
     (colada por baixo da nav, zero gap — mesma regra do resto do site),
     então qualquer sobra de altura (quando a imagem, limitada a 87vh,
     é mais baixa que o container) fica embaixo, não flutuando entre a
     nav e o cabelo. */
  display:flex;align-items:flex-start;justify-content:flex-end;
}
/* height:100% (não max-height:87vh): o container (.hero-photo) já tem
   altura definida (top:70/bottom:0 contra um .hero com teto de 900px) —
   87vh crescia SEM esse teto em janelas altas (>900px), e a foto
   estourava o fundo do .hero (que tem overflow:hidden), cortando o corpo
   dela por baixo. Com height:100%, a foto nunca passa do teto do
   container, então nunca é cortada — e cola no fundo sem gap em qualquer
   altura de janela. */
.hero-photo img{height:100%;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.05)}
.hero .lattice{opacity:.22}

/* seção Problema — split bicolor (réplica slide 3 do manual) */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:520px}
.split .split-panel{display:flex;flex-direction:column;justify-content:center;padding:80px 56px}
.split .panel-indigo{background:var(--indigo-deep);position:relative;overflow:hidden;text-align:center;align-items:center}
.logo-bleed{position:absolute;opacity:.05;z-index:0;pointer-events:none;display:block}
.split .panel-indigo .logo-bleed{left:-14%;bottom:-18%;width:64%}
.split .panel-indigo p{position:relative;z-index:1;font-size:clamp(16px,1.6vw,19px);color:rgba(247,241,227,.9);max-width:42ch}
.split .panel-indigo p strong{color:var(--cream);font-weight:700}
.split .panel-cream{background:var(--cream);overflow:hidden}
.split .panel-cream .eyebrow{margin-bottom:22px}
.split .panel-cream h2{color:var(--indigo);font-size:clamp(24px,3.4vw,40px);text-transform:uppercase;font-weight:800;line-height:1.1;letter-spacing:-.01em;max-width:13ch;overflow-wrap:break-word}

/* bloco Método na home — creme, imagem + texto (herda .sobre-grid, cores próprias) */
.metodo-promo{background:var(--cream);color:var(--ink)}
.metodo-promo .eyebrow{background:var(--indigo);color:var(--cream)}
.metodo-promo-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center}
.metodo-promo h2{color:var(--indigo);font-size:clamp(26px,3.6vw,42px);text-transform:uppercase;font-weight:800;line-height:1.06;letter-spacing:-.01em;margin:18px 0 22px}
.metodo-promo p{font-size:17px;color:#3a3550;max-width:52ch;margin-bottom:30px}
.metodo-promo p strong{color:var(--indigo);font-weight:700}
.metodo-promo .photo{width:100%;border-radius:2px;overflow:hidden}
.metodo-promo .photo img{width:100%;display:block;object-fit:cover;filter:grayscale(1) contrast(1.05)}

/* fotos redondas/retangulares dentro do sobre-grid (home + quem-sou) */
.person-photo{width:100%;display:block}
.person-photo img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.05)}

/* page-hero — cabeçalho padrão de subpágina */
.page-hero{background:var(--indigo);padding:150px 0 70px;position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(34px,6vw,68px);text-transform:uppercase;font-weight:800;letter-spacing:-.01em;line-height:1;max-width:16ch;margin-top:22px}
.page-hero .sub{margin-top:22px;font-size:clamp(16px,1.6vw,19px);max-width:56ch;color:rgba(247,241,227,.85)}

/* método: slides 6 e 7 */
/* zera o padding:72px 0 global de <section> — essa seção não tem fundo
   próprio (quem colore são os filhos .metodo-title-block/.mp1-indigo,
   pra caber o creme e o indigo dentro do MESMO grid-row), então aqueles
   72px de padding-top ficavam transparentes e deixavam o indigo do body
   vazar por trás, criando um "gap" indigo entre o fim da seção anterior
   (creme) e o começo do creme desta — pedido explícito da Mona pra
   sumir com essa emenda. */
.metodo-part1{padding:0}
.metodo-tagline{background:var(--indigo);text-align:center;padding-bottom:70px}
.metodo-tagline p{font-family:'JetBrains Mono',monospace;font-size:clamp(18px,2.2vw,24px);color:rgba(247,241,227,.9)}
.metodo-tagline p strong{color:var(--acid)}
.metodo-cols{display:grid;grid-template-columns:1fr 1fr;gap:50px;background:var(--indigo)}
.metodo-cols .col p{font-size:16px;color:rgba(247,241,227,.88);margin-bottom:16px}
.metodo-cols .col p strong{color:var(--acid)}
.metodo-cols .col h4{font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:15px;letter-spacing:.04em;color:var(--cream);margin-bottom:14px}
/* fotos de respiro entre os blocos de parágrafo — só existem no mobile
   (ver @media max-width:820px); no desktop as 2 colunas ficam lado a lado
   sem quebra visual, então esses elementos ficam escondidos por padrão. */
.metodo-cols-photo{display:none}
/* subtítulo da 2ª parte (só existe a partir daqui — antes só tinha o h2
   principal); escondido por padrão, cada breakpoint decide como/onde
   mostrar. */
.metodo-part2-subtitle{display:none}

/* --- método: mesma quebra em 2 partes que já existia só no mobile,
   adaptada pro desktop (pedido explícito: replicar o padrão). Parte 1
   (título + 1º par de parágrafos) fica centralizada, com a escada
   sangrando full-bleed embaixo à esquerda. Parte 2 (subtítulo novo + 2º
   par de parágrafos) vira coluna de texto à esquerda com o retrato
   sangrando à direita — mesmo esquema do hero. */
@media (min-width:821px){
  /* parte 1 — seção de cor mista, mesmo truque da /home: grid de 2
     colunas (58% indigo / 42% creme). O bloco indigo (texto + escada)
     e o bloco creme (título) viram itens do MESMO grid-row, então
     align-items:stretch (padrão) faz os dois esticarem pra mesma
     altura — o creme "curto" (só o título) preenche o resto em branco
     por baixo, sem precisar calcular altura na mão. Dentro do bloco
     indigo, flex-column com a foto em margin-top:auto gruda ela na
     borda inferior, e como o wrap não tem padding lateral aqui, a
     borda esquerda da foto encosta na borda esquerda real da seção —
     e a direita para exatamente na linha indigo/creme (nunca sangra
     pro lado creme). Pedido explícito: crop "dentro do quadro", sem
     parecer arbitrário. */
  /* .mp1-grid prefixado em tudo abaixo de propósito: regras "soltas"
     tipo .metodo-title-block{background:indigo} (fora de @media, mais
     abaixo no arquivo) empatam em especificidade com uma regra dentro
     de @media e, empatando, quem vem DEPOIS no arquivo vence — não a
     media query. Prefixar com .mp1-grid sobe a especificidade e evita
     depender de ordem no arquivo. */
  .metodo-part1{background:var(--indigo)}
  .mp1-grid{display:grid;grid-template-columns:58% 42%}
  /* creme com o canto superior-esquerdo cortado na diagonal (novo mockup
     da Mona) em vez da linha reta vertical — corta só o próprio canto do
     bloco creme (clip-path relativo à SUA PRÓPRIA caixa: 0%/0% é o canto
     sup.-esq. DESTE elemento, não da seção), então o que aparece por trás
     do recorte é o fundo indigo da seção (.metodo-part1), sem precisar
     calcular nada relativo à largura toda. Título ganha padding-top bem
     maior pra nunca invadir a área cortada. */
  .mp1-grid .metodo-title-block{
    grid-column:2;grid-row:1;background:var(--cream);padding:0;display:flex;align-items:flex-start;
    /* Corte reto (sem arredondado), medido em cima do mockup original em
       pixels (pdfpage-1.png): o ápice NÃO fica exatamente no canto 100%/0
       — a seção inteira (as duas colunas) começa 100% indigo, e o creme só
       nasce como uma pontinha na borda direita a ~15% da altura, abrindo
       em diagonal reta até tomar a largura toda da coluna em ~38% da
       altura (onde vira reta vertical pro resto da seção). É esse respiro
       indigo acima do ápice que tira a cara de "bico" — sem ele, o corte
       nasce grudado no canto da caixa e sempre parece pontiagudo,
       não importa o ângulo da diagonal. */
    clip-path:polygon(100% 15%, 100% 100%, 0 100%, 0 38%);
  }
  .mp1-grid .metodo-title-block .wrap{width:100%;margin:0;padding:400px 56px 40px}
  .mp1-grid .metodo-title-block h2{color:var(--indigo);text-align:left;max-width:20ch;margin:0}
  .mp1-grid .mp1-indigo{grid-column:1;grid-row:1;background:var(--indigo);display:flex;flex-direction:column}
  .mp1-grid .mp1-indigo .wrap{width:100%;margin:0;padding:0;display:flex;flex-direction:column;flex:1}
  .mp1-grid .mp1-indigo .metodo-cols{display:flex;flex-direction:column;flex:1;background:none;padding:0}
  /* texto alinhado à esquerda, na mesma margem do conteúdo da seção
     anterior (.metodo-open .copy usa padding:0 56px a partir da borda do
     viewport) — antes ficava centralizado (margin:0 auto) e alinhado à
     direita; pedido explícito pra bater com a margem esquerda do título/
     tagline do hero logo acima. */
  .mp1-grid .mp1-indigo .metodo-cols .col:first-child{max-width:460px;margin:0;text-align:left;padding:84px 56px 0 56px}
  .mp1-grid .mp1-indigo .metodo-cols-photo-1{display:block;width:100%;margin:56px 0 0;position:relative}
  .mp1-grid .mp1-indigo .metodo-cols-photo-1 img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.05);transform:scaleX(-1)}
  /* degradê sutil indigo nas bordas de cima/direita da foto — funde o
     limite retangular da imagem com o fundo indigo ao redor em vez de
     "colar" um retângulo por cima (pedido explícito: tirar a sensação de
     foto flutuando/pastada). */
  .mp1-grid .mp1-indigo .metodo-cols-photo-1::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(to bottom, rgba(40,15,145,.55), rgba(40,15,145,0) 22%),
      linear-gradient(to left, rgba(40,15,145,.4), rgba(40,15,145,0) 14%);
  }

  /* margin-top:-1px propositalmente colando a parte 2 por cima da
     parte 1 — evita a linha fina de 1px que aparece em alguns
     navegadores no encontro de duas seções full-bleed por causa de
     arredondamento de sub-pixel. */
  .metodo-cols-section{position:relative;overflow:hidden;padding-bottom:0;margin-top:-1px}
  /* parte 2 — mesmo truque da parte 1, espelhado: cunha creme no canto
     superior ESQUERDO (subtítulo), diagonal descendo até a borda
     esquerda, indigo tomando o resto (texto à esquerda + retrato
     sangrando à direita/embaixo). .mp2-cream cobre a seção inteira
     (absolute+inset:0) e o clip-path desenha só a cunha visível — o
     texto/retrato de baixo (segundo .wrap, fluxo normal) nunca fica
     por baixo da cunha por causa do padding-top generoso no
     .metodo-cols. Isso também resolve o pedido de "mais respiro": a
     seção ficou naturalmente mais alta por causa desse padding-top. */
  .metodo-part2{background:var(--indigo)}
  .mp2-cream{
    position:absolute;inset:0;z-index:2;background:var(--cream);
    clip-path:polygon(0 0, 100% 0, 100% 90px, 0 480px);
  }
  .mp2-cream .wrap{padding:120px 56px 0 40px}
  .mp2-cream .metodo-part2-subtitle{
    display:block;color:var(--indigo);font-family:'JetBrains Mono',monospace;text-transform:uppercase;
    font-weight:800;font-size:clamp(22px,2.6vw,34px);line-height:1.22;max-width:26ch;margin:0;
  }
  .metodo-cols{display:block}
  .metodo-part2 .metodo-cols{position:relative;z-index:1;padding-top:530px}
  /* texto mais estreito (era 56%) + foto mais estreita/com mais margem —
     antes ficavam quase se tocando; agora sobra um respiro real entre
     o fim do texto e o começo do retrato. */
  .metodo-cols .col-2{max-width:46%;position:relative;z-index:2;padding-bottom:120px}
  .metodo-cols-photo-2{
    display:block;position:absolute;right:0;bottom:0;width:32vw;max-width:420px;z-index:1;pointer-events:none;
  }
  .metodo-cols-photo-2 img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.05)}
}

.metodo-open{background:var(--cream);padding:0}
.metodo-open-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
.metodo-open .eyebrow{margin-bottom:22px}
.metodo-open h1{color:var(--indigo);font-size:clamp(36px,6vw,70px);text-transform:uppercase;font-weight:800;line-height:1.02;letter-spacing:-.01em}
/* fonte de corpo unificada com o resto do site (era JetBrains Mono). */
.metodo-open .tagline{margin-top:18px;font-size:clamp(15px,1.6vw,18px);color:#3a3550;font-family:inherit}
.metodo-open .tagline strong{color:var(--indigo)}
.metodo-open .photo{width:100%}
.metodo-open .photo img{width:100%;display:block;filter:grayscale(1) contrast(1.05)}

.origins-split{display:grid;grid-template-columns:1fr 1.3fr;min-height:460px}
.origins-split .panel-dark{background:var(--indigo-deep);display:flex;align-items:center;justify-content:center;padding:60px}
.origins-split .panel-light{background:var(--cream);display:flex;align-items:center;padding:70px 60px}
.origins-chevrons{display:flex;flex-direction:column;gap:44px}
.origins-chevrons svg{width:104px;height:58px;display:block}
.origins-chevrons svg path{stroke:var(--cream);stroke-width:3;fill:none;opacity:.9}
.origins-copy{display:flex;flex-direction:column;gap:34px}
.origins-copy p{font-size:16.5px;color:#3a3550;max-width:52ch}
.origins-copy p strong{color:var(--indigo)}

/* fichas — v2: o padrão de abas (1 ficha por vez, escolhida por botão) que
   já funcionava bem no mobile agora vale pro desktop também — pedido
   explícito da Mona, reaproveitando a mesma UX em vez de manter 2 layouts
   diferentes (grid 3 colunas no desktop x abas no mobile). JS não muda
   nada (script já roda em qualquer largura, só a CSS estava escondendo
   .ficha-tabs e mostrando as 3 fichas ao mesmo tempo no desktop). */
.fichas{background:var(--cream);color:var(--ink);padding:76px 0 120px}
.ficha-tabs{display:flex;max-width:640px;margin:0 auto 0}
.ficha-tab{flex:1;background:transparent;border:1px solid rgba(46,27,158,.3);border-bottom:none;color:var(--indigo);font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:12px;letter-spacing:.03em;padding:16px 10px;cursor:pointer;text-align:center;opacity:.55}
.ficha-tab.active{background:var(--indigo);color:var(--cream);opacity:1}
.ficha-grid{display:grid;grid-template-columns:1fr;max-width:640px;margin:0 auto;border:1px solid rgba(46,27,158,.3);border-top:none}
.ficha{background:var(--cream);padding:36px 34px;display:none;flex-direction:column;gap:20px}
.ficha.active{display:flex}
.ficha .ficha-title{font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:14px;letter-spacing:.05em;color:var(--indigo);background:var(--acid);display:inline-block;padding:5px 12px;align-self:flex-start}
.ficha dl{display:flex;flex-direction:column;gap:16px}
.ficha dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--indigo);opacity:.65;margin-bottom:4px}
.ficha dd{font-size:14.5px;line-height:1.5;color:#3a3550}

/* quem-sou: parte 2 (bloco só-texto, índigo) */
.solo-block{background:var(--indigo);min-height:640px;display:flex;align-items:center;padding:64px 0}
.solo-block .inner{max-width:56ch}
.solo-block .eyebrow{margin-bottom:22px}
.solo-block h2{font-size:clamp(28px,4vw,46px);text-transform:uppercase;font-weight:800;line-height:1.06;letter-spacing:-.01em;margin-bottom:24px;max-width:14ch}
.solo-block p{font-size:clamp(17px,1.8vw,20px);color:rgba(247,241,227,.9)}
.solo-block p strong{color:var(--acid)}
.solo-block .cta-row{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}
.solo-photo-bleed{position:absolute;top:0;right:0;width:min(52vw,720px);z-index:0;pointer-events:none;display:flex;align-items:flex-start;justify-content:flex-end}
.solo-photo-bleed img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.05)}

/* quem-sou: parte 3 (manifesto, foto full-bleed tintada) */
.manifesto-block{
  position:relative;background:var(--indigo-deep);
  padding:130px 0;overflow:hidden;
}
.manifesto-block .bg-photo{position:absolute;inset:0;z-index:0}
.manifesto-block .bg-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%;filter:grayscale(1) contrast(1.05)}
.manifesto-block .bg-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(36,21,120,.94) 0%,rgba(36,21,120,.88) 42%,rgba(36,21,120,.7) 100%);
}
.manifesto-block .wrap{position:relative;z-index:1}
.manifesto-block .eyebrow{margin-bottom:26px}
.manifesto-block p{font-size:clamp(17px,1.9vw,21px);color:rgba(247,241,227,.92);max-width:58ch;margin-bottom:22px;line-height:1.55}
.manifesto-block p strong{color:var(--acid)}
.manifesto-block .cta-row{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap}

/* listas de case/blog em página própria */
.list-page{background:var(--indigo);padding:20px 0 110px}
.list-page .case{grid-template-columns:96px 96px 1fr auto}

/* footer com espaço reservado pro logo escuro em fundo claro, se algum dia precisar */
.footer-cream{background:var(--cream);border-top:1px solid var(--line-dark)}
.footer-cream .brand,.footer-cream a{color:var(--indigo)}

/* ==========================================================
   EXTENSÕES v2 — revisão "corpo único" (fotos sangrando,
   home/quem-sou/método reformulados, galerias cases/blog)
   ========================================================== */

/* --- componente reutilizável: bio-bleed (home Quem-sou + quem-sou Parte 1) --- */
.bio-bleed{background:var(--cream);color:var(--ink);overflow:hidden;padding:0}
/* v3: mesmo padrão de "foto com tamanho próprio" do .bio-bleed-p1 (usado em
   quem-sou.html) — a foto define a própria altura (max-height fixo) e larga
   proporcionalmente (width:auto), sem depender de nenhuma caixa externa.
   Isso elimina o problema do v2 (grid+cover): ali a CAIXA da foto mudava de
   formato conforme a largura da tela (coluna mais larga = caixa mais
   "quadrada"), e o cover reenquadrava a foto de um jeito diferente a cada
   redimensionamento. Aqui o enquadramento é sempre o mesmo — só o tamanho
   muda — igual às páginas internas. */
.bio-bleed-grid{position:relative;min-height:560px;overflow:hidden}
.bio-bleed-photo{
  position:absolute;left:0;bottom:0;top:0;
  display:flex;align-items:flex-end;justify-content:flex-start;
  pointer-events:none;z-index:1;
}
/* usa a versão .bp-tight (recorte mais fechado/vertical, já existia pro
   mobile) em vez da .bp-full (recorte largo, pensado pro grid+cover
   antigo) — com altura fixa, a .bp-full (1100×836, bem "deitada") ficaria
   larga demais e invadiria o texto. A .bp-tight (703×808, quase quadrada)
   cabe numa coluna estreita sem cortar nada. */
/* especificidade igual (2 classes, sem elemento) à regra do @media mobile
   mais abaixo — de propósito, pra ordem no arquivo decidir (mobile vem
   depois, então vence e reseta pra width:100%/position:static lá). Se essa
   regra tivesse mais especificidade que a do mobile, ela venceria mesmo
   dentro do breakpoint mobile, quebrando aquele layout. */
.bio-bleed-photo .bp-full{display:none}
.bio-bleed-photo .bp-tight{height:100%;width:auto;max-height:560px;object-fit:contain;filter:grayscale(1) contrast(1.05);display:block}
.bio-bleed-copy{padding:80px 56px;display:flex;flex-direction:column;justify-content:center}
/* copy precisa de espaço reservado (margin-left) pra nunca ficar embaixo da
   foto, que agora sangra por cima em position:absolute. Valor fixo (não
   vw): como a foto tem altura fixa (560px), a largura dela também é fixa
   (não some por causa de um vw que encolhe mais rápido que a foto). */
.bio-bleed-grid .bio-bleed-copy{position:relative;z-index:2;margin-left:530px;min-height:560px}
.bio-bleed-tag{display:inline-block;background:var(--acid);color:var(--indigo);font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;align-self:flex-start}
.bio-bleed-rule{height:2px;background:var(--indigo);margin:24px 0 26px;width:100%}
.bio-bleed-copy h2{color:var(--indigo);font-size:clamp(22px,2.8vw,36px);text-transform:uppercase;font-weight:800;line-height:1.18;letter-spacing:-.01em;margin-bottom:22px}
.bio-bleed-copy p{font-size:17px;color:#3a3550;margin-bottom:18px;max-width:56ch}
.bio-bleed-copy p strong{color:var(--indigo);font-weight:700}
.bio-bleed-copy .btn{margin-top:8px;align-self:flex-start}
/* Parte 1 de quem-sou: foto grande sangrando à esquerda (mesmo padrão do
   hero da home), texto à direita — sem grade de colunas, sem réguas. */
.bio-bleed-p1{position:relative;min-height:760px;overflow:hidden}
.bio-bleed-p1-photo{position:absolute;left:32px;bottom:0;top:70px;display:flex;align-items:flex-end;pointer-events:none;z-index:1}
.bio-bleed-p1-photo img{height:100%;width:auto;max-height:92vh;object-fit:contain;filter:grayscale(1) contrast(1.05);display:block}
.bio-bleed-p1 .bio-bleed-copy{position:relative;z-index:2;margin-left:min(27vw,400px);min-height:760px;padding:70px 56px}
.bio-bleed-copy.mono-copy{align-items:flex-end;text-align:right}
.bio-bleed-copy.mono-copy .bio-bleed-tag{align-self:flex-end}
.bio-bleed-copy.mono-copy h2{text-align:right;margin-top:18px}
/* fonte de corpo unificada com o resto do site (era JetBrains Mono,
   destoando dos outros textos descritivos — já tínhamos revertido isso
   no mobile, agora alinhado no desktop também). */
.bio-bleed-copy.mono-copy p{font-family:inherit;color:#3a3550;text-transform:none;font-size:17px;line-height:1.6;letter-spacing:normal;text-align:right}
.bio-bleed-copy.mono-copy p strong{color:var(--indigo);font-weight:700}

/* --- bloco Método na home: cópia + foto sangrando à direita --- */
/* margin-top:-1px: a seção anterior (indigo) e esta (creme) têm alturas
   fracionárias (ex: 597.34375px) — o Chrome arredonda cada caixa pro pixel
   de tela mais próximo de forma independente, o que às vezes deixa 1px do
   fundo indigo do <body> visível entre as duas (linha fina no topo do
   creme). Sobrepor 1px elimina a costura em qualquer largura de tela. */
.metodo-promo-bleed{background:var(--cream);color:var(--ink);overflow:hidden;padding:0;margin-top:-1px}
/* v3: mesmo padrão "foto com tamanho próprio" de .bio-bleed-grid acima —
   foto sangrando com altura fixa (nunca corta, nunca infla), texto com
   margin-right reservado. Espelhado (foto à direita). */
.metodo-promo-bleed .grid2{position:relative;min-height:560px;overflow:hidden}
.metodo-promo-bleed .copy{position:relative;z-index:2;margin-right:620px;padding:80px 0 80px 56px;display:flex;flex-direction:column;justify-content:center}
.eyebrow-outline{display:inline-block;background:transparent;border:1.5px solid var(--indigo);color:var(--indigo);font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:5px 13px;align-self:flex-start}
.metodo-promo-bleed h2{color:var(--indigo);font-size:clamp(26px,3.6vw,42px);text-transform:uppercase;font-weight:800;line-height:1.06;letter-spacing:-.01em;margin:18px 0 22px}
.metodo-promo-bleed p{font-size:17px;color:#3a3550;max-width:52ch;margin-bottom:30px}
.metodo-promo-bleed p strong{color:var(--indigo);font-weight:700}
.metodo-promo-bleed .btn{align-self:flex-start}
/* align-items:flex-start (não flex-end): a foto precisa ficar grudada na
   aresta SUPERIOR direita, coincidindo exatamente com o fim da seção
   anterior (zero gap) — se o texto ao lado precisar de mais altura que os
   560px da foto e a seção crescer, um alinhamento por baixo (flex-end)
   deixava a foto "flutuar" longe do topo, abrindo um gap ali. Por cima,
   a foto sempre toca o início da seção não importa o quanto ela cresça;
   a sobra (se houver) fica embaixo, não em cima. */
.metodo-promo-bleed .photo{
  position:absolute;right:0;bottom:0;top:0;
  display:flex;align-items:flex-start;justify-content:flex-end;
  pointer-events:none;z-index:1;
}
/* especificidade igual (3 classes, sem elemento) à regra do @media mobile
   mais abaixo — mesmo motivo do comentário em .bio-bleed-photo .bp-tight. */
.metodo-promo-bleed .photo .mp-photo-full{height:100%;width:auto;max-height:560px;object-fit:contain;filter:grayscale(1) contrast(1.05);display:block}
/* mp-photo-top/mp-photo-bottom só existem pro recorte em 2 partes do
   mobile (ver @media max-width). */
.metodo-promo-bleed .photo .mp-photo-top,
.metodo-promo-bleed .photo .mp-photo-bottom{display:none}

/* --- quem-sou parte 2: foto sangrando do canto superior direito --- */
.solo-block{position:relative;overflow:hidden}
.solo-block .wrap{position:relative;z-index:1;width:100%}
.solo-block h2 .acid{color:var(--acid)}

/* --- quem-sou parte 3: banda-título do manifesto (foto + palavra vertical) --- */
.manifesto-title-band{position:relative;background:var(--indigo-deep);min-height:64vh;display:flex;align-items:center;overflow:hidden;padding:0}
.manifesto-title-band .mtb-photo{position:absolute;inset:0}
.manifesto-title-band .mtb-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.manifesto-title-band .mtb-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(36,21,120,.88) 0%,rgba(36,21,120,.68) 55%,rgba(36,21,120,.4) 100%)}
.manifesto-title-band .logo-bleed{left:-10%;bottom:-22%;width:56%}
.manifesto-title-band .mtb-word{position:relative;z-index:2;padding-left:min(9vw,80px);writing-mode:vertical-rl;text-orientation:upright;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:clamp(26px,4vw,42px);letter-spacing:.06em;color:var(--cream);text-transform:uppercase}

/* --- quem-sou parte 3b: texto do manifesto, seção plana em creme --- */
.manifesto-text{background:var(--cream);color:var(--ink);padding:76px 0}
.manifesto-text .eyebrow{background:var(--indigo);color:var(--cream);margin-bottom:26px}
.manifesto-text p{font-size:clamp(16px,1.7vw,19px);color:#3a3550;max-width:64ch;margin-bottom:20px;line-height:1.6}
.manifesto-text p strong{color:var(--indigo);font-weight:700}
.manifesto-text .cta-row{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap}

/* --- método slide 5: foto sangrando à direita --- */
.metodo-open{overflow:hidden}
.metodo-open .grid2{display:grid;grid-template-columns:1.1fr 1fr;min-height:480px}
.metodo-open .copy{height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 56px}
/* aspect-ratio (não height:100% + min-height fixo em px): a antiga altura
   fixa de 660px, combinada com object-fit:cover, obrigava a foto a cortar
   as laterais cada vez mais forte quanto mais estreita a coluna ficasse —
   só ficava sem corte perto de 1400px+ de largura. Com aspect-ratio batendo
   a proporção real da imagem (1100×1073, quase quadrada), a altura da
   coluna passa a acompanhar a própria largura da coluna em qualquer tela,
   então o cover nunca precisa cortar nada — mesmo princípio de "sem corte"
   já usado no hero e no /quem-sou. */
.metodo-open .photo{position:relative;aspect-ratio:1100/1073;overflow:hidden;align-self:center}
.metodo-open .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}

/* --- método slide 6: título promovido --- */
.metodo-title-block{background:var(--indigo);padding-bottom:72px}
.metodo-title-block h2{font-size:clamp(28px,4.5vw,50px);text-transform:uppercase;font-weight:800;line-height:1.1;letter-spacing:-.01em;color:var(--cream);max-width:22ch}

/* --- método slide 7: foto sangrando no painel escuro --- */
.origins-split .panel-dark{position:relative;overflow:hidden}
.origins-split .panel-dark .op-photo{position:absolute;inset:0}
.origins-split .panel-dark .op-photo img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:grayscale(1) contrast(1.1)}
.origins-split .panel-dark .op-photo::after{content:"";position:absolute;inset:0;background:rgba(36,21,120,.5)}
.origins-chevrons{position:relative;z-index:1}

/* --- bandas CTA finais com foto sangrando (método/cases/blog) --- */
.contato-photo{position:relative;overflow:visible;min-height:min(64vh,540px);display:flex;align-items:center}
.contato-photo.contato-tall{min-height:min(82vh,660px)}
.contato-photo .cta-photo{position:absolute;left:5%;bottom:0;z-index:1;pointer-events:none;line-height:0}
.contato-photo .cta-photo img{display:block;height:min(78vh,620px);width:auto;max-width:30vw;object-fit:contain;filter:grayscale(1) contrast(1.05)}
.contato-photo .wrap{position:relative;z-index:2;width:100%}
.contato-photo.cta-right .cta-photo{left:auto;right:5%}

/* método: banda de contato final — 1 única foto (Monalisa_23), grudada na
   aresta inferior-esquerda do band, ZERO gap, em qualquer largura de tela
   (desktop e mobile, sem @media aqui de propósito). Mesmo padrão de canto
   fixo do .solo-photo-bleed (canto fixo + largura fluida com teto em px —
   a posição nunca muda, só a largura), espelhado pro canto oposto.
   Seletor de 2 classes vence as regras genéricas de .contato-photo acima
   (1 classe) em qualquer lugar do arquivo, inclusive dentro do @media
   mobile mais abaixo — por isso funciona igual nos dois breakpoints. */
/* overflow:visible (não hidden) + largura levemente maior (458px em vez
   de 420px): a essa largura a foto fica ~18px mais alta que o teto do
   band, sangrando de leve por cima — mesmo efeito visual do band de
   /cases (onde a foto também sangra um pouco acima do topo da banda),
   só que aqui por LARGURA em vez de altura (a foto continua grudada no
   fundo, zero gap — bottom:0 não muda). */
.contato-photo.metodo-cta-photo{overflow:visible;min-height:min(78vh,660px);padding:0}
.contato-photo.metodo-cta-photo .wrap{position:relative;z-index:2;display:block;text-align:right;padding:64px 32px}
.contato-photo.metodo-cta-photo h2{padding:0;margin:0;text-align:right}
.contato-photo.metodo-cta-photo .cta-row{margin:18px 0 0;justify-content:flex-end}
.contato-photo.metodo-cta-photo .cta-photo{position:absolute;left:0;bottom:0;top:auto;right:auto;width:min(33vw,458px);margin:0;z-index:1;pointer-events:none;display:block;line-height:0}
.contato-photo.metodo-cta-photo .cta-photo img{position:static;width:100%;height:auto;display:block;max-width:none;object-fit:unset;filter:grayscale(1) contrast(1.05)}

/* --- quem-sou: seção Meu caminho (cartões alternados, swipe horizontal
   no desktop / vertical no mobile — ver regras mobile no @media 820px).
   A foto ocupa 100% da altura do cartão sempre (object-fit:cover na
   largura toda do painel, painel esticado pelo align-items:stretch
   default do flex) — não sobra faixa azul em cima nem embaixo. Por isso
   a navegação não vive mais numa barra fora do cartão: cada cartão carrega
   a própria seta/contador (tópicos) ou o próprio chevron grande (intro),
   então a foto pode sangrar até a borda da seção sem disputar espaço com
   controles externos. */
/* padding:0 sobrepõe o "section{padding:72px 0}" global — sem isso, o
   card (foto+texto) ficava recuado 72px do topo e do fundo da própria
   seção, e mesmo com as seções vizinhas "encostando" (sem margin entre
   elas), o CARTÃO em si não chegava até a aresta — parecia um gap ainda
   que não houvesse margin nenhum. Zerando o padding, o mc-viewport (que
   já ocupa 100% da largura) também passa a tocar o topo/fundo exatos da
   seção, ficando grudado nas seções vizinhas (bio acima, manifesto
   abaixo) sem sobra de azul. */
.meu-caminho{background:var(--indigo);color:var(--cream);overflow:hidden;padding:0;position:relative}
.mc-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none}
.mc-viewport::-webkit-scrollbar{display:none}
.mc-track{display:flex}
.mc-slide{flex:0 0 100%;width:100%;display:flex;scroll-snap-align:start;height:min(84vh,740px)}
.mc-panel{flex:1 1 50%;min-width:0;display:flex}
.mc-panel-text{position:relative;flex-direction:column;justify-content:center;gap:16px;padding:min(6vw,64px)}
.mc-panel-photo{position:relative;overflow:hidden;background:#000}
/* <picture> é o filho direto do flex container agora (não mais o <img>
   sozinho) — sem isso, o item flex media pelo tamanho intrínseco do
   <picture> (inline por padrão) em vez de esticar 100%, e a foto
   aparecia espremida numa fatia da largura do painel. */
.mc-panel-photo picture{display:block;width:100%;height:100%}
.mc-panel-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05)}
/* eyebrow reaproveita o padrão global (fundo acid/texto indigo) já usado
   em todo o site — nenhuma regra extra precisa aqui. */
.mc-title{
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-weight:800;
  font-size:clamp(30px,4vw,52px);line-height:1.06;color:var(--acid);margin:16px 0 0;
}
/* descrição do card-intro: antes vinha na mesma fonte mono do título; agora
   é fonte de corpo (Aileron), pra criar contraste entre título grande de
   efeito e a linha de apoio, e sinalizar que os cards seguintes leem do
   mesmo jeito. */
.mc-intro-desc{
  font-family:'Aileron','Segoe UI',system-ui,-apple-system,sans-serif;
  font-weight:400;font-size:17px;line-height:1.6;color:var(--cream);
  margin:0;max-width:34ch;
}
/* chevron duplo do card-intro: agora grande, centralizado na foto e
   clicável (é o próprio botão "próximo") — antes era pequeno e discreto
   demais num canto, quase imperceptível. */
.mc-swipe-hint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:none;border:none;padding:18px;margin:0;cursor:pointer;
  color:var(--acid);opacity:.92;line-height:0;
  animation:mcHint 1.8s ease-in-out infinite;
}
.mc-swipe-hint:hover{opacity:1}
@keyframes mcHint{0%,100%{transform:translate(-50%,-50%) translateX(0)}50%{transform:translate(-50%,-50%) translateX(10px)}}
.mc-slide h3{
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-weight:800;
  font-size:clamp(20px,2.2vw,28px);color:var(--acid);margin:0 0 2px;
}
.mc-slide .mc-panel-text p{
  font-family:'Aileron','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.6;color:rgba(247,241,227,.92);margin:0;max-width:36ch;
}
/* setas laterais + pontinhos: mesma linguagem visual/comportamento da
   galeria da trajetória (.trajetoria-arrow/.trajetoria-dots) — uma única
   dupla de setas sobreposta ao card inteiro (não mais uma por cartão) e
   os pontinhos substituem o "n/6" em texto. Isso também é o que deixou
   de precisar do botão "início": dá pra ver a posição de relance. */
.mc-side-arrow{
  position:absolute;top:auto;bottom:28px;z-index:3;
  width:48px;height:48px;border-radius:50%;background:var(--acid);color:var(--indigo);
  border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:.92;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:opacity .2s,transform .2s;
}
.mc-side-arrow:hover{opacity:1;transform:scale(1.06)}
.mc-side-arrow.prev{left:24px}
.mc-side-arrow.next{right:24px}
/* cartão intro: o próprio chevron duplo centralizado na foto já é a dica
   de "arraste" — ter também as duas setas laterais ali dá 3 afordances
   de navegação ao mesmo tempo, poluição visual. JS marca a seção com
   .mc-at-start enquanto o cartão 0 está visível e as setas somem. */
.meu-caminho.mc-at-start .mc-side-arrow{opacity:0;pointer-events:none;transform:scale(.85)}
.mc-dots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;padding:20px 24px}
.mc-dots .dot{width:6px;height:6px;border-radius:50%;background:rgba(247,241,227,.3);flex:none;transition:background .2s,transform .2s}
.mc-dots .dot[data-active]{background:var(--acid);transform:scale(1.5)}

/* --- quem-sou: galeria da trajetória (agora depois do manifesto) --- */
.trajetoria-gallery-wrap{overflow:hidden;background:var(--cream);padding:0 0 64px}
.trajetoria-gallery-head{text-align:left}
/* "Galeria" virou tag (mesma linguagem de eyebrow usada no resto do
   site), não mais o título em si — o título grande agora é a frase
   "Diálogo, humanidade e vínculo". Banda indigo atrás de tag+título
   agora vale em qualquer largura (pedido explícito: mobile igual ao
   desktop, não mais exclusivo de telas grandes). */
.trajetoria-gallery-tag{
  display:inline-block;background:var(--acid);color:var(--indigo);
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;margin:0 0 18px;
}
/* título precisa caber numa linha só (pedido explícito, não mais
   quebrando em 2-3 linhas) — sem max-width em ch (que forçava
   quebra) e com white-space:nowrap; o clamp() encolhe a fonte via vw
   o quanto for preciso pra caber em qualquer largura de tela. */
.trajetoria-gallery-title{
  display:block;color:var(--cream);white-space:nowrap;
  font-size:clamp(13px,4.6vw,34px);text-transform:uppercase;
  font-weight:800;line-height:1.05;letter-spacing:-.01em;margin:0;
}
/* fundo removido daqui de propósito: no desktop a fileira de fotos é
   puxada pra cima (margin-top negativo) por cima do padding-bottom
   indigo da banda logo abaixo — se este container tivesse fundo
   próprio, ele tampava o indigo nos vãos entre fotos e a "faixa
   atravessando" não aparecia. Transparente deixa o indigo mostrar
   nesses vãos. */
.trajetoria-gallery{position:relative;margin-top:30px;padding:0}
/* banda azul atrás de tag+título — agora existe em qualquer largura;
   no mobile é só um bloco de cor (a galeria vem depois do texto de
   fechamento, não logo abaixo, então não dá pra "atravessar" a fileira
   de fotos por cima dela). */
.trajetoria-gallery-band{background:var(--indigo);padding:32px 0 40px}
/* desktop: banda azul (metade da seção, não a largura toda como o
   .band regular) atrás da tag+título — a fileira de fotos "atravessa"
   a linha, metade dentro do azul, metade no creme, puxada pra cima com
   margin-top negativo do tamanho exato de meia foto (foto tem 305px de
   altura: 400px de largura ÷ (4/3.05)). */
@media (min-width:821px){
  /* padding-bottom = 152px (metade da foto, pro straddle) + ~76px
     (2cm) de respiro extra entre o título e o topo da fileira de
     fotos — sem esse respiro o título ficava colado na galeria. O
     margin-top da galeria continua -152px (só a metade da foto), então
     esse respiro extra NÃO entra na conta do straddle, só empurra o
     início da foto pra baixo. */
  .trajetoria-gallery-band{padding:64px 0 228px}
  .trajetoria-gallery-title{font-size:clamp(30px,4.4vw,56px)}
  .trajetoria-gallery{margin-top:-152px}
}
.trajetoria-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
/* setas viraram chevron simples (linha só, sem seta cheia) — mesma
   linguagem visual do chevron duplo da seção Meu caminho */
.trajetoria-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:50%;background:var(--acid);color:var(--indigo);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.92;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:opacity .2s,transform .2s}
.trajetoria-arrow:hover{opacity:1;transform:translateY(-50%) scale(1.06)}
.trajetoria-arrow.prev{left:24px}
.trajetoria-arrow.next{right:24px}
.trajetoria-track{display:flex;gap:20px;padding:0 40px 20px;width:max-content}
.trajetoria-item{position:relative;width:400px;flex:none;aspect-ratio:4/3.05;overflow:hidden;background:#000;scroll-snap-align:start}
.trajetoria-item img{width:100%;height:100%;object-fit:cover;display:block}
/* legenda: sem "queimar" texto na foto, mas o usuário ainda precisa saber
   do que se trata — no desktop some por padrão e some no hover (:focus
   também, pra quem navega por teclado), num scrim escuro só na base da
   foto pra não brigar com a imagem quando visível. */
.ti-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:32px 14px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
  color:#fff;font-size:13px;line-height:1.35;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.trajetoria-item:hover .ti-caption,
.trajetoria-item:focus-within .ti-caption{opacity:1;transform:translateY(0)}
.trajetoria-counter{display:none}
/* pontinhos (affordance tipo Instagram) — só existem visualmente no
   mobile; no desktop múltiplas fotos já ficam visíveis ao mesmo tempo,
   então um indicador de posição não faz sentido ali. */
.trajetoria-dots{display:none}
/* texto de fechamento depois da galeria — mesma régua de leitura dos
   parágrafos do manifesto (corpo, largura de leitura curta) */
.trajetoria-gallery-desc{
  font-size:18px;line-height:1.6;color:var(--ink);max-width:62ch;
  margin:36px auto 0;text-align:center;
}
.trajetoria-gallery-desc strong{color:var(--indigo);font-weight:700}
.bp-tight{display:none}

/* --- galeria de cases/blog --- */
.gallery{background:var(--cream);color:var(--ink);padding:60px 0 160px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 32px}
.gcard{display:block;text-decoration:none;color:inherit}
.gcard-cover{aspect-ratio:4/3.1;overflow:hidden;background:#000}
.gcard-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.gcard:hover .gcard-cover img{transform:scale(1.035)}
.gcard-body{padding-top:18px}
.gcard-body .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);background:var(--acid);padding:4px 10px;display:inline-block;margin-bottom:12px}
.gcard-body h3{font-size:19px;text-transform:uppercase;font-weight:700;line-height:1.2;margin-bottom:10px;color:var(--indigo)}
.gcard-body p{font-size:14.5px;color:#3a3550;line-height:1.5;margin-bottom:10px}
.gcard-body p strong{color:var(--indigo)}
.gcard-body .arrow{font-size:19px;color:var(--indigo);opacity:.6;transition:transform .25s,opacity .25s;display:inline-block}
.gcard:hover .gcard-body .arrow{transform:translateX(6px);opacity:1}
.gallery-grid.cols-2{grid-template-columns:repeat(2,1fr);gap:56px 44px}
.gallery-grid.cols-2 .gcard-body h3{font-size:23px}
.gallery-grid.cols-2 .gcard-body p{font-size:15.5px}
/* índice+filtro por área e divisores de grupo — pedido da Mona: mesma UX
   do mobile agora vale pro desktop também (ver ajuste fino de densidade
   no @media max-width:820px mais abaixo). grid-column:1/-1 no divider
   pra ele ocupar a largura inteira das 2 colunas do grid, agindo como
   cabeçalho de seção em vez de cair dentro de uma coluna só. */
.cases-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.cases-filter-btn{background:transparent;border:1.5px solid rgba(46,27,158,.3);color:var(--indigo);font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:12px;letter-spacing:.03em;padding:10px 16px;cursor:pointer;opacity:.6}
.cases-filter-btn.active{background:var(--indigo);border-color:var(--indigo);color:var(--cream);opacity:1}
.cases-filter-count{opacity:.7}
.gcard-divider{display:block;grid-column:1/-1;font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:14px;font-weight:700;letter-spacing:.05em;color:var(--indigo);padding-bottom:12px;margin:8px 0 4px;border-bottom:1.5px solid rgba(46,27,158,.25)}
.gcard-divider:first-child{margin-top:0}

/* --- blog: layout próprio (1 post grande por linha + índice lateral) --- */
.blog-layout{background:var(--cream);color:var(--ink);padding:60px 0 145px}
.blog-grid{display:grid;grid-template-columns:210px 1fr;gap:60px;align-items:start}
.blog-index{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px}
.blog-index .eyebrow{background:var(--indigo);color:var(--cream);align-self:flex-start;margin-bottom:6px}
.blog-index-nav{display:flex;flex-direction:column}
.blog-index a{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:5px;padding:14px 0;border-top:1px solid rgba(46,27,158,.15)}
.blog-index a:last-child{border-bottom:1px solid rgba(46,27,158,.15)}
.blog-index .date{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);opacity:.65}
.blog-index .idx-title{font-size:13px;font-weight:700;line-height:1.3;color:var(--indigo)}
.blog-posts{display:flex;flex-direction:column;gap:76px}
.blog-post{display:grid;grid-template-columns:1.05fr 1fr;gap:42px;align-items:center;text-decoration:none;color:inherit;scroll-margin-top:110px}
.blog-post .cover{aspect-ratio:4/3.1;overflow:hidden;background:#000}
.blog-post .cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.blog-post:hover .cover img{transform:scale(1.03)}
.blog-post .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);background:var(--indigo);padding:4px 10px;display:inline-block;margin-right:10px}
.blog-post .date{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--indigo);opacity:.6}
.blog-post h3{font-size:clamp(22px,2.8vw,32px);text-transform:uppercase;font-weight:700;line-height:1.15;margin:14px 0 14px;color:var(--indigo)}
.blog-post p{font-size:16px;color:#3a3550;line-height:1.55;margin-bottom:14px}
.blog-post p strong{color:var(--indigo)}
.blog-post .arrow{font-size:20px;color:var(--indigo);opacity:.6;transition:transform .25s,opacity .25s;display:inline-block}
.blog-post:hover .arrow{transform:translateX(6px);opacity:1}

/* Este breakpoint era 960px (resquício de uma rodada de ajustes mobile
   anterior a esta etapa). Unificado em 820px — o mesmo ponto de corte do
   bloco abaixo — porque entre 820-960px as regras deste bloco entravam
   sozinhas (o bloco mais novo só ativa em ≤820px), criando um layout
   "meio mobile" que não existia nem no desktop fechado nem no mobile
   aprovado. Consolidar os dois blocos no mesmo breakpoint elimina essa
   faixa inconsistente. */
@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .split .split-panel{padding:56px 28px}
  /* mobile: título "por que importa" antes da citação — a ordem do grid
     desktop (citação | título) empilhada ao pé da letra lia estranho */
  .br-mobile{display:inline}
  /* leitura em Z: a hero já tem foto à direita/texto à esquerda — aqui o
     painel claro fica alinhado à direita (tag+título), enquanto o painel
     escuro segue à esquerda, com a marca-d'água mantida no canto inferior
     esquerdo. Cria o zigue-zague de leitura descendo a página. */
  .split .panel-cream{order:1;padding:44px 28px 32px;text-align:right;align-items:flex-end}
  /* max-width:13ch (desktop) força uma 2ª quebra dentro de "não é
     acabamento." — as quebras agora são manuais (br.br-mobile), então o
     texto só precisa não estourar a coluna, não ficar preso a poucos
     caracteres. */
  .split .panel-cream h2{max-width:none}
  /* mais altura (padding vertical maior) e mais respiro nas laterais
     (padding horizontal maior). */
  .split .panel-indigo{order:2;text-align:left;align-items:flex-start;padding:96px 40px}
  /* respiro entre os dois blocos de parágrafo + linhas um pouco mais
     espaçadas, pra não ficar um bloco só colado. */
  .split .panel-indigo p{line-height:1.75;max-width:26ch}
  .split .panel-indigo p + p{margin-top:22px}
  /* logomarca maior no fundo do painel escuro. */
  .split .panel-indigo .logo-bleed{width:85%}
  .metodo-promo-grid{grid-template-columns:1fr}
  .metodo-open-grid{grid-template-columns:1fr}
  /* padding-top = altura exata da nav (54px): a foto encosta embaixo dela
     em vez de ficar escondida atrás (nav é fixed e sobrepõe o conteúdo) —
     assim a imagem aparece inteira, sem cortar o topo, e sem gap. */
  .metodo-open{padding:54px 0 60px}
  .origins-split{grid-template-columns:1fr}
  /* altura própria maior (era só o mínimo pros chevrons caberem) — dá pra
     ver a imagem da construção inteira em vez do recorte apertado que o
     object-fit:cover fazia numa caixa curta. aspect-ratio bate exatamente
     com a proporção da foto (1400/1064) pra não sobrar barra azul em cima
     nem embaixo dela. */
  .origins-split .panel-dark{padding:40px;aspect-ratio:1400/1064;height:auto;min-height:0}
  .origins-split .panel-dark .op-photo img{object-fit:contain}
  .origins-split .panel-light{padding:44px 24px}
  /* chevrons maiores e empilhados na vertical (como no desktop), em vez de
     em linha horizontal. */
  .origins-chevrons{flex-direction:column;gap:24px}
  .origins-chevrons svg{width:72px;height:42px}
  /* mais respiro em azul — o texto estava "espremido". Mais espaço entre
     título e 1º parágrafo, e mais espaço entre os blocos de texto/fotos. */
  .metodo-title-block{padding-bottom:110px}
  .metodo-cols-section{padding-bottom:0}
  .metodo-cols{grid-template-columns:1fr;gap:64px}
  /* tela 1 (título + 1º par de parágrafos): alinhados à direita, como no
     mockup. Tela 2 (2º par) fica como está — não mexer. */
  .metodo-title-block h2{text-align:right}
  .metodo-cols .col:first-child p{text-align:right}
  /* subtítulo novo da 2ª parte — mesma régua visual do h2 principal, só
     um pouco menor, entre a foto da escada e o 2º par de parágrafos.
     Margens aumentadas (eram 8px/28px) — o subtítulo vinha logo depois da
     foto da escada (fim da parte 1) e ficava colado nela; pedido
     explícito de mais respiro tanto acima (escada→título) quanto abaixo
     (título→texto). */
  .metodo-part2-subtitle{
    display:block;color:var(--cream);font-family:'JetBrains Mono',monospace;text-transform:uppercase;
    font-weight:800;font-size:clamp(22px,6.5vw,30px);line-height:1.2;margin:56px 0 40px;
  }
  /* quebra os 4 parágrafos em 2 blocos de leitura com uma foto entre eles
     — pedido da Mona porque o bloco único ficava pesado demais pra ler no
     mobile. Cada .metodo-cols-photo entra no fluxo normal do grid de 1
     coluna, exatamente entre os 2 parágrafos que a precedem e os 2 que a
     seguem. */
  .metodo-cols-photo{display:block;width:100%}
  .metodo-cols-photo img{display:block;width:100%;height:auto;object-fit:contain;filter:grayscale(1) contrast(1.05)}
  /* escada: sangramento total, rompendo o padding lateral de 22px do
     .wrap (senão sobra azul nos dois lados e ela parece flutuando). Espelhada
     horizontalmente pra bater com o mockup (topo da escada à esquerda). */
  .metodo-cols-photo-1{width:calc(100% + 44px);margin:0 -22px}
  .metodo-cols-photo-1 img{max-width:none;width:100%;transform:scaleX(-1)}
  /* retrato: centralizado, um pouco mais contido que a escada. */
  .metodo-cols-photo-2{display:flex;justify-content:center}
  .metodo-cols-photo-2 img{max-width:74%}
  /* fichas: o padrão de abas agora é a base (ver regra fora do @media) —
     aqui só ajusto densidade pra telas estreitas (fonte/padding menores
     na aba, ficha ocupando 100% em vez do teto de 640px, texto 16px pro
     piso de acessibilidade mobile). */
  .ficha-tabs{max-width:none}
  .ficha-tab{font-size:11px;padding:14px 6px}
  .ficha-grid{max-width:none}
  .ficha{padding:30px 26px}
  .ficha dd{font-size:16px}
  .fichas{padding:52px 0 70px}

  /* home "quem sou" teaser — proposta nova da Mona: nada de dividir
     espaço lateral. Foto grande, centralizada, ocupando o topo inteiro da
     seção; a tag vira uma barra full-width bem colada no fim da foto (zero
     gap flutuando); todo o resto do conteúdo flui embaixo, largura livre.
     Sem coluna estreita, sem cálculo de sobreposição — cada bloco tem seu
     próprio espaço. */
  .bio-bleed-grid{display:flex;flex-direction:column;position:relative;min-height:0;padding:40px 22px 0}
  /* nem sangramento total (cortava a imagem via object-fit:cover) nem
     grudada nas bordas — respiro no topo e nas laterais (mesmo padding de
     22px que o resto do conteúdo usa), e a imagem inteira visível: sem
     object-fit:cover, só a largura disponível com altura automática
     (proporção original, sem cortar nada). */
  .bio-bleed-photo{order:1;position:static;width:100%;height:auto;overflow:visible}
  .bio-bleed-photo .bp-full{display:none}
  .bio-bleed-photo .bp-tight{display:block;position:static;width:100%;height:auto;object-fit:contain}
  /* margin-left:0 — reseta o respiro que o desktop (.bio-bleed-grid
     .bio-bleed-copy) reserva pra foto sangrando; no mobile a foto vai em
     fluxo normal acima do texto, não precisa desse espaço. */
  /* seletor .bio-bleed-grid .bio-bleed-copy (2 classes) — precisa igualar a
     especificidade do desktop (.bio-bleed-grid .bio-bleed-copy{margin-left:
     530px}), senão o desktop vence mesmo dentro do @media mobile (regra de
     CSS: media query não muda especificidade). Com só ".bio-bleed-copy"
     (1 classe) o margin-left:530px do desktop sobrevivia e empurrava todo
     o conteúdo pra fora da tela num viewport de 390px — "conteúdo sumiu". */
  .bio-bleed-grid .bio-bleed-copy{order:2;position:static;padding:0 0 40px;margin-left:0;min-height:0}
  /* barra comprida (como a da seção "problema"), mas sem sangrar até a
     borda da tela — fica dentro do mesmo respiro lateral de 22px que o
     resto do conteúdo. align-self:stretch corrige um bug herdado do
     desktop (align-self:flex-start), que fazia a barra encolher pro
     tamanho do texto em vez de esticar. */
  .bio-bleed-tag{display:block;width:auto;align-self:stretch;margin:0 0 24px;padding:12px 22px}
  .bio-bleed-copy h2{margin-top:0}
  .bio-bleed-copy p{max-width:none}
  .bio-bleed-copy p + p{margin-top:16px}
  .bio-bleed-copy .btn{margin-top:22px}
  /* .bio-bleed-rule é só um traço decorativo do desktop — aqui a barra da
     tag já faz esse papel de separador. */
  .bio-bleed-rule{display:none}
  /* Parte 1 de quem-sou v2: a v1 (absolute + coluna reservada) ficou
     esquisita — usuária pediu pra funcionar igual à seção "eu sou" da
     home: foto inteira no topo (com respiro nas laterais, não sangrando
     até a borda), tag comprida colada nela, título e parágrafo soltos
     embaixo, tudo em fluxo normal — mesmo padrão do .bio-bleed-grid da
     home, sem position:absolute, sem mono-font, sem alinhamento à
     direita. */
  .bio-bleed-p1{display:flex;flex-direction:column;position:relative;min-height:0;overflow:visible;padding:40px 22px 0}
  /* foto menor (62% em vez de 100%) e centralizada — ocupava espaço
     desproporcional ao conteúdo. */
  .bio-bleed-p1-photo{order:1;position:static;inset:auto;display:block;align-items:stretch;align-self:center;width:62%;height:auto;pointer-events:none}
  .bio-bleed-p1-photo img{position:static;display:block;height:auto;width:100%;max-height:none;object-fit:contain}
  /* a tag precisa ficar colada na base da foto (zero gap, senão ela
     fica "solta") — o respiro extra fica só entre título/parágrafo,
     nunca entre foto e tag. */
  .bio-bleed-p1 .bio-bleed-copy{order:2;position:static;margin-left:0;min-height:0;padding:0 0 40px}
  .bio-bleed-copy.mono-copy{align-items:flex-end;text-align:right}
  .bio-bleed-copy.mono-copy .bio-bleed-tag{align-self:stretch;display:block;width:auto;margin:0 0 28px;padding:12px 22px;text-align:right}
  .bio-bleed-copy.mono-copy h2{text-align:right;margin-top:0;margin-bottom:26px;font-size:28px}
  /* mesma tipografia (não-mono, cinza+indigo) e piso de 16px da versão home */
  .bio-bleed-copy.mono-copy p{font-family:inherit;color:#3a3550;text-transform:none;letter-spacing:normal;line-height:1.6;text-align:right;font-size:16px;padding-left:0;max-width:none}
  .bio-bleed-copy.mono-copy p strong{color:var(--indigo)}

  .metodo-promo-bleed .grid2{grid-template-columns:1fr}
  .metodo-promo-bleed .copy{padding:50px 28px 40px}
  .metodo-promo-bleed .photo{height:320px}

  /* /método primeira seção — mesmo padrão bio-bleed do quem-sou: foto no
     topo tocando a nav (zero gap), tag estendida colada na base da foto
     (zero gap), título e descrição na sequência. */
  .metodo-open .grid2{grid-template-columns:1fr;min-height:0;padding:0}
  /* imagem dos 3 filtros é quase quadrada (1100x1073); object-fit:contain
     mostra ela inteira, sem cortar nada. */
  .metodo-open .photo{order:1;position:static;width:100%;aspect-ratio:1100/1073;height:auto;min-height:0;margin-top:0;overflow:visible}
  .metodo-open .photo img{position:static;width:100%;height:100%;object-fit:contain}
  .metodo-open .copy{order:2;height:auto;padding:0 22px 40px}
  /* eyebrow vira barra estendida (como a tag do quem-sou), colada na base
     da foto — zero gap, senão ela fica "solta". */
  .metodo-open .eyebrow{display:block;width:auto;align-self:stretch;margin:0 0 24px;padding:12px 22px;text-align:center}
  .metodo-open h1{margin-top:0}

  .gallery-grid{grid-template-columns:repeat(2,1fr)}

  .solo-block{min-height:560px}
  .solo-photo-bleed{width:70vw}

  .manifesto-title-band{min-height:52vh}
  .manifesto-title-band .logo-bleed{width:80%;left:-20%;bottom:-14%}

  .blog-grid{grid-template-columns:1fr}
  .blog-index{position:relative;top:auto}
  .blog-post{grid-template-columns:1fr}
}

@media (max-width:820px){
  .wrap{padding:0 22px}
  nav{padding:12px 18px}
  nav ul{
    position:fixed;top:58px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--indigo-deep);
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  /* border só entra junto com o menu aberto — como o <ul> nunca some do
     DOM (só encolhe via max-height:0), um border-bottom fixo aqui aparecia
     como uma segunda linha colada embaixo da linha da nav, mesmo fechado. */
  nav ul.open{max-height:420px;border-bottom:1px solid var(--line)}
  nav ul li{width:100%}
  nav ul a{display:block;padding:16px 22px;width:100%}
  .nav-toggle{display:block}
  /* logo + nome + PT/EN + hamburguer não cabem juntos numa faixa de 390px
     sem ficar apertado — o toggle volta pro menu, mas como primeira opção
     (era a última), pra ficar mais fácil de achar assim que abre o menu. */
  nav .nav-right .lang-toggle{display:none}
  nav ul .lang-toggle-mobile{display:flex;padding:16px 22px}
  /* tag (eyebrow) no tamanho do desktop ficava grande demais perto do H1
     em telas estreitas — reduz a proporção pra ficar mais parecida com a
     leveza que ela tem ao lado do título no mockup. */
  .eyebrow{font-size:11px;padding:5px 11px}
  /* hero mobile v2: a v1 (foto absolute presa no bottom, altura fixa de
     440px, texto por cima) deixava 2 gaps enormes sempre que o hero
     (min-height:min(100vh,900px) herdado do desktop) ficava mais alto que
     a soma tag+h1+sub+botões+foto — texto e foto (tamanho fixo) não
     preenchiam a sobra, que ficava like vão vazio no meio. Troca pro MESMO
     padrão já consolidado no resto do site (bio-bleed / metodo-open): foto
     em fluxo normal (order:1, topo, width:100%, height:auto — sempre
     inteira, sem cortar, redimensiona proporcional à largura da tela),
     tag "estendida" (align-self:stretch) colada nela, título/texto/botões
     na sequência. Seção sem min-height fixo — altura = soma do conteúdo,
     zero gap possível. */
  /* hero mobile v3: volta pro MESMO esquema do desktop (texto numa coluna,
     foto sangrando à direita/embaixo, absoluta, recortada pela seção) em
     vez do empilhado (foto em cima, texto embaixo) da v2 — reproduz o
     mockup, onde tag+título correm quase largura total (a foto só começa
     mais ou menos na metade da tela pra baixo) e só o parágrafo+botões
     ficam numa coluna estreita pra não passar por baixo da foto. Seção
     com altura travada (não mais auto) + overflow:hidden é o que permite
     a foto "sangrar" pra fora da primeira dobra sem esticar a seção. */
  .hero{position:relative;overflow:hidden;display:block;min-height:0;height:min(100vh,840px);padding:96px 0 0}
  .hero .wrap{position:relative;z-index:2;width:100%;height:100%;padding:0 22px}
  .hero h1{max-width:none;font-size:clamp(30px,9.5vw,42px)}
  .hero .eyebrow{margin-bottom:18px}
  /* copy larga (quase full-width, não mais 56%) — acima de onde a foto
     começa (top:53%) sobra largura toda pra ela, então dá pra ler em
     2-3 linhas em vez de 4-5 espremida numa coluna estreita. */
  .hero .sub{max-width:none;font-size:16px;line-height:1.5;margin-top:18px}
  /* botões empilhados (coluna), não lado a lado — os dois juntos numa
     linha só passavam da largura livre antes da foto em telas mais
     estreitas (375px), encostando no ombro da foto. Empilhados, a linha
     mais larga é só a do botão maior, não a soma dos dois. */
  .hero .cta-row{max-width:none;flex-direction:column;align-items:flex-start;gap:12px;margin-top:34px}
  /* a foto sangra do canto inferior direito, mas só a PARTIR de onde a
     linha roxa do mockup marca (~53% da altura da seção) — acima disso é
     tudo texto, largura livre; só o que vem depois dessa linha (nada,
     já que os botões agora terminam antes) precisa dividir espaço com
     ela. top+bottom (não mais width) definem a altura, largura acompanha
     a proporção da foto (width:auto). */
  .hero-photo{position:absolute;right:0;top:53%;bottom:0;left:auto;width:auto;z-index:1;pointer-events:none}
  .hero-photo img{position:static;display:block;width:auto;height:100%;object-fit:contain;object-position:top right;filter:grayscale(1) contrast(1.05)}
  .lattice{display:none}
  .sobre-grid{grid-template-columns:1fr;gap:30px}
  .filters{grid-template-columns:1fr}
  /* números dos cases (01/02/03) de volta no mobile — tinham sido escondidos
     numa rodada anterior de ajuste de mobile, mas fazem falta no teaser */
  .case{grid-template-columns:26px 1fr;column-gap:14px;row-gap:0;padding:24px 0}
  .case .idx{display:block;padding-top:3px}
  .case .body{grid-column:2}
  /* piso de 16px de acessibilidade — desktop usa 15px, mas no corpo de
     texto mobile isso não pode descer do mínimo combinado. */
  .case .body p{font-size:16px}
  .case .arrow{display:none}
  .case .meta{grid-column:2;margin-top:8px}
  section{padding:52px 0}
  .page-hero{padding:120px 0 50px}

  /* botões proporcionalmente menores que títulos/tags no mobile */
  .btn{padding:12px 20px;font-size:12.5px}

  /* rodapé: modelo igual ao desktop em todas as páginas — marca + links +
     ícone, tudo numa linha só, compacto o bastante pra caber nos 390px. */
  footer{position:relative;z-index:2;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;text-align:left;gap:10px;padding:20px 16px}
  footer .brand{gap:6px;font-size:10px;white-space:nowrap}
  footer .brand img{height:16px}
  footer .soc{gap:12px;flex-wrap:nowrap}
  footer .soc a{font-size:10px;white-space:nowrap}
  footer .soc-whatsapp{display:flex}
  .home-footer .soc-contato-mobile{display:none}

  .gallery-grid{grid-template-columns:1fr}
  .gallery-grid.cols-2{grid-template-columns:1fr}
  .gallery{padding:40px 0 90px}
  /* pills de índice+filtro e divisor de grupo já são a base agora (ver
     regra fora do @media) — aqui só ajusto densidade pra tela estreita. */
  .cases-filter-btn{font-size:11px;padding:9px 14px}
  .gcard-divider{font-size:13px;padding-bottom:10px;margin:0 0 8px}
  /* piso de acessibilidade de 16px — os cards de /cases estavam em
     14.5px/15.5px no mobile. */
  .gcard-body p{font-size:16px}
  .gallery-grid.cols-2 .gcard-body p{font-size:16px}

  /* meu caminho: no mobile o swipe lateral vira vertical — cada cartão
     ocupa a largura toda, empilhado dentro de uma janela de altura fixa
     (não a página inteira) com snap por eixo Y. A foto sempre fica em
     cima e o conteúdo embaixo, então a alternância esquerda/direita do
     desktop (que só existe no eixo X) é anulada aqui via order:-1 na foto
     — não importa a ordem no HTML (cartões "-rev" ou não), a foto vence. */
  /* --mc-h fica num custom property porque .mc-slide precisa da MESMA
     altura do viewport em px resolvidos, não em % — dentro de um
     .mc-track de altura automática (ele tem que crescer com a soma dos
     cartões, senão não sobra o que rolar), flex-basis:100% num item não
     tem 100% de referência (container sem altura definida) e cai pra
     "auto"/tamanho do conteúdo. Resultado: cada cartão ficava mais baixo
     que o viewport e o próximo cartão "espiava" por baixo antes do snap
     terminar. Com a variável, os dois usam o mesmo valor calculado. */
  .meu-caminho{--mc-h:min(88vh,700px)}
  .mc-viewport{
    overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;
    height:var(--mc-h);-webkit-overflow-scrolling:touch;
  }
  .mc-track{flex-direction:column}
  .mc-slide{flex:none;width:100%;height:var(--mc-h);flex-direction:column;min-height:0}
  .mc-panel{width:100%}
  /* a foto tinha 50% da altura fixa do cartão — como esse box é mais
     largo que alto (landscape), o object-fit:cover cortava a foto
     vertical numa fatia horizontal (efeito "foto em paisagem" mesmo
     usando o arquivo certo). Corrigido: a altura da foto agora segue a
     proporção real do crop retrato (4:5) em vez de uma fração fixa do
     cartão — encaixa inteira, sem cortar topo/base nem laterais. */
  /* teto de altura (max-height, não só aspect-ratio): sem ele, num cartão
     onde a foto "cheia" (proporção 4:5 vezes a largura da tela) precisa
     de mais altura do que --mc-h tem disponível, o painel de texto
     (flex:1 1 auto) era espremido até desaparecer — exatamente o "sumiu"
     reportado. Com o teto, a foto para de crescer a tempo de sobrar
     espaço garantido pro título+texto, sempre.
     Os arquivos -v.jpg enviados já são 1000×1250 (4:5 exato) — a proporção
     bate 100% com o aspect-ratio declarado, então cortar não era problema
     de arquivo. O teto de 58% é que era pequeno demais: numa tela de
     ~660px de cartão, a foto em 4:5 pediria ~490px (74%), mas o teto
     cortava em ~383px (58%) — quase 1/4 da foto sumia, e o painel de
     texto (que só usa 1-2 linhas na maioria dos cards) sobrava com muito
     espaço vazio embaixo. Troquei o teto fixo em % por
     calc(var(--mc-h) - 230px): a foto cresce quase até a proporção 4:5
     real (praticamente sem cortar) e só é limitada se isso deixar menos
     de 230px pro texto — reserva aumentada de 150→190→230px conforme os
     parágrafos foram ficando mais longos (rodada de conteúdo novo), pro
     título+3-4 linhas caberem sem espremer na maioria dos cartões (o
     painel de texto já tem overflow:auto como rede de segurança pros
     parágrafos mais longos, tipo "Autora"). */
  .mc-panel-photo{flex:0 0 auto;order:-1;aspect-ratio:4/5;width:100%;max-height:calc(var(--mc-h) - 265px)}
  /* cartão intro tem eyebrow+título+parágrafo (mais texto que os demais,
     que só têm h3+1 frase) — a reserva padrão não é suficiente aqui e o
     parágrafo cortava sem aviso. Reserva maior só pra esse cartão; a foto
     dele é uma textura (parede de concreto), então perder um pouco mais
     de altura não prejudica a leitura da imagem como prejudicaria um
     retrato ou uma cena. */
  .mc-slide-intro .mc-panel-photo{max-height:calc(var(--mc-h) - 320px)}
  /* com o teto de altura, o cover corta um pedaço da foto — por padrão
     cortaria igual em cima e embaixo, mas no card "Content design" é
     exatamente o topo (o "Empower Your Health" da tela do case) que dá
     contexto de que aquilo é uma healthtech de verdade. object-position
     no topo garante que o corte tira só de baixo, nunca de cima — vale
     também pros retratos: prefere manter o rosto a cortar os pés. */
  .mc-panel-photo img{object-position:top}
  .mc-panel-text{flex:1 1 auto;min-height:0;order:2;padding:20px 20px;justify-content:flex-start;gap:8px;overflow:auto}
  .mc-title{font-size:clamp(28px,8vw,38px);margin-top:12px}
  .mc-intro-desc{font-size:16px;max-width:none}
  .mc-slide .mc-panel-text p{font-size:16px;max-width:none}
  /* chevron duplo continua centralizado na foto, só gira 90° pra apontar
     pra baixo — mesma dica, eixo trocado (swipe vertical no mobile) */
  .mc-swipe-hint{transform:translate(-50%,-50%) rotate(90deg)}
  .mc-swipe-hint:hover{transform:translate(-50%,-50%) rotate(90deg)}
  @keyframes mcHint{0%,100%{transform:translate(-50%,-50%) rotate(90deg) translateX(0)}50%{transform:translate(-50%,-50%) rotate(90deg) translateX(10px)}}
  /* setas laterais giram 90°: apontavam esquerda/direita, viram
     cima/baixo — mesmo eixo do swipe vertical no mobile */
  .mc-side-arrow{width:38px;height:38px;top:auto;bottom:20px;transform:rotate(90deg)}
  .mc-side-arrow:hover{transform:rotate(90deg) scale(1.06)}
  .mc-side-arrow.prev{left:8px}
  .mc-side-arrow.next{right:8px}
  .meu-caminho.mc-at-start .mc-side-arrow{transform:rotate(90deg) scale(.85)}
  .mc-dots{padding:14px 20px}

  /* galeria da trajetória: vira feed estilo Instagram — só a primeira
     foto aparece por vez (sem espiar a próxima), setas nas laterais
     sobre a foto, e pontinhos embaixo indicando posição/total (em vez do
     texto "n/30" antigo) */
  .trajetoria-gallery-wrap{padding:0 0 44px}
  /* reordena pra Título → texto de fechamento → galeria: em mobile cada
     foto some sozinha na tela (feed), então o contexto ("do que se trata
     esse acervo") precisa vir ANTES das fotos, não depois. Desktop mantém
     a ordem original do HTML (galeria primeiro, texto depois). */
  .trajetoria-gallery-wrap{display:flex;flex-direction:column}
  /* .wrap tem margin:0 auto (pra se centralizar quando mais estreito que
     o teto de largura) — dentro de um pai flex-column isso vira margem
     automática no eixo cruzado, que "puxa" o item pro centro em vez de
     esticar pra largura toda. Zerando a margem aqui, o título volta a
     ocupar a largura inteira e o text-align:left cola ele na borda. */
  /* no mobile a "banda" não tem fundo azul (ver regra fora do @media) —
     ela só existe como agrupador pra tag+título; o order agora é nela
     (é ela quem é filha direta do flex), não mais em .trajetoria-gallery-head. */
  .trajetoria-gallery-band{order:1}
  .trajetoria-gallery-head{margin:0}
  .trajetoria-gallery-desc-wrap{order:2;margin:0}
  .trajetoria-gallery{order:3}
  .trajetoria-gallery-desc-wrap .trajetoria-gallery-desc{margin-top:14px}
  .trajetoria-item{width:100vw;flex:none;aspect-ratio:auto;display:flex;flex-direction:column}
  .trajetoria-item img{aspect-ratio:4/3.05;height:auto;flex:none}
  .trajetoria-track{padding:0;gap:0}
  .trajetoria-scroll{scroll-snap-type:x mandatory}
  .trajetoria-arrow{width:38px;height:38px}
  .trajetoria-arrow.prev{left:8px}
  .trajetoria-arrow.next{right:8px}
  .trajetoria-counter{display:none}
  /* legenda no mobile: não tem hover num toque, então fica sempre visível,
     estática, embaixo da foto — não mais um overlay sobre a imagem */
  .ti-caption{
    position:static;display:block;background:var(--cream);color:var(--ink);
    padding:12px 16px;font-size:14px;line-height:1.4;
    opacity:1;transform:none;pointer-events:auto;
  }
  .trajetoria-dots{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:6px;margin-top:16px;padding:0 24px;
  }
  .trajetoria-dots .dot{
    width:5px;height:5px;border-radius:50%;background:rgba(20,16,58,.25);
    flex:none;transition:background .2s,transform .2s;
  }
  .trajetoria-dots .dot[data-active]{background:var(--indigo);transform:scale(1.5)}
  .trajetoria-gallery-desc{font-size:16px;margin-top:26px;padding:0 22px}

  /* home: teaser do método — foto original cortada em duas (bule no topo,
     coador embaixo, mesmo arquivo fonte) pra compor como no mockup. O bule
     começa no topo absoluto da seção (top:0) e termina exatamente onde a
     tag começa — zero gap entre a água e a tag (copy padding-top == altura
     do bule). Tag agora é caixa sólida indigo (cor alterada no mockup). O
     texto vem em 2 caixas: p1 full-width (acaba antes do coador aparecer),
     p2+botão presos numa coluna à esquerda pra nunca sobrepor o coador, que
     sangra até o fim da seção. Só afeta a home; metodo.html usa
     .metodo-open, uma seção diferente. */
  /* a versão anterior (foto partida em 2 pedaços, posicionados absolute,
     texto encaixado nos vãos) reproduzia o mesmo bug já resolvido no
     "quem sou": pedaço de foto por cima do texto, botão por baixo da
     imagem. Troca pro padrão que já funcionou lá — mesma ordem via flex:
     foto inteira (mp-photo-full) no topo, com respiro, tag comprida colada
     nela, resto do conteúdo solto embaixo, sem nenhum position:absolute
     disputando espaço. */
  /* a foto precisa tocar alguma borda pra não parecer flutuando — sem
     padding no grid2, ela sangra até o topo absoluto da seção e até as
     laterais (largura total). O respiro lateral que o resto do conteúdo
     usa (22px) migra pra dentro do .copy, que é o único bloco que ainda
     precisa dele. */
  .metodo-promo-bleed .grid2{display:flex;flex-direction:column;position:relative;min-height:0;padding:0}
  /* margin-right:0 — reseta o respiro que o desktop reserva pra foto
     sangrando à direita; no mobile a foto vai em fluxo normal acima do
     texto. */
  .metodo-promo-bleed .copy{order:2;position:static;padding:0 22px 40px;margin-right:0;min-height:0}
  .eyebrow-outline{display:block;width:auto;align-self:stretch;background:var(--indigo);border-color:var(--indigo);color:var(--cream);margin:0 0 24px;padding:12px 22px;text-align:center}
  .metodo-promo-bleed .mp-p2,.metodo-promo-bleed .mp-box2 .btn{max-width:none}
  .metodo-promo-bleed .mp-box2 .btn{white-space:nowrap;align-self:flex-start;margin-top:22px}
  .metodo-promo-bleed .photo{order:1;position:static;width:100%;height:auto;overflow:visible}
  /* position:static explícito: a regra desktop (fora deste @media) agora
     põe .mp-photo-full como position:absolute (fix da altura descontrolada
     da grid — ver comentário acima) — sem sobrescrever aqui, a foto do
     mobile herdava esse absolute e ficava flutuando por cima do texto em
     vez de fluir normalmente no topo da seção. */
  .metodo-promo-bleed .photo .mp-photo-full{position:static;inset:auto;display:block;width:100%;height:auto;object-fit:contain}
  .metodo-promo-bleed .photo .mp-photo-top,.metodo-promo-bleed .photo .mp-photo-bottom{display:none}

  /* home e blog: bandas de contato final agora são só conteúdo (sem foto),
     pedido explícito da Mona — voltam a usar o .contato base (creme
     centralizado), nada a sobrescrever aqui.

     método: a foto (Monalisa_23) já fica grudada na aresta inferior-
     esquerda em QUALQUER largura de tela via regra única fora de @media
     (perto de .solo-photo-bleed, acima) — só ajusto a LARGURA nesta faixa
     mobile pra dar mais presença à foto em telas estreitas (mesmo espírito
     do bump de .solo-photo-bleed pra 70vw no mobile), sem tocar posição. */
  .contato-photo.metodo-cta-photo .cta-photo{width:min(58vw,420px)}
  /* título um pouco mais pra cima (menos padding-top) e botões empilhados
     à direita (um sobre o outro) em vez de lado a lado — pedido explícito
     da Mona pro mobile desta banda. */
  .contato-photo.metodo-cta-photo .wrap{padding:44px 32px 64px}
  .contato-photo.metodo-cta-photo .cta-row{flex-direction:column;align-items:flex-end}

  /* bandas de contato: título → foto (bem maior, sangrando) → texto → botões,
     tudo colado, sem respiro estranho entre os blocos */
  .contato-photo{flex-direction:column;padding:0}
  .contato-photo .wrap{display:contents}
  .contato-photo h2{order:1;padding:0 22px;text-align:center}
  .contato-photo .cta-photo{order:2;position:relative;inset:auto;width:100%;margin:26px 0 0;text-align:center;line-height:0}
  .contato-photo.cta-right .cta-photo{right:auto}
  .contato-photo .cta-photo img{display:inline-block;height:min(48vh,380px);width:auto;max-width:82vw;object-fit:contain;margin:0 auto}
  .contato-photo .sub{order:3;padding:0 22px;margin:22px 0 0;text-align:center}
  .contato-photo .cta-row{order:4;padding:0 22px;margin:22px 0 0;justify-content:center}
  /* cases: essa banda não tem .sub — o botão fica logo depois da foto, e
     o margin-top:22px genérico do .cta-row deixava a foto "solta" (gap
     antes do botão). Zero gap. */
  .contato-photo.cases-cta-photo .cta-row{margin-top:0}

  /* blog: banda de contato agora é só conteúdo (foto removida, pedido
     explícito da Mona) — cai no .contato base, nada a sobrescrever aqui. */

  /* (regra antiga de altura fixa removida — v2 usa height:auto pra
     mostrar a imagem inteira, ver bloco .bio-bleed-p1 acima) */

  .bio-bleed-copy h2{font-size:22px}
  .metodo-title-block h2{font-size:26px}
}