/* GERADO por `npm run css` a partir de assets/css/partes/ (em ordem). Não edite aqui. */
/* Escritório de Primeira: visual v2 no sistema do Workshop PDP+IA (12/11/2026).
   Direção: docs/edp-repaginado/benchmark/00-direcao.md. Calmo, claro-primeiro, nada grande:
   Inter leve, DM Serif só nos números, neutros quentes, cartões de borda fina, um easing só.
   O azul do EDP é o único acento. */

/* ---------- Fontes (auto-hospedadas, copiadas do workshop; licença OFL em assets/fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Só os números de destaque (módulos 01–07 e 15 + 90 da garantia). Ficam em caixas de tamanho
   fixo: a troca de fonte não mexe no resto da página. */
@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/dmserif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback com as métricas da Inter (Ruling 11, CLS 0): enquanto o woff2 não chega, a Arial
   ajustada ocupa a mesma largura e a mesma altura de linha, e a troca não muda quebra de linha.
   size-adjust medido no Chrome (12/11) com o texto inteiro da página: largura Inter ÷ largura
   Arial, um valor por peso usado (300, 400, 500; a Arial só tem o regular, e é ele que entra).
   ascent/descent = 96,875% / 24,12% da Inter (hhea 1984/494 em 2048) divididos pelo size-adjust. */
@font-face {
  font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  font-weight: 100 350; font-display: swap; size-adjust: 104.36%; ascent-override: 92.83%; descent-override: 23.11%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  font-weight: 351 450; font-display: swap; size-adjust: 106.14%; ascent-override: 91.27%; descent-override: 22.72%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  font-weight: 451 900; font-display: swap; size-adjust: 107.06%; ascent-override: 90.49%; descent-override: 22.53%; line-gap-override: 0%;
}

/* Fallback do Android (I4): lá não há Arial, e o sistema usa o Roboto. Família separada, depois
   da "Inter Fallback" na pilha: onde a Arial existe, ela vence. size-adjust medido no Chrome com
   o Roboto 400 e 500 (Fontsource) e o mesmo texto: largura Inter ÷ largura Roboto. */
@font-face {
  font-family: "Inter Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"), local("Roboto Regular");
  font-weight: 100 350; font-display: swap; size-adjust: 105.18%; ascent-override: 92.1%; descent-override: 22.93%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"), local("Roboto Regular");
  font-weight: 351 450; font-display: swap; size-adjust: 106.97%; ascent-override: 90.56%; descent-override: 22.55%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback Roboto"; src: local("Roboto Medium"), local("Roboto-Medium");
  font-weight: 451 900; font-display: swap; size-adjust: 107.03%; ascent-override: 90.51%; descent-override: 22.54%; line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* paleta (a mesma do workshop; o azul do EDP é o único acento) */
  --tinta: #0B1622;
  --tinta-forte: #3D3D3A;
  --suave: #5F5E5A;
  --cinza: #888780;
  --borda-forte: #B4B2A9;
  --borda: #D3D1C7;
  --off: #F5F4F0;
  --branco: #FFFFFF;
  --azul: #0B4F7A;
  --azul-medio: #3F8FC4;
  --azul-escuro: #2A74A6;
  --azul-claro: #5BB0E6;
  /* sobre o escuro: o off-white em opacidades (hierarquia sem cor nova) */
  --claro: #F5F4F0;
  --claro-80: rgb(245 244 240 / 0.8);
  --claro-60: rgb(245 244 240 / 0.62);
  --claro-linha: rgb(245 244 240 / 0.14);
  --whatsapp: #13874f;
  --whatsapp-claro: #179a5b;

  /* tipografia */
  --fonte: "Inter", "Inter Fallback", "Inter Fallback Roboto", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fonte-numero: "DM Serif Display", Georgia, "Times New Roman", serif;
  --t-h1: clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem);
  --t-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
  --t-h3: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --t-corpo: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --t-apoio: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --t-pequeno: 0.8125rem;

  /* espaço e forma */
  --largura-max: 72rem;
  --leitura: 36rem;
  --calha: 1.5rem;
  --ritmo-secao: clamp(4rem, 2.5rem + 6vw, 8rem);
  --raio: 20px;
  --raio-medio: 16px;
  --raio-icone: 12px;
  --respiro-whatsapp: 5.5rem;
  --topo-fixo: 6rem;

  /* camadas */
  --z-texto: 2;
  --z-flutuante: 40;

  /* movimento: um easing só (o do workshop) */
  --saida: cubic-bezier(0.16, 1, 0.3, 1);
  --revelar-y: 14px;
  --revelar-t: 0.45s;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --revelar-y: 32px; --revelar-t: 0.9s; --calha: 2rem; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.7;
  color: var(--tinta);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0; max-width: var(--leitura); text-wrap: pretty; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

main p a, #rodape a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--azul);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.3s var(--saida);
}

:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgb(11 79 122 / 0.18); }

.envoltorio { width: min(100% - 2 * var(--calha), var(--largura-max)); margin-inline: auto; }
.secao { padding-block: var(--ritmo-secao); }

/* Fundos: claro-primeiro. Branco é o padrão; off-white marca a troca de assunto. O escuro aparece
   no topo, em "A história", na garantia e no rodapé. A troca é seca, sem degradê. */
#controle, #como-funciona, #bonus, #faq { background: var(--off); }
#topo, #historia, #garantia { background: var(--tinta); color: var(--claro); color-scheme: dark; }
#topo :focus-visible, #historia :focus-visible, #garantia :focus-visible, #rodape :focus-visible { outline-color: var(--claro); }

.titulo-centro { margin-inline: auto; text-align: center; }

/* Rótulo (só onde a copy já tem um): pílula calma, frase normal, ponto azul na frente. */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--tinta-forte);
  font-size: var(--t-pequeno);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.rotulo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); }
#garantia .rotulo { border-color: var(--claro-linha); color: var(--claro-80); }
#garantia .rotulo::before { background: var(--azul-claro); }

/* Ícone de linha fina num quadrado de raio 12 px. */
.marca, .perfil-marca {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--raio-icone);
  background: var(--off);
  transition: background-color 0.4s var(--saida);
}

.icone {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s var(--saida);
}

