/* =========================================================
   Método AD — Ana Duarte
   Base = mobile  |  600px = tablet  |  1024px = desktop
   ========================================================= */

:root {
  --azul:    #243A4A;   /* primária */
  --azul-2:  #1D3B4C;   /* acento / degradê */
  --azul-3:  #427D9F;   /* azul claro (degradê dos títulos/números) */
  --preto:   #1D1D1B;
  --branco:  #ECECEC;
  --creme:   #F4F3F2;
  --fundo:   #DEDEDE;
  --verde-1: #2E7D32;   /* botão Cor1 */
  --verde-2: #91C293;   /* botão Cor2 */
  --estrela: #F5A623;

  --max:    1140px;     /* largura máxima do conteúdo */
  --max-n:  800px;      /* largura máxima da seção de conteúdo (sec2) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Lenis cuida da suavização da rolagem */
html, body { width: 100%; overflow-x: hidden; }
html { scroll-behavior: auto; }

body {
  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  color: var(--preto);
  background: var(--fundo);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

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

/* =========================================================
   Ruído animado (film grain) + utilidades + animações de entrada
   ========================================================= */
.noise {
  display: block;
  width: 100vw;
  height: 100vh;
  opacity: .09;
  background-image: url('img/ruido-animado.gif');
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: plus-lighter;
  /* o fiapo de 1px nas seções é resolvido pela regra `section:not(.hero)` (margin -1px) */
}

/* utilidades de quebra de texto */
.text-warped { text-wrap: nowrap; }
.text-balance { text-wrap: balance; }

/* animação de entrada — .ativo é adicionada ao entrar na viewport (ScrollTrigger) */
.scl { transform: translate(-180px, 0); opacity: 0; filter: blur(10px); transition: .5s ease; }
.scr { transform: translate(180px, 0);  opacity: 0; filter: blur(10px); transition: .5s ease; }
.sct { transform: translate(0, -180px); opacity: 0; filter: blur(10px); transition: .5s ease; }
.scb { transform: translate(0, 180px);  opacity: 0; filter: blur(10px); transition: .5s ease; }
.scl.ativo, .scr.ativo, .sct.ativo, .scb.ativo {
  transform: translate(0, 0);
  opacity: 1;
  filter: blur(0);
}

/* Cobre o fiapo de 1px entre seções (subpixel mostrando o fundo do body em
   alturas fracionárias). 1px de sobreposição — invisível, sem stacking context.
   O hero é exceto: usa margin-bottom próprio para o straddle. */
section:not(.hero) { margin-bottom: -1px; }

/* ---------- Container ---------- */
.container {
  width: 90%;
  margin-inline: auto;
}
/* Acima de 1366px: largura máxima fixa.  Abaixo: 90% */
@media (min-width: 1366px) {
  .container          { width: 100%; max-width: var(--max); }
  .container--narrow  { max-width: var(--max-n); }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  background-color: var(--fundo);
  background-repeat: no-repeat;
  /* mobile: imagem 100% da largura, ancorada embaixo */
  background-image: url('img/ad-1sec-mobile.webp');
  background-position: center bottom;
  background-size: 100% auto;
  padding-top: 30px;
  /* padding-bottom em % mantém a foto sempre enquadrada */
  padding-bottom: 112%;
  /* espaço claro onde o título da seção 2 sobe */
  margin-bottom: 270px;
}

/* Barra decorativa no topo da hero */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;                 /* mobile */
  z-index: 3;
  background: linear-gradient(90deg, #95A6B0 0%, #243A4A 39.97%, #95A6B0 73%, #243A4A 100%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
}

.hero__container {
  position: relative;
  z-index: 2;
  display: flex;
}

/* Cartão de vidro (glassmorphism) */
.glass {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  padding: 0;             /* mobile */
  text-align: center;
  align-items: center;
  background: rgba(255, 255, 255, .09);
  backdrop-filter: blur(7.6px);
  -webkit-backdrop-filter: blur(7.6px);
}

.glass__logo { width: 100%; display: flex; justify-content: center; }
.logo { width: 280px; height: auto; }   /* mobile */

.glass__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.headline {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--azul-2);   /* cor padrão dos títulos */
  letter-spacing: -.01em;
}
.headline .grad {
  font-weight: 900;
  background: linear-gradient(93deg, var(--azul) 2%, var(--azul-2) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lead {
  font-size: 16px;
  line-height: 1.4;
  color: var(--preto);
  font-weight: 400;
}

/* =========================================================
   BOTÃO (.botao-degrade — padrão Elementor do cliente)
   ========================================================= */
.botao-degrade {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 553px;
  min-height: 64px;
  padding: 16px 28px;
  text-decoration: none;
  animation: brilho 3.4s infinite;
  background-image: linear-gradient(45deg, var(--verde-1), var(--verde-2), var(--verde-1), var(--verde-2));
  background-size: 400% 200%;
  border-radius: 50px;
  transform: scale(1);
  transition: .5s;
  border: 1px solid #fff;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25));
}
.botao-degrade span {
  color: var(--branco) !important;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: center;   /* centraliza o texto quando quebra em 2 linhas (mobile) */
}
.botao-degrade:hover { transform: scale(1.05); transition: .5s; }

@keyframes brilho {
  0%   { background-position: 0   0; }
  100% { background-position: 100% 0; }
}

/* =========================================================
   SEÇÃO 2
   ========================================================= */
.sec2 {
  position: relative;
  background: var(--azul);
  padding-top: 0;
  padding-bottom: 0px;
  /* a linha-acento do topo agora é o ::before em degradê */
}

/* Barra decorativa no rodapé da seção 2 (espelha o ::before do hero) */
.sec2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;                 /* mobile */
  z-index: 1;                  /* fica atrás do card-lista (efeito straddle) */
  background: linear-gradient(90deg, #95A6B0 0%, #243A4A 39.97%, #95A6B0 73%, #243A4A 100%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
}
.sec2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;                 /* mobile */
  z-index: 3;
  background: linear-gradient(90deg, #95A6B0 0%, #243A4A 39.97%, #95A6B0 73%, #243A4A 100%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
}

.sec2__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
}

.sec2__block { width: 100%; }

.sec2__title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  text-align: center;
  color: var(--azul-2);   /* cor padrão dos títulos */
  /* sobe o título para o fundo claro; o card-lista atravessa a borda */
  margin-top: -370px;
  margin-bottom: -20px;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Card lista */
.card-lista {
  list-style: none;
  background: var(--creme);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 5px rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;   /* ativa o z-index abaixo */
  z-index: 20;
}
.card-lista li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.li-arrow { flex: 0 0 auto; width: 26px; margin-top: 2px; }
.li-arrow svg { width: 100%; height: auto; }
.card-lista p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--azul);
  font-weight: 400;

}
.card-lista strong { font-weight: 900; }

