/* ==========================================================================
   Casa Padrão AB · Versão Lavanderia e Passadoria
   Landing page de lançamento

   Paleta e marcas: identidade visual nova (Cadu, set/2026).
   Arquitetura de seções: igual às LPs de Cozinha e Mesa Posta.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TROCA DE MARCA
   Para trocar logotipo, monograma ou selo, faça UMA das duas coisas:

   a) substitua o arquivo em assets/marca/ mantendo o mesmo nome, ou
   b) mude o caminho aqui embaixo.

   As marcas entram por mask: só o alfa do arquivo conta, e a cor vem do CSS.
   Um arquivo serve para qualquer fundo, claro ou vinho.

   HOJE: logo refinada pelo Cadu (out/2026): logotipo, monograma AB e selo
   "Padrão" com cinco estrelas. Não veio vetor; os PNG foram extraídos da
   "Apresentação AB.pdf" na resolução máxima, com fundo transparente.
   Quando chegar o SVG, troque o arquivo e a proporção no bloco 4.
   O ?v= nos caminhos é para o navegador não servir a marca velha do cache.
   -------------------------------------------------------------------------- */
:root {
  --marca-logotipo:  url("../marca/logotipo.png?v=2");
  --marca-monograma: url("../marca/monograma.png?v=2");
  --marca-selo:      url("../marca/selo.png?v=2");
  --marca-padronagem: url("../marca/padronagem.png?v=2");   /* id-nova: ../marca/id-nova/padronagem.svg, mask-size 190px */
}

/* Marcador das listas. Era o monograma, mas o AB manuscrito da logo antiga
   com 9 pixels vira borrão. A estrela vem do selo antigo, que tem cinco. */
:root {
  --marcador: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}


/* --------------------------------------------------------------------------
   2. FONTES DA IDENTIDADE

   A ID nova especifica CoFo Glassier (títulos e destaques) e Zeitung Pro
   (geral). As duas são comerciais e exigem licença de webfont.

   Para ativá-las: coloque os arquivos .woff2 em assets/fontes/ com os nomes
   abaixo. Nada mais precisa ser mexido, porque elas já vêm na frente da pilha
   de fontes e assumem sozinhas assim que carregarem.

   Enquanto não chegam, valem os substitutos livres declarados nos tokens:
   Bodoni Moda no lugar da Glassier (mesma lógica de didone de alto contraste)
   e Jost no lugar da Zeitung Pro (sans geométrica de x-altura grande).
   -------------------------------------------------------------------------- */
/* >>> PARA ATIVAR AS FONTES DA ID: coloque os .woff2 em assets/fontes/ com
   estes nomes e apague as duas linhas de comentário que cercam o bloco. <<<

@font-face {
  font-family: "CoFo Glassier";
  src: url("../fontes/cofo-glassier.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zeitung Pro";
  src: url("../fontes/zeitung-pro-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zeitung Pro";
  src: url("../fontes/zeitung-pro-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zeitung Pro";
  src: url("../fontes/zeitung-pro-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zeitung Pro";
  src: url("../fontes/zeitung-pro-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/


/* --------------------------------------------------------------------------
   3. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Cores da identidade nova */
  --creme:      #e8dccb;
  --rosa-claro: #e1cfce;
  --rosa:       #a78083;
  --branco:     #ffffff;
  --marrom:     #725659;
  --vinho:      #3a2325;
  --preto:      #191919;

  /* Papéis */
  --fundo:        #fffbfa;
  --fundo-2:      #faf3f1;
  --tinta:        #2e2022;
  --tinta-suave:  #6b5457;
  --tinta-fraca:  #806a6d;   /* 4.86:1, era #9a8385 com 3.43 */
  --rosa-texto:   #8f676b;   /* 4.73:1, o --rosa da ID em corpo pequeno */
  --linha:        #ecdedd;
  --destaque:     var(--rosa);
  --destaque-esc: var(--marrom);

  /* Tipografia da identidade nova.
     CoFo Glassier (títulos e destaques) e Zeitung Pro (geral) são fontes
     comerciais e vêm PRIMEIRO na pilha: assim que os arquivos licenciados
     forem colocados em assets/fontes/, elas assumem sozinhas, sem mexer
     em nenhuma linha daqui. Enquanto isso valem os substitutos livres,
     escolhidos por proximidade de desenho (ver @font-face abaixo). */
  --f-caps:   "CoFo Glassier", "Bodoni Moda", "Didot", serif;   /* títulos */
  --f-serif:  "CoFo Glassier", "Bodoni Moda", Georgia, serif;   /* destaques em itálico */
  --f-corpo:  "Zeitung Pro", "Jost", system-ui, sans-serif;     /* geral */

  /* Ritmo */
  --max:      1140px;
  --max-txt:  680px;
  --gutter:   clamp(1rem, 5vw, 2.5rem);
  --secao:    clamp(4rem, 10vw, 7.5rem);
  --raio:     2px;
  --ease:     cubic-bezier(.16, .84, .32, 1);
}