/* Cartão: borda fina, sem sombra parada; no hover a borda escurece e ele sobe 3 px. */
.perfil, .beneficio, .funciona-lista li, .bonus {
  position: relative;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--branco);
  transition: transform 0.6s var(--saida), border-color 0.4s var(--saida), box-shadow 0.6s var(--saida);
}

/* Surgimento ao rolar: visível por padrão. O estado "antes de surgir" só existe quando o
   JavaScript de movimento marca o <html> com .js-movimento. Celular: 14 px em 0,45 s;
   desktop: 32 px em 0,9 s; cascata de 70 ms entre irmãos (o atraso vem do JS). */
html.js-movimento .revelar {
  transition:
    opacity var(--revelar-t) var(--saida),
    transform var(--revelar-t) var(--saida),
    border-color 0.4s var(--saida),
    box-shadow 0.6s var(--saida);
  transition-delay: var(--atraso, 0s);
}

html.js-movimento .revelar:not(.revelado) { opacity: 0; transform: translate3d(0, var(--revelar-y), 0); }

/* v4: texto (títulos e parágrafos) sobe só a metade do caminho dos cartões: lê-se antes, sem "pular". */
html.js-movimento :is(h2, p).revelar:not(.revelado) { transform: translate3d(0, calc(var(--revelar-y) * 0.5), 0); }

/* Depois de surgir, o cartão "assenta" (classe posta pelo JS no fim da opacidade): a transição volta
   à do hover (0,6 s), não os 0,9 s do surgimento. */
html.js-movimento .revelar.assentado {
  transition: transform 0.6s var(--saida), border-color 0.4s var(--saida), box-shadow 0.6s var(--saida), background-color 0.4s var(--saida);
}

/* Para quem: o cartão sobe e, logo depois, o ícone se desenha (cada traço tem pathLength="1"). */
html.js-movimento .perfil-icone > * {
  stroke-dasharray: 1 1;
  transition: stroke-dashoffset 1.2s var(--saida) calc(var(--atraso, 0ms) + 0.3s);
}
html.js-movimento .perfil:not(.revelado) .perfil-icone > * { stroke-dashoffset: 1; }

/* Por que: o quadrado do ícone se assenta (escala de 0,86 para 1) um instante depois do cartão. */
html.js-movimento .beneficio .marca {
  transition:
    opacity 0.8s var(--saida) calc(var(--atraso, 0ms) + 0.18s),
    transform 0.8s var(--saida) calc(var(--atraso, 0ms) + 0.18s),
    background-color 0.4s var(--saida);
}
html.js-movimento .beneficio:not(.revelado) .marca { opacity: 0; transform: scale(0.86); }

/* Bônus: a capa se assenta (de 1,08 para 1) junto com o cartão, dentro da moldura. */
html.js-movimento .bonus .bonus-img { transition: transform 1.2s var(--saida) var(--atraso, 0ms); }
html.js-movimento .bonus:not(.revelado) .bonus-img { transform: scale(1.08); }
html.js-movimento .bonus.assentado .bonus-img { transition: transform 0.8s var(--saida); }

/* Fio de borda: no hover (mouse) e no foco, uma luz azul percorre a borda da esquerda para a direita
   (clip-path). Ao sair, recolhe mais rápido do que entrou. */
.perfil::before, .beneficio::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgb(11 79 122 / 0.55);
  border-radius: inherit;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.35s var(--saida);
}
.perfil:focus-visible::before { clip-path: inset(0 0 0 0); transition-duration: 0.9s; }

/* Como vai funcionar?: o fio de progresso (criado pelo JS, só com movimento) atravessa os itens.
   Celular (1 coluna): fio vertical na borda esquerda, em sequência de cima para baixo.
   600 px+: fio na borda de cima de cada cartão, item por item. O JS só muda --f (0 a 1). */
.passo-fio {
  position: absolute;
  top: var(--raio);
  bottom: var(--raio);
  left: -1px;
  width: 2px;
  border-radius: 2px;
  background: var(--azul);
  pointer-events: none;
  transform: scaleY(var(--f, 0));
  transform-origin: 50% 0;
  transition: transform 0.35s var(--saida);
}
.funciona-lista li.alcancado { border-color: var(--borda-forte); }

/* Curva da história: o traço nasce escondido e o JavaScript o desenha conforme a rolagem.
   Os enfeites aparecem quando o traço chega até eles (.atingido). */
html.js-movimento #historia .curva-traco { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
html.js-movimento #historia .curva .curva-area,
html.js-movimento #historia .curva .curva-eco,
html.js-movimento #historia .curva .curva-marco,
html.js-movimento #historia .curva .curva-virada,
html.js-movimento #historia .curva .curva-seta { transition: opacity 0.7s var(--saida); }
html.js-movimento #historia .curva .curva-area:not(.atingido),
html.js-movimento #historia .curva .curva-eco:not(.atingido),
html.js-movimento #historia .curva .curva-marco:not(.atingido),
html.js-movimento #historia .curva .curva-virada:not(.atingido),
html.js-movimento #historia .curva .curva-seta:not(.atingido) { opacity: 0; }

/* Parallax leve só na foto do topo (o JavaScript só muda --py). */
html.js-movimento .parallax { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
@media (min-width: 900px) {
  /* A escala (estática, sem depender do JS) esconde a borda que o deslocamento de até 24 px poderia mostrar. */
  .hero-img { transform: scale(1.06); }
  html.js-movimento .hero-img.parallax { transform: translate3d(0, var(--py, 0px), 0) scale(1.06); }
}

/* ---------- 1. Topo: foto com fundo grafite, texto à esquerda ---------- */
#topo { position: relative; isolation: isolate; overflow: clip; }

.topo-foto { position: relative; display: block; }
.hero-img { width: 100%; aspect-ratio: 4 / 5; max-height: 64svh; object-fit: cover; object-position: 50% 18%; }

/* Escurece a foto onde o texto entra (embaixo no celular, à esquerda no desktop). */
.topo-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--tinta) 0%, rgb(11 22 34 / 0.8) 20%, transparent 50%);
}

.topo-grade { position: relative; z-index: var(--z-texto); margin-top: -4.5rem; padding-bottom: 3.5rem; }

/* Logo oficial do EDP (símbolo bronze, texto branco) acima do título. Proporção fixa: sem CLS. */
.topo-logo { width: clamp(11.5rem, 9.5rem + 7vw, 15.5rem); height: auto; margin-bottom: 1.75rem; }

