/* ============================================================
   OTIMIZAÇÃO FLORIANÓPOLIS · page-scoped (não toca ../shared)
   ------------------------------------------------------------
   MANIFESTO (trabalho sem DESIGN DNA formal — tese derivada do
   Manual da Marca Visual + fable-web-craft):
   1. TESE: diário de campo de imersão física × editorial clínico
      sereno. O navy noturno da marca respira em faixas de "luz de
      manhã de sábado" (areia #f5f5f3, token oficial --mf-off-white)
      toda vez que a página fala do concreto: agenda, mochila, local.
   2. SENSAÇÃO (3s): "eu já estou dentro dessa sala — séria e
      acolhedora ao mesmo tempo". Pertencimento antecipado, não hype.
   3. GESTO: alternância deliberada de TEMPERATURA. O concreto sai do
      breu navy pra luz de papel areia com o accent laranja de
      da praça; a gota da marca separa Dia 1 de Dia 2.
   4. ANTI-REFERÊNCIAS: (a) SaaS dark com card branco flutuando;
      (b) hype fitness neon; (c) wall-of-text navy uniforme.
   5. APOSTA DE RISCO: quebrar o dark-first sagrado com faixas CLARAS
      no meio da página — claro como RESPIRO pontual (nunca base),
      fazendo o navy virar protagonista por contraste. Cobertura no
      brandbook: #f5f5f3 é --mf-off-white ("fundos claros em seções
      internas das LPs").
   ------------------------------------------------------------
   Mobile-first: base = 390px; desktop em min-width. Reusa os tokens,
   componentes e o easing de assinatura (--ease-out) do shared.
   ============================================================ */

:root {
  /* faixa de luz — respiro concreto */
  --mf-sand:    #f5f5f3;   /* areia base (token oficial --mf-off-white) */
  --mf-sand-2:  #ece8e0;   /* degrau quente 1 passo abaixo */
  --sand-ink:      #182a31; /* texto sobre areia — navy tintado, nunca #000 (~14:1) */
  --sand-heading:  #10222a; /* headings sobre areia */
  --sand-second:   #45565e; /* secundário (~6.8:1) */
  --sand-muted:    #5c6b72; /* muted AINDA legível (~5.1:1) */
  --sand-label:    #a25717; /* label uppercase — laranja queimado (~5:1) */
  --sand-line:     rgba(24,42,49,0.10);
  --sand-line-2:   rgba(24,42,49,0.16);
  --sand-accent:   #e8832a; /* laranja do TOUR · só filete/detalhe grande */
  --sand-accent-2: #cf6f1c;
}

/* ============================================================
   FAIXA DE LUZ · wrapper que re-escopa os tokens do shared pro
   claro — sec-head/lead/mf-divider herdam sem CSS extra.
   ============================================================ */
.mf-light {
  --text-primary:   var(--sand-ink);
  --text-heading:   var(--sand-heading);
  --text-secondary: var(--sand-second);
  --text-muted:     var(--sand-muted);
  --border-subtle:  var(--sand-line);
  --border-card:    var(--sand-line-2);
  --surface-card:   #ffffff;
  --surface-glass:  rgba(255,255,255,0.72);
  --accent:         var(--sand-accent-2);
  background: var(--mf-sand);
  color: var(--sand-ink);
  isolation: isolate;
}
.mf-light--warm { background: var(--mf-sand-2); }

/* grão de papel + luz de canto — matéria que separa a faixa clara do navy */
.mf-light::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(232,131,42,0.08), transparent 60%),
    radial-gradient(90% 50% at 100% 110%, rgba(24,42,49,0.05), transparent 70%);
}
/* filete quente no topo — costura decidida navy → luz */
.mf-light::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--sand-accent) 30%, var(--sand-accent-2) 70%, transparent);
  opacity: .7;
}
.mf-light > .mf-container { position: relative; z-index: 1; }
.mf-light .mf-label { color: var(--sand-label); }
.mf-light .mf-divider { background: linear-gradient(90deg, var(--sand-accent), transparent); }
.mf-light h2 em, .mf-light .hl { color: var(--sand-accent-2); }
.mf-light .lead strong, .mf-light .sec-head strong { color: var(--sand-heading); }

/* chip de selo — "cronograma vivo", reaproveitável */
.sand-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px auto 0;
  padding: 8px 15px; border-radius: var(--radius-pill);
  background: rgba(232,131,42,0.10); border: 1px solid rgba(232,131,42,0.30);
  font-family: var(--font-display); font-weight: 700; font-size: .72rem;
  letter-spacing: .02em; color: var(--sand-accent-2); text-align: left;
}
.sand-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sand-accent);
  box-shadow: 0 0 0 3px rgba(232,131,42,0.18); flex: none; }

/* trinca de stats do bloco (2 dias · 15h · Sáb e Dom) */
.sand-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.sand-stats span {
  font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--sand-second);
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--sand-line); font-variant-numeric: tabular-nums;
}
.sand-stats b { color: var(--sand-heading); font-weight: 800; }

/* BLOCO A · FAIXA DE AUTORIDADE — seção removida na r36 (ordem do dono).
   Regras #autoridade / .auth-grid--tri / .auth-plus excluídas junto. */

/* ============================================================
   BLOCO B · AGENDA DIA 1 / DIA 2 (faixa de luz)
   composição: dois dias empilhados no mobile · lado a lado no
   desktop com gota central. Timeline de etapas por dia.
   ============================================================ */
.agenda-grid { display: grid; gap: 20px; margin-top: 30px; position: relative; }
.dia-card {
  position: relative; background: var(--surface-card); border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg); padding: 24px 20px 22px;
  box-shadow: 0 12px 34px rgba(24,42,49,0.06);
}
.dia-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; }
.dia-tag {
  font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; line-height: .9;
  color: var(--sand-accent); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.dia-title { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: var(--sand-heading); }
.dia-sub { display: block; font-family: var(--font-body); font-weight: 500; font-size: .78rem;
  letter-spacing: .10em; text-transform: uppercase; color: var(--sand-label); margin-top: 3px; }
.dia-rule { height: 1px; margin: 4px 0 16px;
  background: linear-gradient(90deg, var(--sand-accent), var(--sand-line) 40%, transparent); }
.dia-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dia-steps li { position: relative; padding-left: 30px; }
.dia-steps li::before {
  content: ""; position: absolute; left: 9px; top: 4px; bottom: -14px; width: 2px;
  background: linear-gradient(180deg, rgba(232,131,42,0.45), var(--sand-line)); }
.dia-steps li:last-child::before { display: none; }
.dia-steps li::after {
  content: ""; position: absolute; left: 5px; top: 3px; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--sand-accent); }
.dia-steps b { display: block; font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--sand-heading); margin-bottom: 2px; }
.dia-steps span { font-size: .9rem; color: var(--sand-second); line-height: 1.5; }

/* gota separadora entre os dois dias */
.agenda-drop { display: flex; align-items: center; justify-content: center; }
.agenda-drop img { width: 30px; opacity: .85; }

/* ============================================================
   FUSÃO R11 · ajustes do dono (mobile-first)
   ------------------------------------------------------------
   Sub quebrada em 2 respiros · chip de cronograma repaginado
   (centrado, sem estouro) · stats removidos · as 5 etapas viram
   ELEMENTO GRÁFICO (fileira de chips numerados) com apoio abaixo ·
   dois dias em AZUL, distintos entre si · reveal escalonado das
   etapas no scroll. Fechos (mochila + coda Certificação) removidos.
   ============================================================ */

/* 1 · sub em 2 blocos com respiro (mesmo padrão do Diagnóstico r9) */
.agenda-sub { margin-top: 12px; }
.agenda-sub--2 {
  margin-top: 14px; position: relative; padding-top: 16px;
  color: var(--sand-heading); font-weight: 600;
}
.agenda-sub--2::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34px; height: 2px; border-radius: 2px; opacity: .7;
  background: linear-gradient(90deg, transparent, var(--sand-accent), transparent);
}

/* 2 · chip de cronograma · centrado, quebra limpa (repaginado) */
.sand-chip {
  max-width: min(100%, 366px); margin: 18px auto 0;
  justify-content: center; align-items: center; text-align: center;
  line-height: 1.4; border-radius: var(--radius-lg); text-wrap: balance;
}

/* 4 · etapas do método · TABELA-PROGRAMA COMPACTA · grade 3+2 (r15)
   Ajuste do dono: a tabela de 5 linhas empilhadas enchia a tela.
   Vira uma grade compacta de UM objeto só — 3 células em cima
   (01·02·03), 2 embaixo (04·05). Numeral laranja protagonista sobre
   fundo branco; as hairlines são o gap de 1px sobre a linha de base
   (mantém o ar de tabela, sem virar pills soltas). Numeral em cima,
   nome centrado embaixo — cabe nomes longos sem espremer. */
.etapas-band {
  max-width: 420px; margin: 26px auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.etapas-table {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--sand-line-2);              /* vira as hairlines internas */
  border: 1px solid var(--sand-line-2);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 8px 24px rgba(24,42,49,.06);
}
.et-row {
  background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 12px 8px; text-align: center;
}
/* 3 em cima (span 2 cada) · 2 embaixo (span 3 cada) — larguras equilibradas */
.et-row:nth-child(-n+3) { grid-column: span 2; }
.et-row:nth-child(n+4)  { grid-column: span 3; }
.et-num {
  font-family: var(--font-display); font-weight: 900; font-size: 1.4rem;
  color: var(--sand-accent-2); letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.et-nome {
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  color: var(--sand-heading); letter-spacing: -.01em; line-height: 1.15;
  text-wrap: balance;
}
.etapas-apoio {
  max-width: 470px; margin: 0; text-align: center;
  font-family: var(--font-body); font-size: .88rem; line-height: 1.5;
  color: var(--sand-muted); text-wrap: pretty;
}

@media (hover: hover) {
  .et-row { transition: background var(--dur-fast) var(--ease-out); }
  .et-row:hover { background: rgba(232,131,42,.05); }
}

/* desktop · mesma grade 3+2, um passo maior e mais respirada (sem regressão) */
@media (min-width: 760px) {
  .etapas-band { max-width: 480px; }
  .et-row { padding: 15px 10px; gap: 4px; }
  .et-num { font-size: 1.6rem; }
  .et-nome { font-size: .92rem; }
}

/* pill de etapa · marca 5 dos 10 itens (assimetria proposital) */
.dia-steps li.has-tag > .step-tag {
  display: inline-block; margin-bottom: 7px;
  font-family: var(--font-display); font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sand-accent-2);
  background: rgba(232,131,42,0.10); border: 1px solid rgba(232,131,42,0.28);
  border-radius: var(--radius-pill); padding: 3px 11px; line-height: 1;
}
/* o item marcado ganha um nó preenchido — sinaliza etapa do método */
.dia-steps li.has-tag::after { background: var(--sand-accent); box-shadow: 0 0 0 3px rgba(232,131,42,0.14); }

