/* ==========================================================================
   LP · Lives (foco evento) — /lives
   Self-contained: carrega só este arquivo (não usa tokens.css/site.css,
   que pertencem à LP principal e têm outra escala de tokens).
   ========================================================================== */

/* --- Tokens (design system Tô Grávida + overrides da arte) ---------------- */
:root {
  /* Plum / ink */
  --plum-800: #2f182a;
  --ink: #2f182a;

  /* Rose — a arte usa a escala suave (não a rose-500 #E84E82 do DS) */
  --rose-700: #c97b98;
  --rose-500: #d78cac;
  --rose-300: #e9afc9;
  --rose-200: #f0c6da;
  --rose-100: #f5c9dc;
  --rose-tint-1: #fcf4f8;
  --rose-tint-2: #f7e6ee;
  --rose-tint-border: #efd4e0;

  /* Superfícies */
  --cream-50: #faf7f2;
  --white: #ffffff;

  /* Linhas */
  --line: #e7dad0;
  --line-soft: #efe6df;

  /* Texto */
  --text-body: #5e4a55;
  --text-muted: #7a6470;
  --text-faint: #9a8a93;

  /* Gradientes pastel (fundo dos retratos) */
  --grad-pink: linear-gradient(150deg, #f5c9dc, #c97b98);
  --grad-peach: linear-gradient(150deg, #f4dcc9, #e8bfa3);
  --grad-sage: linear-gradient(150deg, #cfe0d5, #84a892);
  --grad-mauve: linear-gradient(150deg, #e7c8d6, #a8758c);
  --grad-plum-dark: linear-gradient(135deg, #2f182a 0%, #46263d 100%);

  /* Raios */
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Sombras — plum quente, nunca cinza neutro */
  --shadow-card: 0 2px 4px rgba(47, 24, 42, 0.05);
  --shadow-raised: 0 10px 28px rgba(47, 24, 42, 0.12);
  --shadow-float: 0 30px 70px rgba(47, 24, 42, 0.18);

  /* CTA — o rosa da marca, exatamente como na arte.
     Nota de acessibilidade: branco sobre #E84E82 dá 3.59:1, abaixo do mínimo
     de 4.5:1 da WCAG AA para texto deste tamanho. Decisão de marca, tomada
     com o dado na mesa. Se um dia quiser resolver sem trocar o rosa, o
     caminho é o texto: #2F182A sobre este mesmo fundo dá 4.55:1.
     Ver docs/LIVES-AUDITORIA.md. */
  --cta: #e84e82;
  --cta-hover: #d33f71;
  --shadow-cta: 0 14px 30px -12px rgba(232, 78, 130, 0.5);
  --shadow-cta-sm: 0 12px 26px -12px rgba(232, 78, 130, 0.5);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* --- Reset --------------------------------------------------------------- */
/* NÃO adicionar reset de box-sizing aqui. O artboard é content-box (o valor
   inicial do CSS), e todos os valores abaixo foram transcritos de lá. Com
   border-box, todo elemento que combina largura/altura explícita + padding
   encolhe em relação à arte (FAQ, painel da Luna, botão da barra fixa).
   Ver docs/LIVES-AUDITORIA.md. */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream-50);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}
/* Sem -webkit-font-smoothing: o artboard não usa, e ele deixa o texto
   visivelmente mais fino no macOS. */

a {
  color: var(--plum-800);
  text-decoration: none;
}

a:hover {
  color: var(--rose-700);
}

h1,
h2,
h3 {
  margin: 0;
}

p {
  margin: 0;
}

::placeholder {
  color: var(--text-faint);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --- Primitivos compartilhados ------------------------------------------- */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
}

.eyebrow {
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum-800);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(29px, 4.4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: clamp(14px, 2vw, 20px) 0 0;
  text-wrap: balance;
}

.h2--flush {
  margin: 0;
}

.lede {
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.55;
  color: var(--text-body);
  text-wrap: pretty;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  padding: 19px clamp(28px, 3.6vw, 40px);
  border-radius: 14px;
  background: var(--cta);
  color: var(--white);
  font-size: clamp(16px, 1.9vw, 18px);
  font-weight: 700;
  box-shadow: var(--shadow-cta);
  transition: background-color 0.18s ease;
}

.btn-cta:hover {
  background: var(--cta-hover);
  color: var(--white);
}

.btn-cta--sm {
  padding: 17px clamp(24px, 3vw, 32px);
  border-radius: 13px;
  font-size: clamp(15px, 1.8vw, 17px);
  box-shadow: var(--shadow-cta-sm);
}

/* Links de @perfil têm 17px de altura de texto, abaixo do mínimo de 24px da
   WCAG 2.5.8. O pseudo-elemento estica a área de toque sem ocupar espaço no
   layout, então nada se desloca. Os vizinhos acima/abaixo não são clicáveis,
   então a sobreposição não rouba clique de ninguém. */
.aula__ig,
.esp__ig,
.footer__ig,
.cta__byline a {
  position: relative;
}

.aula__ig::after,
.esp__ig::after,
.footer__ig::after,
.cta__byline a::after {
  content: '';
  position: absolute;
  inset: -6px -4px;
}

/* Molduras de foto — o gradiente aparece enquanto a imagem carrega */
.frame-pink {
  background: var(--grad-pink);
}

.frame-peach {
  background: var(--grad-peach);
}

.frame-sage {
  background: var(--grad-sage);
}

.frame-mauve {
  background: var(--grad-mauve);
}

.fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: var(--cream-50);
  padding: clamp(26px, 3.6vw, 40px) clamp(20px, 4vw, 48px) clamp(48px, 6vw, 72px);
}

.hero__brand {
  display: flex;
  align-items: center;
  margin-bottom: clamp(26px, 3.6vw, 44px);
}

.hero__logo {
  width: clamp(168px, 17vw, 208px);
  height: auto;
  display: block;
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(32px, 4.6vw, 60px);
  /* A arte usa `start`, o que deixa o texto encostado no topo enquanto a foto
     desce quase 100px a mais. `center` alinha os dois centros ópticos. */
  align-items: center;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

.hero__title em {
  color: var(--rose-700);
  font-style: italic;
}

.hero__sub {
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.55;
  color: var(--text-body);
  max-width: 520px;
  margin-top: clamp(14px, 2vw, 20px);
  text-wrap: pretty;
}

.hero__dates {
  /* Grid de 2 colunas em vez de flex-wrap: as duas aulas ficam SEMPRE lado a
     lado, inclusive no celular. Com `flex: 1 1 190px` elas quebravam abaixo de
     ~420px de conteúdo e viravam uma embaixo da outra. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dates-gap);
  margin-top: clamp(30px, 4.4vw, 44px);
  padding-top: clamp(26px, 3.4vw, 34px);
  border-top: 1px solid var(--line);

  --dates-gap: clamp(14px, 3.4vw, 44px);
}

/* Divisória entre as duas. O respiro fica simétrico porque o gap dá o
   afastamento à esquerda da linha e o padding dá o mesmo à direita. */
.hero__dates .date + .date {
  border-left: 1px solid var(--line);
  padding-left: var(--dates-gap);
}

.hero__cta {
  margin-top: clamp(24px, 3.2vw, 32px);
}

/* Bloco de data (07 set / 10 set) */
.date {
  min-width: 0;
  /* Coluna flex para o bloco da especialista poder ir para a base. Sem isto,
     um título de 1 linha ao lado de um de 2 desalinha os dois retratos. */
  display: flex;
  flex-direction: column;
}

.date__day {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.date__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 4.4vw, 50px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--plum-800);
}

.date__month {
  align-self: center;
}

.date__kicker,
.date__month {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.date__month {
  color: var(--text-muted);
}

.date__kicker {
  color: var(--plum-800);
  margin-top: 14px;
}

.date__topic {
  font-size: clamp(16px, 1.9vw, 18px);
  color: var(--ink);
  margin-top: 6px;
}

.date__person {
  display: flex;
  align-items: center;
  gap: 10px;
  /* `auto` empurra para a base da coluna: os dois retratos ficam na mesma
     linha mesmo com títulos de alturas diferentes. O padding garante o
     respiro mínimo quando as duas colunas têm a mesma altura. */
  margin-top: auto;
  padding-top: 12px;
}

.date__avatar {
  position: relative;
  flex: 0 0 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

.date__name {
  font-size: 15px;
  color: var(--text-muted);
  /* Sem isto, "Mariana Gonçalves" não cabe em meia largura de celular e
     transborda a coluna em vez de quebrar. */
  min-width: 0;
}

/* Duas colunas em tela estreita deixam ~150px para cada uma. Encolhe o que
   compete por essa largura, para o nome caber em uma linha. */
@media (max-width: 520px) {
  .date__topic {
    font-size: 15px;
    /* Reserva a altura de 2 linhas. "Nutrição na gravidez" ocupa 1 e
       "Amamentação sem dor" ocupa 2 nesta largura; sem a reserva, o bloco da
       especialista começa em alturas diferentes e os retratos saem de linha. */
    min-height: calc(2 * 1.4em);
  }

  .date__name {
    font-size: 13px;
  }

  .date__person {
    gap: 7px;
    /* Com o título já reservando altura igual, o alinhamento vem do TOPO —
       ancorar na base voltaria a desalinhar, porque "Mariana Gonçalves" quebra
       em duas linhas e "Fabiana Fontes" não. */
    margin-top: 0;
    align-items: flex-start;
  }

  .date__avatar {
    flex: 0 0 26px;
    height: 26px;
  }
}

/* Retrato da Luana */
.hero__media {
  position: relative;
  width: 100%;
  max-width: min(100%, 470px);
  margin-inline: auto;
}

.hero__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  min-width: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-float);
}

.hero__tag {
  position: absolute;
  top: clamp(14px, 2.6vw, 20px);
  left: clamp(14px, 2.6vw, 20px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--radius-pill);
  background: rgba(250, 247, 242, 0.94);
  box-shadow: var(--shadow-card);
}

.hero__tag img {
  width: 18px;
  height: 18px;
  display: block;
}

.hero__tag span {
  font-size: 13px;
  font-weight: 600;
  color: var(--plum-800);
  white-space: nowrap;
}

/* ==========================================================================
   As aulas
   ========================================================================== */
.section {
  padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 48px) 0;
  max-width: 1280px;
  margin: 0 auto;
}

.aulas__title {
  max-width: 820px;
}

.aulas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  align-items: stretch;
  margin-top: clamp(28px, 3.6vw, 44px);
}

.aula {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.aula__head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 34px) clamp(20px, 2.4vw, 26px);
}

.aula__avatar {
  position: relative;
  flex: 0 0 clamp(64px, 7vw, 80px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

.aula__id {
  min-width: 0;
}

.aula__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 2.6vw, 27px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.aula__role {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 5px;
}

.aula__ig {
  display: inline-block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.aula__body {
  padding: 0 clamp(24px, 3vw, 34px) clamp(22px, 2.6vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.aula__topic {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 2.9vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid var(--line-soft);
}

.aula__points {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aula__point {
  display: flex;
  gap: 12px;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.5;
  color: var(--text-body);
}

.aula__point::before {
  content: '·';
  color: var(--rose-500);
  font-weight: 700;
}

.aula__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px clamp(16px, 2.4vw, 28px);
  padding: clamp(16px, 2vw, 20px) clamp(24px, 3vw, 34px);
  background: var(--rose-tint-1);
  border-top: 1px solid var(--rose-tint-border);
}

.aula__meta span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 600;
  color: var(--plum-800);
  white-space: nowrap;
}

.aula__meta svg {
  flex: none;
  stroke: var(--rose-700);
}

.aulas__cta-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px, 4vw, 44px);
}

/* Este CTA é levemente maior que o do hero na arte */
.aulas__cta-row .btn-cta {
  padding-inline: clamp(28px, 3.6vw, 42px);
  font-size: clamp(16px, 2vw, 18px);
}

.aulas__bridge {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(21px, 2.8vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  text-align: center;
  max-width: 620px;
  margin: clamp(52px, 7.5vw, 88px) auto 0;
}

/* ==========================================================================
   Cards divididos (biblioteca de aulas · Luna)
   ========================================================================== */
.split {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.split__text {
  padding: clamp(28px, 3.6vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.split__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.split__logo {
  width: clamp(132px, 13vw, 158px);
  height: auto;
  display: block;
}

.split__rule {
  width: 1px;
  height: 20px;
  background: var(--line);
}

.split__symbol {
  width: 30px;
  height: 30px;
  display: block;
}

.split__media {
  position: relative;
  min-height: clamp(260px, 34vw, 400px);
  /* O print do app já vem com fundo (251,247,244), que é o --cream-50. A arte
     punha --rose-tint-1 aqui, e a faixa de painel que sobra à direita do print
     ficava mais rosada e mais escura que ele — ao lado da metade branca do
     card, lia como cinza. Com o mesmo tom, o print dissolve no painel e o card
     vira um split branco / creme, de propósito. */
  background: var(--cream-50);
  overflow: hidden;
}

/* Screenshot sangra pela direita e por baixo, ancorado no topo-esquerda.
   A arte usa `height:100%; width:auto`, mas o print é quase quadrado (1.05) e o
   painel é largo (1.43) — sobrava 26% do painel vazio à direita, e lia como
   imagem quebrada. `cover` a partir do topo-esquerda preenche em qualquer
   proporção de painel e corta o excesso por baixo. */
.split__shot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left top;
  display: block;
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding-top: clamp(14px, 1.8vw, 18px);
  border-top: 1px solid var(--line-soft);
}

.stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.stat__num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1;
  color: var(--plum-800);
}

.stat__label {
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--text-body);
  white-space: nowrap;
}

/* Luna — o print encosta na base do painel.
   Aqui o rosa da arte fica: o print é um recorte de celular com cantos
   arredondados, centralizado sobre o painel. A lavagem rosa atrás dele lê como
   escolha, não como descasamento. */
.split__media--luna {
  background: var(--rose-tint-1);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(300px, 32vw, 400px);
  padding: clamp(30px, 3.6vw, 46px) clamp(26px, 3.2vw, 40px) 0;
}

.luna__print {
  width: auto;
  max-width: min(100%, 268px);
  height: auto;
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow-raised);
  display: block;
}

/* ==========================================================================
   Carrossel de especialistas
   ========================================================================== */
.esp {
  padding: clamp(72px, 10vw, 128px) 0 0;
}

.esp__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 clamp(44px, 6.6vw, 96px);
  max-width: 1280px;
  margin: 0 auto;
}

.esp__title {
  max-width: 760px;
}

.esp__lede {
  margin-top: clamp(12px, 1.6vw, 16px);
  max-width: 560px;
}

.esp__hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--text-muted);
}