/* Larguras em em (e não em ch): o "ch" muda com a fonte e mudaria a quebra de linha na troca. */
#topo h1 { max-width: 13em; font-size: var(--t-h1); line-height: 1.15; }
#topo .apoio { max-width: 30em; margin-top: 1.25rem; color: var(--claro-80); font-size: var(--t-apoio); font-weight: 400; line-height: 1.65; }

/* Entrada ao carregar (v4), só CSS, então vale também sem JavaScript e termina sempre visível:
   1) a foto já pinta na hora (é o LCP: nada nela fica escondido ou atrasado). Por cima dela, um véu
      grafite se desfaz (opacidade) e a moldura se assenta de 1,035 para 1 (transform);
   2) o título surge linha a linha: uma máscara (clip-path) abre de cima para baixo enquanto ele sobe;
   3) o apoio vem depois, quando o título já está quase todo à mostra. */
@keyframes topo-veu { from { opacity: 0.72; } to { opacity: 0; } }
@keyframes topo-foto { from { transform: scale(1.035); } to { transform: none; } }
@keyframes topo-titulo {
  from { opacity: 0; transform: translate3d(0, 0.35em, 0); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(-0.25em -0.5em -0.4em -0.5em); }
}
@keyframes topo-entrar { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

.topo-foto { animation: topo-foto 1.8s var(--saida) both; }
.topo-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--tinta);
  pointer-events: none;
  animation: topo-veu 1.4s var(--saida) both;
}
.topo-logo { animation: topo-entrar 1s var(--saida) 0s backwards; }
#topo h1 { animation: topo-titulo 1.3s var(--saida) 0.12s backwards; }
#topo .apoio { animation: topo-entrar 1.1s var(--saida) 0.5s backwards; }

/* ---------- A curva (história) ---------- */
.curva { overflow: visible; }
.curva .curva-cor-inicio { stop-color: var(--azul-escuro); }
.curva .curva-cor-meio { stop-color: var(--azul-medio); }
.curva .curva-cor-fim { stop-color: var(--azul-claro); }
.curva .curva-area-topo-cor { stop-color: var(--azul-medio); stop-opacity: 0.2; }
.curva .curva-area-base-cor { stop-color: var(--azul-medio); stop-opacity: 0; }

.curva-traco {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgb(91 176 230 / 0.45));
}

.curva-seta { fill: none; stroke: var(--azul-claro); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.curva-ponto { fill: var(--azul-escuro); stroke: var(--azul-claro); stroke-width: 2; vector-effect: non-scaling-stroke; }
.curva-eco { fill: none; stroke: var(--claro); stroke-opacity: 0.3; stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.curva-base { stroke: var(--claro); stroke-opacity: 0.18; stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.curva-marco { fill: none; stroke: var(--claro); stroke-opacity: 0.32; stroke-width: 1.25; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; }
.curva-virada { fill: var(--tinta); stroke: var(--claro); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ---------- 2. Para quem é o EDP? Três cartões iguais ---------- */
/* Celular: carrossel com encaixe (o próximo cartão aparece pela metade, convidando a deslizar). */
.perfis {
  display: flex;
  gap: 0.875rem;
  margin: 2.5rem calc(-1 * var(--calha)) 0;
  padding: 0.25rem var(--calha) 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--calha);
  scrollbar-width: none;
}
.perfis::-webkit-scrollbar { display: none; }

.perfil {
  display: flex;
  flex: 0 0 min(84%, 21rem);
  flex-direction: column;
  padding: 1.5rem 1.375rem;
  scroll-snap-align: start;
}

/* Painel de "papel de desenho" (12/11): quadriculado azul que se apaga nas bordas, marcas de canto de
   prancha e o ícone grande no meio. Tudo em CSS (sem imagem); proporção fixa, então nada pula. */
.perfil-marca {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  margin-bottom: 1.5rem;
  border-radius: var(--raio-medio);
  background-color: var(--off);
}

.perfil-marca::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  background-image:
    linear-gradient(rgb(11 79 122 / 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgb(11 79 122 / 0.13) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 15%, transparent 68%);
  mask-image: radial-gradient(ellipse at center, #000 15%, transparent 68%);
  transition: opacity 0.9s var(--saida), transform 1.2s var(--saida);
}

.perfil-marca::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  pointer-events: none;
  background:
    linear-gradient(var(--azul) 0 0) top left / 10px 1px no-repeat,
    linear-gradient(var(--azul) 0 0) top left / 1px 10px no-repeat,
    linear-gradient(var(--azul) 0 0) top right / 10px 1px no-repeat,
    linear-gradient(var(--azul) 0 0) top right / 1px 10px no-repeat,
    linear-gradient(var(--azul) 0 0) bottom left / 10px 1px no-repeat,
    linear-gradient(var(--azul) 0 0) bottom left / 1px 10px no-repeat,
    linear-gradient(var(--azul) 0 0) bottom right / 10px 1px no-repeat,
    linear-gradient(var(--azul) 0 0) bottom right / 1px 10px no-repeat;
  opacity: 0.4;
  transition: opacity 0.6s var(--saida), transform 0.8s var(--saida);
}

.perfil-icone { width: 3.5rem; height: 3.5rem; stroke: var(--azul); stroke-width: 1; }

/* Ao surgir: o quadriculado entra em foco, o ícone se desenha (regra da base) e as marcas de canto
   fecham por último, como quem enquadra a prancha. Transições (interrompíveis), nunca em loop. */
html.js-movimento .perfil:not(.revelado) .perfil-marca::before { opacity: 0; transform: scale(1.08); }
html.js-movimento .perfil:not(.revelado) .perfil-marca::after { opacity: 0; transform: scale(1.06); }
html.js-movimento .perfil .perfil-marca::before { transition-delay: calc(var(--atraso, 0ms) + 0.1s); }
html.js-movimento .perfil .perfil-marca::after { transition-delay: calc(var(--atraso, 0ms) + 0.9s); }
html.js-movimento .perfil.assentado .perfil-marca::before,
html.js-movimento .perfil.assentado .perfil-marca::after { transition-delay: 0s; }
.perfil h3 { margin-bottom: 0.625rem; }
.perfil p { color: var(--suave); font-size: 0.9375rem; line-height: 1.65; }

/* Foco do teclado vale em qualquer aparelho (fora do bloco de mouse): mesmo visual do hover. */
.perfil:focus-visible { outline-offset: 2px; border-radius: var(--raio); border-color: var(--borda-forte); box-shadow: 0 6px 8px -6px rgb(11 22 34 / 0.12); }
.perfil:focus-visible .perfil-marca { background-color: rgb(11 79 122 / 0.06); }
.perfil:focus-visible .perfil-icone { stroke: var(--azul); }
.perfil:focus-visible .perfil-marca::after { opacity: 0.75; }

/* ---------- 3. Você no controle: só texto (sem imagem até a definitiva existir), em fundo off-white ---------- */
.controle-grade { display: grid; gap: 1.75rem; }
#controle h2 { max-width: 14em; }
#controle .destaque { color: var(--azul); }

.controle-texto { color: var(--suave); }

.controle-texto .controle-fecho {
  display: flex;
  gap: 0.875rem;
  max-width: 26em;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borda);
  color: var(--tinta);
  font-size: var(--t-apoio);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.controle-fecho::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.6em; border-radius: 50%; background: var(--azul); }

/* ---------- 4. A história (escura, com a curva aprovada) ---------- */
#historia { overflow-x: clip; }
#historia h2 { max-width: 22em; }

/* A curva atravessa a largura toda (no celular, de borda a borda). */
.curva-historia {
  width: calc(100% + 2 * var(--calha));
  max-width: none;
  height: auto;
  margin: 3rem calc(-1 * var(--calha)) 0;
}

.linha-do-tempo {
  position: relative;
  margin-top: 2rem;
  padding-left: 1.75rem;
  border-left: 1px solid var(--claro-linha);
  color: var(--claro-60);
}

.linha-do-tempo p { position: relative; transition: color 0.5s var(--saida); }
.linha-do-tempo p + p { margin-top: 2rem; }

.linha-do-tempo p::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: calc(-1.75rem - 5px);
  width: 9px;
  height: 9px;
  border: 1px solid var(--claro-60);
  border-radius: 50%;
  background: var(--tinta);
  transition: background-color 0.5s var(--saida), border-color 0.5s var(--saida);
}

/* Fase marcada pelo movimento: o texto acende e o ponto fica azul. */
.linha-do-tempo p.ativa { color: var(--claro-80); }
.linha-do-tempo p.ativa::before { border-color: var(--azul-claro); background: var(--azul-medio); }

/* ---------- 5. Por que o EDP: título à esquerda e cartões em bento ---------- */
.porque-grade { display: grid; gap: 2.5rem; }
.porque-cabeca h2 { max-width: 12em; }
.porque-lista { display: grid; gap: 0.875rem; }

/* Celular: ícone ao lado do texto (cartão mais baixo). 640 px+: ícone em cima, em bento. */
.beneficio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.375rem 1.25rem; border-color: transparent; background: var(--off); }
.beneficio .marca { background: var(--branco); }
.beneficio h3 { margin-bottom: 0.5rem; }
.beneficio p { color: var(--suave); font-size: 0.9375rem; line-height: 1.65; }