/* 5 e 6 · os dois dias em AZUL, distintos entre si (sobre a luz)
   Dia 1 = azul Mobility arejado · Dia 2 = azul mais fundo com fita
   de topo. O azul é o container do dia; o laranja segue sendo o
   método (chips + pills + nós). --c-action é o azul Mobility e não
   é reescopado pelo .mf-light. */
.dia-card--d1 {
  background: linear-gradient(180deg, rgba(25,131,177,.11), rgba(25,131,177,.02));
  border-color: rgba(25,131,177,.30);
  box-shadow: 0 14px 36px rgba(25,131,177,.10);
}
.dia-card--d1 .dia-tag { color: var(--c-action); }
.dia-card--d1 .dia-rule {
  background: linear-gradient(90deg, var(--c-action), rgba(25,131,177,.18) 45%, transparent);
}
.dia-card--d2 {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(25,131,177,.17), rgba(91,184,224,.05));
  border-color: rgba(25,131,177,.40);
  box-shadow: 0 16px 40px rgba(25,131,177,.14);
}
.dia-card--d2::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #1983b1, #5bb8e0);
}
.dia-card--d2 .dia-tag { color: #14618f; }
.dia-card--d2 .dia-rule {
  background: linear-gradient(90deg, #5bb8e0, rgba(25,131,177,.20) 45%, transparent);
}

/* 7 · reveal escalonado das etapas quando cada dia entra na viewport */
html.js .dia-card .dia-steps li {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
html.js .dia-card.visible .dia-steps li { opacity: 1; transform: none; }
html.js .dia-card.visible .dia-steps li:nth-child(1) { transition-delay: .08s; }
html.js .dia-card.visible .dia-steps li:nth-child(2) { transition-delay: .16s; }
html.js .dia-card.visible .dia-steps li:nth-child(3) { transition-delay: .24s; }
html.js .dia-card.visible .dia-steps li:nth-child(4) { transition-delay: .32s; }
html.js .dia-card.visible .dia-steps li:nth-child(5) { transition-delay: .40s; }

/* respiro final · sem os fechos, o bloco termina no card do Dia 2 */
#conteudo .agenda-grid { margin-bottom: clamp(8px, 3vw, 22px); }

@media (prefers-reduced-motion: reduce) {
  html.js .dia-card .dia-steps li { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 860px) {
  .agenda-grid { grid-template-columns: 1fr auto 1fr; align-items: start; gap: 28px; }
  .agenda-drop { flex-direction: column; align-self: stretch; }
  .agenda-drop::before, .agenda-drop::after {
    content: ""; flex: 1; width: 1px;
    background: linear-gradient(180deg, transparent, var(--sand-line-2), transparent); }
  .agenda-drop img { margin: 14px 0; }
}

/* ============================================================
   BLOCO C · O QUE LEVAR / DEIXAR EM CASA (faixa de luz · degrau)
   composição DIFERENTE da agenda: duas colunas de listas com
   tratamentos opostos (levar = check / deixar = riscado emocional)
   ============================================================ */
.preparo-grid { display: grid; gap: 18px; margin-top: 30px; }
.prep-col { background: var(--surface-card); border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg); padding: 24px 20px; box-shadow: 0 12px 34px rgba(24,42,49,0.05); }
.prep-col--deixe { background: var(--mf-sand); border-style: dashed; border-color: var(--sand-line-2); }
.prep-head { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--sand-heading); }
.prep-eyebrow { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sand-label); margin-bottom: 14px; }
.prep-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.prep-list li { display: flex; align-items: flex-start; gap: 11px; font-size: .95rem; color: var(--sand-ink); line-height: 1.45; }
.prep-list .p-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.prep-list--leve .p-ico { color: var(--sand-accent-2); }
.prep-list--deixe li { color: var(--sand-second); }
.prep-list--deixe li b { color: var(--sand-heading); }
.prep-list--deixe .p-ico { color: #b04a3a; opacity: .8; }
.prep-note {
  margin-top: 22px; text-align: center; max-width: 680px; margin-inline: auto;
  padding: 16px 22px; border-radius: var(--radius-md);
  background: rgba(232,131,42,0.07); border: 1px solid rgba(232,131,42,0.22);
  font-size: .98rem; color: var(--sand-heading); line-height: 1.55; text-wrap: pretty;
}
@media (min-width: 780px) {
  .preparo-grid { grid-template-columns: 1.05fr .95fr; }
}

/* ============================================================
   BLOCO E · DEPOIMENTOS (navy · band-deep · prova em vídeo)
   r37 · CARD COMPACTO + PLAYER QUE VEM PRA FRENTE
   ------------------------------------------------------------
   Antes: 4 players 9/16 em coluna — ~3.700px de bloco no mobile.
   Agora o card é uma linha só (miniatura 3:4 pequena + legenda) e o
   player só aparece no clique: o .depo-stage é absoluto DENTRO do card,
   sobe acima do scrim (z-index) e cobre os vizinhos — o fluxo não muda
   de tamanho, então a altura do bloco é idêntica aberta e fechada
   (zero salto de scroll).
   Direção da expansão por linha: cards 1-2 abrem pra baixo, 3-4 pra
   cima. Assim o palco nunca vaza pra fora da seção, no mobile (1 col)
   nem no desktop (2 col).
   Reset explícito do carrossel horizontal do shared (≤620px): o
   overflow-x:auto de lá clipava o palco expandido.
   ============================================================ */
.depo-wrap { position: relative; margin-top: 30px; }

/* scrim — apaga o entorno e deixa só o player aceso.
   Sangra 110px pra fora do grid e desmancha nas pontas (mask): sem a
   máscara, o retângulo do escurecimento aparecia como uma caixa no meio
   da seção. */
.depo-scrim {
  position: absolute; top: -110px; bottom: -110px; left: 50%; width: 100vw;
  transform: translateX(-50%); z-index: 2;
  background: radial-gradient(120% 70% at 50% 50%, rgba(3,18,24,.62), rgba(3,18,24,.92));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
/* r39 · o scrim é DECORATIVO: nunca captura o ponteiro. Ele ganhava
   pointer-events no estado aberto e, com z-index 2 contra o z-index 1 dos
   cards, cobria os vizinhos: o toque no card ao lado morria nele, o JS
   fechava e o clique nunca chegava ao gatilho de destino — trocar de
   depoimento custava 2 toques. Fechar-ao-clicar-fora agora é do JS. */
.depo-wrap.is-open .depo-scrim { opacity: 1; }

.depo-grid {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none;
}

.depo-card {
  --depo-tile: 96px;
  position: relative; z-index: 1; overflow: visible;
  display: grid; grid-template-columns: var(--depo-tile) 1fr; gap: 14px; align-items: start;
  padding: 12px;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.depo-card.is-open { z-index: 4; border-color: var(--border-card); }

/* --- miniatura = gatilho (button de verdade, área 96x128 no mínimo) --- */
.depo-trigger {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; margin: 0;
  background: #08131a; border: 1px solid rgba(91,184,224,.20); border-radius: var(--radius-md);
  overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.depo-poster {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%;
  filter: saturate(.92) contrast(1.03) brightness(.9);
  transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.depo-trigger::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,18,24,.06) 0%, rgba(3,18,24,.14) 45%, rgba(3,18,24,.58) 100%);
}
/* selo de play no canto — fora do rosto do depoente (regra 8), apoiado no
   véu escuro da base do pôster */
.depo-play {
  position: absolute; z-index: 1; left: 8px; bottom: 8px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(3,18,24,.55); border: 1px solid rgba(232,245,253,.55);
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
/* triângulo: centro óptico ≠ centro métrico — 1px pra direita */
.depo-play svg { width: 13px; height: 13px; fill: #eaf6fd; transform: translateX(1px); }

/* --- legenda --- */
.depo-body { min-width: 0; }
.depo-name { display: block; font-family: var(--font-display); font-weight: 800; font-size: .98rem;
  line-height: 1.18; color: var(--text-heading); }
/* balance: a profissão longa quebra em 2 linhas equilibradas, nunca com
   "CROSSFIT" órfão embaixo */
.depo-role { display: block; margin-top: 3px; font-family: var(--font-display); font-size: .64rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent);
  line-height: 1.3; text-wrap: balance; }
.depo-result { margin-top: 8px; font-size: .845rem; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
/* pista de clique: só onde existe hover — no toque o disco de play no
   pôster já basta, e cada linha economizada é altura de bloco no mobile */
.depo-cue {
  display: none; align-items: center; gap: 6px; margin-top: 9px;
  font-family: var(--font-display); font-size: .64rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.depo-cue svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }

/* --- palco: o player que vem pra frente --- */
.depo-stage {
  /* A tela ÚTIL não é 100svh: a topbar come 60px no topo e a barra sticky de
     CTA come 69px no rodapé (z-index 999, sempre por cima do palco). O teto
     desconta as duas + respiro, senão a base do vídeo — onde ficam os
     controles do player — fica escondida atrás do CTA em tela curta. */
  --depo-stage-h: 66vh;
  --depo-stage-h: min(66svh, calc(100svh - 176px));
  position: absolute; z-index: 5; left: 50%;
  width: min(100%, calc(var(--depo-stage-h) * 9 / 16)); aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg); overflow: hidden;
  background: #04121a; border: 1px solid rgba(91,184,224,.42);
  box-shadow: inset 0 1px 0 rgba(232,245,253,.08),
              0 18px 40px rgba(0,0,0,.55),
              0 44px 90px rgba(3,18,24,.7),
              0 0 70px var(--c-accent-glow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) scale(.9);
  transition: opacity 300ms var(--ease-out), transform 460ms var(--ease-out), visibility 0s linear 460ms;
}
.depo-card:nth-child(-n + 2) .depo-stage { top: -10px;    transform-origin: 50% 14%; }
.depo-card:nth-child(n + 3)  .depo-stage { bottom: -10px; transform-origin: 50% 86%; }

.depo-card.is-open .depo-stage {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) scale(1); transition-delay: 0s;
}
/* enquanto o iframe não pinta: o próprio pôster desfocado segura o palco */
.depo-stage::before {
  content: ""; position: absolute; inset: -8%; z-index: 0;
  background-image: var(--depo-poster); background-size: cover; background-position: 50% 40%;
  filter: blur(18px) saturate(.75) brightness(.45);
  transition: opacity var(--dur-base) var(--ease-out);
}
.depo-stage.is-ready::before { opacity: 0; }
.depo-loading { position: absolute; z-index: 2; inset: 0 0 auto 0; height: 2px; overflow: hidden; opacity: 0; }
.depo-card.is-open .depo-loading { opacity: 1; }
.depo-stage.is-ready .depo-loading { opacity: 0; }
.depo-card.is-open .depo-stage:not(.is-ready) .depo-loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  animation: depoScan 1.15s var(--ease-in-out) infinite;
}
@keyframes depoScan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.depo-frame { position: absolute; inset: 0; z-index: 1; }
.depo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.depo-close {
  position: absolute; z-index: 3; top: 6px; right: 6px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(3,18,24,.55); border: 1px solid rgba(232,245,253,.3); color: #eaf6fd;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.depo-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* anel de foco por dentro do palco — o outline global cairia por cima da
   borda do vídeo e do card vizinho */
.depo-close:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -4px; border-radius: 50%; }
.depo-trigger:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* aberto: o card apaga e só o palco fica aceso */
.depo-card.is-open .depo-trigger,
.depo-card.is-open .depo-body { opacity: .14; }
.depo-card.is-open .depo-body { transition: opacity var(--dur-base) var(--ease-out); }

@media (hover: hover) {
  .depo-card { cursor: pointer; }
  /* recompensa em camadas: borda + sombra no card, zoom no pôster, disco no acento, seta que anda */
  .depo-card:hover { border-color: var(--border-card); box-shadow: var(--shadow-card-hover); transform: none; }
  .depo-card:hover .depo-poster { transform: scale(1.06); filter: saturate(1) contrast(1.03) brightness(1); }
  .depo-card:hover .depo-play { transform: scale(1.12); background: var(--c-accent);
    border-color: rgba(255,255,255,.6); box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 26px var(--c-accent-glow); }
  .depo-card:hover .depo-play svg { fill: #04121a; }
  .depo-card:hover .depo-cue { color: var(--c-accent); gap: 10px; }
  .depo-card.is-open:hover .depo-poster { transform: none; }
  .depo-close:hover { background: rgba(3,18,24,.85); transform: scale(1.06); }
}

@media (min-width: 720px) {
  .depo-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .depo-card { --depo-tile: 132px; gap: 18px; padding: 14px; }
  .depo-name { font-size: 1.06rem; }
  .depo-result { font-size: .875rem; }
  .depo-cue { display: inline-flex; }
  .depo-play { width: 40px; height: 40px; left: 10px; bottom: 10px; }
  .depo-play svg { width: 15px; height: 15px; }
}
@media (min-width: 1040px) {
  .depo-card { --depo-tile: 154px; gap: 22px; padding: 16px; }
  .depo-stage { --depo-stage-h: 68svh; }
}

/* ============================================================
   BLOCO D · LOCAL (faixa de luz · mapa protagonista)
   mobile: info em cima, mapa embaixo. desktop: 2 col alturas alinhadas.
   ============================================================ */
.local-grid { display: grid; gap: 22px; margin-top: 30px; }
/* praça sem mapa/foto (ex.: local em confirmação) — card único centrado, honesto */
.local-grid--solo { grid-template-columns: 1fr; max-width: 600px; margin-left: auto; margin-right: auto; }
.local-info {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--surface-card); border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg); padding: 26px 22px; box-shadow: 0 12px 34px rgba(24,42,49,0.06);
}
.local-datas { display: flex; flex-wrap: wrap; gap: 10px; }
.local-data-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--sand-line-2);
  font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--sand-heading);
}
.local-data-chip svg { width: 15px; height: 15px; color: var(--sand-accent-2); flex: none; }
.local-address { display: flex; gap: 13px; align-items: flex-start;
  padding-top: 18px; border-top: 1px solid var(--sand-line); }
