@charset "UTF-8";
/* ============================================================
   O Código Liberal — folha de estilo
   Substitui o Tailwind carregado por CDN.
   Ordem: tokens → base → tipografia → componentes → seções
   ============================================================ */

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  /* Superfícies — preto quente, não neutro */
  --preto:        #0c0b0c;
  --carvao:       #141213;
  --carvao-alto:  #1c191b;
  --carvao-topo:  #241f22;
  --borda:        #2b2528;
  --borda-suave:  #201c1e;

  /* Marca */
  --vinho:        #8b1c24;
  --vinho-vivo:   #b8323c;
  --vinho-fundo:  rgba(139, 28, 36, .12);
  --vinho-brilho: rgba(139, 28, 36, .38);

  /* Texto */
  --creme:        #f4f1ea;
  --creme-medio:  #b9b0aa;
  --creme-fraco:  #8a807b;
  --creme-tenue:  #625a57;

  /* Apoio */
  --dourado:      #c9a961;
  --verde:        #4a9d72;

  /* Tipografia */
  --fonte-titulo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fonte-texto:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fonte-nota:   "Bodoni Moda", Georgia, "Times New Roman", serif;

  /* Métricas */
  --largura:      1140px;
  --largura-fina: 760px;
  --raio:         14px;
  --raio-g:       22px;
  --transicao:    .28s cubic-bezier(.2, .7, .3, 1);

  --sombra:       0 18px 50px rgba(0, 0, 0, .55);
  --sombra-alta:  0 26px 70px rgba(0, 0, 0, .7);

  /* Altura real da barra fixa de oferta, medida pelo JS.
     O rodapé e os avisos flutuantes reservam esse espaço para
     não ficarem escondidos atrás dela. */
  --altura-cta:   78px;
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  background: var(--preto);
  color: var(--creme-medio);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.travado { overflow: hidden; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
}

button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--vinho-vivo);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--vinho); color: var(--creme); }

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

/* ── TIPOGRAFIA ───────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--creme);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 800;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6.2vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 4.4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.85rem); }

p { text-wrap: pretty; }

strong { color: var(--creme); font-weight: 700; }

.sobretitulo {
  display: inline-block;
  font-family: var(--fonte-texto);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vinho-vivo);
  margin-bottom: 18px;
}

.nota {
  font-family: var(--fonte-nota);
  font-style: italic;
  font-weight: 400;
  color: var(--creme);
}

.destaque { color: var(--vinho-vivo); }

.texto-guia {
  font-size: clamp(1.02rem, 1.8vw, 1.2rem);
  color: var(--creme-medio);
  max-width: 62ch;
}

/* ── LAYOUT ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: 22px;
}

.container-fino { max-width: var(--largura-fina); }

.secao { padding-block: clamp(64px, 9vw, 120px); }
.secao-curta { padding-block: clamp(46px, 6vw, 76px); }

.secao-carvao { background: var(--carvao); }
.secao-preta  { background: var(--preto); }
.secao-borda  { border-block: 1px solid var(--borda-suave); }

.cabecalho-secao {
  text-align: center;
  max-width: 700px;
  margin: 0 auto clamp(40px, 6vw, 70px);
}
:where(.cabecalho-secao) p { color: var(--creme-fraco); margin-top: 16px; }

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--vinho);
  color: var(--creme);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.pular-para-conteudo:focus { left: 0; }

/* ── BOTÕES ───────────────────────────────────────────────── */
.botao {
  --cor-fundo: var(--vinho);
  --cor-texto: var(--creme);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 19px 34px;
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-titulo);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 12px 32px rgba(139, 28, 36, .3);
  transition: transform var(--transicao), box-shadow var(--transicao),
              background-color var(--transicao), color var(--transicao);
}

.botao:hover {
  background: var(--creme);
  color: var(--preto);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(244, 241, 234, .18);
}

.botao:active { transform: translateY(0); }

.botao .icone { width: 20px; height: 20px; flex-shrink: 0; }

.botao-largo { width: 100%; }

.botao-grande {
  padding: 23px 44px;
  font-size: clamp(1.02rem, 2.1vw, 1.24rem);
}