/* Parágrafo intermediário */
.sec2__intro {
  font-size: 16px;
  line-height: 1.5;
  color: var(--creme);
  text-align: center;
  font-weight: 400;
}
.sec2__intro strong { font-weight: 700; }

/* Card depoimento */
.card-depoimento {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 5px rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: -150px;
  z-index: 20;
}
.dep-quote {
  position: absolute;
  top: -33px;
  left: -21px;
  width: 80px;
  height: 80px;
  z-index: 2;
  pointer-events: none;
}
.card-depoimento blockquote {
  font-size: 16px;
  line-height: 1.5;
  color: var(--azul);
  font-weight: 400;
}
.dep-name {
  font-weight: 900;
  font-size: 16px;
  color: var(--azul);
}
.dep-stars {
  font-size: 16px;
  color: var(--estrela);
  letter-spacing: 2px;
}

/* =========================================================
   SEÇÃO 3
   ========================================================= */
.sec3 {
  position: relative;
  overflow: hidden;
  /* fundo claro + clínica desfocada ancorada embaixo */
  background: var(--creme) url('img/bg-03-tablet.webp') no-repeat center bottom;
  background-size: 100% auto;
  padding-top: 150px;     /* espaço pro card de depoimento sobreposto */
  padding-bottom: 0;
}