.local-address .pin { flex: none; width: 26px; height: 26px; color: var(--sand-accent); margin-top: 2px; }
.local-address strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.06rem;
  color: var(--sand-heading); margin-bottom: 4px; }
.local-address .addr { font-size: .95rem; color: var(--sand-second); line-height: 1.5; }
.local-maps-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; align-self: flex-start;
  padding: 14px 24px; border-radius: var(--radius-pill); min-height: 48px;
  background: var(--sand-heading); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .96rem;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.local-maps-cta svg { width: 18px; height: 18px; }
.local-maps-cta:hover { transform: translateY(-2px); background: #0b1a21; box-shadow: 0 10px 26px rgba(24,42,49,0.28); }
.local-dica { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; color: var(--sand-second); line-height: 1.55; }
.local-dica svg { flex: none; width: 19px; height: 19px; color: var(--sand-accent-2); margin-top: 2px; }

/* ============================================================
   MOSAICO DO LOCAL (bloco D) — 3 fotos reais do espaço.
   Só renderiza com .local-fotos--on (praça com fotos); vazio = some.
   Hierarquia: fachada âncora (col alta) + 2 internas empilhadas.
   Espelhável: CSS idêntico nas 3 praças; Floripa não injeta o bloco.
   ============================================================ */
.local-fotos { display: none; }
.local-fotos--on {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-top: 22px;
}
.lf-item {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--sand-line-2);
  background: var(--mf-sand-2);
  box-shadow: 0 14px 34px rgba(24,42,49,0.10);
  transform: translateZ(0);
}
.lf-item img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* costura ao DNA da faixa de luz: filete claro interno + base levemente aprofundada */
.lf-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  background: linear-gradient(180deg, transparent 64%, rgba(24,42,49,0.16));
  opacity: .5;
}
.lf-anchor { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.lf-in { aspect-ratio: 4 / 3; }

@media (hover: hover) {
  .lf-item:hover img { transform: scale(1.045); }
}

@media (min-width: 900px) {
  .local-grid { grid-template-columns: 1fr; align-items: stretch; }

  /* fachada vira âncora vertical à esquerda; internas empilham à direita */
  .local-fotos--on {
    grid-template-columns: 1.42fr 1fr;
    gap: 14px;
  }
  .lf-anchor { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
  .lf-in { aspect-ratio: 16 / 11; }
}

/* ============================================================
   HERO · R2 — headline protagonista, sem vídeo, atmosfera navy viva
   ------------------------------------------------------------
   Feedback do dono (390px): chips desproporcionais (1/3 da tela),
   retirar o vídeo de fundo, "quebrar o padrão para impactar".
   MANIFESTO do hero (fable-web-craft Ato 1):
   1. TESE: a HEADLINE é o herói — tipografia grande sobre um breu
      navy vivo em camadas de luz (mobility blue + acento do TOUR),
      sem vídeo competindo, sem caixas roubando a dobra.
   2. SENSAÇÃO (3s): "a promessa me olha de frente" · foco, não ruído.
   3. GESTO: a gota da marca respira gigante e quase invisível atrás
      do título (marca d'água — Manual §7), único elemento de fundo.
   4. ANTI-REF: (a) vídeo escurecido genérico; (b) pilha de pills
      encaixotadas; (c) navy chapado morto.
   5. APOSTA: hero 100% tipográfico + atmosférico, zero foto/vídeo —
      a força vem do contraste luz/breu e da escala do texto.
   Escopo #hero. Não toca ../shared. Mobile-first.
   ============================================================ */
/* atmosfera em camadas — entra no lugar do vídeo */
#hero {
  background:
    radial-gradient(115% 78% at 50% -8%, rgba(25,131,177,0.22), transparent 55%),
    radial-gradient(82% 52% at 88% 10%, rgba(232,131,42,0.13), transparent 52%),
    radial-gradient(110% 72% at 12% 108%, rgba(13,102,150,0.17), transparent 60%),
    linear-gradient(180deg, var(--mf-deep) 0%, var(--mf-night) 52%, #020b10 100%);
}
/* vídeo e overlay saem; mídia vira só matéria (grão + gota) */
#hero .hero-video, #hero .hero-overlay { display: none !important; }
#hero .hero-media { width: 100%; left: 0; right: 0; inset: 0; }
#hero .hero-grain { opacity: .045; z-index: 1; }

/* gota de assinatura — grande, quase invisível, atrás do título */
.hero-drop {
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(-56px, -7svh, -28px); right: -16%;
  width: min(82vw, 470px); aspect-ratio: 1; opacity: .06;
  filter: drop-shadow(0 0 70px var(--c-accent-glow));
}
.hero-drop img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* fluxo do conteúdo: centrado, sem o vão do space-between */
#hero .hero-content { justify-content: center; }
#hero .hero-mid { gap: 0; }

/* kicker tipográfico (era o badge "Para profissionais" encaixotado) */
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.64rem, 2.9vw, .72rem);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-accent); text-wrap: balance;
}
/* traços laterais só quando o kicker cabe em 1 linha (≥520px) — no mobile
   estreito ficariam soltos ao redor de um bloco de 2 linhas */
@media (min-width: 520px) {
  .hero-kicker::before, .hero-kicker::after {
    content: ""; height: 1px; width: clamp(20px, 5vw, 34px);
    background: linear-gradient(90deg, transparent, var(--c-accent));
  }
  .hero-kicker::after { background: linear-gradient(90deg, var(--c-accent), transparent); }
}
/* benefícios sem última linha órfã (mesmo texto, quebra melhor) */
#hero .hero-benefits li span { text-wrap: pretty; }

/* meta discreta cidade · data (eram 2 pills grandes) */
.hero-meta {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px; margin-top: clamp(12px, 2svh, 18px);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.82rem, 3.5vw, .96rem); color: var(--text-secondary);
}
.hero-meta [data-bind="cidadeUf"] { color: var(--text-primary); font-weight: 700; }
.hero-meta-pin { width: 15px; height: 15px; color: var(--c-accent); flex: none; }
.hero-meta-dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--c-accent);
  opacity: .85; box-shadow: 0 0 7px var(--c-accent-glow); flex: none;
}