.botao-fantasma {
  --cor-fundo: transparent;
  --cor-texto: var(--creme);
  border: 1px solid var(--borda);
  box-shadow: none;
  font-size: .9rem;
  padding: 15px 26px;
}
.botao-fantasma:hover {
  background: var(--carvao-topo);
  color: var(--creme);
  border-color: var(--vinho);
  box-shadow: none;
}

.apoio-botao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  margin-top: 18px;
  font-size: .84rem;
  color: var(--creme-tenue);
  font-weight: 500;
}
.apoio-botao .icone { width: 15px; height: 15px; color: var(--verde); }

/* ── TICKER ───────────────────────────────────────────────── */
.ticker {
  position: relative;
  z-index: 40;
  background: var(--vinho);
  border-bottom: 1px solid rgba(0, 0, 0, .35);
  overflow: hidden;
  padding-block: 9px;
  display: flex;
  white-space: nowrap;
}

.ticker-trilha {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 100%;
  animation: correr 34s linear infinite;
}

.ticker-trilha span {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--creme);
  padding-inline: 26px;
}
.ticker-trilha .icone { width: 11px; height: 11px; color: rgba(244, 241, 234, .55); }

@keyframes correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-trilha { animation: none; }
  .ticker-trilha + .ticker-trilha { display: none; }
}

/* ── HERÓI ────────────────────────────────────────────────── */
.heroi {
  position: relative;
  padding-block: clamp(44px, 6vw, 82px) clamp(56px, 7vw, 96px);
  text-align: center;
  overflow: hidden;
}

.heroi::before {
  content: "";
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, 130%);
  height: 520px;
  background: radial-gradient(ellipse at center, var(--vinho-brilho), transparent 68%);
  opacity: .5;
  pointer-events: none;
  filter: blur(28px);
}

.heroi > * { position: relative; z-index: 1; }

.heroi-logo {
  width: min(230px, 56vw);
  margin: 0 auto clamp(26px, 4vw, 40px);
}

.heroi h1 { margin-bottom: 22px; }
.heroi h1 .linha-2 { display: block; color: var(--vinho-vivo); }

.heroi-sub {
  font-size: clamp(1rem, 2vw, 1.19rem);
  color: var(--creme-medio);
  max-width: 60ch;
  margin: 0 auto clamp(32px, 4.5vw, 46px);
}

.heroi-acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-inline: auto;
}
.heroi-acoes .botao { width: 100%; }

/* Fachada do vídeo: miniatura leve, player só no clique. */
.video-fachada {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto clamp(32px, 4.5vw, 48px);
  aspect-ratio: 16 / 9;
  border-radius: var(--raio-g);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-alta);
  cursor: pointer;
  isolation: isolate;
}

.video-fachada img,
.video-fachada iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.video-fachada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 55%);
  pointer-events: none;
  transition: opacity var(--transicao);
}
.video-fachada.ativo::after { opacity: 0; }

.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  border: 0;
  background: none;
  width: 100%;
}

.video-play span {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--vinho);
  color: var(--creme);
  box-shadow: 0 0 0 12px rgba(139, 28, 36, .18), 0 14px 34px rgba(0, 0, 0, .5);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.video-play .icone { width: 28px; height: 28px; margin-left: 4px; }
.video-fachada:hover .video-play span {
  transform: scale(1.08);
  box-shadow: 0 0 0 18px rgba(139, 28, 36, .22), 0 14px 34px rgba(0, 0, 0, .5);
}

.video-rotulo {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--creme);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}
.video-rotulo .icone { width: 15px; height: 15px; color: var(--vinho-vivo); }
.video-fachada.ativo .video-play,
.video-fachada.ativo .video-rotulo { display: none; }

/* ── NÚMEROS ──────────────────────────────────────────────── */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px;
  background: var(--borda-suave);
  border-block: 1px solid var(--borda-suave);
}

.numeros div {
  background: var(--preto);
  padding: 26px 12px;
  text-align: center;
}

.numeros dt {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--creme);
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.numeros dd {
  margin-top: 8px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--creme-tenue);
  line-height: 1.4;
}