/* Por que (12/11): número grande (01–05) como marca d'água no canto, atrás do texto. No celular, o
   cartão que cruza o meio da tela fica "em foco" (classe posta pelo JS); no desktop, o hover faz o
   mesmo. Em foco: fundo branco, borda azulada, ícone num quadrado azul com traço branco, número mais forte. */
.beneficio { transition: transform 0.6s var(--saida), border-color 0.4s var(--saida), box-shadow 0.6s var(--saida), background-color 0.4s var(--saida); }
.beneficio > div { position: relative; z-index: 1; }
.beneficio-numero {
  position: absolute;
  /* Celular: na coluna do ícone, logo abaixo dele (a coluna do texto fica livre). */
  top: calc(1.375rem + 3rem + 0.625rem);
  left: 1.25rem;
  width: 3rem;
  text-align: center;
  color: rgb(11 79 122 / 0.12);
  font-family: var(--fonte-numero);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
  transition: color 0.5s var(--saida), transform 0.6s var(--saida);
}
.beneficio.em-foco { border-color: rgb(11 79 122 / 0.3); background-color: var(--branco); box-shadow: 0 14px 28px -22px rgb(11 22 34 / 0.5); }
.beneficio.em-foco .marca { background-color: var(--azul); }
.beneficio.em-foco .icone { stroke: var(--branco); }
.beneficio.em-foco .beneficio-numero { color: rgb(11 79 122 / 0.3); transform: translate3d(0, -2px, 0); }

/* Ao surgir, o número sobe de dentro do próprio canto, logo depois do cartão. */
html.js-movimento .beneficio .beneficio-numero {
  transition:
    color 0.5s var(--saida),
    opacity 0.8s var(--saida) calc(var(--atraso, 0ms) + 0.25s),
    transform 0.8s var(--saida) calc(var(--atraso, 0ms) + 0.25s);
}
html.js-movimento .beneficio:not(.revelado) .beneficio-numero { opacity: 0; transform: translate3d(0, 0.4em, 0); }
html.js-movimento .beneficio.assentado .beneficio-numero { transition: color 0.5s var(--saida), transform 0.6s var(--saida); }

/* ---------- 6. Como vai funcionar? Seis cartões com mini-cenas ---------- */
/* Celular: cena à esquerda (7,5rem), texto à direita. 600 px+: cena em cima, como painel. */
.funciona-lista { display: grid; gap: 0.75rem; margin-top: 2.5rem; }

.funciona-lista li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.875rem 1.25rem 0.875rem 0.875rem;
  color: var(--tinta);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Mini-cenas (12/11): SVG decorativo por item, sem texto. O que está aqui é o estado FINAL (é o que
   aparece sem JS e com movimento reduzido). O estado "antes" vive mais abaixo, sob html.js-movimento,
   e some quando o fio de progresso alcança o cartão (.alcancado): aí cada cena acontece, por transição. */
.cena { display: block; overflow: hidden; aspect-ratio: 5 / 3; border-radius: var(--raio-icone); background-color: var(--off); transition: background-color 0.4s var(--saida); }
.cena-svg { display: block; width: 100%; height: 100%; }
.funciona-lista li.alcancado .cena { background-color: rgb(11 79 122 / 0.06); }