/* headline — protagonista da dobra, recalibrada em R3 (feedback do dono:
   "pouco preenchido nas linhas, aumenta a largura pra caber mais e dar 4
   linhas completas"). Coluna quase full (regra 1: 60-90% respeitada — vai
   a ~98% da útil), corpo maior e wrap GREEDY (linha cheia > equilíbrio com
   folga). Teto de 4 linhas: o dono reprovou 7. */
@media (max-width: 880px) { #hero .hero-inner { padding-inline: 20px; } }
#hero .hero-mid h1 {
  margin-top: clamp(15px, 2.6svh, 24px);
  font-size: clamp(1.35rem, 6.2vw, 1.9rem);
  line-height: 1.12; letter-spacing: -.022em; text-wrap: normal;
  max-width: 100%; margin-inline: auto;
}
.hero-anchor { margin-top: clamp(10px, 1.8svh, 16px); }

/* ---- DESKTOP: hero centrado (sem vídeo, o split 65% do shared não faz mais sentido) ---- */
@media (min-width: 881px) {
  /* zera o padding base do #hero (evita padding duplo com o hero-inner) */
  #hero { min-height: min(100svh, 820px); padding: 0; text-align: center; }
  #hero .hero-inner { width: 100%; padding-block: calc(var(--topbar-h) + 18px) 84px; }
  #hero .hero-content {
    max-width: 1000px; margin-inline: auto; align-items: center; text-align: center;
  }
  #hero .hero-mid { align-items: center; }
  /* linhas mais largas → menos altura (cabe em 1 dobra) e ≥55% da largura.
     r38 · o dono achou o corpo do desktop "muito grande e desproporcional":
     a escala cai ~18% (1440px: 53,6px → 44px; 1024px: 46,1px → 37,6px) e o
     teto congela em 2.75rem pra que 1600/1920px não voltem a crescer. A copy
     é a mesma — só o corpo mudou. Mobile (≤880px) intocado. */
  #hero .hero-mid h1 {
    margin-top: 16px; font-size: clamp(2.35rem, 3.5vw, 2.75rem);
    line-height: 1.06; letter-spacing: -.02em; text-wrap: balance;
    max-width: 900px; margin-inline: auto;
  }
  .hero-anchor { margin-top: 14px; }
  /* benefícios: bloco centrado como grupo, mas cada linha ícone+texto
     alinhada à esquerda (gota no topo da 1ª linha) — os 3 idênticos,
     inclusive o 3º que quebra em 2 linhas por comprimento */
  #hero .hero-benefits { margin-top: 18px; align-self: center; max-width: 620px; gap: 12px; text-align: left; }
  #hero .hero-benefits li { justify-content: flex-start; text-align: left; align-items: flex-start; }
  #hero .hero-benefits .hero-benefit-ico { margin-top: 3px; }
  #hero .hero-cta-group { margin-top: 24px; align-items: center; }
  .hero-drop { top: -8%; right: -6%; width: min(44vw, 600px); opacity: .05; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-drop { filter: none; }
}

/* ============================================================
   FAIXA DE FATOS (.vagas-bands) · GEOMETRIA RESPONSIVA — r38
   ------------------------------------------------------------
   DEFEITO: o shared fixa rotate(±1.6deg) nas duas tarjas. Como a
   tarja tem 116% da largura da tela, a QUEDA VERTICAL das pontas
   cresce junto com o viewport: tan(1.6°) × largura da tarja =
   12,6px em 390px (bonito), mas 46,6px em 1440px e 62,2px em
   1920px — mais alto que a própria tarja (34px). Passando desse
   ponto as duas param de se cruzar e abrem num leque: sobra uma
   cunha de accent chapado no pé da primeira dobra.
   CORREÇÃO: a inclinação vira uma variável que AFINA conforme a
   tela alarga, mantendo a queda sempre abaixo da altura da tarja
   (≈19-31px) — o X continua se cruzando em qualquer largura.
   O preenchimento do texto é o outro lado do defeito e está no
   otimizacao.js (bloco "FAIXA DE FATOS · cobertura do marquee").
   Escopo #hero · page-scoped · ../shared intocado.
   ============================================================ */
#hero .vagas-bands { --band-tilt: 1.6deg; }
#hero .vagas-band-1 { transform: rotate(calc(var(--band-tilt) * -1)); }
#hero .vagas-band-2 { transform: rotate(var(--band-tilt)); }

@media (min-width: 881px) {
  /* respiro extra: com a tarja inclinada as pontas invadem o padding
     do container (que tem overflow:hidden) e sairiam decepadas em reta */
  #hero .vagas-bands { --band-tilt: 1.05deg; padding-block: 20px; }
}
@media (min-width: 1280px) { #hero .vagas-bands { --band-tilt: .9deg; } }
@media (min-width: 1700px) { #hero .vagas-bands { --band-tilt: .75deg; } }

/* ============================================================
   BLOCO A VIVÊNCIA · R4 — vídeo no lugar da foto + texto centrado
   (mobile). Feedback do dono: "tem um vídeo e não uma FOTO, adiciona
   o vídeo · centraliza a formatação do texto". Vídeo lazy 16:9, mesmo
   padrão panda dos depoimentos. Escopo #vivencia · não toca ../shared.
   ============================================================ */
.viv-video {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  width: min(86%, 300px); margin-inline: auto;
  border-radius: var(--radius-lg); border: 1px solid var(--border-card);
  background: #08131a; box-shadow: var(--shadow-card);
}
/* desktop: player vertical CONTIDO na coluna (altura ~620px), centrado —
   espelha a mecânica da LP SP (#solucao · aspect 9/16), mas com teto de
   largura pra não estourar a altura numa coluna larga */
@media (min-width: 761px) { .viv-video { width: 100%; max-width: 350px; } }
.viv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.viv-video .viv-skel {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0a1a24, #08131a);
}
.viv-video .viv-skel svg {
  width: 52px; height: 52px; color: var(--c-accent); opacity: .85;
  filter: drop-shadow(0 0 16px var(--c-accent-glow));
}

@media (max-width: 760px) {
  /* centraliza o texto corrido do bloco, com medida de leitura confortável.
     A escada e o painel da hierarquia têm alinhamento próprio (abaixo). */
  #vivencia .vivencia-body { text-align: center; }
  #vivencia .vivencia-body > p,
  #vivencia .flow-intro { margin-inline: auto; max-width: 32ch; }
}

/* ============================================================
   BLOCO VIVÊNCIA · A ESCADA DA PRÁTICA (frente 1 · redesign r5)
   ------------------------------------------------------------
   Feedback do dono: os 4 cards estavam "simples, card com texto".
   Vira uma CONSTRUÇÃO por camadas — spine de progressão que esquenta
   rumo ao 04, numerais grandes como nós gráficos, e o 04 Flow como
   clímax (card preenchido, glow, gota da marca). Escopo #vivencia ·
   não toca ../shared. Numerais decorativos (aria-hidden); a ordem
   já é comunicada pela sequência de nomes.
   ============================================================ */
#vivencia .viv-ladder {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  max-width: 380px; margin: 22px auto 0;
  text-align: left;
}
/* spine — trilho de progressão atrás dos nós, do frio ao azul de ação */
#vivencia .viv-ladder::before {
  content: ""; position: absolute; z-index: 0;
  left: 26px; top: 26px; bottom: 46px; width: 2px;
  background: linear-gradient(180deg,
    var(--c-accent-glow) 0%, var(--c-accent) 55%, var(--c-action) 100%);
  opacity: .55;
}
#vivencia .viv-rung {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 54px 1fr; align-items: center; column-gap: 15px;
  padding: 12px 14px 12px 0; border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);
}
#vivencia .viv-rung-num {
  width: 54px; height: 54px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 1.35rem;
  color: var(--c-accent); background: var(--mf-deep);
  border: 1.5px solid var(--border-card); border-radius: 50%;
  box-shadow: 0 0 0 6px var(--bg-base, #031218);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
#vivencia .viv-rung-body { display: flex; flex-direction: column; gap: 3px; }
#vivencia .viv-rung-name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.06rem;
  color: var(--text-heading); letter-spacing: -.01em; line-height: 1.15;
}
#vivencia .viv-rung-desc {
  font-size: .88rem; color: var(--text-secondary); line-height: 1.5; text-wrap: pretty;
}
/* 04 · clímax — o ponto onde tudo se conecta */
#vivencia .viv-rung--apex {
  grid-template-columns: 54px 1fr auto;
  margin-top: 4px; padding: 16px;
  background: linear-gradient(135deg, rgba(25,131,177,.16), rgba(25,131,177,.03));
  border: 1px solid var(--c-accent); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 0 42px var(--c-accent-glow);
}
#vivencia .viv-rung--apex .viv-rung-num {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--c-action), var(--c-accent));
  box-shadow: 0 0 0 6px var(--bg-base, #031218), 0 6px 22px var(--c-accent-glow);
}
#vivencia .viv-rung--apex .viv-rung-name { color: #fff; }
#vivencia .viv-rung-gota {
  width: 26px; align-self: center; color: var(--c-accent); opacity: .92;
  filter: drop-shadow(0 0 9px var(--c-accent-glow));
}
#vivencia .viv-rung-gota svg { width: 100%; height: auto; display: block; }

@media (hover: hover) {
  #vivencia .viv-rung:not(.viv-rung--apex):hover { transform: translateX(5px); }
  #vivencia .viv-rung:not(.viv-rung--apex):hover .viv-rung-num {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 6px var(--bg-base, #031218), 0 0 18px var(--c-accent-glow);
  }
  #vivencia .viv-rung--apex:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover), 0 0 54px var(--c-accent-glow);
  }
}

/* reveal escalonado · opacidade com delay por --i (transform livre pro hover).
   Gatilho .is-in vem do observer próprio (otimizacao.js) — a página roda
   GSAP e os .reveal não recebem .visible. */
html.js #vivencia .viv-ladder .viv-rung { opacity: 0; }
html.js #vivencia .viv-ladder.is-in .viv-rung {
  opacity: 1; transition-delay: 0s, 0s, calc(var(--i) * 95ms);
}

/* ============================================================
   BLOCO VIVÊNCIA · A HIERARQUIA DE PRÁTICA (frente 2 · redesign r5)
   ------------------------------------------------------------
   Nomeia o mecanismo (KB: "Hierarquia de Prática"). Cada estágio =
   nome (título) em cima, descrição (subtítulo) embaixo, ligados por
   conectores como fluxo — nunca lista solta. 3º estágio TROCA de
   "Condicionamento" (termo antigo, descartado) pra "Integração"
   (correção da KB · entrevista Thiago 04/07). Painel distinto da
   escada acima: sem numerais, com heading + gota e nó de chegada.
   ============================================================ */