.esp__track {
  display: flex;
  gap: clamp(16px, 2.2vw, 26px);
  padding: clamp(26px, 3.4vw, 40px) clamp(44px, 6.6vw, 96px) 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(44px, 6.6vw, 96px);
  scrollbar-width: none;
}

.esp__track::-webkit-scrollbar {
  display: none;
}

.esp__card {
  flex: 0 0 clamp(210px, 26vw, 300px);
  scroll-snap-align: start;
}

.esp__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Enquadramento por retrato */
.esp__photo--high img {
  object-position: 50% 14%;
}

.esp__photo--higher img {
  object-position: 50% 16%;
}

.esp__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-800);
  margin-top: 16px;
}

.esp__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 23px);
  letter-spacing: -0.02em;
  margin-top: 6px;
}

.esp__ig {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-section {
  padding: clamp(56px, 8vw, 104px) clamp(20px, 4vw, 48px) 0;
  max-width: 1080px;
  margin: 0 auto;
}

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.faq__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(27px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: clamp(14px, 2vw, 20px) 0 0;
  text-wrap: balance;
}

.faq__cta {
  margin-top: clamp(22px, 2.8vw, 30px);
}

.faq__note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.faq__list {
  grid-column: span 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-top: 1px solid var(--line);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq__item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 1.9vw, 19px) 0;
  cursor: pointer;
  list-style: none;
}

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