/* --------------------------------------------------------------------------
   4. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

/* o navegador dá 40px de margem lateral a <figure> por padrão, o que deixava
   a foto mais estreita que o texto ao lado */
figure { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--marrom);
  outline-offset: 3px;
}

.env {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--vinho); color: var(--branco);
  padding: .75rem 1.25rem; text-decoration: none;
}
.pular:focus { left: 0; }


/* --------------------------------------------------------------------------
   4. MARCAS
   -------------------------------------------------------------------------- */
.marca {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

/* As proporções vêm do viewBox recortado de cada arquivo.
   Ao trocar uma marca, confira a proporção do SVG novo e ajuste aqui. */
.marca--logotipo {
  -webkit-mask-image: var(--marca-logotipo); mask-image: var(--marca-logotipo);
  width: clamp(104px, 22vw, 170px);
  aspect-ratio: 942 / 388;           /* antiga: 1983 / 683 · id-nova: 1251 / 264 */
}

.marca--monograma {
  -webkit-mask-image: var(--marca-monograma); mask-image: var(--marca-monograma);
  width: 40px; aspect-ratio: 1013 / 606;  /* antiga: 625 / 364 · id-nova: 810 / 770 */
}

.marca--selo {
  -webkit-mask-image: var(--marca-selo); mask-image: var(--marca-selo);
  width: clamp(58px, 9vw, 104px); aspect-ratio: 1171 / 1172;   /* antiga: 1123 / 1121 · id-nova: 1190 / 1214 */
}

/* Textura dos fundos de cor: o monograma AB da logo em trama, com as fileiras
   desencontradas. O ladrilho é um PNG em marca/padronagem.png, gerado a partir
   do monograma. Se o monograma mudar, o ladrilho precisa ser refeito.
   O AB refinado tem 17% mais tinta que o anterior; as opacidades de cada
   fundo caíram na mesma proporção para a trama não ficar mais presente. */
.padronagem {
  position: absolute; inset: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--marca-padronagem); mask-image: var(--marca-padronagem);
  -webkit-mask-size: 104px 68px; mask-size: 104px 68px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  opacity: .06;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   5. TIPOGRAFIA DE SEÇÃO
   -------------------------------------------------------------------------- */
.olho {
  font-family: var(--f-corpo);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rosa-texto);
  margin: 0 0 1.25rem;
}

/* Divisão de papéis, como a ID define: a display (Glassier) fica nos momentos
   grandes, e a Zeitung Pro cobre "textos, títulos, chamadas", ou seja, também
   os títulos menores. Didone em corpo pequeno perde o traço fino e some.

   A Bodoni Moda, substituta da Glassier, é variável no eixo óptico. Só o
   display de fato vai ao topo do eixo, onde ela fica estreita e de contraste
   alto. Quando a Glassier entrar, estas regras ficam inócuas. */