#vivencia .viv-hierarquia {
  position: relative; overflow: hidden;
  max-width: 400px; margin: 28px auto 0; padding: 24px 20px;
  border: 1px solid var(--border-card); border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(25,131,177,.11), transparent 62%),
    var(--surface-glass);
  box-shadow: var(--shadow-card);
  text-align: center;
}
#vivencia .vh-head { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#vivencia .vh-gota {
  width: 30px; color: var(--c-accent); margin-bottom: 2px;
  filter: drop-shadow(0 0 10px var(--c-accent-glow));
}
#vivencia .vh-gota svg { width: 100%; height: auto; display: block; }
#vivencia .vh-kicker {
  font-family: var(--font-display); font-weight: 700; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); opacity: .9;
}
#vivencia .vh-title {
  font-family: var(--font-display); font-weight: 800; color: var(--text-heading);
  font-size: clamp(1.2rem, 5vw, 1.55rem); letter-spacing: -.01em;
  line-height: 1.12; text-wrap: balance; margin: 0;
}
/* sub em duas linhas soltas · sem travessão (feedback dono r6):
   linha 1 mais forte (o princípio), linha 2 secundária (o que sustenta) */
#vivencia .vh-sub {
  display: flex; flex-direction: column; gap: 3px;
  max-width: 34ch; margin: 5px auto 0; line-height: 1.4; text-wrap: pretty;
}
#vivencia .vh-sub-lead {
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  color: var(--text-primary);
}
#vivencia .vh-sub-tail { font-size: .84rem; color: var(--text-secondary); }
#vivencia .vh-flow {
  display: flex; flex-direction: column; align-items: center;
  margin: 20px 0 2px;
}
#vivencia .vh-stage {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  width: 100%; max-width: 250px; padding: 13px 16px;
  border-radius: var(--radius-md); background: var(--mf-deep);
  border: 1px solid var(--border-subtle);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out),
              box-shadow .3s var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
#vivencia .vh-stage-name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: var(--text-heading);
}
#vivencia .vh-stage-desc { font-size: .82rem; color: var(--text-secondary); line-height: 1.4; }
/* estágio de chegada — a integração acende */
#vivencia .vh-stage--arrival {
  border-color: var(--c-accent);
  background: linear-gradient(135deg, rgba(25,131,177,.14), rgba(25,131,177,.03));
  box-shadow: 0 0 26px var(--c-accent-glow);
}
#vivencia .vh-link {
  display: grid; place-items: center; width: 26px; height: 26px;
  color: var(--c-accent); opacity: .7; transition: opacity var(--dur-slow) var(--ease-out);
}
#vivencia .vh-link svg { width: 16px; height: 16px; display: block; }

@media (hover: hover) {
  #vivencia .vh-stage:not(.vh-stage--arrival):hover {
    transform: translateY(-2px); border-color: var(--border-card);
  }
  #vivencia .vh-stage--arrival:hover {
    transform: translateY(-2px); box-shadow: 0 0 36px var(--c-accent-glow);
  }
}

/* desktop · a hierarquia vira fluxo horizontal, conectores apontam adiante */
@media (min-width: 761px) {
  #vivencia .viv-hierarquia { max-width: 100%; padding: 26px 28px; }
  #vivencia .vh-flow { flex-direction: row; justify-content: center; align-items: stretch; }
  #vivencia .vh-stage { max-width: none; flex: 1 1 0; justify-content: center; }
  #vivencia .vh-link { transform: rotate(-90deg); width: 34px; flex: none; }
}

/* reveal escalonado dos estágios + conectores (gatilho .is-in) */
html.js #vivencia .viv-hierarquia .vh-stage,
html.js #vivencia .viv-hierarquia .vh-link { opacity: 0; }
html.js #vivencia .viv-hierarquia.is-in .vh-stage {
  opacity: 1; transition-delay: 0s, 0s, 0s, calc(var(--i) * 120ms + 120ms);
}
html.js #vivencia .viv-hierarquia.is-in .vh-link { opacity: .7; transition-delay: .34s; }
@media (min-width: 761px) {
  html.js #vivencia .viv-hierarquia.is-in .vh-link { transform: rotate(-90deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.js #vivencia .viv-ladder .viv-rung,
  html.js #vivencia .viv-hierarquia .vh-stage,
  html.js #vivencia .viv-hierarquia .vh-link { opacity: 1; transform: none; }
  #vivencia .viv-rung, #vivencia .vh-stage { transition: none; }
  #vivencia .viv-rung:hover, #vivencia .vh-stage:hover { transform: none; }
}

/* ============================================================
   BLOCO O DIAGNÓSTICO · R10 — 4 fases empilhadas, card premium
   ------------------------------------------------------------
   Reverte o 2col do r8 (dono: "fica estranho e mal formatado, volte
   ao padrão"). Em vez de voltar cru, ELEVA o card único: cada fase
   ganha um RAIL de numeral gigante (o número vira o elemento gráfico
   da fase) + fio vertical de progressão em accent, hierarquia
   título/descrição arejada e o card 04 com glow da virada. Composição
   própria (rail numérico horizontal) — distinta do bento do Presencial
   e da timeline da Vivência. Copy intocada. Escopo #ciclo · não toca
   ../shared. Desktop (≥481px) segue o padrão do shared, sem regressão.

   SUBTÍTULO em 2 frases (feedback dono): a 1ª nomeia o ciclo, a 2ª
   interpela o leitor com peso e cor de destaque + respiro entre elas.
   ============================================================ */
.sec-head .ciclo-sub { margin-top: 14px; text-wrap: pretty; }
.sec-head .ciclo-sub--interpela {
  margin-top: 18px; color: var(--text-primary);
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: -.005em; text-wrap: balance;
}
.sec-head .ciclo-sub--interpela::before {
  content: ""; display: block; width: 34px; height: 2px; margin: 0 auto 16px;
  border-radius: 2px; opacity: .7;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
}

@media (max-width: 480px) {
  #ciclo .ciclo-grid { grid-template-columns: 1fr; gap: 14px; }

  /* card horizontal · rail do numeral + conteúdo arejado */
  #ciclo .ciclo-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 18px; align-items: start;
    padding: 22px 20px 22px 18px;
    border-radius: var(--radius-lg);
    background: linear-gradient(158deg, rgba(25,131,177,.055), transparent 60%), var(--surface-card);
    overflow: hidden;
  }
  /* numeral vira elemento gráfico da fase · fio vertical de progressão */
  #ciclo .ciclo-num {
    grid-row: 1 / span 2; align-self: stretch;
    position: relative; display: block;
    font-size: 2.6rem; line-height: .86; opacity: .92;
    padding-right: 17px; font-variant-numeric: tabular-nums;
  }
  #ciclo .ciclo-num::after {
    content: ""; position: absolute; right: 0; top: 4px; bottom: 2px; width: 2px;
    border-radius: 2px; opacity: .5;
    background: linear-gradient(180deg, var(--c-action), transparent);
  }
  #ciclo .ciclo-card h3 {
    grid-column: 2; grid-row: 1;
    margin: 3px 0 8px; font-size: 1.06rem; line-height: 1.22; text-wrap: balance;
  }
  #ciclo .ciclo-card p {
    grid-column: 2; grid-row: 2;
    font-size: .9rem; line-height: 1.5; text-wrap: pretty;
  }
  /* card 04 · a fase que a vivência resolve — fio e glow em accent */
  #ciclo .ciclo-card:nth-child(4) {
    background: linear-gradient(158deg, rgba(232,131,42,.08), transparent 58%), var(--surface-card);
  }
  #ciclo .ciclo-card:nth-child(4) .ciclo-num { color: var(--c-accent); }
  #ciclo .ciclo-card:nth-child(4) .ciclo-num::after {
    background: linear-gradient(180deg, var(--c-accent), transparent);
    box-shadow: 0 0 10px var(--c-accent-glow);
  }
}

/* ============================================================
   POLISH · números tabulares, seleção, reduced-motion nos novos efeitos
   ============================================================ */
.lote-preco, .lote-preview-preco, .cta-sub, .sand-stats { font-variant-numeric: tabular-nums; }
.mf-light ::selection { background: var(--sand-accent); color: #fff; }

/* ============================================================
   INVESTIMENTO · ancoragem no PARCELAMENTO (page-scoped)
   Ordem no card ativo: rótulo "em até" → parcela (âncora grande) → à vista (secundário).
   O otimizacao.js prefixa/limpa os textos que vêm do landing.js e adiciona
   .lote-parc-anchor ao bloco ativo SÓ quando há parcela real. Sem parcela,
   nada disso ativa e o preço à vista volta a ser o número grande (base).
   ============================================================ */
.lote-parc-anchor .lote-por { font-size: .78rem; color: var(--text-secondary); margin-bottom: 2px; }
.lote-parc-anchor .lote-parc {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 6.4vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text-heading);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.lote-parc-anchor .lote-preco {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--mf-success);
  margin-bottom: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .depo-card, .local-maps-cta { transition: none; }
  .depo-card:hover, .local-maps-cta:hover { transform: none; }
  /* r37 · a expansão do depoimento CONTINUA acontecendo — só não anima:
     sem escala, sem varredura de loading e sem atraso pra sumir. */
  .depo-scrim, .depo-trigger, .depo-poster, .depo-play, .depo-cue, .depo-close, .depo-stage,
  .depo-stage::before { transition: none !important; transition-delay: 0s !important; }
  .depo-stage, .depo-card.is-open .depo-stage { transform: translateX(-50%); }
  .depo-card:hover .depo-poster, .depo-card:hover .depo-play { transform: none; }
  .depo-card.is-open .depo-stage:not(.is-ready) .depo-loading::after { animation: none; }
}