.cena .c-papel { fill: var(--branco); stroke: var(--borda); stroke-width: 1; }
.cena .c-azul { fill: var(--azul); }
.cena .c-branco { fill: var(--branco); }
.cena .c-trilho { fill: var(--borda); }
.cena .c-faixa { fill: rgb(11 79 122 / 0.12); }
.cena .c-dia { fill: var(--off); }
.cena .c-ponto { fill: var(--borda-forte); }
.cena .c-argola, .cena .c-linha { fill: none; stroke: var(--borda-forte); stroke-width: 2; stroke-linecap: round; }
.cena .c-linha-clara { fill: none; stroke: rgb(255 255 255 / 0.6); stroke-width: 2; stroke-linecap: round; }
.cena .c-traco { fill: none; stroke: var(--azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cena .c-meses { fill: none; stroke: var(--borda-forte); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 1; }
.cena .c-trilho-anel { fill: none; stroke: var(--borda); stroke-width: 3; }
.cena .cena-anel { stroke-width: 3; stroke-dasharray: 1 1; }

.cena-barra, .cena-play, .cena-dia, .cena-onda, .cena-giro, .cena-folha, .cena-balao { transform-box: fill-box; transform-origin: center; }

/* 1. Vídeo: a barra de progresso avança e o play se assenta. */
.cena-barra { transform-origin: 0 50%; transform: scaleX(0.68); transition: transform 1.4s var(--saida) 0.2s; }
.cena-play { transition: transform 0.6s var(--saida); }
/* 2. Calendário: o dia do encontro acende e solta uma onda (uma vez só). */
.cena-dia { transition: opacity 0.5s var(--saida) 0.15s, transform 0.5s var(--saida) 0.15s; }
.cena .cena-onda { fill: none; stroke: var(--azul); stroke-width: 1.5; stroke-opacity: 0; transform: scale(2.6); transition: stroke-opacity 1.1s var(--saida) 0.45s, transform 1.1s var(--saida) 0.45s; }
/* 3. Atualizações: as setas dão meia-volta. */
.cena-giro { transition: transform 1s var(--saida); }
/* 4. Ferramentas e arquivos: as folhas se abrem em leque. */
.cena-folha { transform-origin: 50% 100%; transition: transform 0.8s var(--saida) 0.1s; }
.cena-folha-1 { transform: translate(-15px, 2px) rotate(-12deg); }
.cena-folha-3 { transform: translate(15px, 2px) rotate(12deg); }
/* 5. Grupo e WhatsApp: os balões chegam um a um. */
.cena-balao { transition: opacity 0.5s var(--saida), transform 0.5s var(--saida); }
.cena-balao-2 { transition-delay: 0.2s; }
.cena-balao-3 { transition-delay: 0.6s; }
/* 6. Acesso por 1 ano: o anel (12 marcas, os meses) se completa. */
html.js-movimento .cena-anel { transition: stroke-dashoffset 1.4s var(--saida) 0.1s; }

/* Antes do fio chegar (só com movimento). Ao voltar para cima, a cena volta ao começo; a onda volta
   sem transição (senão ela "desaconteceria" ao contrário). */
html.js-movimento .funciona-lista li:not(.alcancado) .cena-barra { transform: scaleX(0); }
html.js-movimento .funciona-lista li:not(.alcancado) .cena-play { transform: scale(0.85); }
html.js-movimento .funciona-lista li:not(.alcancado) .cena-dia { opacity: 0; transform: scale(0.5); }
html.js-movimento .funciona-lista li:not(.alcancado) .cena .cena-onda { stroke-opacity: 0.8; transform: scale(1); transition: none; }
html.js-movimento .funciona-lista li:not(.alcancado) .cena-giro { transform: rotate(-180deg); }
html.js-movimento .funciona-lista li:not(.alcancado) .cena-folha-1,
html.js-movimento .funciona-lista li:not(.alcancado) .cena-folha-3 { transform: none; }
html.js-movimento .funciona-lista li:not(.alcancado) .cena-balao-2,
html.js-movimento .funciona-lista li:not(.alcancado) .cena-balao-3 { opacity: 0; transform: translateY(6px); }
html.js-movimento .funciona-lista li:not(.alcancado) .cena-anel { stroke-dashoffset: 1; }

/* ---------- 7. Conteúdo: apoio e foto pequena, módulos em acordeão numerado ---------- */
.conteudo-grade { display: grid; gap: 2rem; align-items: center; }
.conteudo-visual { overflow: hidden; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--raio); background: var(--tinta); }
.conteudo-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.conteudo-texto h2 { margin-bottom: 1.25rem; }
.conteudo-texto > p:not(.rotulo) { color: var(--suave); }

/* Módulos como trilha (12/11): nós numerados ligados por uma linha à esquerda, ícone próprio em cada
   cartão, e o aberto acende. O nó mora dentro do <summary> (continua clicável), posicionado fora do cartão. */
.modulos {
  --no: 2.25rem;
  --trilha: 3rem;
  position: relative;
  display: grid;
  gap: 0.75rem;
  margin-top: 3rem;
}

.modulos::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  bottom: 2.25rem;
  left: calc(var(--no) / 2 - 0.5px);
  width: 1px;
  background: linear-gradient(to bottom, var(--azul), var(--borda) 70%);
}

/* ---------- Acordeões (conteúdo e FAQ) ---------- */
.acordeao summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 1.125rem 3.5rem 1.125rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-corpo);
  font-weight: 500;
  line-height: 1.45;
  transition: color 0.3s var(--saida);
}

.acordeao summary::-webkit-details-marker { display: none; }

/* Sinal de mais num círculo fino, que vira menos ao abrir. */
.acordeao summary::before, .acordeao summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.625rem;
  width: 0.75rem;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background: var(--tinta);
  transition: transform 0.5s var(--saida);
}

/* Aberto: o sinal gira meia volta e a haste vertical deita, virando menos (v4). */
.acordeao summary::after { transform: rotate(90deg); }
/* Fechando (altura animada pelo JS), o acordeão ainda está [open]: o :not(.fechando) faz o ícone e o
   número voltarem ao visual de fechado já no começo da animação (v4). */
.acordeao[open]:not(.fechando) > summary::before { transform: rotate(180deg); }
.acordeao[open]:not(.fechando) > summary::after { transform: rotate(180deg); }