/* leve clareado vindo da seção 2 (escura) */
.sec3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 240px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #ddd, rgba(221, 221, 221, 0));
}

.sec3__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Card azul-escuro */
.sec3__card {
  background: var(--azul-2);
  border-radius: 30px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;               /* gap logo ↔ lista (mobile/tablet) */
  width: 100%;
  margin-top: 50px;
}
.sec3__title { width: 194px; height: auto; }

.sec3__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.sec3__list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.sec3__arrow { flex: 0 0 auto; width: 30px; height: 30px; }
.sec3__list p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--branco);
  font-weight: 400;
}
.sec3__list strong { font-weight: 700; }

/* Foto da nutri — em fluxo (mobile/tablet), centralizada abaixo do card */
.sec3__nutri {
  position: relative;
  z-index: 1;
  display: block;
  width: 320px;
  max-width: 90%;
  height: auto;
  margin: 24px auto 0;
}

/* =========================================================
   SEÇÃO 4 — provas / depoimentos
   ========================================================= */
.sec4 {
  position: relative;
  overflow: hidden;
  background: var(--creme) url('img/bg-sec3-wide.webp') no-repeat top center;
  background-size: 100% auto;
  padding: 72px 0;
}

/* barra decorativa no topo (mesma da seção 2) */
.sec4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;                 /* mobile */
  z-index: 1;
  background: linear-gradient(90deg, #95A6B0 0%, #243A4A 39.97%, #95A6B0 73%, #243A4A 100%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
}

/* notch decorativo no topo (com o "v" animado) */
.sec4__divisor {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: unset;
  z-index: 3;
}
.sec4__divisor #seta {
  animation: mover 2s infinite;
}
@keyframes mover {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(0px); }
}

/* notch só aparece no desktop (escondido a partir do tablet) */
@media (max-width: 1023px) {
  .sec4__divisor { display: none; }
}

.sec4__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Cada bloco de prova (empilhado no mobile) */
/* Mobile (base): o card branco é o .dep; texto/print e foto empilham dentro. */
.dep {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 5px rgba(0, 0, 0, .1);
  padding: 32px;
}
/* dep2: print em cima, foto embaixo */
.dep--print { padding: 16px; flex-direction: column-reverse; }

/* wrapper de conteúdo (o branco é do .dep agora) */
.dep__card {
  position: static;
  background: transparent;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dep__quote {
  position: absolute;
  top: -26px;
  left: -16px;
  width: 64px;
  height: 64px;
  z-index: 4;
  pointer-events: none;
}
.dep__card blockquote { display: flex; flex-direction: column; gap: 12px; }
.dep__card blockquote p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--azul);
  font-weight: 400;
}
.dep__name { font-weight: 900; font-size: 16px; color: var(--azul); }
.dep__stars { font-size: 16px; color: var(--estrela); letter-spacing: 2px; }

/* Foto de resultado — <picture> responsivo, dentro do card */
.dep__photo {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
}
.dep__photo img { display: block; width: 100%; height: auto; }