/* ============================================================
   R32 · "O QUE VOCÊ RECEBE" — PALCO E VITRINE  (substitui .stack-card)
   ------------------------------------------------------------
   MANIFESTO DO BLOCO
   1. TESE: vitrine de equipamento de expedição × catálogo de produto
      caro. Cada entrega é uma PEÇA física pousada numa poça de luz,
      não um item de lista.
   2. SENSAÇÃO (3s): "isso é um kit, tem volume" — peso material antes
      de qualquer palavra.
   3. GESTO: a peça flutua (fundo transparente, zero moldura) sobre um
      halo elíptico do accent + sombra de contato no chão. O halo
      acende quando a peça entra na tela.
   4. ANTI-REFERÊNCIAS: (a) grid de 5 cards idênticos empilhados;
      (b) thumbnail dentro de moldura de vidro dentro de card;
      (c) lista de checkmarks coloridos.
   5. APOSTA DE RISCO: os 2 incluídos NÃO TÊM CARD — a peça pousa
      direto no fundo da seção, e a única superfície da página é a
      VITRINE dos bônus. Um só nível de superfície em todo o bloco.
   ------------------------------------------------------------
   Escopo #investimento .rec · não toca ../shared. Mobile-first.
   ============================================================ */
#investimento .rec {
  --rec-pool: var(--c-accent-glow);          /* poça de luz = accent da praça */
  --rec-line: rgba(91,184,224,0.13);         /* fio do sistema (azul do shared) */
  --rec-line-2: rgba(91,184,224,0.22);
  --rec-shadow: drop-shadow(0 2px 4px rgba(3,18,24,0.55)) drop-shadow(0 22px 34px rgba(3,18,24,0.62));
  max-width: 1000px;
  margin: clamp(30px, 5vw, 46px) auto 0;
}

/* ---------- a peça (comum aos 5) ---------- */
#investimento .rec-peca { position: relative; }

#investimento .rec-shot {
  position: relative;
  margin: 0 0 clamp(16px, 3vw, 22px);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  isolation: isolate;
}
/* poça de luz (acende no reveal) */
#investimento .rec-shot::before {
  content: "";
  position: absolute; z-index: 0;
  left: 4%; right: 4%; bottom: -4%;
  height: 58%;
  background: radial-gradient(58% 100% at 50% 100%, var(--rec-pool), transparent 72%);
  filter: blur(10px);
  opacity: 0.85;
  transform-origin: 50% 100%;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
/* sombra de contato — a peça pousa, não flutua no vácuo */
#investimento .rec-shot::after {
  content: "";
  position: absolute; z-index: 0;
  left: 24%; right: 24%; bottom: 1%;
  height: 16px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(2,12,17,0.72), transparent 70%);
  filter: blur(7px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
#investimento .rec-shot > * {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%;
  /* sem isto o tamanho mínimo automático do item de grid estoura o
     aspect-ratio da caixa nos assets em retrato (camiseta) */
  min-width: 0; min-height: 0;
}
#investimento .rec-shot img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: var(--rec-shadow);
}

/* variações de enquadramento por peça — teto de altura pensado pro mobile:
   paisagem ≈ 215px · retrato (celular) ≈ 330px · nenhum card passa de 75% do viewport */
#investimento .rec-shot--wide     { aspect-ratio: 16 / 10; }

/* INGRESSO · ilustração vetorial chapada em meio a mockups fotográficos.
   Direção de arte pra costurar a família: a peça vira OBJETO FÍSICO —
   inclinada no plano, com sombra de contato coerente com a inclinação.
   R33 · ESCALA: a arte tem 434px nativos, então até ~217px de largura CSS
   ela é pixel-perfect numa tela 2x. Renderiza a ~200px de propósito — é o
   objeto MENOR do bloco (ingresso é coisa de mão, não tela) e ganha
   nitidez ao invés de perder, ao contrário dos 330px da rodada anterior. */
#investimento .rec-shot--ticket { aspect-ratio: 2.5 / 1; }
#investimento .rec-shot--ticket img {
  width: min(60%, 204px);
  height: auto;
  object-fit: contain;
  rotate: -2.4deg;
  filter:
    drop-shadow(0 1px 2px rgba(3,18,24,0.5))
    drop-shadow(0 12px 20px rgba(3,18,24,0.55));
}
#investimento .rec-shot--ticket::after { left: 33%; right: 33%; bottom: 22%; height: 11px; }
/* o ingresso é navy sobre navy — a poça sobe atrás dele como luz de mesa */
#investimento .rec-shot--ticket::before {
  left: 14%; right: 14%; bottom: 10%; height: 76%;
  background: radial-gradient(56% 74% at 50% 58%, var(--rec-pool), transparent 74%);
  filter: blur(16px);
}
/* MOSAICO · asset denso e de bordas recortadas. R33: era `cover` + scale 1.06,
   que decepava as miniaturas das pontas. Agora entra INTEIRO (contain, escala 1)
   e a máscara elíptica só dissolve as beiradas no navy — nunca corta. */
#investimento .rec-shot--mosaico img {
  object-fit: contain;
  object-position: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse 100% 72% at 50% 50%, #000 62%, rgba(0,0,0,0.62) 86%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 72% at 50% 50%, #000 62%, rgba(0,0,0,0.62) 86%, transparent 100%);
}
#investimento .rec-shot--camisa   { aspect-ratio: 4 / 3; }
#investimento .rec-shot--camisa img { object-fit: contain; max-width: 74%; margin-inline: auto; }
#investimento .rec-shot--camisa::after { left: 33%; right: 33%; }

/* RETRATO 9:16 (celular do grupo) — formato próprio de propósito:
   a peça manda na altura, o card não estica. Sem cover, sem distorção. */
#investimento .rec-shot--tall { aspect-ratio: auto; }
#investimento .rec-shot--tall img {
  width: auto;
  height: clamp(290px, 84vw, 340px);
  object-fit: contain;
}
#investimento .rec-shot--tall::before { left: 22%; right: 22%; height: 34%; }
#investimento .rec-shot--tall::after  { left: 34%; right: 34%; }

/* ---------- texto da peça ---------- */
#investimento .rec-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
#investimento .rec-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--c-accent);
  opacity: 0.9;
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
/* badges quietos: existem e leem, mas não disputam com a peça */
#investimento .rec .badge {
  flex: 0 0 auto;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  padding: 5px 12px;
}
#investimento .rec .badge--bonus {
  background: rgba(251,191,36,0.13);
  border: 1px solid rgba(251,191,36,0.42);
  color: #f4cd80;
}
#investimento .rec .badge--inc {
  background: rgba(91,184,224,0.10);
  border: 1px solid rgba(91,184,224,0.30);
  color: #bcdff2;
}
#investimento .rec-peca h3 {
  font-size: clamp(1.06rem, 3.4vw, 1.22rem);
  line-height: 1.24;
  margin-bottom: 8px;
  text-wrap: balance;
}
#investimento .rec-desc {
  font-size: 0.92rem;
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  text-wrap: pretty;
  max-width: 46ch;
}

/* ---------- PALCO (itens 01 e 02) ---------- */
#investimento .rec-palco {
  display: flex; flex-direction: column;
  gap: clamp(38px, 7vw, 62px);
}

/* R33 · os DOIS incluídos leem centrados (o filete lateral do 02 saiu junto:
   sem eixo à esquerda, ele virava um traço solto). Palco = simetria; a
   assimetria da página fica por conta da vitrine. */
#investimento .rec-palco .rec-txt { text-align: center; }
#investimento .rec-palco .rec-meta { justify-content: center; }
#investimento .rec-palco .rec-desc { margin-inline: auto; }

#investimento .rec-peca--hero h3 { font-size: clamp(1.25rem, 5.2vw, 1.6rem); }
#investimento .rec-peca--hero .rec-desc { max-width: 40ch; }
#investimento .rec-peca--offset .rec-desc { max-width: 38ch; }

/* ---------- VITRINE (bônus 03-05) — a única superfície do bloco ---------- */
#investimento .rec-vitrine {
  margin-top: clamp(46px, 8vw, 80px);
  padding: clamp(22px, 5vw, 34px) clamp(18px, 4vw, 30px) clamp(26px, 5vw, 36px);
  border: 1px solid var(--rec-line);
  border-top: 1px solid var(--rec-line-2);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(25,131,177,0.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 26px 60px rgba(2,12,17,0.42);
}
#investimento .rec-vitrine-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(22px, 4vw, 30px);
}
#investimento .rec-vitrine-label {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-accent);
}
#investimento .rec-vitrine-rule {
  flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--rec-line-2), transparent);
}
#investimento .rec-vitrine-count {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 4vw, 1.3rem); font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(148,201,228,0.34);
}
#investimento .rec-vitrine-grid {
  display: flex; flex-direction: column;
  gap: clamp(26px, 5vw, 34px);
}
/* fio entre bônus — separa sem criar caixa */
#investimento .rec-peca--bonus + .rec-peca--bonus { padding-top: clamp(26px, 5vw, 34px); }
#investimento .rec-peca--bonus + .rec-peca--bonus::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rec-line) 18%, var(--rec-line) 82%, transparent);
}
#investimento .rec-peca--bonus .rec-shot { aspect-ratio: 16 / 10; }

/* ============================================================
   MOTION · a peça entra, o halo acende (stagger por --i)
   Base sem JS = tudo visível. html.js liga o estado inicial.
   ============================================================ */
html.js #investimento .rec-peca .rec-shot > *,
html.js #investimento .rec-peca .rec-txt {
  opacity: 0;
  transform: translateY(14px);
}
html.js #investimento .rec-peca .rec-shot::before { opacity: 0; transform: scaleX(0.7); }
html.js #investimento .rec-peca .rec-shot::after  { opacity: 0; transform: scaleX(0.8); }

html.js #investimento .rec-peca.is-in .rec-shot > *,
html.js #investimento .rec-peca.is-in .rec-txt {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.js #investimento .rec-peca.is-in .rec-txt { transition-delay: calc(var(--i, 0) * 90ms + 110ms); }
html.js #investimento .rec-peca.is-in .rec-shot::before,
html.js #investimento .rec-peca.is-in .rec-shot::after {
  opacity: 0.85; transform: none;
  transition-delay: calc(var(--i, 0) * 90ms + 180ms);
}
html.js #investimento .rec-peca.is-in .rec-shot::after { opacity: 1; }

/* parallax de assinatura — só onde o browser suporta timeline de scroll */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #investimento .rec-shot img {
      animation: recFlutua linear both;
      animation-timeline: view();
      animation-range: entry 15% exit 15%;
    }
    @keyframes recFlutua {
      from { translate: 0 14px; }
      to   { translate: 0 -14px; }
    }
  }
}