.acordeao-titulo { flex: 1; }
.acordeao-corpo { padding: 0 1.25rem 1.5rem; color: var(--suave); font-size: 0.9375rem; }
.acordeao-corpo ul + p { margin-top: 1rem; }
.acordeao-corpo li { position: relative; margin-bottom: 0.35rem; padding-left: 1rem; break-inside: avoid; }

.acordeao-corpo li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--borda-forte);
}

/* Módulo: cartão com ícone; o aberto ganha borda azulada e uma sombra curta. */
.modulos .acordeao {
  margin-left: var(--trilha);
  border: 1px solid var(--borda);
  border-radius: var(--raio-medio);
  background: var(--branco);
  transition: border-color 0.4s var(--saida), box-shadow 0.6s var(--saida);
}

.modulos .acordeao[open]:not(.fechando) { border-color: rgb(11 79 122 / 0.4); box-shadow: 0 12px 24px -20px rgb(11 22 34 / 0.45); }
.modulos summary { gap: 0.875rem; padding: 1rem 3.25rem 1rem 1rem; font-size: var(--t-apoio); }
.modulos summary::before, .modulos summary::after { right: 1.25rem; }

.ornamento { font-variant-numeric: tabular-nums; }

/* O nó da trilha: número em DM Serif num círculo sobre a linha (fora do cartão, à esquerda). */
.modulos .ornamento {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--trilha) - 1px);
  display: grid;
  place-items: center;
  width: var(--no);
  height: var(--no);
  margin-top: calc(var(--no) / -2);
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: var(--branco);
  color: var(--suave);
  font-family: var(--fonte-numero);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  transition: background-color 0.4s var(--saida), border-color 0.4s var(--saida), color 0.4s var(--saida);
}

.modulos .acordeao[open]:not(.fechando) .ornamento { border-color: var(--azul); background: var(--azul); color: var(--branco); }

/* Ícone do módulo: quadrado off-white; aberto, fundo azul 8% e traço azul que se redesenha. */
.modulo-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--raio-icone);
  background: var(--off);
  transition: background-color 0.4s var(--saida);
}
.modulo-icone .icone { width: 1.25rem; height: 1.25rem; stroke-dasharray: 1 1; }
.modulos .acordeao[open]:not(.fechando) .modulo-icone { background: rgb(11 79 122 / 0.08); }
.modulos .acordeao[open]:not(.fechando) .modulo-icone .icone { stroke: var(--azul); }
html.js-movimento .modulos .acordeao[open]:not(.fechando) .modulo-icone .icone > * { animation: modulo-desenhar 0.9s var(--saida) both; }
@keyframes modulo-desenhar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Aulas como checklist: ✓ azul desenhado no CSS, fios finos entre as linhas. No celular, largura toda. */
.modulos .acordeao-corpo { padding: 0 1rem 1.25rem; }
.modulos .acordeao-corpo li { margin: 0; padding: 0.55rem 0 0.55rem 1.625rem; border-top: 1px solid rgb(211 209 199 / 0.55); }
.modulos .acordeao-corpo li::before {
  top: 1em;
  left: 0.3rem;
  width: 0.375rem;
  height: 0.6875rem;
  border: solid var(--azul);
  border-width: 0 1.75px 1.75px 0;
  border-radius: 0 0 1px 0;
  background: none;
  transform: rotate(45deg);
}
html.js-movimento .modulos .acordeao[open]:not(.fechando) .acordeao-corpo li { animation: modulo-aula 0.5s var(--saida) both; }
.modulos .acordeao-corpo li:nth-child(2) { animation-delay: 40ms; }
.modulos .acordeao-corpo li:nth-child(3) { animation-delay: 80ms; }
.modulos .acordeao-corpo li:nth-child(4) { animation-delay: 120ms; }
.modulos .acordeao-corpo li:nth-child(5) { animation-delay: 160ms; }
.modulos .acordeao-corpo li:nth-child(6) { animation-delay: 200ms; }
.modulos .acordeao-corpo li:nth-child(7) { animation-delay: 240ms; }
.modulos .acordeao-corpo li:nth-child(n + 8) { animation-delay: 280ms; }
@keyframes modulo-aula { from { opacity: 0; transform: translate3d(0, 6px, 0); } }

/* FAQ: uma caixa branca com as perguntas separadas por fios. */
.faq-grade { display: grid; gap: 2rem; }
.faq-cabeca h2 { font-weight: 300; }
.faq-lista { overflow: hidden; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); }
.faq-lista .acordeao + .acordeao { border-top: 1px solid var(--borda); }

/* ---------- 8. Bônus: cartões com a capa em cima ---------- */
/* Celular: carrossel com encaixe; 640 px+: grade 2×2 com capa 3:2; 1180 px+: 4 colunas com capa quadrada. */
.bonus-lista {
  display: flex;
  gap: 0.875rem;
  margin: 2.5rem calc(-1 * var(--calha)) 0;
  padding: 0.25rem var(--calha) 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--calha);
  scrollbar-width: none;
}
.bonus-lista::-webkit-scrollbar { display: none; }

.bonus { display: flex; flex: 0 0 min(80%, 20rem); flex-direction: column; overflow: hidden; scroll-snap-align: start; }
.bonus-img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.8s var(--saida); }
/* Foco dentro do cartão (se um dia houver link nele) também aproxima a capa. */
.bonus:focus-within .bonus-img { transform: scale(1.04); }
.bonus-texto { padding: 1.5rem 1.5rem 1.75rem; }
.bonus-texto h3 { margin-bottom: 0.625rem; }
.bonus-texto p { color: var(--suave); font-size: 0.9375rem; line-height: 1.65; }
.bonus-texto p + p { margin-top: 0.75em; }

/* ---------- 9. Garantia: 15 e 90 grandes, lado a lado com o texto ---------- */
.garantia-painel { display: grid; gap: 2.5rem; align-items: center; }

.garantia-numeros {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  border: 1px solid var(--claro-linha);
  border-radius: 24px;
}