/* PESO DA FONTE DE DISPLAY, EM UM LUGAR SÓ

   A Bodoni Moda, substituta da CoFo Glassier, é variável em eixo óptico e em
   peso. No topo do eixo óptico a haste fina vira quase um fio e some na tela,
   ainda mais em corpo pequeno ou sobre fundo escuro. Então todo display da
   página usa eixo médio com peso acima do regular: mantém o contraste, que é
   a cara da Glassier, sem perder o traço.

   Quando a Glassier licenciada entrar, estas regras ficam inócuas, porque ela
   não tem eixo variável, e o desenho dela já é mais encorpado.

   Mexa aqui para engrossar ou afinar a página inteira de uma vez. */
.titulo,
.titulo em,
.heroi__titulo,
.heroi__titulo em,
.citacao blockquote,
.dores li,
.numero__valor,
.preco__valor {
  font-variation-settings: "opsz" 20, "wght" 550;
}

/* sobre o vinho o texto claro aparenta ainda mais fino, então sobe um degrau */
.citacao blockquote,
.oferta .titulo,
.oferta .titulo em,
.preco__valor {
  font-variation-settings: "opsz" 16, "wght" 660;
}

.heroi__titulo,
.heroi__titulo em {
  font-variation-settings: "opsz" 22, "wght" 600;
}

.titulo {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: .005em;
  color: var(--vinho);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.titulo em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rosa);
}

/* Era Sacramento, manuscrita, herdada das outras LPs. Saiu por dois motivos:
   ficava difícil de ler em corpo grande e não existe na identidade nova, que
   define duas tipografias e só. Agora é a Zeitung Pro, que a própria ID manda
   usar em chamadas. */
.apoio {
  font-family: var(--f-corpo);
  font-size: clamp(1.0625rem, .98rem + .55vw, 1.3125rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--marrom);
  margin: 0 0 1.75rem;
  text-wrap: balance;
}

.texto > p { margin: 0 0 1.15rem; max-width: var(--max-txt); }
.texto > p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   6. BOTÃO E PROVA
   -------------------------------------------------------------------------- */
.botao {
  display: inline-block;
  background: var(--marrom);
  color: var(--branco);
  font-family: var(--f-corpo);
  font-size: clamp(.8125rem, .78rem + .18vw, .9375rem);
  font-weight: 500;
  letter-spacing: clamp(.08em, .4vw, .13em);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.4;
  padding: clamp(.95rem, 3vw, 1.15rem) clamp(1.5rem, 5vw, 2.5rem);
  border: 0;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.botao:hover { background: var(--vinho); transform: translateY(-2px); }
.botao:active { transform: translateY(0); }

.botao--grande {
  font-size: clamp(.875rem, .8rem + .3vw, 1rem);
  padding: clamp(1.1rem, 3.4vw, 1.35rem) clamp(1.75rem, 6vw, 3rem);
}

.botao--claro { background: var(--branco); color: var(--vinho); }
.botao--claro:hover { background: var(--creme); color: var(--vinho); }

.botao--vazado {
  background: transparent;
  color: var(--marrom);
  border: 1px solid var(--rosa);
}
.botao--vazado:hover { background: var(--marrom); color: var(--branco); border-color: var(--marrom); }

.prova {
  font-size: .8125rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  margin: 1.125rem 0 0;
}


/* --------------------------------------------------------------------------
   7. HERÓI
   -------------------------------------------------------------------------- */
.heroi {
  position: relative;
  padding-block: clamp(1.75rem, 5vw, 3rem) var(--secao);
  overflow: hidden;
}

.heroi__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--marrom);
}

/* O herói é comandado pela VSL: coluna única e centrada, para o vídeo ser a
   primeira coisa que a pessoa vê. Some a foto vertical que, no celular,
   empurrava o botão para muito abaixo da dobra. */
.heroi__miolo {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

.heroi__olho {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--rosa-texto);
  margin: 0 0 1.25rem;
}