/* recompensa em camadas no hover (desktop) */
@media (hover: hover) {
  #investimento .rec-peca .rec-shot > * { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-base) var(--ease-out); }
  #investimento .rec-peca:hover .rec-shot > * { transform: translateY(-7px) scale(1.018); }
  #investimento .rec-peca:hover .rec-shot::before { opacity: 1; transform: scaleX(1.07); }
  #investimento .rec-peca:hover .rec-shot::after { transform: scaleX(0.86); opacity: 0.85; }
  #investimento .rec-peca:hover .rec-num { color: var(--text-heading); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.js #investimento .rec-peca .rec-shot > *,
  html.js #investimento .rec-peca .rec-txt { opacity: 1; transform: none; }
  html.js #investimento .rec-peca .rec-shot::before { opacity: 0.85; transform: none; }
  html.js #investimento .rec-peca .rec-shot::after  { opacity: 1; transform: none; }
  #investimento .rec-peca:hover .rec-shot > * { transform: none; }
}

/* ============================================================
   DESKTOP — três escalas diferentes (herói · deslocado · galeria)
   ============================================================ */
@media (min-width: 760px) {
  #investimento .rec-peca--hero .rec-shot { max-width: 560px; margin-inline: auto; }
  #investimento .rec-peca--hero h3 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); }
  #investimento .rec-peca--hero .rec-desc { font-size: 1rem; max-width: 46ch; }
  #investimento .rec-shot--tall img { height: clamp(320px, 26vw, 400px); }

  /* bônus em galeria de 3 — ritmo diferente do palco */
  #investimento .rec-vitrine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.6vw, 30px);
  }
  #investimento .rec-peca--bonus + .rec-peca--bonus { padding-top: 0; }
  #investimento .rec-peca--bonus + .rec-peca--bonus::before {
    left: calc(clamp(20px, 2.6vw, 30px) / -2); right: auto;
    top: 6px; bottom: 6px; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--rec-line) 20%, var(--rec-line) 80%, transparent);
  }
  /* mesma caixa de peça nas 3 colunas → títulos alinhados na mesma linha */
  #investimento .rec-peca--bonus .rec-shot,
  #investimento .rec-shot--camisa { aspect-ratio: 4 / 3; }
  #investimento .rec-shot--camisa img { max-width: 100%; }
  #investimento .rec-peca--bonus h3 { font-size: 1.04rem; }
  #investimento .rec-peca--bonus .rec-desc { font-size: 0.88rem; }
}

/* ============================================================
   R33 · DESKTOP LARGO — o palco vira 2 colunas
   ------------------------------------------------------------
   2 colunas em cima (incluídos) × 3 embaixo (bônus): a diferença de
   contagem por linha é o que diz "estes dois pesam mais", sem precisar
   de badge gritando. Os 2 assets têm proporções opostas (ingresso em
   paisagem pequeno × celular 9:16), então as duas caixas de peça
   compartilham a MESMA altura fixa — é o que trava os dois títulos na
   mesma linha de base (mesma solução da vitrine: min-height:0 nos
   filhos, já aplicado em .rec-shot > *).
   ============================================================ */
@media (min-width: 900px) {
  #investimento .rec-palco {
    --palco-shot-h: clamp(238px, 19vw, 272px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3.4vw, 44px);
    align-items: start;
  }
  #investimento .rec-palco .rec-shot {
    aspect-ratio: auto;
    height: var(--palco-shot-h);
    max-width: none;
    margin-bottom: clamp(18px, 2vw, 24px);
  }
  #investimento .rec-palco .rec-shot--tall img { height: 100%; width: auto; }

  /* ingresso: objeto pequeno POUSADO no mesmo chão do celular (ambos alinhados
     pela base). O ar fica ACIMA da peça, como headroom de foto de produto —
     não como buraco embaixo de uma peça boiando. */
  #investimento .rec-palco .rec-shot--ticket { align-items: end; padding-bottom: 16px; }
  #investimento .rec-shot--ticket img { width: min(48%, 210px); }
  #investimento .rec-shot--ticket::before {
    left: 22%; right: 22%; bottom: 0; height: 44%;
  }
  #investimento .rec-shot--ticket::after { bottom: 3%; left: 33%; right: 33%; height: 12px; }

  #investimento .rec-peca--hero h3,
  #investimento .rec-peca--offset h3 { font-size: clamp(1.24rem, 1.6vw, 1.42rem); }
  #investimento .rec-palco .rec-desc { font-size: 0.95rem; max-width: 38ch; }
}

/* ============================================================
   R23 · VIVÊNCIA · FECHO "DEPOIS DA VIVÊNCIA" + 2 PERFIS (redesign)
   ------------------------------------------------------------
   RAIO-X (ref. portfólio 3D "Jack"): transporto SÓ princípios —
   (1) numeral gigante como elemento gráfico dominante; (2) composição
   assimétrica número-esquerda / conteúdo-direita com régua separando;
   (3) hierarquia radical de peso; (4) revelação com stagger (CSS +
   IntersectionObserver que a página já usa). Re-derivado no DNA
   Mobility: navy + azul/verde-água da marca, --font-display, gota SVG.
   Substitui o antigo trio de cards iguais (feedback dono). Device NOVO
   na seção: tipografia-fantasma outline/gradiente em escala. Composição
   diferente da hierarquia acima (Regra 7). Escopo #vivencia · não toca
   ../shared.
   ============================================================ */
#vivencia .viv-outro {
  max-width: 880px;
  margin: clamp(44px, 6vw, 72px) auto 0;
  display: flex; flex-direction: column;
  gap: clamp(22px, 4vw, 36px);
}

/* ---- BLOCO A · lead editorial (transição, não card) ---- */
#vivencia .vo-lead {
  position: relative; overflow: hidden;
  text-align: center;
  max-width: 640px; margin: 0 auto;
  padding: clamp(10px, 2vw, 18px) clamp(8px, 3vw, 22px) clamp(6px, 2vw, 12px);
}
/* gota fantasma gigante · a assinatura da marca em escala, atrás do texto */
#vivencia .vo-gota-ghost {
  position: absolute; top: clamp(-26px, -5vw, -12px); left: 50%;
  width: clamp(120px, 32vw, 190px); z-index: 0; pointer-events: none;
  color: var(--c-accent); opacity: .07;
  transform: translateX(-50%);
}
#vivencia .vo-gota-ghost svg { width: 100%; height: auto; display: block; }
#vivencia .vo-lead > *:not(.vo-gota-ghost) { position: relative; z-index: 1; }
#vivencia .vo-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-accent);
}
#vivencia .vo-eyebrow-gota { width: 13px; height: 17px; }
#vivencia .vo-eyebrow-gota svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 8px var(--c-accent-glow)); }
/* título em gradiente de luz (device novo na seção) · fallback sólido garantido */
#vivencia .vo-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 4.2vw, 2.2rem); line-height: 1.12;
  letter-spacing: -.01em; text-wrap: balance;
  margin: 14px auto 12px; max-width: 20ch;
  color: var(--text-heading);
  background: linear-gradient(116deg, #eef7fc 0%, #cfeaf7 36%, var(--mf-light) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  #vivencia .vo-title { -webkit-text-fill-color: var(--text-heading); background: none; }
}
#vivencia .vo-corpo {
  color: var(--text-secondary); line-height: 1.7;
  max-width: 52ch; margin: 0 auto; text-wrap: pretty;
}
/* filete de luz · o momento de assinatura de motion (desenha ao entrar) */
#vivencia .vo-filete {
  display: block; width: min(180px, 58%); height: 2px; margin: 20px auto 0;
  border-radius: 2px; transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--c-accent) 30%, var(--c-accent) 70%, transparent);
  box-shadow: 0 0 12px var(--c-accent-glow);
}
html.js #vivencia .vo-filete {
  transform: scaleX(.24); opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
html.js #vivencia .vo-lead.is-in .vo-filete { transform: scaleX(1); opacity: .85; }

/* ---- FAIXA CLARA DE IDENTIFICAÇÃO · painel claro CONTIDO sobre o navy ----
   Quebra o padrão navy com um card claro (branco+azul da marca). Fica DENTRO
   do #vivencia (navy) com margem embaixo → sempre há respiro navy antes da
   seção #conteudo (mf-light, areia quente), pra os dois não fundirem. Tom
   frio (azul-branco elevado com sombra) contrasta com a areia quente da
   próxima seção. Cores de texto re-derivadas pra contraste AA sobre claro. */
#vivencia .vo-ident {
  --ident-ink:    #12303c;   /* heading sobre claro (~13:1) */
  --ident-body:   #3a555f;   /* corpo (~7:1) */
  --ident-accent: #0d6696;   /* azul de marca legível como texto (~5.2:1) */
  position: relative; overflow: hidden;
  margin: clamp(30px, 6vw, 48px) auto clamp(22px, 5vw, 40px);
  max-width: 720px;
  padding: clamp(34px, 8vw, 56px) clamp(24px, 6vw, 60px);
  text-align: center;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(130% 90% at 50% -8%, rgba(25,131,177,0.18), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #eaf1f6 100%);
  border: 1px solid rgba(13,102,150,0.22);
  box-shadow: 0 26px 64px rgba(3,18,24,0.6), inset 0 1px 0 rgba(255,255,255,0.9);
}
/* gota de assinatura em watermark azul · âncora visual (atrás do texto) */
#vivencia .vo-ident-gota-bg {
  position: absolute; top: -14px; right: clamp(-10px, -2vw, -2px);
  width: clamp(88px, 22vw, 132px); z-index: 0; pointer-events: none;
  color: var(--mf-mobility); opacity: .09;
}
#vivencia .vo-ident-gota-bg svg { width: 100%; height: auto; display: block; }
#vivencia .vo-ident > *:not(.vo-ident-gota-bg) { position: relative; z-index: 1; }
#vivencia .vo-ident-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 4.6vw, 2.15rem); line-height: 1.12; letter-spacing: -.01em;
  color: var(--ident-ink); text-wrap: balance;
  margin: 0 auto; max-width: 16ch;
}
#vivencia .vo-ident-filete {
  display: block; width: min(132px, 44%); height: 3px; margin: 16px auto clamp(22px, 4vw, 30px);
  border-radius: 3px; background: var(--mf-grad-action);
  box-shadow: 0 2px 10px rgba(25,131,177,0.35);
}
/* checklist de RECONHECIMENTO · 2 menções de MESMO peso visual (não é escolha,
   não é bifurcação): marcador = gota da marca, texto idêntico nos dois. Bloco
   centralizado com linhas alinhadas à esquerda pra ler como lista, não 2 cards. */