/* ── MARCAS ───────────────────────────────────────────────── */
.marcas-titulo {
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--creme-tenue);
  margin-bottom: 34px;
}

.marcas-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 62px);
}

.marcas-lista a {
  filter: brightness(0) invert(1);
  opacity: .38;
  transition: opacity var(--transicao), transform var(--transicao);
}
.marcas-lista a:hover { opacity: .95; transform: scale(1.06); }
.marcas-lista img { width: auto; }

/* ── IDENTIFICAÇÃO ────────────────────────────────────────── */
.identificacao-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2px;
  background: var(--borda-suave);
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio);
  overflow: hidden;
}

.identificacao-lista li {
  list-style: none;
  background: var(--carvao);
  padding: 26px 26px 26px 58px;
  position: relative;
  font-size: 1rem;
  color: var(--creme-medio);
  transition: background-color var(--transicao);
}
.identificacao-lista li:hover { background: var(--carvao-alto); }

.identificacao-lista li::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 33px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vinho);
  box-shadow: 0 0 0 4px var(--vinho-fundo);
}

.identificacao-fecho {
  margin-top: 40px;
  padding: 32px 34px;
  border-left: 3px solid var(--vinho);
  background: var(--carvao);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-family: var(--fonte-nota);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.42rem);
  line-height: 1.5;
  color: var(--creme);
}

/* ── CRIADORES ────────────────────────────────────────────── */
.criadores {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  background: var(--carvao);
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio-g);
  padding: clamp(28px, 4.5vw, 62px);
}

@media (min-width: 880px) {
  .criadores { grid-template-columns: 1.15fr .85fr; }
}

:where(.criadores-texto) p { margin-bottom: 18px; color: var(--creme-medio); }
:where(.criadores-texto) p:last-of-type { margin-bottom: 0; }

.criadores-citacao {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--borda);
  font-family: var(--fonte-nota);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--creme);
  line-height: 1.45;
}

.criadores-foto {
  border-radius: var(--raio-g);
  overflow: hidden;
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
  position: relative;
}
.criadores-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ── MÓDULOS ──────────────────────────────────────────────── */
.modulos { display: flex; flex-direction: column; gap: clamp(52px, 7vw, 96px); }

.modulo {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3.5vw, 54px);
  align-items: center;
}

@media (min-width: 880px) {
  .modulo { grid-template-columns: 5fr 7fr; }
  .modulo:nth-child(even) .modulo-foto { order: 2; }
}

.modulo-foto {
  position: relative;
  border-radius: var(--raio-g);
  overflow: hidden;
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
}
.modulo-foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2, .7, .3, 1);
}
.modulo:hover .modulo-foto img { transform: scale(1.05); }

.modulo-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 11, 12, .7), transparent 45%);
  pointer-events: none;
}

.modulo-numero {
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 1;
  font-family: var(--fonte-titulo);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--creme);
  opacity: .9;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .8);
  font-variant-numeric: tabular-nums;
}

.modulo-corpo { border-left: 2px solid var(--borda); padding-left: clamp(20px, 3vw, 36px); }

.modulo-etiqueta {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vinho-vivo);
  display: block;
  margin-bottom: 10px;
}

.modulo-corpo h3 { margin-bottom: 12px; }

.modulo-promessa {
  font-family: var(--fonte-nota);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--creme);
  margin-bottom: 18px;
}

.modulo-especialista {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 7px 14px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--carvao);
  font-size: .84rem;
  font-weight: 600;
  color: var(--creme);
  transition: border-color var(--transicao), background-color var(--transicao);
}
.modulo-especialista:hover { border-color: var(--vinho); background: var(--vinho-fundo); }
.modulo-especialista .icone { width: 14px; height: 14px; color: var(--vinho-vivo); }
.modulo-especialista .rotulo {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--creme-tenue);
  font-weight: 700;
}

.modulo-bio { font-size: .97rem; color: var(--creme-fraco); }

/* ── BENEFÍCIOS ───────────────────────────────────────────── */
.beneficios {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 880px) { .beneficios { grid-template-columns: 1fr 1fr; } }

.beneficios h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  padding-bottom: 20px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--borda);
}