.heroi__titulo {
  font-family: var(--f-caps);
  font-weight: 400;
  font-size: clamp(1.875rem, 1.1rem + 3.4vw, 3.25rem);
  line-height: 1.1;
  color: var(--vinho);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.heroi__titulo em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rosa);
}

.heroi__miolo .apoio { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }


/* O HTML tem uma ordem só: texto (título, apoio, botão, prova) e depois o
   vídeo. O CSS é quem monta os dois arranjos.

   DESKTOP: flex de duas colunas, texto à esquerda e vídeo à direita. É flex e
   não grid de áreas de propósito: com grid, o vídeo atravessava todas as
   linhas, as linhas se abriam para acompanhar a altura dele e o resultado era
   vão enorme entre as frases e botão esticado até o pé da coluna.

   CELULAR: .heroi__texto vira display:contents, os filhos dele sobem para o
   mesmo flex do vídeo e a ordem coloca o vídeo entre o apoio e o botão. */
@media (min-width: 62rem) {
  .heroi__miolo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3rem, 6vw, 5.5rem);
    text-align: left;
    max-width: 68rem;
    margin-inline: auto;
  }

  .heroi__texto {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 34rem;
  }

  .heroi .vsl { flex: 0 0 auto; height: min(64vh, 600px); margin-bottom: 0; }

  .heroi__titulo { font-size: clamp(2.125rem, 1.1rem + 2.5vw, 3rem); }
  .heroi .apoio { max-width: 31rem; }

  /* o botão tem a largura do próprio rótulo, sem esticar */
  .heroi .botao--grande { display: inline-block; }
}

@media (max-width: 61.99rem) {
  .heroi__miolo { display: flex; flex-direction: column; }
  .heroi__texto { display: contents; }

  .heroi__olho          { order: 1; }
  .heroi__titulo        { order: 2; }
  .heroi .apoio         { order: 3; }
  .heroi .vsl           { order: 4; }
  .heroi .botao--grande { order: 5; align-self: center; }
  .heroi .prova         { order: 6; }

  /* topo apertado para a borda do botão aparecer abaixo do vídeo */
  .heroi { padding-top: 1.25rem; }
  .heroi__topo { margin-bottom: clamp(1.5rem, 5vw, 2.25rem); }
  .heroi .apoio { margin-bottom: 1.25rem; }
  .heroi .vsl { width: min(90%, 360px); height: auto; margin-bottom: 1.5rem; }
}


/* --------------------------------------------------------------------------
   VSL
   -------------------------------------------------------------------------- */
/* VSL vertical. A altura manda e a largura sai da proporção, senão em tela
   larga o vídeo passa da dobra e o botão some. */
.vsl {
  position: relative;
  aspect-ratio: 9 / 16;
  height: min(72vh, 660px);
  width: auto;
  max-width: 100%;
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--vinho);
  box-shadow: 0 18px 50px -18px rgba(58, 35, 37, .45);
}

.vsl > iframe,
.vsl > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Placeholder, sai quando o embed do Panda entrar */
.vsl__espera {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  color: var(--rosa-claro);
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(167, 128, 131, .30), transparent 62%);
}
.vsl__marca { width: 44px; opacity: .55; margin-bottom: .25rem; }
.vsl__aviso {
  font-family: var(--f-corpo);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0;
}
.vsl__nota {
  font-size: .75rem;
  color: var(--rosa);
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. FAIXA DE CITAÇÃO
   -------------------------------------------------------------------------- */
.citacao {
  position: relative;
  isolation: isolate;
  background: var(--vinho);
  color: var(--creme);
  text-align: center;
  padding-block: clamp(4.5rem, 12vw, 8rem);
  overflow: hidden;
}

/* A foto da lavanderia vira faixa deitada. Em retrato, dentro de uma coluna,
   ela ficava altíssima no celular. Aqui o recorte é o mesmo em qualquer tela
   e a altura é a da seção, não a da imagem. */
.citacao__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 30%;   /* ela está à esquerda do quadro, perto da máquina */
  z-index: -2;
}
.citacao::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58,35,37,.90), rgba(58,35,37,.82));
  z-index: -1;
}
.citacao .padronagem { color: var(--creme); opacity: .077; }