.garantia-numero {
  display: block;
  text-align: center; /* durante a contagem a largura fica presa: o número cresce do centro */
  color: var(--claro-60);
  font-family: var(--fonte-numero);
  font-size: clamp(4rem, 2.6rem + 5.5vw, 6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

.garantia-numero--90 { color: var(--claro); }
.garantia-mais { color: var(--azul-claro); font-size: 2rem; font-weight: 300; line-height: 1; }

.garantia-texto h2 { max-width: 14em; margin-bottom: 1.5rem; }
.garantia-texto > p:not(.rotulo) { color: var(--claro-60); }

.garantia-texto > p.garantia-fecho {
  max-width: 30em;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--claro-linha);
  color: var(--claro);
  font-size: var(--t-apoio);
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- 10. Mentor: foto e bio em grade 2/3 ---------- */
.mentor-grade { display: grid; gap: 2.5rem; align-items: center; }

/* A foto tem bordas que somem no escuro (alfa): o cartão escuro vira a moldura. */
/* Celular: quadrada (mais baixa); 768 px+: 4:5 ao lado do texto. */
.mentor-visual { overflow: hidden; width: 100%; max-width: 26rem; aspect-ratio: 1; border-radius: 24px; background: var(--tinta); }
/* A foto tem margem transparente em volta: a escala estática aproxima o Rodrigo da moldura. */
/* Retrato de perfil (12/11), olhando para a esquerda: no 4:5 do desktop, a foto encosta à esquerda para
   o nariz nunca ser cortado (sai um pouco da nuca, à direita). No 1:1 do celular aparece inteira. */
.mentor-img { width: 100%; height: 100%; object-fit: cover; object-position: 12% 50%; }

.mentor-texto h2 { margin-bottom: 1.5rem; font-weight: 300; }
.mentor-texto > p:not(.rotulo) { color: var(--suave); }

.mentor-texto > p.mentor-abertura {
  max-width: 30em;
  margin-bottom: 1.5rem;
  color: var(--tinta);
  font-size: var(--t-apoio);
  font-weight: 400;
  line-height: 1.6;
}

/* ---------- 12. Rodapé: mínimo ---------- */
#rodape {
  padding-top: 2.5rem;
  background: var(--tinta);
  color-scheme: dark;
  padding-bottom: calc(2.5rem + var(--respiro-whatsapp));
  color: var(--claro-60);
  font-size: var(--t-pequeno);
  line-height: 1.6;
}

.rodape-grade { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; justify-content: space-between; }
.rodape-grade p + p { margin-top: 0; }
#rodape a { display: inline-block; padding-block: 0.75rem; text-decoration-color: var(--claro-60); }

/* ---------- WhatsApp flutuante ---------- */
.whatsapp {
  position: fixed;
  z-index: var(--z-flutuante);
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  box-shadow: 0 4px 8px rgb(11 22 34 / 0.22);
  transition: opacity 0.35s var(--saida), transform 0.35s var(--saida), background-color 0.3s var(--saida), visibility 0s;
}

/* Escondido enquanto o topo está na tela (o JavaScript põe e tira a classe; sem JS, fica sempre
   visível). O visibility entra no fim da transição e tira o botão do Tab e do leitor de tela. */
.whatsapp.whatsapp--escondido {
  opacity: 0;
  transform: translateY(0.75rem) scale(0.92);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--saida), transform 0.25s var(--saida), background-color 0.3s var(--saida), visibility 0s linear 0.25s;
}
.whatsapp-icone { width: 1.75rem; height: 1.75rem; }

/* ---------- Telas médias ---------- */
@media (min-width: 600px) {
  .funciona-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funciona-lista li { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; padding: 1rem 1.25rem 1.25rem 1rem; }
  .cena { aspect-ratio: 2 / 1; }
  .passo-fio { top: -1px; right: var(--raio); bottom: auto; left: var(--raio); width: auto; height: 2px; transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
  .acordeao-corpo ul { columns: 2; column-gap: 2rem; }
  .acordeao summary { padding-inline: 1.5rem 3.75rem; }
  .acordeao-corpo { padding-inline: 1.5rem; }
  /* Trilha: as aulas alinham com o título (recuo = respiro + ícone + vão). */
  .modulos summary { padding-inline: 1.25rem 3.5rem; }
  .modulos .acordeao-corpo { padding: 0 1.5rem 1.5rem calc(1.25rem + 2.5rem + 0.875rem); }
}

@media (min-width: 640px) {
  .bonus-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-inline: 0; padding: 0; overflow: visible; }
  /* Em duas colunas a capa quadrada ficaria enorme: vira 3:2 (as capas têm o assunto no centro). */
  .bonus-img { aspect-ratio: 3 / 2; }
  .porque-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beneficio { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.75rem 1.5rem; }
  .beneficio:last-child { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); }
  /* Ícone em cima: o número vai para o canto direito, ao lado dele. O cartão largo (ícone à esquerda)
     mantém o número embaixo do ícone, como no celular. */
  .beneficio-numero { top: calc(1.75rem + 3rem + 0.625rem); left: 1.5rem; }
  .beneficio:not(:last-child) .beneficio-numero { top: 1.25rem; right: 1.5rem; left: auto; width: auto; font-size: 3.25rem; }
}

@media (min-width: 768px) {
  /* Sem imagem: título à esquerda, texto à direita, no mesmo fio de cima. */
  .controle-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
  #controle h2 { grid-column: 1; }
  .controle-texto { grid-column: 2; padding-top: 0.4rem; }

  .conteudo-grade { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
  .conteudo-visual { grid-column: 2; grid-row: 1; aspect-ratio: 1; max-width: 22rem; justify-self: end; }
  .conteudo-texto { grid-column: 1; grid-row: 1; }

  .mentor-grade { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(2.5rem, 6vw, 5rem); }
  .mentor-visual { max-width: none; aspect-ratio: 4 / 5; }

  .garantia-painel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
}

@media (min-width: 860px) {
  /* Três cartões lado a lado (o carrossel acaba). */
  .perfis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 3.5rem 0 0; padding: 0; overflow: visible; }
  .perfil { padding: 2rem 1.75rem; }
  .perfil h3 { min-height: 2.6em; } /* títulos da mesma altura: os textos começam alinhados */
}

/* Topo em sangria a partir de 900 px, e em qualquer tela deitada a partir de 600 px
   (celular na horizontal): foto paisagem atrás, texto à esquerda. */
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) {
  .topo-foto { position: absolute; inset: 0; z-index: -1; }
  /* Ancorada perto do alto: em tela larga a foto é cortada embaixo, nunca na cabeça. */
  .hero-img { height: 100%; aspect-ratio: auto; max-height: none; object-position: 72% 12%; }

  .topo-foto::after {
    background:
      linear-gradient(90deg, var(--tinta) 0%, rgb(11 22 34 / 0.9) 28%, rgb(11 22 34 / 0.25) 52%, transparent 66%),
      linear-gradient(to top, rgb(11 22 34 / 0.7) 0%, transparent 18%);
  }

  .topo-grade {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(32rem, 82svh, 50rem);
    margin-top: 0;
    padding-block: 5rem;
  }

  .topo-texto { max-width: min(50%, 34rem); }
}

