/* ============================================================
   LP DE AFILIADOS — /afiliacao
   CSS único, mobile-first, sem framework.
   Ordem: fonte -> tokens -> reset -> base -> componentes -> seções

   Repete @font-face e :root de propósito, como arvore-links.css.
   É a convenção do repo (ver CLAUDE.md): uma requisição de CSS por
   página, ao custo de manter a paleta em mais de um lugar.

   ⚠️ Ao mudar paleta ou tipografia, altere TODAS as folhas.
      A fonte de verdade das cores é o BRAND.md.
   ============================================================ */


/* ------------------------------------------------------------
   0. FONTE — Poppins, a mesma da marca, auto-hospedada.
   Subset latin, 3 pesos, 23 KB. Ver CLAUDE.md > Tipografia.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700.woff2') format('woff2');
}


/* ------------------------------------------------------------
   1. TOKENS — espelho do :root de style.css.
   Camada 1 = paleta da marca. Camada 2 = papéis semânticos.
   Só a camada 2 é consumida pelo resto do arquivo.
   ------------------------------------------------------------ */
:root {
  --marca-magenta:       #832D53;
  --marca-magenta-esc:   #6B2444;
  --marca-rosa-amaranto: #E78FAE;
  --marca-rosa-suave:    #F8CAE4;
  --marca-coral:         #FF8A5B;
  --marca-laranja:       #FF6D32;
  --marca-lilas:         #B5ADEA;
  --marca-lavanda:       #D3CEF2;
  --marca-verde-olivina: #ACC693;
  --marca-verde-cha:     #CDDDBE;
  --marca-preto:         #292A32;
  --marca-branco:        #FFFFFF;

  --cor-fundo:          var(--marca-branco);
  --cor-superficie:     #FDF7FA;
  --cor-borda:          var(--marca-rosa-suave);
  --cor-texto:          var(--marca-preto);
  --cor-texto-suave:    #6B6C77;
  --cor-accent:         var(--marca-magenta);
  --cor-accent-hover:   var(--marca-magenta-esc);
  --cor-accent-texto:   var(--marca-branco);

  --fonte-base: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: var(--fonte-base);

  --fs-h1:    clamp(2rem,   6.5vw, 3.25rem);
  --fs-h2:    clamp(1.5rem, 5vw,   2.25rem);
  --fs-h3:    clamp(1.1rem, 3vw,   1.25rem);
  --fs-body:  clamp(1rem,   2.6vw, 1.125rem);
  --fs-small: 0.875rem;

  --gap:            1rem;
  --gap-lg:         1.5rem;
  --secao-py:       clamp(3rem, 10vw, 6rem);
  --container-max:  1120px;
  --container-px:   1.25rem;

  --raio:      14px;
  --raio-btn:  100px;

  --transicao: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ------------------------------------------------------------
   2. RESET mínimo
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-base);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

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

a { color: inherit; text-decoration: none; }

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


/* ------------------------------------------------------------
   3. LAYOUT E TIPOGRAFIA DE SEÇÃO
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.section { padding-block: var(--secao-py); }

.section__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--gap);
  color: var(--cor-accent);
}

.section__lead {
  color: var(--cor-texto-suave);
  max-width: 62ch;
  margin-bottom: var(--gap-lg);
}

/* Blocos de texto corrido (Quem somos, Comunidade).
   62ch é o limite confortável de leitura; acima disso o olho
   perde a linha ao voltar para a esquerda. */
.prosa {
  display: grid;
  gap: var(--gap);
  max-width: 62ch;
  color: var(--cor-texto-suave);
}


/* ------------------------------------------------------------
   4. BOTÃO — idêntico ao da LP, para as páginas não divergirem.
   Mínimo de 56px de altura (alvo de toque).
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0.9rem 2rem;
  border: 0;
  border-radius: var(--raio-btn);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transicao), background-color var(--transicao),
              box-shadow var(--transicao);
  -webkit-tap-highlight-color: transparent;
}

.btn--primary {
  background: var(--cor-accent);
  color: var(--cor-accent-texto);
  box-shadow: 0 8px 24px -8px rgba(131, 45, 83, 0.5);
}

/* :hover só onde existe mouse — evita estado "grudado" no touch */
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--cor-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(131, 45, 83, 0.65);
  }
}