.citacao__env { position: relative; z-index: 1; }

.citacao blockquote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.875rem);
  line-height: 1.45;
  margin: 0 auto 1.5rem;
  max-width: 44rem;
  text-wrap: balance;
}

.citacao cite {
  display: block;
  font-family: var(--f-corpo);
  font-style: normal;
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rosa-claro);
}


/* --------------------------------------------------------------------------
   9. SEÇÕES DE TEXTO
   -------------------------------------------------------------------------- */
.secao { padding-block: var(--secao); }
.secao--clara { background: var(--fundo-2); }

/* Seção que continua a anterior no mesmo fundo. Usada no material de apoio,
   logo depois dos módulos: com fundo próprio, a faixa rosa que começava ali
   parecia o fim da página no celular. */
.secao--emenda { padding-top: clamp(1rem, 3vw, 2rem); }

.secao__cabeca { max-width: var(--max-txt); margin-bottom: clamp(2rem, 4vw, 3rem); }

.dupla {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .dupla { grid-template-columns: 1fr 1fr; }
  .dupla--invertida .dupla__foto { order: -1; }
}

.dupla__foto img { border-radius: var(--raio); }

/* No celular a foto em retrato ocupava quase uma tela inteira sozinha e
   empurrava o texto para longe. Abaixo de 60rem ela vira um recorte deitado,
   com o object-position mirando o rosto de cada uma. */
@media (max-width: 59.99rem) {
  .dupla__foto img,
  .bio__foto img {
    aspect-ratio: 5 / 4;
    object-fit: cover;
    width: 100%;
  }
  .dupla__foto img { object-position: 50% 16%; }
  .bio__foto img   { object-position: 50% 6%; }
  .bio__foto { max-width: none; }
  .bio__foto::after { display: none; }
}


/* --------------------------------------------------------------------------
   RECADO
   A mensagem da seguidora que abre a VSL. Fica destacada do texto corrido
   porque não é a Andrea falando, é a aluna. Barra à esquerda em vez de aspas
   decorativas, para não competir com a faixa de citação.
   -------------------------------------------------------------------------- */
.recado {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.125rem, 3vw, 1.5rem) 0 clamp(1.125rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 2rem);
  border-left: 2px solid var(--rosa);
  max-width: 44rem;
}

.recado blockquote {
  margin: 0 0 .75rem;
  font-family: var(--f-serif);
  font-variation-settings: "opsz" 20, "wght" 500;
  font-style: italic;
  font-size: clamp(1.1875rem, 1rem + 1vw, 1.625rem);
  line-height: 1.35;
  color: var(--vinho);
  text-wrap: balance;
}

.recado figcaption {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rosa-texto);
}


/* --------------------------------------------------------------------------
   10. DORES
   -------------------------------------------------------------------------- */
.dores {
  list-style: none;
  /* o parágrafo acima estava encostando no primeiro item */
  margin: clamp(2rem, 4vw, 2.75rem) 0 clamp(2rem, 4vw, 2.75rem);
  padding: 0;
  display: grid;
  gap: .875rem;
}
@media (min-width: 40rem) { .dores { grid-template-columns: 1fr 1fr; } }

.dores li {
  position: relative;
  padding-left: 1.625rem;
  font-family: var(--f-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--marrom);
}
.dores li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 10px; height: 10px;
  background-color: var(--rosa);
  clip-path: var(--marcador);
}


/* --------------------------------------------------------------------------
   11. NÚMEROS
   -------------------------------------------------------------------------- */
.numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linha);
  border-block: 1px solid var(--linha);
}
@media (min-width: 48rem) { .numeros { grid-template-columns: repeat(4, 1fr); } }