.lista-marcada { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.lista-marcada li { display: flex; gap: 14px; align-items: flex-start; font-size: 1rem; }
.lista-marcada .icone {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--vinho-vivo);
}

.painel-aprender {
  background: var(--vinho);
  border-radius: var(--raio-g);
  padding: clamp(28px, 4vw, 46px);
  box-shadow: 0 22px 60px rgba(139, 28, 36, .22);
}
.painel-aprender h2 { color: var(--creme); border-bottom-color: rgba(244, 241, 234, .22); }
.painel-aprender .lista-marcada li { color: var(--creme); font-weight: 500; }
.painel-aprender .lista-marcada .icone { color: rgba(244, 241, 234, .6); }

/* ── DEPOIMENTOS ──────────────────────────────────────────── */
.depoimentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.depoimento {
  background: var(--carvao);
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.depoimento .icone-aspas { width: 30px; height: 30px; color: var(--vinho); }
.depoimento blockquote { font-size: 1.02rem; color: var(--creme-medio); }
.depoimento figcaption { margin-top: auto; padding-top: 6px; }
.depoimento .autor { display: block; font-weight: 700; color: var(--creme); font-size: .95rem; }
.depoimento .contexto { font-size: .82rem; color: var(--creme-tenue); }
.depoimento-notas { display: flex; gap: 3px; }
.depoimento-notas .icone { width: 15px; height: 15px; color: var(--dourado); }

/* ── OFERTA ───────────────────────────────────────────────── */
.oferta-cartao {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  background: var(--carvao);
  border: 1px solid var(--vinho);
  border-radius: var(--raio-g);
  padding: clamp(34px, 5vw, 54px) clamp(24px, 4vw, 46px) clamp(28px, 4vw, 42px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .7), 0 0 60px rgba(139, 28, 36, .12);
}

.oferta-selo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--vinho);
  color: var(--creme);
  padding: 9px 24px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(139, 28, 36, .45);
}

.oferta-inclui {
  list-style: none;
  background: var(--preto);
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio);
  padding: 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 32px;
  text-align: left;
}
.oferta-inclui li { display: flex; gap: 13px; align-items: flex-start; font-size: .98rem; color: var(--creme); font-weight: 500; }
.oferta-inclui .icone { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--vinho-vivo); }

.oferta-preco { text-align: center; margin-bottom: 30px; }

.oferta-de {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--creme-tenue);
  margin-bottom: 10px;
}
.oferta-de s { color: var(--creme-tenue); text-decoration-thickness: 1px; }

.oferta-valor {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  line-height: 1;
}
.oferta-valor .prefixo {
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  font-weight: 600;
  color: var(--creme-fraco);
  padding-bottom: 8px;
}
.oferta-valor .numero {
  font-family: var(--fonte-titulo);
  font-size: clamp(3rem, 9vw, 4.6rem);
  font-weight: 800;
  color: var(--creme);
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.oferta-avista { display: block; margin-top: 12px; font-size: .95rem; color: var(--creme-fraco); }

.oferta-ia {
  margin-top: 18px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 18px;
  border: 1px solid rgba(139, 28, 36, .5);
  background: var(--vinho-fundo);
  border-radius: var(--raio);
  color: var(--creme);
  font-size: .88rem;
  font-weight: 600;
  text-align: left;
  transition: background-color var(--transicao), border-color var(--transicao);
}
.oferta-ia:hover { background: rgba(139, 28, 36, .22); border-color: var(--vinho); }
.oferta-ia .icone { width: 18px; height: 18px; color: var(--dourado); flex-shrink: 0; }
.oferta-ia u { text-decoration-color: var(--vinho-vivo); text-underline-offset: 3px; }

/* ── GARANTIA ─────────────────────────────────────────────── */
.garantia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  background: var(--preto);
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio-g);
  padding: clamp(26px, 4vw, 44px);
}
.garantia-selo {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 20px;
  background: var(--vinho);
  color: var(--creme);
  box-shadow: 0 0 34px rgba(139, 28, 36, .4);
}
.garantia-selo .icone { width: 42px; height: 42px; }
.garantia-texto { flex: 1 1 300px; }
.garantia-texto h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin-bottom: 10px; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  background: var(--carvao);
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color var(--transicao);
}
.faq-item:has(> button[aria-expanded="true"]) { border-color: var(--borda); }