.faq__q {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.9vw, 20px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}

.faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rose-tint-2);
  color: var(--plum-800);
}

/* A arte mantém o chevron fixo, inclusive com o item aberto. Para girá-lo:
   .faq__icon { transition: transform .2s ease }
   .faq__item[open] .faq__icon { transform: rotate(180deg) } */

.faq__a {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.6;
  color: var(--text-body);
  margin-bottom: clamp(16px, 1.9vw, 20px);
  max-width: 600px;
  padding-right: 42px;
}

/* ==========================================================================
   CTA final
   ========================================================================== */
.cta {
  background: var(--grad-plum-dark);
  padding: clamp(56px, 7.5vw, 104px) clamp(20px, 4vw, 48px);
  margin-top: clamp(56px, 7.5vw, 96px);
}

.cta__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.cta__author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(20px, 2.6vw, 28px);
}

.cta__avatar {
  position: relative;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

.cta__avatar img {
  object-position: 52% 8%;
}

.cta__byline {
  font-size: clamp(14px, 1.7vw, 16px);
  color: rgba(255, 255, 255, 0.82);
}

.cta__byline a {
  color: var(--rose-200);
  font-weight: 600;
}

.cta__byline a:hover {
  color: var(--rose-100);
}

.cta__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}

.cta__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--rose-100);
  margin: clamp(12px, 1.8vw, 16px) auto 0;
  max-width: 420px;
}