.numero {
  background: var(--fundo);
  padding: clamp(1.75rem, 4vw, 2.75rem) 1rem;
  text-align: center;
}
.numero__valor {
  display: block;
  font-family: var(--f-caps);
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1;
  color: var(--marrom);
  margin-bottom: .5rem;
}
.numero__rotulo {
  display: block;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}


/* --------------------------------------------------------------------------
   12. MÓDULOS
   -------------------------------------------------------------------------- */
.modulos { border-top: 1px solid var(--linha); margin-top: clamp(2rem, 4vw, 3rem); }

.modulo { border-bottom: 1px solid var(--linha); }

.modulo__botao {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(.875rem, 3vw, 1.75rem);
  padding: clamp(1.25rem, 3vw, 1.75rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--vinho);
  transition: color .3s var(--ease);
}
.modulo__botao:hover { color: var(--rosa); }

.modulo__n {
  font-family: var(--f-corpo);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--rosa);
  min-width: 1.5rem;
}

.modulo__nome {
  font-family: var(--f-corpo);
  font-weight: 500;
  font-size: clamp(1rem, .92rem + .4vw, 1.25rem);
  line-height: 1.3;
}
.modulo__aulas {
  display: block;
  font-family: var(--f-corpo);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-top: .35rem;
}

.modulo__mais {
  position: relative;
  width: 15px; height: 15px;
  flex-shrink: 0;
}
.modulo__mais::before,
.modulo__mais::after {
  content: "";
  position: absolute; inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform .4s var(--ease);
}
.modulo__mais::after { transform: rotate(90deg); }
[aria-expanded="true"] .modulo__mais::after { transform: rotate(0deg); }

.modulo__painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.modulo__painel[data-aberto="true"] { grid-template-rows: 1fr; }
.modulo__painel > div { overflow: hidden; }

/* Duas colunas com `columns`, não com grid: a aula é uma sequência numerada e
   precisa descer a primeira coluna inteira antes de passar para a segunda.
   Com grid a leitura ia na horizontal e a numeração aparecia embaralhada. */
.aulas {
  list-style: none;
  margin: 0;
  padding: 0 0 1.5rem clamp(0px, 3vw, 3.25rem);
}
@media (min-width: 52rem) {
  .aulas { columns: 2; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
}

.aulas li {
  display: flex;
  gap: .75rem;
  margin-bottom: .5rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.aula__n {
  flex: 0 0 auto;
  min-width: 2.5rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--rosa-texto);
  padding-top: .18em;
}

/* a aula de abertura não abre, então não tem botão nem sinal de mais */
.modulo--abertura .modulo__botao--fixo { cursor: default; color: var(--tinta-suave); }
.modulo--abertura .modulo__nome { color: var(--tinta-suave); }


/* --------------------------------------------------------------------------
   13. CONVIDADOS
   -------------------------------------------------------------------------- */
.convidados {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 52rem) { .convidados { grid-template-columns: repeat(3, 1fr); } }

.convidado {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(1.75rem, 4vw, 2.25rem);
}
.convidado__nome {
  font-family: var(--f-corpo);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--vinho);
  margin: 0 0 .35rem;
}
.convidado__papel {
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rosa-texto);
  margin: 0 0 1.125rem;
}
.convidado p:last-child { margin: 0; font-size: .9375rem; color: var(--tinta-suave); }


/* --------------------------------------------------------------------------
   14. OFERTA
   -------------------------------------------------------------------------- */
.oferta {
  position: relative;
  background: var(--vinho);
  color: var(--creme);
  padding-block: var(--secao);
  overflow: hidden;
}
.oferta .padronagem { color: var(--creme); opacity: .068; }
.oferta__env { position: relative; z-index: 1; }

.oferta .olho { color: var(--rosa-claro); }
.oferta .titulo { color: var(--branco); }
.oferta .titulo em { color: var(--rosa-claro); }