.btn:active { transform: scale(0.98); }

.btn--block { width: 100%; }


/* ------------------------------------------------------------
   5. HERO — duas colunas que viram uma sozinhas.
   auto-fit + minmax faz a quebra sem media query: abaixo de
   ~740px de container as colunas não cabem e empilham.
   ------------------------------------------------------------ */
.hero {
  padding-block: clamp(2rem, 7vw, 4rem);
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,  var(--marca-lavanda),    transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 15%, var(--marca-rosa-suave), transparent 60%),
    var(--cor-fundo);
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: var(--gap-lg);
  align-items: center;
}

.hero__logo {
  width: clamp(150px, 40vw, 210px);
  height: auto;
  margin-bottom: var(--gap);
}

.hero__eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-accent);
  margin-bottom: 0.6rem;
}

.hero__title {
  font-size: var(--fs-h1);
  margin-bottom: var(--gap);
}

.hero__subtitle {
  color: var(--cor-texto-suave);
  max-width: 46ch;
  margin-bottom: var(--gap-lg);
}

.hero__note {
  font-size: var(--fs-small);
  color: var(--cor-texto-suave);
  margin-top: 0.75rem;
}

/* A foto é retrato 2:3, mas 2:3 na largura do celular ocupa meia
   tela de altura. O 4/5 encurta sem distorcer, e o object-position
   puxa o enquadramento para baixo — é onde estão o rosto e o
   produto; o que sai do corte é o rosa vazio do topo. */
.hero__figura {
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
}

.hero__figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 58%;
}


/* ------------------------------------------------------------
   6. SEÇÃO CLARA — alterna com o branco para separar as dobras
   sem precisar de borda ou título maior.
   ------------------------------------------------------------ */
.section--clara {
  background: var(--cor-superficie);
  border-block: 1px solid var(--cor-borda);
}


/* ------------------------------------------------------------
   7. BLOCO IMAGEM + TEXTO — o miolo da página.
   Cada dobra é um par: uma foto e a descrição ao lado, com a
   imagem trocando de lado a cada bloco.

   No HTML o TEXTO vem sempre antes da imagem, como na referência.
   No celular, onde as colunas empilham, cada dobra lê título ->
   texto -> foto. A ordem contrária parecia melhor no papel, mas
   colava a foto do hero na foto da dobra seguinte: duas imagens
   grandes em sequência, sem nada entre elas.

   A alternância é só do desktop, e é onde entra a única media
   query desta folha: ordenar colunas não sai de clamp() nem de
   auto-fit.
   ------------------------------------------------------------ */
.bloco {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.bloco__figura {
  position: relative;
  margin: 0;
}

/* Forma colorida deslocada atrás da foto — é o que dá ritmo
   visual à sequência de blocos. Usa os tons de apoio da marca,
   que segundo o BRAND.md só podem aparecer como superfície,
   nunca como tinta de texto. */
.bloco__figura::before {
  content: "";
  position: absolute;
  inset: auto -0.9rem -0.9rem auto;
  width: 60%;
  height: 60%;
  border-radius: var(--raio);
  background: var(--forma-cor, var(--marca-lavanda));
}

.bloco--lavanda { --forma-cor: var(--marca-lavanda); }
.bloco--rosa    { --forma-cor: var(--marca-rosa-suave); }
.bloco--verde   { --forma-cor: var(--marca-verde-cha); }

/* Quadrado, e não o 4/5 das fotos originais: em retrato a imagem
   comia quase toda a altura da tela no desktop, e a referência usa
   proporção larga. O corte quadrado tira faixa de cima e de baixo —
   nas três fotos o produto está no meio, então não perde nada. */
.bloco__figura img {
  position: relative;      /* sobe acima da forma colorida */
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 48%;
  border-radius: var(--raio);
}

.bloco__titulo {
  font-size: var(--fs-h2);
  margin-bottom: var(--gap);
  color: var(--cor-accent);
}

.bloco__texto p {
  color: var(--cor-texto-suave);
  max-width: 52ch;
}

.bloco__texto p + p { margin-top: var(--gap); }

@media (min-width: 860px) {
  .bloco { grid-template-columns: 1fr 1fr; }

  /* No DOM o texto vem primeiro. No desktop a foto volta para a
     esquerda... */
  .bloco__figura { order: -1; }

  /* ...menos nos blocos invertidos, onde ela fica à direita.
     Especificidade maior, então vence sem !important. */
  .bloco--invertido .bloco__figura { order: 1; }
}


/* ------------------------------------------------------------
   8. LISTA DE BENEFÍCIOS — os 6 itens, dentro da coluna de texto.
   Ícone em SVG inline, e não emoji: emoji muda de desenho em cada
   sistema e não aceita a cor da marca.
   ------------------------------------------------------------ */
.beneficios {
  display: grid;
  gap: 0.9rem;
  margin-top: var(--gap-lg);
}

.beneficios li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--cor-texto-suave);
}