.cta__when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 14px;
  margin-top: clamp(24px, 3.2vw, 32px);
  padding-top: clamp(22px, 2.8vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: clamp(16px, 1.9vw, 18px);
  color: var(--white);
}

.cta__when span {
  white-space: nowrap;
}

.cta__when-sep {
  color: rgba(255, 255, 255, 0.5);
}

.cta__when-time {
  color: var(--rose-200);
}

.cta__btn {
  justify-content: center;
  margin-top: clamp(22px, 2.8vw, 30px);
  padding: 20px clamp(28px, 3.6vw, 42px);
}

/* ==========================================================================
   Rodapé
   ========================================================================== */
.footer {
  padding: clamp(32px, 4.4vw, 48px) clamp(20px, 4vw, 48px) clamp(36px, 4.6vw, 52px);
  border-top: 1px solid var(--line-soft);
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 32px);
  max-width: 1280px;
  margin: 0 auto;
}

.footer__logo {
  width: clamp(150px, 15vw, 180px);
  height: auto;
  display: block;
}

.footer__ig {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--plum-800);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  max-width: 1280px;
  margin: clamp(24px, 3vw, 32px) auto 0;
  padding-top: clamp(18px, 2.4vw, 22px);
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ==========================================================================
   Barra fixa (mobile)
   ========================================================================== */