.faq-pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  text-align: left;
  font-family: var(--fonte-titulo);
  font-size: 1.03rem;
  font-weight: 700;
  color: var(--creme);
  line-height: 1.35;
}
.faq-pergunta .icone {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--creme-tenue);
  transition: transform var(--transicao), color var(--transicao);
}
.faq-pergunta[aria-expanded="true"] .icone { transform: rotate(180deg); color: var(--vinho-vivo); }

.faq-selo {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--vinho);
  color: var(--creme);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: middle;
}

.faq-resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transicao);
}
.faq-resposta > div { overflow: hidden; }
.faq-item.aberto .faq-resposta { grid-template-rows: 1fr; }
.faq-resposta p {
  padding: 0 24px 24px;
  font-size: .97rem;
  color: var(--creme-fraco);
}

/* ── CTA FINAL E RODAPÉ ───────────────────────────────────── */
.cta-final {
  position: relative;
  text-align: center;
  padding-block: clamp(64px, 9vw, 118px);
  background: var(--carvao);
  border-top: 1px solid var(--borda-suave);
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 120%);
  height: 460px;
  background: radial-gradient(ellipse at center, var(--vinho-brilho), transparent 70%);
  opacity: .45;
  filter: blur(30px);
  pointer-events: none;
}
.cta-final > * { position: relative; z-index: 1; }
:where(.cta-final) p { color: var(--creme-fraco); margin: 16px auto 36px; max-width: 46ch; }

.rodape {
  background: var(--preto);
  border-top: 1px solid var(--borda-suave);
  /* O espaço extra embaixo é a altura da barra fixa de oferta:
     sem ele, o aviso legal fica escondido atrás dela. */
  padding-block: clamp(44px, 6vw, 70px) calc(32px + var(--altura-cta));
  font-size: .88rem;
  color: var(--creme-tenue);
}

/* Sem a barra fixa não há nada para compensar. */
body:not(.tem-cta-fixo) .rodape { padding-bottom: 32px; }

.rodape-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 36px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--borda-suave);
}

.rodape-marca img { width: 148px; margin-bottom: 16px; }
.rodape-marca p { max-width: 34ch; }

.rodape h3 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--creme-fraco);
  margin-bottom: 16px;
}

.rodape ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rodape a { transition: color var(--transicao); }
.rodape a:hover { color: var(--creme); }

.rodape-base {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--creme-tenue);
}
.rodape-aviso { max-width: 62ch; line-height: 1.6; }

.rodape-idade {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-weight: 800;
  font-size: .74rem;
  color: var(--creme-fraco);
  flex-shrink: 0;
}

/* ── CTA FIXO ─────────────────────────────────────────────── */
.cta-fixo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: rgba(20, 18, 19, .94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--borda);
  padding: 12px 20px;
  transform: translateY(110%);
  transition: transform var(--transicao);
}
.cta-fixo.visivel { transform: translateY(0); }

.cta-fixo-interno {
  max-width: var(--largura);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cta-fixo-preco { line-height: 1.25; }
.cta-fixo-preco strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--creme);
  letter-spacing: -.02em;
}
.cta-fixo-preco span { font-size: .76rem; color: var(--creme-tenue); }

.cta-fixo .botao { padding: 14px 26px; font-size: .86rem; white-space: nowrap; }

@media (max-width: 560px) {
  .cta-fixo-preco strong { font-size: 1rem; }
  .cta-fixo-preco span { font-size: .7rem; }
  .cta-fixo .botao { padding: 13px 18px; font-size: .78rem; }
}