#vivencia .vo-ident-check {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; gap: clamp(14px, 2.8vw, 18px);
  max-width: 31rem; text-align: left;
}
#vivencia .vic-item {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px;
}
#vivencia .vic-mark {
  width: 15px; margin-top: 3px;   /* alinhamento óptico com a x-height da 1ª linha */
  color: var(--ident-accent);
}
#vivencia .vic-mark svg { width: 100%; height: auto; display: block; }
#vivencia .vic-text {
  color: var(--ident-ink); font-weight: 600; line-height: 1.5;
  font-size: clamp(1rem, 2.3vw, 1.08rem); text-wrap: pretty;
}
/* fecho INCLUSIVO · separado dos itens por respiro + fio curto (NÃO é 3º item:
   sem gota, texto muted, centralizado). */
#vivencia .vo-ident-fecho {
  position: relative; text-align: center;
  margin: clamp(22px, 4vw, 30px) auto 0;
  padding-top: clamp(20px, 3.6vw, 26px);
  max-width: 42ch;
  color: var(--ident-body); line-height: 1.65;
  font-size: clamp(.95rem, 2.15vw, 1.02rem); text-wrap: pretty;
}
#vivencia .vo-ident-fecho::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 46px; height: 2px; border-radius: 2px;
  background: rgba(13,102,150,0.28);
}
#vivencia .vo-ident ::selection { background: rgba(25,131,177,0.22); color: var(--ident-ink); }

/* ============================================================
   R20 · INVESTIMENTO · CALLOUT 2º INGRESSO 50% (ponto 4)
   Faixa de oportunidade ancorada abaixo dos cards de lote. WhatsApp
   como canal (verde semântico da marca, exceção de UI). Sem contador,
   sem escassez inventada. Escopo #investimento · não toca ../shared.
   ============================================================ */
#investimento .dupla-callout {
  max-width: 880px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 32px);
  padding: clamp(22px, 3.4vw, 30px) clamp(22px, 3.4vw, 34px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(37,211,102,0.14), transparent 60%),
    linear-gradient(135deg, rgba(6,78,59,0.55), rgba(4,120,87,0.26));
  border: 1px solid rgba(37,211,102,0.35);
  box-shadow: 0 0 44px rgba(37,211,102,0.10), var(--shadow-card);
}
#investimento .dc-body { flex: 1 1 340px; }
#investimento .dc-eyebrow {
  display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.2;
  color: var(--text-heading);
}
#investimento .dc-text { color: var(--text-secondary); line-height: 1.62; font-size: .95rem; text-wrap: pretty; }
#investimento .dc-text strong { color: #6ee7b7; font-weight: 700; }
#investimento .dc-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  color: #fff; text-decoration: none;
  padding: 15px 26px; border-radius: var(--radius-pill);
  background: #25D366; box-shadow: 0 10px 26px rgba(37,211,102,0.30);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
#investimento .dc-cta:hover { background: #1fba5a; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37,211,102,0.42); }
#investimento .dc-cta-wa { width: 20px; height: 20px; fill: #fff; flex: none; }
@media (max-width: 600px) {
  #investimento .dupla-callout { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  #investimento .dc-body { flex: 0 0 auto; }
  #investimento .dc-cta { width: 100%; justify-content: center; }
}

/* reduced-motion nos efeitos novos (R20 · R23 · R26) */
@media (prefers-reduced-motion: reduce) {
  #investimento .dc-cta { transition: none; }
  #investimento .dc-cta:hover { transform: none; }
  html.js #vivencia .vo-filete { transform: scaleX(1); opacity: .85; transition: none; }
}

/* ============================================================
   EXPERT · BIO EDITORIAL (page-scoped, #expert) — espelhado de Salvador r30
   ------------------------------------------------------------
   Bio editorial compacta e clean: título massivo SOBRE / THIAGO
   SATHLER, tagline em itálico e a copy quebrada em 3 segmentos
   curtos separados por um filete hairline discreto (não o arco
   pesado 01/02/03). Retrato cine mantido, mais compacto. A
   photostack de 3 fotos foi removida (r30). Fundo navy mantido.
   Escopado em #expert — a saga original em ../shared/css/landing.css
   fica intocada (Vitória/Floripa). Nome em AZUL da marca (--mf-light),
   praça-independente: o accent laranja do TOUR não pinta a
   assinatura do fundador.
   ============================================================ */
#expert .saga-layout.expert-bio {
  display: grid;
  grid-template-columns: minmax(220px, 288px) 1fr;
  grid-template-areas:
    "head     head"
    "portrait body";
  column-gap: clamp(34px, 5vw, 60px);
  row-gap: clamp(22px, 3.2vw, 38px);
  align-items: center;
  text-align: left;
}

#expert .ebio-head { grid-area: head; }
#expert .ebio-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
#expert .ebio-title span { display: block; }
#expert .ebio-l1 {
  font-weight: 600;
  font-size: clamp(1.3rem, 3.8vw, 2.25rem);
  letter-spacing: 0.08em;
  color: var(--mf-white);
}
#expert .ebio-l2 {
  margin-top: 0.04em;
  font-size: clamp(2.05rem, 8vw, 4.6rem);
  color: var(--mf-light);
}
#expert .ebio-tagline {
  margin: clamp(13px, 1.7vw, 18px) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.05rem, 2.3vw, 1.42rem);
  line-height: 1.32;
  color: var(--text-primary);
  text-wrap: balance;
}

#expert .saga-layout.expert-bio .ebio-portrait {
  grid-area: portrait;
  width: 100%;
  max-width: 288px;
  aspect-ratio: 3 / 4;
  margin: 0;
  align-self: center;
}
#expert .ebio-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* corpo · 3 segmentos curtos separados por filete hairline (r30) */
#expert .ebio-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  max-width: 44ch;
  align-self: center;
}
#expert .ebio-seg {
  position: relative;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.05vw, 1.1rem);
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}
#expert .ebio-seg + .ebio-seg {
  margin-top: clamp(17px, 2.1vw, 24px);
  padding-top: clamp(17px, 2.1vw, 24px);
}
#expert .ebio-seg + .ebio-seg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(44px, 7vw, 58px);
  height: 1px;
  background: linear-gradient(90deg, var(--mf-light), transparent);
  opacity: 0.5;
}
#expert .ebio-seg--proof { color: var(--text-primary); }
#expert .ebio-seg strong { color: var(--text-primary); font-weight: 700; }

@media (max-width: 900px) {
  #expert .saga-layout.expert-bio {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "portrait"
      "body";
    row-gap: clamp(18px, 4.4vw, 28px);
    text-align: center;
  }
  #expert .ebio-title { margin-inline: auto; }
  #expert .ebio-tagline { margin-inline: auto; max-width: 30ch; }
  #expert .saga-layout.expert-bio .ebio-portrait {
    max-width: clamp(168px, 48vw, 208px);
    margin-inline: auto;
  }
  #expert .ebio-body {
    max-width: 42ch;
    margin-inline: auto;
    text-align: left;
  }
  #expert .ebio-seg + .ebio-seg::before { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #expert .expert-bio .reveal { transition: none; }
}

/* ============================================================
   R35 · CARD DE LOTE — CAIXA ESTREITA NO DESKTOP  (page-scoped)
   ------------------------------------------------------------
   PROBLEMA (só no desktop): os 3 cards dividem uma grid de 900px,
   então a coluna útil fica em ~238px. Nessa largura duas coisas
   estouravam a caixa:
     · a parcela âncora (.lote-parc em .lote-parc-anchor) rodava a
       1.95rem e o último dígito era decepado pelo overflow do card;
     · o CTA "Garantir minha vaga" quebrava e jogava "VAGA" pra uma
       segunda linha, desalinhando a seta.
   O mobile está aprovado e NÃO é tocado: tudo aqui vive dentro de
   uma container query, e o `container-type` só é declarado a partir
   de 761px (o mesmo ponto em que o shared vira grid de 3 colunas).
   Sem container, as regras abaixo simplesmente não casam.
   ------------------------------------------------------------
   Por que container query e não vw: o que aperta é a LARGURA DO CARD,
   não a da janela. Medindo em cqi a tipografia acompanha a coluna em
   qualquer viewport — e continua encaixando se o valor da parcela
   mudar (lotes 2 e 3 ainda estão [a preencher]).
   ============================================================ */
@media (min-width: 761px) {
  #investimento .lote-card { container-type: inline-size; }
}

/* --- parcela: escala pela coluna, com teto que aguenta valor longo ---
   Atenção pra quem for espelhar: cqi e o min-width da container query medem
   a CAIXA DE CONTEÚDO do card (238px no desktop 1440), não os 288px da borda.
   O limiar de 100px só existe pra dizer "há container" — quem liga e desliga
   este bloco é o container-type acima, declarado a partir de 761px. */
@container (min-width: 100px) {
  .lote-parc-anchor .lote-parc {
    /* 10.4cqi ≈ 24.8px na coluna útil de 238px do desktop 1440 — segue sendo
       o maior número do card (o à vista ao lado roda a 17.9px).
       Teto 1.55rem: cabe "12x de R$ 199,90" inteiro, com folga. */
    font-size: clamp(1.05rem, 10.4cqi, 1.55rem);
    /* Rede de segurança: se um valor futuro for ainda mais longo, a linha
       QUEBRA em vez de ser cortada. O otimizacao.js cola "R$" ao número com
       espaço rígido, então o valor nunca se parte no meio. */
    white-space: normal;
    text-wrap: balance;
  }
}

/* --- CTA em uma linha só: entra quando a coluna comporta de verdade ---
   Limiar de 232px de caixa útil: com o aperto abaixo o texto pede ~160px e
   sobram ~174px na coluna do desktop (folga de ~14px). Em coluna menor
   (viewport entre 761px e ~930px) a regra não casa e o botão volta a poder
   quebrar — melhor quebrar que vazar. O texto do botão é copy aprovada e
   não foi tocado: a solução é toda de layout. */
@container (min-width: 232px) {
  #investimento .lote-cta-wrap .cta {
    padding: 6px 5px 6px 15px;
    gap: 8px;
    font-size: .75rem;
    letter-spacing: .022em;
  }
  #investimento .lote-cta-wrap .cta .cta-text {
    white-space: nowrap;
    line-height: 1;
  }
  #investimento .lote-cta-wrap .cta .cta-ico { width: 36px; height: 36px; }
  #investimento .lote-cta-wrap .cta .cta-ico svg { width: 15px; height: 15px; }
}