.beneficios svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 0.2rem;
  fill: none;
  stroke: var(--cor-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.beneficios strong {
  color: var(--cor-texto);
  font-weight: 600;
}


/* ------------------------------------------------------------
   9. FAQ — <details>/<summary> nativo.
   Acordeão sem uma linha de JS, navegável por teclado de graça.
   Sem script, as respostas continuam abríveis.
   ------------------------------------------------------------ */
.faq {
  max-width: 62ch;
  border-top: 1px solid var(--cor-borda);
}

.faq__item { border-bottom: 1px solid var(--cor-borda); }

.faq__item summary {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 1rem 2.5rem 1rem 0;
  position: relative;
  font-weight: 600;
  color: var(--cor-texto);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

/* Remove o triângulo padrão nos dois motores */
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }

/* O sinal é desenhado com duas barras em vez de um caractere "+":
   assim ele gira na abertura, e não depende de fonte para alinhar. */
.faq__item summary::after,
.faq__item summary::before {
  content: "";
  position: absolute;
  right: 0.5rem;
  width: 14px;
  height: 2px;
  background: var(--cor-accent);
  transition: transform var(--transicao), opacity var(--transicao);
}

.faq__item summary::before { transform: rotate(90deg); }
.faq__item[open] summary::before { transform: rotate(0deg); opacity: 0; }

.faq__resposta {
  padding: 0 0 1.25rem;
  color: var(--cor-texto-suave);
}


/* ------------------------------------------------------------
   10. CTA FINAL E RODAPÉ
   ------------------------------------------------------------ */
.section--cta {
  background: var(--cor-superficie);
  border-block: 1px solid var(--cor-borda);
  text-align: center;
}

.section--cta .section__lead {
  margin-inline: auto;
  text-align: center;
}

.footer {
  padding-block: var(--gap-lg);
  background: var(--cor-fundo);
  text-align: center;
}

.footer__text {
  font-size: var(--fs-small);
  color: var(--cor-texto-suave);
}


/* ------------------------------------------------------------
   11. CTA STICKY — só em mobile. A classe .is-visible é adicionada
   pelo JS quando o hero sai da tela.
   ------------------------------------------------------------ */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  padding: 0.75rem var(--container-px);
  /* A barra encosta na base: soma o inset do iPhone ao próprio
     padding, senão o botão fica embaixo da barra de gestos. */
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--cor-borda);
  transform: translateY(110%);
  transition: transform var(--transicao);
}

.sticky-cta.is-visible { transform: translateY(0); }

/* Acima de 768px o botão do hero e o do fim já bastam. */
@media (min-width: 768px) {
  .sticky-cta { display: none; }
}


/* ------------------------------------------------------------
   12. REVEAL — classes adicionadas pelo próprio JS.
   Sem JS nada some: o estado inicial só existe com .js-reveal.
   ------------------------------------------------------------ */
.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.js-reveal.is-in {
  opacity: 1;
  transform: none;
}