.oferta__caixa {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(232, 220, 203, .2);
  border-radius: var(--raio);
  padding: clamp(1.75rem, 5vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 56rem) {
  .oferta__caixa { grid-template-columns: 1.1fr .9fr; align-items: center; }
}

.inclui { list-style: none; margin: 0; padding: 0; display: grid; gap: .8125rem; }
.inclui li {
  position: relative;
  padding-left: 1.75rem;
  font-size: .9375rem;
  line-height: 1.55;
}
.inclui li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 10px; height: 10px;
  background-color: var(--rosa-claro);
  clip-path: var(--marcador);
}

.preco { text-align: center; }

.preco__tarja {
  display: inline-block;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vinho);
  background: var(--creme);
  padding: .5rem 1rem;
  border-radius: var(--raio);
  margin-bottom: 1.5rem;
}

.preco__valor {
  font-family: var(--f-caps);
  font-size: clamp(3rem, 2rem + 5vw, 4.5rem);
  line-height: 1;
  color: var(--branco);
  margin: 0;
}
.preco__valor sup {
  font-family: var(--f-corpo);
  font-size: .26em;
  font-weight: 500;
  vertical-align: super;
  letter-spacing: .05em;
  margin-right: .08em;   /* somado ao espaço dentro do sup, dá o mesmo vão de antes */
}
/* o parcelado é o número grande, o à vista fica abaixo e menor */
.preco__parcelas {
  font-family: var(--f-corpo);
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--rosa-claro);
  margin: 0 0 .15rem;
}

.preco__cents { font-size: .45em; letter-spacing: 0; }

.preco__vista {
  font-size: .875rem;
  color: var(--rosa-claro);
  opacity: .85;
  margin: .6rem 0 1.75rem;
}
.preco .botao { width: 100%; }
.preco .prova { color: var(--rosa-claro); opacity: .85; }


/* --------------------------------------------------------------------------
   15. GARANTIA
   -------------------------------------------------------------------------- */
.garantia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(232, 220, 203, .2);
}
.garantia__selo {
  flex-shrink: 0;
  color: var(--rosa-claro);
}
.garantia p { margin: 0; font-size: .9375rem; max-width: 40rem; color: var(--rosa-claro); }
.garantia strong { color: var(--branco); font-weight: 500; }


/* --------------------------------------------------------------------------
   16. VENDA CRUZADA
   -------------------------------------------------------------------------- */
.cruzada {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 52rem) { .cruzada { grid-template-columns: 1fr 1fr; } }

.cruzada__item {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--branco);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.cruzada__item h3 {
  font-family: var(--f-corpo);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--vinho);
  margin: 0;
}
.cruzada__item p { margin: 0; font-size: .9375rem; color: var(--tinta-suave); flex-grow: 1; }


/* --------------------------------------------------------------------------
   17. QUEM ENSINA
   -------------------------------------------------------------------------- */
.bio__foto { position: relative; max-width: 380px; }
.bio__foto img { border-radius: var(--raio); position: relative; z-index: 1; }
.bio__foto::after {
  content: "";
  position: absolute;
  inset: -1.25rem -1.25rem auto auto;
  width: 60%; height: 55%;
  background: var(--creme);
  border-radius: var(--raio);
  z-index: 0;
}


/* --------------------------------------------------------------------------
   18. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--linha); margin-top: clamp(2rem, 4vw, 3rem); }

.faq details { border-bottom: 1px solid var(--linha); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.125rem, 3vw, 1.5rem) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-corpo);
  font-weight: 500;
  font-size: clamp(.9375rem, .9rem + .3vw, 1.125rem);
  color: var(--vinho);
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--rosa); }

.faq summary .modulo__mais { color: var(--rosa); }
.faq details[open] summary .modulo__mais::after { transform: rotate(0deg); }

.faq details > p {
  margin: 0 0 1.5rem;
  max-width: 46rem;
  color: var(--tinta-suave);
  font-size: .9375rem;
}


/* --------------------------------------------------------------------------
   19. FECHAMENTO
   -------------------------------------------------------------------------- */