.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px clamp(14px, 4vw, 24px) calc(11px + env(safe-area-inset-bottom));
  background: rgba(47, 24, 42, 0.96);
}

.stickybar__text {
  min-width: 0;
  font-size: clamp(12px, 3.2vw, 15px);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.88);
}

.stickybar__accent {
  color: var(--rose-200);
}

.stickybar__btn {
  flex: 0 0 auto;
  /* border-box aqui de propósito: na arte, min-height:46px é a altura do
     CONTEÚDO, então o botão saía com 70px e a barra com 92 — 14% da tela em
     retrato e 25% em paisagem. Com border-box o padding entra nos 54px, a barra
     cai para 76 e o alvo continua bem acima do mínimo de 44. */
  box-sizing: border-box;
  min-height: 54px;
  padding: 12px clamp(16px, 4.4vw, 24px);
  border-radius: 12px;
  font-size: clamp(14px, 3.6vw, 16px);
  white-space: nowrap;
  box-shadow: none;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 900px) {
  .stickybar {
    display: none;
  }
}

@media (max-width: 899px) {
  /* 76px da barra + 28px de respiro */
  .footer {
    padding-bottom: 104px;
  }
}

/* Celular deitado: a barra ficava com um quarto da tela (76px de 375). Some com
   ela — a página ainda tem 4 CTAs no fluxo, e altura é o recurso escasso aqui. */
@media (max-width: 899px) and (max-height: 480px) {
  .stickybar {
    display: none;
  }

  .footer {
    padding-bottom: clamp(36px, 4.6vw, 52px);
  }
}

@media (min-width: 781px) {
  .faq {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  }

  .faq__list {
    grid-column: auto;
  }
}

@media (max-width: 780px) {
  .faq {
    display: block;
  }

  .faq__list {
    margin-top: 26px;
  }

  .esp__head,
  .esp__track {
    padding-left: 20px;
    padding-right: 20px;
  }

  .esp__track {
    scroll-padding-inline: 20px;
  }

  .luna__print {
    max-height: 62vh;
  }
}