/* Print de WhatsApp dentro do card (prova3) */
.dep__chat {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Mobile: foto do dep2 em retrato (recorte centro-centro) */
@media (max-width: 599px) {
  .dep--print .dep__photo { aspect-ratio: 298 / 381; }
  .dep--print .dep__photo img { height: 100%; object-fit: cover; object-position: center; }
}

/* =========================================================
   SEÇÃO 5 — as 4 fases
   ========================================================= */
.sec5 {
  position: relative;
  background: linear-gradient(to bottom, var(--creme), #ddd);
  padding: 64px 0 50px;   /* mobile */
}
.sec5__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sec5__title {
  font-family: 'Playfair Display', serif;   /* substituta de Casanova */
  font-weight: 400;
  font-size: 26px;
  line-height: 1.4;
  text-align: center;
  color: var(--azul);
}

/* grade das fases */
.fases {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27px;
}
/* glow elíptico atrás dos cards */
.fases::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 92%;
  background: radial-gradient(ellipse at center, rgba(190, 190, 190, .55), rgba(190, 190, 190, 0) 70%);
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
}

/* card de fase (mobile/tablet: número à esquerda, texto à direita) */
.fase {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  padding: 16px;
  border: 1px solid transparent;          /* espaço pra borda em degradê */
  border-radius: 16px;
  /* fundo do card (padding-box) + borda em degradê (border-box) */
  background:
    linear-gradient(to bottom, var(--creme), #e8e8e8) padding-box,
    linear-gradient(to bottom, var(--azul), rgba(86, 138, 176, 0)) border-box;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .15);
}
.fase__num,
.fase__title {
  font-weight: 900;
  line-height: 1.19;
  background: linear-gradient(to right, var(--azul), var(--azul-3, #427d9f) 61.5%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.fase__num { font-size: 28px; white-space: nowrap; }   /* mobile (43px ≥600px) */
.fase__body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 0; min-width: 0; }
.fase__title { font-size: 20px; }
.fase__desc {
  font-size: 18px;
  line-height: 1.4;
  color: var(--preto);
  font-weight: 400;
}

/* =========================================================
   SEÇÃO 6 — o que muda (timeline)
   ========================================================= */
.sec6 {
  position: relative;
  background: var(--azul);
  padding: 64px 0 72px;   /* topo: espaço pro notch */
}

/* linha-glow no topo (transparente → azul-3 → transparente) */
.sec6::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;                 /* mobile */
  z-index: 1;
  background: linear-gradient(90deg, rgba(66, 125, 159, 0) 0%, var(--azul-3) 50%, rgba(66, 125, 159, 0) 100%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
}

/* notch decorativo (com o "v" animado) — visível em todos os breakpoints */
.sec6__divisor {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: auto;
  z-index: 3;
}
.sec6__seta { animation: mover 2s infinite; }

.sec6__inner {
  width: 90%;
  max-width: 605px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 37px;                   /* título ↔ lista (mobile) */
}

.sec6__title {
  font-family: 'Playfair Display', serif;   /* substituta de Casanova */
  font-weight: 400;
  font-size: 32px;
  line-height: 1.4;
  text-align: center;
  color: var(--creme);
}

/* Timeline */
.timeline {
  list-style: none;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* linha vertical em degradê, passando atrás dos marcadores */
.timeline::before {
  content: "";
  position: absolute;
  left: 17px;                  /* centro do marcador de 35px */
  top: 17px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, #D9D9D9, rgba(217, 217, 217, 0));
  z-index: 0;
}
.timeline__item {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 23px;
  align-items: flex-start;
}
.timeline__marker { flex: 0 0 auto; width: 35px; height: 35px; }
.timeline__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.timeline__name {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--branco);
}
.timeline__desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--branco);
}

/* =========================================================
   SEÇÃO 7 — bônus
   ========================================================= */
.sec7 {
  background: var(--azul);
  padding: 30px 20px 0;   /* mobile */
}
.sec7__inner {
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.sec7__title {
  font-family: 'Playfair Display', serif;   /* substituta de Casanova */
  font-weight: 400;
  font-size: 32px;
  line-height: 1.4;
  text-align: center;
  color: var(--creme);
}

/* Card creme com a lista de bônus + mockup */
.bonus-card {
  width: 100%;
  background: var(--creme);
  border: 1px solid #E3DFD9;
  border-radius: 24px;
  box-shadow: 0 10px 5px rgba(0, 0, 0, .15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 24px;          /* mobile */
  margin-bottom: -280px;  /* invade a seção seguinte (CTA) — todas as telas */
  position: relative;
  z-index: 2;
}

.bonus-list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.bonus-list li {
  display: flex;
  align-items: center;
  gap: 32px;
}
.bonus-arrow { flex: 0 0 auto; width: 19px; height: auto; }
.bonus-list p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--preto);
  font-weight: 400;
}
.bonus-list strong { font-weight: 900; }

.bonus-mockup {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   BOTÃO CTA das seções — reusa .botao-degrade (verde), centralizado
   ========================================================= */
.cta-page { margin-inline: auto; position: relative; z-index: 3; }   /* acima do card de bônus que invade */

/* ---- Seção CTA pós-bônus (continua o creme do card de bônus) ---- */
.pos-bonus {
  position: relative;
  background: var(--creme);
  padding: 320px 0 56px;   /* top alto: o card de bônus invade por cima */
}

/* =========================================================
   SEÇÃO — depoimentos (carrossel infinito)
   ========================================================= */
.depo {
  background: var(--creme);
  padding: 24px 0 56px;
  overflow: hidden;
}
.depo__title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.4;
  text-align: center;
  color: var(--azul);
  margin-bottom: 40px;
  padding-inline: 5%;
}

.marquee {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/Edge */
  cursor: grab;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.marquee::-webkit-scrollbar { display: none; }
.marquee.dragging { cursor: grabbing; }
.marquee__track {
  display: flex;
  width: max-content;
}
.depo__card {
  flex: 0 0 auto;
  width: min(360px, 90vw);   /* mobile: 360px ou 90% em telas menores */
  height: auto;
  margin-right: 16px;
  align-self: flex-start;
  border-radius: 8px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
  pointer-events: none;             /* o arraste não "agarra" a imagem */
  user-select: none;
  -webkit-user-drag: none;
}

/* =========================================================
   SEÇÃO — quem é Ana Duarte (build)
   ========================================================= */
.quem {
  background: var(--creme);
  padding: 0 0 64px;   /* sem padding-top (mobile) */
}
.quem__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.quem__media { display: flex; justify-content: center; order: 2; }  /* mobile: imagem vai para baixo */
.quem__img {
  width: 320px;
  max-width: 100%;
  height: auto;
}
.quem__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  order: 1;
}
.quem__title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  color: var(--azul);
  text-align: center;   /* mobile: títulos centralizados */
}
.quem__body { display: flex; flex-direction: column; gap: 16px; }
.quem__body p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--preto);
  font-weight: 400;
}