.fechamento {
  position: relative;
  text-align: center;
  background: var(--rosa-claro);
  padding-block: var(--secao);
  overflow: hidden;
}
.fechamento .padronagem { color: var(--marrom); opacity: .11; }
.fechamento__env { position: relative; z-index: 1; }
.fechamento .apoio { color: var(--marrom); }
.fechamento .titulo { margin-inline: auto; max-width: 30rem; }


/* --------------------------------------------------------------------------
   20. RODAPÉ
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--vinho);
  color: var(--rosa-claro);
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
  font-size: .8125rem;
}
.rodape__env {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.rodape a { color: var(--creme); text-decoration: none; border-bottom: 1px solid transparent; }
.rodape a:hover { border-bottom-color: currentColor; }
.rodape__legal { margin: 0; opacity: .7; }


/* --------------------------------------------------------------------------
   21. ENTRADA SUAVE
   -------------------------------------------------------------------------- */
/* O estado escondido só existe depois que o JS confirma que vai animar, por
   isso a classe js-revela no <html>. Sem JS, ou se o IntersectionObserver não
   disparar, o conteúdo nasce visível em vez de ficar invisível para sempre. */
.js-revela [data-revela] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js-revela [data-revela].vista { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-revela [data-revela] { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   22. BARRA FIXA DE COMPRA, SÓ NO CELULAR
   A maior parte do tráfego abre no celular e a página é longa. Depois que o
   herói sai da tela, o preço e o botão passam a acompanhar a rolagem. Some
   quando a seção de oferta aparece, para não competir com ela.
   -------------------------------------------------------------------------- */
.barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem var(--gutter);
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--vinho);
  border-top: 1px solid rgba(232, 220, 203, .18);
  box-shadow: 0 -10px 30px -12px rgba(58, 35, 37, .5);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}
.barra[hidden] { display: none; }
.barra.vista { transform: none; }

.barra__texto { display: flex; flex-direction: column; gap: .15rem; line-height: 1.2; min-width: 0; }

.barra__titulo {
  font-family: var(--f-corpo);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--branco);
}

.barra__nota {
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rosa-claro);
}

.barra__botao {
  background: var(--branco);
  color: var(--vinho);
  padding: .8rem 1.5rem;
  font-size: .8125rem;
  white-space: nowrap;
}
.barra__botao:hover { background: var(--creme); color: var(--vinho); transform: none; }

/* Só no celular: no desktop a página inteira já cabe com o CTA visível */
@media (min-width: 48rem) {
  .barra { display: none !important; }
}

/* Espaço para a barra não tapar o fim da página */
@media (max-width: 47.99rem) {
  .rodape { padding-bottom: calc(clamp(2.5rem, 6vw, 3.5rem) + 4.5rem); }
}


/* --------------------------------------------------------------------------
   23. MATERIAL DE APOIO
   A capa de cada PDF entra pequena e inteira, ao lado do texto. Sobrepor as
   capas ficou bonito e inútil: elas são muito limpas e o título de uma some
   atrás da outra.
   -------------------------------------------------------------------------- */
.materiais {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 56rem) { .materiais { grid-template-columns: 1fr 1fr; } }

.material {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(1.125rem, 3vw, 1.5rem);
}

.material__capa {
  flex: 0 0 auto;
  width: clamp(74px, 15vw, 94px);
  aspect-ratio: 300 / 533;
  object-fit: cover;
  border-radius: 1px;
  box-shadow: 0 6px 18px -8px rgba(58, 35, 37, .45);
}

/* o que ainda não tem capa entra com o monograma, no mesmo recorte */
.material__capa--marca {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  color: var(--rosa);
}
.material__capa--marca .marca--monograma { width: 30px; }

.material__nome {
  font-family: var(--f-corpo);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--vinho);
  margin: 0 0 .5rem;
}

.material__texto p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

.material__marca {
  margin-top: .75rem !important;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rosa-texto) !important;
}

/* o mais pedido ganha um fio de destaque, sem virar selo de promoção */
.material--pedido { border-color: var(--rosa); }