/* Sessao Despertar - Tatiane Dib
   Tema claro e acolhedor. Mesmas fontes da LP de aulas (Playfair Display nos
   titulos, Lato no corpo) para manter a familia visual; a paleta puxa o
   terracota e o caramelo das roupas da Tati nas fotos.
   Mobile-first: o CSS base e o celular, o @media de baixo e o desktop. */

:root {
  --creme: #FAF5EF;      /* fundo */
  --areia: #F1E6D8;      /* blocos alternados */
  --linho: #FFFDF9;      /* cards */
  --grafite: #161F24;    /* texto principal, o mesmo escuro da marca */
  --texto: #4A4642;      /* corpo */
  --suave: #6B645D;      /* textos de apoio */
  --terracota: #A4552F;  /* destaques; contraste 5,3:1 sobre o creme */
  --borda: #E6D8C6;
  --verde: #25D366;      /* botoes, a mesma regra da LP de aulas */
  --verde-hover: #4ADE80;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--creme); color: var(--texto); font-family: Lato, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
main { overflow: hidden; }

.pula-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--grafite); color: #fff; padding: 12px 20px; font-weight: 900; border-radius: 0 0 8px 0;
}
.pula-para-conteudo:focus { left: 0; }

/* ---------- BOTAO ---------- */
a.botao {
  display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 520px;
  padding: 17px 20px; border-radius: 10px; background: var(--verde); text-decoration: none;
  box-shadow: 0 -2px 0 0 rgba(0,0,0,.12) inset, 0 8px 22px 0 rgba(37,211,102,.28); transition: background .4s ease;
}
a.botao:hover { background: var(--verde-hover); }
a.botao b {
  color: #10241A; font-size: 16px; font-weight: 900; line-height: 20px; letter-spacing: .3px;
  text-transform: uppercase; text-align: center; text-wrap: balance;
}
a.botao svg { flex: 0 0 auto; transition: transform .4s ease; }
a.botao:hover svg { transform: translate(3px, -3px); }

/* ---------- TOPO ---------- */
/* Topo enxuto: selo, H1, sub, fatos e botao. Os paragrafos de "para quem e"
   desceram para a dobra 2, para baixar a carga de leitura de quem chega frio. */
.topo { position: relative; background: var(--creme); }

/* Foto sem recorte: entra inteira e some no creme por mascara. No celular ela
   fica em cima e o esmaecimento de baixo emenda com o texto. */
/* A altura acompanha a tela: a foto ocupa o que sobra depois do texto (uns
   420px ate o fim do botao), e o botao fecha a primeira dobra sem deixar
   espaco vazio embaixo. Altura fixa sobrava 50 a 200px de creme no fim. */
.topo .retrato { margin: 0; height: clamp(200px, calc(100svh - 432px), 400px); position: relative; }
.topo .retrato img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  /* multiply esquenta o cinza frio do estudio para o tom do creme; a pele quase
     nao muda, porque o creme e praticamente branco */
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(0deg, transparent 0%, #000 22%);
}

.topo .centro { position: relative; z-index: 2; padding: 0 20px 44px; margin-top: 0; }
.topo .texto { max-width: 560px; }

.topo .marca { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; }
.topo .marca .nome {
  color: var(--terracota); font-size: 12px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
}
.topo .marca .selo {
  color: var(--grafite); font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  border: 1px solid var(--borda); background: var(--linho); border-radius: 99px; padding: 4px 10px;
}

.topo h1 {
  color: var(--grafite); font-family: "Playfair Display", serif; font-size: 24px; font-weight: 600;
  line-height: 1.17; letter-spacing: -.3px; margin: 0 0 14px; text-wrap: balance;
}
.topo h1 em { color: var(--terracota); font-style: italic; font-weight: 700; }

.topo .sub {
  color: var(--grafite); font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 16px; text-wrap: pretty;
}

/* Fatos para escanear: tiram as duvidas de quem chega frio sem paragrafo. */
.topo .fatos { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; padding: 0; list-style: none; }
/* Medidas do celular calculadas para os quatro caberem numa linha so em 360px. */
.topo .fatos li {
  display: flex; align-items: center; gap: 3px; color: var(--grafite); font-size: 12px; font-weight: 800;
  background: var(--linho); border: 1px solid var(--borda); border-radius: 99px; padding: 5px 8px 5px 7px;
  white-space: nowrap;
}
.topo .fatos li::before { content: '\2713'; color: var(--terracota); font-weight: 900; }