/* =========================================================
   SEÇÃO — FAQ + rodapé
   ========================================================= */
.faq {
  position: relative;
  background: var(--creme) url('img/bg-faq--mobile.webp') no-repeat top center;
  background-size: 100% auto;
  padding: 48px 0 0;
}
/* linha decorativa no topo (mesma das seções 2/4) */
.faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;                 /* mobile */
  z-index: 2;
  background: linear-gradient(90deg, #95A6B0 0%, #243A4A 39.97%, #95A6B0 73%, #243A4A 100%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
}
.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.faq__title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  text-align: center;
  color: var(--azul);
}
.faq__list {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.faq-item { border-bottom: 1px solid rgba(36, 58, 74, .45); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--azul);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: auto;
  transition: transform .3s ease;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  padding: 0 32px 18px 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--azul);
}

/* degradê final do FAQ funde no rodapé escuro */
.faq__fade {
  height: 50px;            /* mobile */
  margin-top: 0;
  background: linear-gradient(to bottom, rgba(36, 58, 74, 0), var(--azul));
}

/* ---- Rodapé ---- */
.rodape {
  position: relative;
  background: var(--azul);
  padding: 28px 0;
}
.rodape::before {   /* linha-glow no topo */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, rgba(66, 125, 159, 0) 0%, var(--azul-3) 50%, rgba(66, 125, 159, 0) 100%);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}
.rodape__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.rodape__copy {
  color: var(--creme);
  font-size: 14px;
  line-height: 1.4;
}
.rodape__dev {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #EEECE4;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.rodape__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: opacity .3s ease;
}
.rodape__link:hover { opacity: .75; }
.rodape__nome { font-weight: 300; font-size: 12px; letter-spacing: 0; text-transform: none; }
.rodape__nome strong { font-weight: 600; }
.rodape__dot { width: 2px; height: 2px; border-radius: 50%; background: #EEECE4; }
.rodape__logo { width: 38px; height: auto; }

/* =========================================================
   Animação de entrada (reveal)
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .botao-degrade { animation: none; }
  .sec4__divisor #seta, .sec6__seta { animation: none; }
  .noise { display: none; }
  .scl, .scr, .sct, .scb { transform: none; opacity: 1; filter: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   TABLET  ≥ 600px
   ========================================================= */
@media (min-width: 600px) {
  .hero {
    background-image: url('img/bg-tablet.webp');
    padding-top: 30px;
    padding-bottom: 84%;   /* mantém o enquadramento da foto */
    margin-bottom: 0px;
  }
  .sec2::before, .sec2::after, .hero::before, .sec4::before, .sec6::before, .faq::before  { height: 8px; }   /* tablet */
  .glass { gap: 32px; padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass__logo { }
  .logo { width: 300px; }
  .glass__content { gap: 25px; }
  .headline { font-size: 32px; }
  .lead { font-size: 16px; }
  .botao-degrade { width: auto; padding: 22px 48px; min-height: 0; }
  .botao-degrade span { font-size: 16px; }

  .sec2 { padding-bottom: 64px; }   /* só embaixo: o topo fica em 0 pro straddle */
  .card-lista, .card-depoimento { padding: 32px; }
  .sec2__title { font-size: 32px; margin-top: -120px; margin-bottom: -20px;}

  /* Seção 3 — tablet */
  .sec3 { padding-top: 100px; }
  .sec3__card { gap: 32px; width:80% }
  .sec3__title { width: 250px; }
  .sec3__list { gap: 32px; }
  .sec3__list li { gap: 32px; }
  .sec3__arrow { width: 50px; height: 50px; }
  .sec3__nutri { width: 500px; margin-top: 32px; }

  /* Seção 4 — tablet */
  .sec4__inner { gap: 64px; }

  /* Seção 6 — tablet */
  .sec6 { padding: 88px 0 80px; }
  .sec6__inner { gap: 78px; }
  .timeline__name { font-size: 20px; }

  /* número das fases volta a 43px a partir do tablet */
  .fase__num { font-size: 43px; }

  /* Seção 7 — tablet */
  .sec7 { padding: 30px 35px 0; }
  .sec7__title { font-size: 40px; }
  .bonus-card { max-width: 600px; padding: 32px; gap: 32px; }

  /* CTA / depoimentos / build / FAQ — tablet */
  .pos-bonus { padding: 320px 0 56px; }

  .depo { padding: 32px 0 64px; }
  .depo__title { font-size: 32px; margin-bottom: 48px; }
  .depo__card { width: 300px; margin-right: 20px; }

  .quem { padding: 0 0 72px; }
  .quem__inner { flex-direction: row; align-items: center; gap: 32px; }
  .quem__media { flex: 1 1 50%; order: 0; justify-content: center; }  /* tablet: 50% */
  .quem__img { width: 100%; max-width: 320px; }
  .quem__text { flex: 1 1 50%; min-width: 0; gap: 24px; }             /* tablet: 50% */
  .quem__title { font-size: 34px; text-align: left; }
  .quem__body p { font-size: 16px; }

  .faq { background-image: url('img/bg-faq-tablet.webp'); padding-top: 64px; }
  .faq__inner { gap: 40px; }
  .faq__title { font-size: 40px; }
  .faq-q { font-size: 19px; padding: 22px 0; }
  .faq-answer { font-size: 16px; padding-bottom: 22px; }
  .faq__fade { height: 70px; }   /* máx 70px no tablet */

  .rodape { padding: 0; }
  .rodape__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    min-height: 108px;
    gap: 24px;
  }
  .rodape__copy { font-size: 15px; }
}

/* re-aplica o "vidro" no tablet (mantendo centralizado) */
@media (min-width: 600px) and (max-width: 1023px) {
  .glass {
    padding: 24px;
    background: rgba(255, 255, 255, .09);
    backdrop-filter: blur(7.6px);
    -webkit-backdrop-filter: blur(7.6px);
  }

  /* Seção 4 — tablet (node 2056:220): a foto fica DENTRO do card branco,
     acompanhando a altura do bloco (centro-centro). */
  .dep {
    flex-direction: row;
    align-items: stretch;
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 5px rgba(0, 0, 0, .1);
  }
  /* o card interno vira só wrapper de conteúdo (o branco é do .dep agora) */
  .dep__card {
    flex: 1 1 0;
    width: auto;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    position: static;
  }
  /* foto: coluna que segue a altura do bloco, recorte centro-centro */
  .dep__photo {
    flex: 0 0 35%;
    width: auto;
    max-width: none;
    margin: 0;
    align-self: stretch;
    min-height: 0;          /* a imagem segue a altura do card, nunca o contrário */
    overflow: hidden;
    border-radius: 16px;
  }
  .dep__photo img {
    position: absolute;     /* não dita altura; o conteúdo do card é quem manda */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;   /* centro-centro */
  }
  .dep__chat { width: 100%; height: auto; }
  .dep__quote { z-index: 4; }

  /* dep1: texto + foto (padding 32) */
  .dep--text  { padding: 32px; gap: 16px; align-items: center; }
  .dep--text  .dep__photo { align-self: stretch; }
  .dep--text  .dep__quote { top: -24px; left: -16px; }

  /* dep2: foto (sangra na esquerda) + print (padding 16) */
  .dep--print { padding: 0; gap: 0; }
  .dep--print .dep__photo { flex-basis: 33%; border-radius: 16px 0 0 16px; }
  .dep--print .dep__card  { padding: 16px; }
  .dep--print .dep__quote { top: 12px; left: 33%; }
}

/* =========================================================
   DESKTOP  ≥ 1024px
   ========================================================= */
@media (min-width: 1024px) {
  .hero {
    /* desktop: imagem no topo, centralizada, cobrindo a seção */
    background-image: url('img/bg-dektop.webp');
    background-position: center top;
    background-size: auto;       /* tamanho natural — não ajusta à tela */
    padding-top: 96px;
    padding-bottom: 270px;
    min-height: 780px;
    /* margin-bottom: 150px; */
  }
  .sec2::before, .sec2::after, .hero::before, .sec4::before, .sec6::before, .faq::before   { height: 10px; }   /* desktop */

  .hero__container { display: flex; }

  /* cartão alinhado à esquerda */
  .glass {
    max-width: 600px;
    margin-right: auto;
    align-items: flex-start;
    text-align: left;
    gap: 46px;
    padding: 24px;
    background: rgba(255, 255, 255, .09);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .glass__logo { justify-content: flex-start; }
  .logo { width: 380px; }
  .glass__content { gap: 34px; align-items: flex-start; }

  .headline { font-size: 35px; }
  .lead { font-size: 18px; }

  .botao-degrade {
    width: 100%;
    max-width: 553px;
    min-height: 79px;
    border-radius: 65px;
    padding: 20px 32px;
  }
  .botao-degrade span { font-size: 17px; }

  .sec2 { padding-bottom: 0px; }   /* só embaixo: o topo fica em 0 pro straddle */
  .sec2__title { font-size: 48px; line-height: 1.2; margin-top: -200px; margin-bottom: -20px; width: 600px;}
  .sec2__inner { gap: 42px; }
  .card-depoimento {margin-bottom: -50px;}

  /* Seção 3 — desktop: card à esquerda, foto à direita */
  .sec3 {
    background-image: url('img/bg-03-wide.webp');
    display: flex;
    align-items: flex-end;
    padding-top: 150px;
    padding-bottom: 80px;
    min-height: 880px;
  }
  .sec3__inner { display: block; }          /* container; o card fica à esquerda */
  .sec3__card { max-width: 600px; align-items: center; gap: 42px; }
  .sec3__title { width: 394px; }
  .sec3__list { gap: 32px; padding: 24px; }
  .sec3__list li { gap: 28px; }
  .sec3__arrow { width: 50px; height: 50px; }
  .sec3__list p { font-size: 18px; }
  .sec3__nutri {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin: 0 0 0 -20px;
    width: auto;
    height: 900px;
    max-width: none;
    z-index: 2;
  }

  /* Seção 4 — desktop: card + foto lado a lado, com sobreposição */
  .sec4 { padding: 110px 0 120px; }
  .sec4__divisor { width: 132px; }
  .sec4__inner { gap: 40px; }

  .dep {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: transparent;     /* no desktop o branco volta pro .dep__card */
    box-shadow: none;
    padding: 0;
  }
  .dep__card {
    width: 624px;
    flex: 0 0 auto;
    background: #fff;
    box-shadow: 0 10px 5px rgba(0, 0, 0, .1);
    border-radius: 16px;
    padding: 32px;
    position: relative;
  }
  .dep__photo { width: auto; height: auto; max-width: none; margin: 0; align-self: center; }
  .dep__photo img { height: 560px; width: auto; object-fit: initial; }

  /* dep1: card à esquerda, foto à direita (sobreposta) */
  .dep--text .dep__card { padding-right: 110px; }
  .dep--text .dep__photo { margin-left: -80px; }
  .dep--text .dep__quote { width: 72px; height: 72px; top: -34px; left: -22px; }

  /* dep2: foto à esquerda (sobreposta), card com print à direita */
  .dep--print .dep__card { padding-left: 110px; }
  .dep--print .dep__photo { margin: 0 -80px 0 0; }
  .dep--print .dep__quote { width: 72px; height: 72px; top: -32px; left: 92px; }

  /* Seção 5 — desktop: grade 2×2, número em cima do card */
  .sec5 { padding: 80px 0 100px; }
  .sec5__title { font-size: 40px; }
  .fases {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 27px 20px;
  }
  .fase {
    flex-direction: column;
    gap: 10px;
    flex: 1 1 calc(50% - 10px);
    max-width: 548px;
    min-width: 280px;
    padding: 35px 32px 32px;
  }

  /* Seção 6 — desktop */
  .sec6 { padding: 96px 0 96px; }
  .sec6__divisor { width: 157px; }
  .sec6__title { font-size: 40px; }
  .timeline { gap: 32px; }
  .timeline__name { font-size: 23px; }
  .timeline__desc { font-size: 20px; }

  /* Seção 7 — desktop */
  .sec7 { padding: 30px 0 0; }
  .bonus-card { max-width: 740px; padding: 40px 64px; }

  /* CTA / depoimentos / build / FAQ — desktop */
  .pos-bonus { padding: 320px 0 56px; }

  .depo { padding: 40px 0 80px; }
  .depo__title { font-size: 40px; margin-bottom: 56px; }
  .depo__card { width: 360px; margin-right: 20px; }

  .quem { padding: 0 0 96px; }
  .quem__inner { gap: 56px; justify-content: center; }
  .quem__media { flex: 0 0 auto; }
  .quem__img { width: 464px; }
  .quem__text { flex: 0 1 auto; max-width: 487px; gap: 34px; }
  .quem__title { font-size: 40px; }
  .quem__body p { font-size: 18px; }

  .faq { background-image: url('img/bg-faq-wide.webp'); padding-top: 80px; }
  .faq__inner { max-width: 720px; margin-inline: auto; gap: 44px; }
  .faq__title { font-size: 40px; }
  .faq-q { font-size: 20px; }
  .faq-answer { font-size: 16px; max-width: 92%; }
  .faq__fade { height: 100px; }   /* máx 100px no desktop */

  .rodape__inner { max-width: 1110px; }
}

/* Acima de 1366px o conteúdo trava em 1140 / sec2 em 800 (ver .container) */

/* 1025–1208px: card da seção 3 acima da foto da nutri (evita sobreposição) */
@media (min-width: 1025px) and (max-width: 1208px) {
  .sec3__card { position: relative; z-index: 20; }
}

/* 1024–1365px: depoimento e parágrafo da seção 2 a 90% da largura */
@media (min-width: 1024px) and (max-width: 1365px) {
  .card-depoimento,
  .sec2__intro { width: 90%; }
}