/* ── MODAIS ───────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 5, 6, .82);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao), visibility var(--transicao);
}
.modal.aberto { opacity: 1; visibility: visible; }

.modal-caixa {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: min(88vh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--carvao-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-alta);
  padding: clamp(26px, 4vw, 46px);
  transform: translateY(14px) scale(.985);
  transition: transform var(--transicao);
}
.modal.aberto .modal-caixa { transform: translateY(0) scale(1); }

.modal-fechar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--preto);
  color: var(--creme-fraco);
  transition: color var(--transicao), background-color var(--transicao);
}
.modal-fechar:hover { color: var(--creme); background: var(--vinho); }
.modal-fechar .icone { width: 18px; height: 18px; }

.modal-tela { display: none; flex-direction: column; }
.modal-tela.ativa { display: flex; animation: surgir .34s ease-out both; }

@keyframes surgir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-icone {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 22px;
  border-radius: 18px;
  background: var(--vinho-fundo);
  border: 1px solid rgba(139, 28, 36, .4);
  color: var(--vinho-vivo);
}
.modal-icone .icone { width: 30px; height: 30px; }

.modal-caixa h2 { font-size: clamp(1.4rem, 3.4vw, 1.95rem); text-align: center; margin-bottom: 14px; }
.modal-caixa > .modal-tela > p { text-align: center; color: var(--creme-fraco); margin-bottom: 26px; }

/* Quiz */
.quiz-progresso {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--creme-tenue);
}
.quiz-barra {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--borda);
  overflow: hidden;
}
.quiz-barra i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--vinho);
  border-radius: inherit;
  transition: width var(--transicao);
}

.quiz-pergunta {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 700;
  color: var(--creme);
  line-height: 1.25;
  margin-bottom: 22px;
  text-wrap: balance;
}

.quiz-opcoes { display: flex; flex-direction: column; gap: 11px; }

.quiz-opcao {
  width: 100%;
  text-align: left;
  padding: 17px 20px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--preto);
  color: var(--creme-medio);
  font-size: .97rem;
  line-height: 1.45;
  transition: border-color var(--transicao), background-color var(--transicao),
              color var(--transicao), transform var(--transicao);
}
.quiz-opcao:hover {
  border-color: var(--vinho);
  background: var(--vinho-fundo);
  color: var(--creme);
  transform: translateX(3px);
}

.quiz-carregando { text-align: center; padding-block: 46px; }
.girando {
  width: 46px;
  height: 46px;
  margin: 0 auto 22px;
  border: 3px solid var(--borda);
  border-top-color: var(--vinho);
  border-radius: 50%;
  animation: girar .9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.quiz-pitch {
  margin-top: 22px;
  padding: 22px 24px;
  background: var(--preto);
  border: 1px solid var(--borda-suave);
  border-left: 3px solid var(--vinho);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: .98rem;
  color: var(--creme-medio);
  text-align: left;
}

/* Formulários */
.campo { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; text-align: left; }
.campo label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--creme-fraco);
}
.campo input,
.campo textarea {
  width: 100%;
  padding: 15px 17px;
  background: var(--preto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--creme);
  font-size: .98rem;
  transition: border-color var(--transicao);
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--creme-tenue); }
.campo input:focus,
.campo textarea:focus { outline: none; border-color: var(--vinho-vivo); }
.campo textarea { resize: vertical; min-height: 92px; }

.campo-erro {
  display: none;
  font-size: .84rem;
  color: var(--vinho-vivo);
  font-weight: 600;
}
.campo.com-erro .campo-erro { display: block; }
.campo.com-erro input,
.campo.com-erro textarea { border-color: var(--vinho-vivo); }

.opcoes-radio { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.opcoes-radio label {
  flex: 1 1 140px;
  padding: 13px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--preto);
  font-size: .88rem;
  font-weight: 600;
  color: var(--creme-medio);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transicao), background-color var(--transicao), color var(--transicao);
}
.opcoes-radio input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes-radio input:checked + span,
.opcoes-radio label:has(input:checked) {
  border-color: var(--vinho);
  background: var(--vinho-fundo);
  color: var(--creme);
}
.opcoes-radio label:has(input:focus-visible) { outline: 2px solid var(--vinho-vivo); outline-offset: 2px; }

.aviso-privacidade {
  margin-top: 16px;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--creme-tenue);
  text-align: center;
}
.aviso-privacidade a { color: var(--creme-fraco); text-decoration: underline; text-underline-offset: 2px; }