/* ---------- Notebook e desktop (≥ 1024 px) ---------- */
@media (min-width: 1024px) {
  /* A curva volta para dentro da grade: as 4 fases ficam alinhadas sob os seus trechos. */
  .curva-historia { width: 100%; margin-inline: 0; }

  .linha-do-tempo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 2.5rem;
    padding: 2rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--claro-linha);
    font-size: 0.9375rem;
  }

  .linha-do-tempo p + p { margin-top: 0; }
  .linha-do-tempo p::before { top: calc(-2rem - 5px); left: 0; }

  .porque-grade { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 4rem; align-items: start; }
  .porque-cabeca { position: sticky; top: var(--topo-fixo); }
  .beneficio:not(:last-child) .beneficio-numero { font-size: 4rem; }

  .funciona-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3.5rem; }
  .funciona-lista li { gap: 1.25rem; padding: 1.25rem 1.5rem 1.75rem 1.25rem; font-size: var(--t-corpo); }

  .modulos { --no: 2.75rem; --trilha: 3.75rem; margin-top: 4rem; }
  .modulos .ornamento { font-size: 1.25rem; }
  .modulos .acordeao-corpo ul { columns: 3; }

  .faq-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 4rem; align-items: start; }
  .faq-cabeca { position: sticky; top: var(--topo-fixo); }

  .whatsapp { right: max(1.5rem, env(safe-area-inset-right)); bottom: max(1.5rem, env(safe-area-inset-bottom)); }
}

@media (min-width: 1180px) {
  .bonus-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bonus-img { aspect-ratio: 1; }
}

/* ---------- Hover: só com mouse (no toque o :hover "gruda" depois do toque) ---------- */
@media (hover: hover) and (pointer: fine) {
  main p a:hover { color: var(--azul); }
  .perfil:hover { border-color: var(--borda-forte); box-shadow: 0 6px 8px -6px rgb(11 22 34 / 0.12); }
  .perfil:hover .perfil-marca { background-color: rgb(11 79 122 / 0.06); }
  .perfil:hover .perfil-marca::after { opacity: 0.75; }
  .perfil:hover .perfil-icone { stroke: var(--azul); }
  .perfil:hover::before, .beneficio:hover::before { clip-path: inset(0 0 0 0); transition-duration: 0.9s; }
  .beneficio:hover { border-color: rgb(11 79 122 / 0.3); background-color: var(--branco); box-shadow: 0 14px 28px -22px rgb(11 22 34 / 0.5); }
  .beneficio:hover .marca { background-color: var(--azul); }
  .beneficio:hover .icone { stroke: var(--branco); }
  .beneficio:hover .beneficio-numero { color: rgb(11 79 122 / 0.3); }
  .funciona-lista li:hover { border-color: var(--borda-forte); }
  .funciona-lista li:hover .cena { background-color: rgb(11 79 122 / 0.06); }
  .modulos .acordeao:hover { border-color: var(--borda-forte); }
  .modulos .acordeao:hover .ornamento { border-color: var(--azul); color: var(--azul); }
  .modulos .acordeao[open]:not(.fechando):hover .ornamento { color: var(--branco); }
  .modulos .acordeao:hover .modulo-icone .icone { stroke: var(--azul); }
  .faq-lista summary:hover { color: var(--azul); }
  .bonus:hover { border-color: var(--borda-forte); }
  #rodape a:hover { color: var(--claro); }
  .whatsapp:hover { background: var(--whatsapp-claro); }
}

/* O que se move no hover (subir 3 px, aproximar a capa) some com movimento reduzido. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .perfil:hover, .bonus:hover { transform: translateY(-3px); }
  /* O quadriculado desliza devagar sob o ícone (meio quadrado), como uma prancha que se ajeita. */
  .perfil:hover .perfil-marca::before { transform: translate3d(8px, 8px, 0); }
  .bonus:hover .bonus-img { transform: scale(1.04); }
  .whatsapp:hover { transform: translateY(-2px); }
}

/* ---------- Movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .perfil:focus-visible { transform: translateY(-3px); }
  .perfil:focus-visible .perfil-marca::before { transform: translate3d(8px, 8px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }

  #topo h1, #topo .apoio, .topo-foto, .topo-logo { animation: none; }
  html.js-movimento .beneficio:not(.revelado) .beneficio-numero { opacity: 1; transform: none; }
  .perfil-marca::before, .perfil-marca::after,
  html.js-movimento .perfil:not(.revelado) .perfil-marca::before { opacity: 1; transform: none; }
  html.js-movimento .perfil:not(.revelado) .perfil-marca::after, .perfil-marca::after { opacity: 0.4; }
  .topo-foto::before, .passo-fio { display: none; }
  html.js-movimento .perfil-icone > *, html.js-movimento .perfil:not(.revelado) .perfil-icone > * { stroke-dashoffset: 0; }
  html.js-movimento .beneficio .marca, html.js-movimento .beneficio:not(.revelado) .marca { opacity: 1; transform: none; }
  html.js-movimento .bonus:not(.revelado) .bonus-img, .bonus:focus-within .bonus-img { transform: none; }
  html.js-movimento .revelar, html.js-movimento .revelar:not(.revelado),
  html.js-movimento :is(h2, p).revelar:not(.revelado) { opacity: 1; transform: none; }
  html.js-movimento #historia .curva-traco { stroke-dashoffset: 0; }
  html.js-movimento .curva .curva-area, html.js-movimento .curva .curva-eco, html.js-movimento .curva .curva-marco,
  html.js-movimento .curva .curva-virada, html.js-movimento .curva .curva-seta { opacity: 1; }
  html.js-movimento .parallax { transform: none; }
  .hero-img, html.js-movimento .hero-img.parallax { transform: none; }
  html.js-movimento .modulos .acordeao[open]:not(.fechando) .modulo-icone .icone > *,
  html.js-movimento .modulos .acordeao[open]:not(.fechando) .acordeao-corpo li { animation: none; }
}