.topo .prova { font-size: 13px; font-weight: 700; color: var(--terracota); margin: 0 0 16px; }
.topo .prova::before { content: '\2665'; margin-right: 6px; }

.topo .proximo { font-size: 13px; line-height: 1.45; color: var(--suave); margin: 10px 0 0; text-wrap: balance; }

/* Ate 380px: o selo e os fatos quebravam para a linha de baixo. */
@media (max-width: 380px) {
  .topo .marca { gap: 8px; }
  .topo .marca .nome { font-size: 11px; letter-spacing: 1.4px; }
  .topo .marca .selo { font-size: 10px; letter-spacing: .3px; padding: 3px 8px; }
  .topo .fatos { gap: 5px; }
  .topo .fatos li { font-size: 11.5px; padding: 5px 7px 5px 6px; gap: 3px; }
}

/* ---------- TITULOS E TEXTO DAS DOBRAS ---------- */
section h2 {
  color: var(--grafite); font-family: "Playfair Display", serif; font-size: 27px; font-weight: 600;
  line-height: 1.2; letter-spacing: -.2px; margin: 0 0 24px; text-wrap: balance;
}
section h2 em { color: var(--terracota); font-style: italic; font-weight: 700; }
section .centro { width: 100%; max-width: 760px; margin: 0 auto; }
section p { font-size: 16px; line-height: 1.6; margin: 0 0 16px; text-wrap: pretty; }
section p b { color: var(--grafite); }