/* Resultado da IA */
.ia-resultado {
  background: var(--preto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--creme);
  white-space: pre-wrap;
  margin-bottom: 18px;
  text-align: left;
}

.ia-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.ia-acoes .botao { flex: 1 1 180px; }

/* ── CONVITE DO QUIZ ──────────────────────────────────────── */
.convite {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: min(310px, calc(100vw - 40px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--creme);
  border-radius: var(--raio);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  text-align: left;
  transform: translateY(140%);
  transition: transform var(--transicao);
}
.convite.visivel { transform: translateY(0); }
.convite:hover { transform: translateY(-3px); }

.convite-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--vinho-fundo);
  color: var(--vinho);
  flex-shrink: 0;
}
.convite-icone .icone { width: 24px; height: 24px; stroke-width: 2.1; }

/* Os seletores do texto são escopados por classe de propósito:
   um `.convite span` genérico também atingiria o badge do ícone,
   que é um <span>, e venceria por especificidade. */
.convite-texto { display: block; }
.convite-texto strong {
  display: block;
  color: var(--vinho);
  font-size: .93rem;
  line-height: 1.25;
  margin-bottom: 3px;
}
.convite-texto span {
  display: block;
  color: #4a4245;
  font-size: .8rem;
  line-height: 1.35;
}

.convite-fechar {
  position: absolute;
  top: -9px;
  right: -9px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--carvao-topo);
  color: var(--creme);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.convite-fechar .icone { width: 14px; height: 14px; }
.convite-fechar:hover { background: var(--vinho); }

/* Quando o CTA fixo aparece, o convite sobe para não colidir. */
body.cta-visivel .convite { bottom: calc(var(--altura-cta) + 14px); }

/* ── PORTÃO 18+ ───────────────────────────────────────────── */
.portao {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--preto);
}
.portao[hidden] { display: none; }

.portao-caixa { max-width: 460px; text-align: center; }
.portao-caixa img { width: 168px; margin: 0 auto 30px; }
.portao-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.05rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--creme);
  text-wrap: balance;
  margin-bottom: 16px;
}
:where(.portao-caixa) p { color: var(--creme-fraco); margin-bottom: 30px; font-size: .98rem; }
.portao-acoes { display: flex; flex-direction: column; gap: 12px; }
.portao-sair {
  font-size: .86rem;
  color: var(--creme-tenue);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px;
}
.portao-sair:hover { color: var(--creme-fraco); }

/* ── COOKIES ──────────────────────────────────────────────── */
.cookies {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 80;
  width: min(400px, calc(100vw - 40px));
  padding: 22px 24px;
  background: var(--carvao-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  font-size: .88rem;
  color: var(--creme-medio);
}
.cookies[hidden] { display: none; }
.cookies p { margin-bottom: 16px; }
.cookies a { color: var(--creme); text-decoration: underline; text-underline-offset: 2px; }
.cookies-acoes { display: flex; gap: 10px; }
.cookies-acoes button { flex: 1; padding: 12px 14px; font-size: .82rem; }

body.cta-visivel .cookies { bottom: calc(var(--altura-cta) + 14px); }

/* ── RESPONSIVO ───────────────────────────────────────────── */
@media (max-width: 879px) {
  .modulo-corpo { border-left: 0; padding-left: 0; }
  .modulo-numero { font-size: 2.6rem; }
  .criadores-foto { max-width: 420px; margin-inline: auto; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .container { padding-inline: 18px; }
  .botao { padding: 17px 24px; font-size: .94rem; }
  .identificacao-lista li { padding: 22px 20px 22px 48px; }
  .identificacao-lista li::before { left: 20px; top: 29px; }
  .convite { right: 12px; left: 12px; width: auto; bottom: 12px; }
  .cookies { left: 12px; right: 12px; width: auto; bottom: 12px; }
  body.cta-visivel .convite,
  body.cta-visivel .cookies { bottom: calc(var(--altura-cta) + 10px); }
}

/* ── IMPRESSÃO ────────────────────────────────────────────── */
@media print {
  .ticker, .cta-fixo, .convite, .cookies, .modal, .portao, .video-fachada { display: none !important; }
  body { background: #fff; color: #000; }
}