/* Marcacao de conteudo que falta. Some quando o material real entrar. */
.pendente { outline: 2px dashed #C9A27E; outline-offset: -2px; color: #9C7B5C; }

/* ---------- FAIXA DE BENEFICIOS ---------- */
/* Esteira horizontal entre o topo e "para quem e". Lenta de proposito: o
   publico precisa conseguir ler cada frase em movimento. */
.beneficios { background: var(--terracota); overflow: hidden; padding: 14px 0; }
.beneficios .esteira { display: flex; width: max-content; animation: esteira 44s linear infinite; }
.beneficios ul { display: flex; margin: 0; padding: 0; list-style: none; }
.beneficios li {
  display: flex; align-items: center; white-space: nowrap; color: #fff;
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 700; font-size: 17px; line-height: 1.2;
}
.beneficios li::after { content: '\2726'; font-style: normal; font-size: 12px; opacity: .7; margin: 0 22px; }
.beneficios:hover .esteira { animation-play-state: paused; }
@keyframes esteira { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Anda sempre, inclusive com "reduzir movimento" ligado no aparelho: e lenta,
   e parar e um toque (ou passar o mouse). As outras animacoes respeitam a
   preferencia. */
.beneficios.pausada .esteira { animation-play-state: paused; }

/* ---------- PARA QUEM E ---------- */
.para-quem { background: var(--areia); padding: 48px 20px 8px; }
.para-quem .foto {
  margin: 0 0 24px; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: 0 16px 40px rgba(90,60,30,.12);
}
.para-quem .foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.para-quem h2 { margin-bottom: 18px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li {
  position: relative; padding: 14px 16px 14px 50px; background: var(--linho); border: 1px solid var(--borda);
  border-radius: 12px; color: var(--grafite); font-size: 16.5px; font-weight: 700; line-height: 1.4; text-wrap: balance;
}
.checks li::before {
  content: '\2713'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; background: var(--terracota); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 900;
}

/* ---------- FRASE DE VIRADA + DEPOIMENTO ---------- */
.trava { background: var(--areia); padding: 40px 20px 56px; }
.trava h2 em { display: block; margin-top: 8px; }

.depoimento {
  margin: 0; padding: 24px 24px 22px 28px; background: var(--linho); border-radius: 14px;
  border-left: 4px solid var(--terracota); box-shadow: 0 10px 30px rgba(90,60,30,.08);
}
.depoimento blockquote {
  margin: 0 0 12px; font-family: "Playfair Display", serif; font-style: italic; font-size: 19px; line-height: 1.45;
  color: var(--grafite);
}
.depoimento figcaption { font-size: 14px; font-weight: 800; color: var(--terracota); }

/* ---------- METODO ---------- */
/* Celular: passos em coluna, ligados por uma linha vertical com seta.
   Desktop: tres colunas, ligadas por uma seta entre os cards. */
.metodo { background: var(--creme); padding: 56px 20px; }
.metodo .rotulo {
  color: var(--terracota); font-size: 12px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 8px;
}
.passos { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 30px; }
.passos li {
  position: relative; background: var(--linho); border: 1px solid var(--borda); border-radius: 16px;
  padding: 20px 20px 18px 84px; box-shadow: 0 10px 30px rgba(90,60,30,.06);
}
.passos li + li::before {
  content: '\2193'; position: absolute; left: 50%; top: -27px; transform: translateX(-50%);
  color: var(--terracota); font-size: 20px; font-weight: 900; line-height: 24px;
}
.passos .icone {
  position: absolute; left: 18px; top: 20px; width: 50px; height: 50px; border-radius: 50%;
  background: var(--terracota); color: #fff; display: grid; place-items: center;
}
.passos .icone svg { width: 24px; height: 24px; }
.passos .num { display: block; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--terracota); }
.passos b { display: block; color: var(--grafite); font-family: "Playfair Display", serif; font-size: 20px; line-height: 1.25; margin: 2px 0 6px; }
.passos p { margin: 0; font-size: 15px; line-height: 1.5; }
.metodo .resultado { font-size: 17px; color: var(--grafite); margin: 0 0 24px; text-wrap: balance; }
.metodo .resultado b { display: block; color: var(--terracota); }

/* ---------- APLICACAO ---------- */
.leva { background: var(--areia); padding: 56px 20px; }
.chegada { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; counter-reset: chegada; }
.chegada li {
  display: flex; align-items: center; gap: 14px; color: var(--grafite); font-size: 16px; font-weight: 700; line-height: 1.35;
  text-wrap: balance;
}
.chegada .icone {
  flex: 0 0 42px; height: 42px; border-radius: 50%; background: var(--linho); border: 1px solid var(--borda);
  color: var(--terracota); display: grid; place-items: center;
}
.chegada .icone svg { width: 20px; height: 20px; }
/* Aviso de vagas em destaque: e a ponte entre "o que voce leva" e o formulario. */
.leva .aviso {
  margin-bottom: 24px; padding: 20px 22px; border-radius: 14px; background: var(--linho);
  border-left: 4px solid var(--terracota);
}
.leva .aviso p { margin: 0; color: var(--grafite); }
.leva .aviso p:first-child {
  font-family: "Playfair Display", serif; font-size: 20px; font-weight: 700; line-height: 1.3;
  color: var(--terracota); margin-bottom: 8px; text-wrap: balance;
}

/* ---------- FORMULARIO EM ETAPAS ---------- */
.aplicacao {
  background: var(--linho); border: 1px solid var(--borda); border-radius: 16px; padding: 22px 18px 18px;
  box-shadow: 0 16px 40px rgba(90,60,30,.10);
}
.aplicacao .progresso { height: 6px; border-radius: 99px; background: var(--areia); overflow: hidden; }
.aplicacao .progresso span { display: block; height: 100%; width: 0; background: var(--terracota); border-radius: 99px; transition: width .4s ease; }
.aplicacao .contagem { font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #8A8178; margin: 10px 0 16px; }

.aplicacao fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.aplicacao fieldset.ativa { display: block; animation: entra .35s ease; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.aplicacao legend {
  padding: 0; margin: 0 0 16px; color: var(--grafite); font-family: "Playfair Display", serif; font-size: 21px;
  font-weight: 600; line-height: 1.3; text-wrap: balance;
}
.aplicacao .dica { font-size: 14px; color: var(--suave); margin: -8px 0 14px; }
.aplicacao .campo > label { position: absolute; left: -9999px; }
.aplicacao .campo { position: relative; }
.aplicacao .linha.telefone { display: flex; gap: 8px; }
.aplicacao .linha.telefone .ddi { flex: 0 0 108px; }
.aplicacao .linha.telefone .campo:last-child { flex: 1; min-width: 0; }

/* 16px nos campos: abaixo disso o iPhone da zoom ao focar. */
.aplicacao input[type=text], .aplicacao input[type=tel], .aplicacao input[type=email], .aplicacao select, .aplicacao textarea {
  width: 100%; height: 50px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--borda); background: #fff;
  color: var(--grafite); font-family: Lato, sans-serif; font-size: 16px; margin-bottom: 10px;
  transition: border .3s ease, box-shadow .3s ease;
}
.aplicacao select { padding: 0 8px; }
.aplicacao textarea { display: block; height: 120px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.aplicacao input:focus, .aplicacao select:focus, .aplicacao textarea:focus {
  outline: none; border-color: var(--terracota); box-shadow: 0 0 0 3px rgba(164,85,47,.15);
}
.aplicacao input::placeholder, .aplicacao textarea::placeholder { color: #A39A90; }
.aplicacao .isca { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Escolha unica em cartoes: tocar ja seleciona e avanca. */
.aplicacao .opcoes { display: grid; gap: 8px; margin-bottom: 6px; }
.aplicacao .opcao {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--borda);
  border-radius: 10px; background: #fff; cursor: pointer; font-size: 15.5px; line-height: 1.35; color: var(--grafite);
  transition: border .2s ease, background .2s ease;
}
.aplicacao .opcao input { position: absolute; opacity: 0; pointer-events: none; }
.aplicacao .opcao::before {
  content: ''; flex: 0 0 18px; height: 18px; border-radius: 50%; border: 2px solid #CDBBA6; background: #fff; transition: all .2s ease;
}
.aplicacao .opcao:hover { border-color: #CDBBA6; }
.aplicacao .opcao:has(input:checked) { border-color: var(--terracota); background: #FBF1E8; }
.aplicacao .opcao:has(input:checked)::before { border-color: var(--terracota); background: var(--terracota); box-shadow: inset 0 0 0 3px #fff; }
.aplicacao .opcao:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(164,85,47,.2); }

.aplicacao .erro { color: #B3261E; font-size: 14px; line-height: 1.4; margin: 2px 0 8px; display: none; }
.aplicacao .erro.aparece { display: block; }

.aplicacao .acoes { display: flex; gap: 8px; margin-top: 6px; }
/* o display:flex do botao venceria o atributo hidden */
.aplicacao [hidden] { display: none !important; }
.aplicacao .acoes button { cursor: pointer; border-radius: 10px; font-family: Lato, sans-serif; }
.aplicacao .voltar {
  flex: 0 0 auto; min-height: 50px; padding: 0 18px; background: transparent; border: 1px solid var(--borda);
  color: var(--suave); font-size: 15px; font-weight: 700;
}
.aplicacao .voltar:hover { color: var(--grafite); border-color: #CDBBA6; }
.aplicacao .avancar {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 12px; border: 0;
  background: var(--verde); box-shadow: 0 -2px 0 0 rgba(0,0,0,.12) inset, 0 8px 22px 0 rgba(37,211,102,.28); transition: background .4s ease;
}
.aplicacao .avancar:hover { background: var(--verde-hover); }
.aplicacao .avancar:disabled { opacity: .6; cursor: progress; }
.aplicacao .avancar b { color: #10241A; font-size: 16px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase; }
.aplicacao .avancar svg { flex: 0 0 auto; }
.aplicacao .consentimento { font-size: 12px; line-height: 1.5; color: #8A8178; margin: 12px 0 0; text-wrap: pretty; }
.aplicacao .consentimento a { color: inherit; }

/* ---------- DOBRA 4 ---------- */
.mural { background: var(--creme); padding: 56px 20px; }
.mural .centro { max-width: 1000px; }
.mural h2 { text-align: center; }
/* Colunas de alturas diferentes, como mural: cada print fica do tamanho dele. */
.mural .prints { columns: 2; column-gap: 12px; margin-bottom: 32px; }
.mural .prints figure {
  break-inside: avoid; margin: 0 0 12px; border-radius: 12px; overflow: hidden; background: var(--linho);
  box-shadow: 0 8px 24px rgba(90,60,30,.10);
}
.mural .prints figure img { width: 100%; height: auto; }
/* alturas so dos marcadores; o CSP da pagina bloqueia style inline no HTML */
.mural .prints .alt-a { --h: 260px; } .mural .prints .alt-b { --h: 180px; } .mural .prints .alt-c { --h: 320px; }
.mural .prints .alt-d { --h: 220px; } .mural .prints .alt-e { --h: 300px; } .mural .prints .alt-f { --h: 200px; }
.mural .prints figure.pendente { height: var(--h, 220px); display: grid; place-items: center; font-size: 13px; text-align: center; padding: 12px; }
.mural .fecho { text-align: center; font-size: 18px; color: var(--grafite); margin: 0; text-wrap: balance; }
/* bloco proprio: sem isso o balance nao age na segunda frase e "passo." fica sozinho */
.mural .fecho b { display: block; text-wrap: balance; }

/* ---------- DOBRA 5 ---------- */
.bio { background: var(--areia); padding: 56px 20px; }
.bio figure { margin: 0 0 28px; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 16px 40px rgba(90,60,30,.12); }
.bio figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bio h2 { margin-bottom: 12px; }
.bio .papel { color: var(--terracota); font-weight: 800; font-size: 15px; }
.bio .historia { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.bio .historia li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.5; text-wrap: balance; }
.bio .historia li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--terracota); }
.bio .virada {
  font-family: "Playfair Display", serif; font-style: italic; font-size: 20px; line-height: 1.35; color: var(--grafite); text-wrap: balance;
}
/* Selo do numero sobre a foto da bio, no canto de baixo. */
.bio figure { position: relative; }
.bio .numero {
  position: absolute; left: 16px; bottom: 16px; margin: 0; display: flex; align-items: center; gap: 12px;
  background: var(--terracota); color: #fff; border-radius: 14px; padding: 12px 18px 12px 16px;
  box-shadow: 0 12px 30px rgba(60,25,10,.35);
}
.bio .numero b { font-family: "Playfair Display", serif; font-size: 44px; line-height: 1; color: #fff; }
.bio .numero span { font-size: 14px; line-height: 1.25; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; max-width: 90px; }
.bio .formacoes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bio .formacoes li {
  font-size: 12.5px; font-weight: 800; color: var(--grafite); background: var(--linho); border: 1px solid var(--borda);
  border-radius: 99px; padding: 5px 11px;
}
.bio .botao { margin-top: 28px; }

/* ---------- RODAPE ---------- */
footer { background: var(--grafite); padding: 28px 20px; text-align: center; }
footer .termos { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
footer a { color: #E9DFD3; font-size: 13px; font-weight: 700; }
footer p { color: #9A948E; font-size: 12px; margin: 0; }
footer p.empresa { margin-top: 6px; font-size: 11px; }

/* ---------- OBRIGADO ---------- */
.recebida { padding: 48px 20px 64px; text-align: center; }
.recebida .centro { max-width: 560px; }
.recebida .foto {
  width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 12%;
  margin: 0 auto 20px; border: 4px solid var(--linho); box-shadow: 0 10px 30px rgba(90,60,30,.15);
}
.recebida .marca { margin: 0 0 8px; }
.recebida .marca .nome { color: var(--terracota); font-size: 12px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
.recebida h1 {
  color: var(--grafite); font-family: "Playfair Display", serif; font-size: 30px; font-weight: 600;
  line-height: 1.2; margin: 0 0 14px; text-wrap: balance;
}
.recebida .prioridade {
  margin-top: 32px; padding: 26px 20px 22px; background: var(--linho); border: 1px solid var(--borda);
  border-radius: 16px; box-shadow: 0 16px 40px rgba(90,60,30,.10);
}
.recebida .prioridade h2 { font-size: 23px; margin-bottom: 10px; }
.recebida .prioridade .botao { margin: 20px auto 0; }
@media (min-width: 900px) {
  .recebida { padding: 80px 32px 96px; }
  .recebida h1 { font-size: 40px; }
  .recebida .prioridade { padding: 32px 36px 28px; }
  .recebida .prioridade h2 { font-size: 28px; }
}

/* ---------- ANIMACOES ----------
   So valem com .anima no <html>, que o anima.js coloca quando o aparelho nao
   pede "reduzir movimento". Sem a classe, tudo aparece parado e visivel. */

/* entrada suave */
.anima .surge { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.anima .surge.visivel { opacity: 1; transform: none; }

/* metodo em sequencia: passo, seta, passo, seta, passo */
.anima .passos li { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.anima .passos.visivel li { opacity: 1; transform: none; }
.anima .passos li:nth-child(2) { transition-delay: .35s; }
.anima .passos li:nth-child(3) { transition-delay: .7s; }
.anima .passos li + li::before { transform: translateX(-50%) scaleY(0); transform-origin: top; transition: transform .3s ease; }
.anima .passos.visivel li + li::before { transform: translateX(-50%) scaleY(1); }
.anima .passos li:nth-child(2)::before { transition-delay: .2s; }
.anima .passos li:nth-child(3)::before { transition-delay: .55s; }

/* frase de virada: as palavras acendem conforme a rolagem */
.trava h2.acendendo .palavra { opacity: .18; transition: opacity .25s ease; }
.trava h2.acendendo .palavra.acesa { opacity: 1; }

/* mural rolando: colunas que sobem e descem sem fim */
.mural .prints.rolando {
  columns: auto; display: flex; gap: 12px; height: 560px; overflow: hidden; cursor: pointer;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.mural .prints.rolando .coluna { flex: 1; min-width: 0; }
.mural .prints.rolando .trilho { animation: sobe 30s linear infinite; }
.mural .prints.rolando .coluna.desce .trilho { animation-name: desce; }
.mural .prints.rolando:hover .trilho, .mural .prints.pausado .trilho { animation-play-state: paused; }
@keyframes sobe { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes desce { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* ---------- DESKTOP ---------- */
@media (min-width: 900px) {
  .topo { min-height: 720px; display: flex; align-items: center; }
  /* A foto acompanha a coluna de conteudo (1200px), e nao a borda da tela:
     em tela larga ela ficava colada no canto, longe do texto. Como a borda
     direita deixa de ser a da tela, ela tambem esmaece na direita. */
  .topo .retrato {
    position: absolute; top: 0; bottom: 0; right: max(0px, calc((100% - 1200px) / 2));
    width: 50%; max-width: 680px; height: auto;
  }
  .topo .retrato img {
    object-position: 50% 20%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 84%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 16%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 84%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 16%);
    mask-composite: intersect;
  }
  .topo .centro { width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
  .topo .marca { margin-bottom: 20px; }
  .topo .marca .nome { font-size: 13px; }
  .topo h1 { font-size: 38px; line-height: 1.18; margin-bottom: 20px; }
  .topo .sub { font-size: 20px; margin-bottom: 22px; }
  .topo .fatos { gap: 8px; margin-bottom: 14px; }
  .topo .fatos li { font-size: 14px; gap: 6px; padding: 6px 12px 6px 10px; }
  .topo .prova { font-size: 14px; margin-bottom: 28px; }
  .topo .proximo { font-size: 14px; }
  a.botao b { font-size: 17px; }

  .leva, .mural, .bio, .metodo { padding: 90px 32px; }
  .beneficios { padding: 18px 0; }
  .beneficios li { font-size: 20px; }
  .beneficios li::after { margin: 0 30px; }
  .para-quem { padding: 90px 32px 16px; }
  .trava { padding: 48px 32px 90px; }
  .para-quem .centro { max-width: 1000px; display: grid; grid-template-columns: 420px 1fr; gap: 56px; align-items: center; }
  .para-quem .foto { margin: 0; aspect-ratio: 4 / 4.4; }
  .checks li { font-size: 18px; }
  .metodo .centro { max-width: 1080px; text-align: center; }
  .passos { grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: left; }
  .passos li { padding: 26px 24px 24px; }
  .passos li + li::before { content: '\2192'; left: -30px; top: 50%; transform: translateY(-50%); }
  .passos .icone { position: static; margin-bottom: 14px; }
  .metodo .resultado { max-width: 620px; margin: 0 auto 28px; font-size: 19px; }
  .metodo .botao { margin: 0 auto; }
  .chegada { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .chegada li { font-size: 15px; }
  section h2 { font-size: 36px; }
  .depoimento { padding: 32px 36px 28px 40px; }
  .depoimento blockquote { font-size: 22px; }
  .aplicacao { padding: 32px 32px 26px; }
  .aplicacao legend { font-size: 24px; }
  .mural .prints { columns: 3; column-gap: 16px; }
  .mural .prints figure { margin-bottom: 16px; }
  .mural .prints.rolando { gap: 16px; height: 680px; }
  .anima .passos li + li::before { transform: translateY(-50%) scaleX(0); transform-origin: left; }
  .anima .passos.visivel li + li::before { transform: translateY(-50%) scaleX(1); }
  .bio .centro { max-width: 1080px; display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: center; }
  .bio figure { margin: 0; }
}