/* =========================================================
   Método Restaurante Cheio — Landing page
   Desktop: medidas do Figma (frame 1920px) × --u, que escala
            a página proporcionalmente entre 1024px e 1920px.
   Mobile (< 1024px): medidas do frame mobile (390px).
   ========================================================= */

:root {
  --vinho: #3e0b14;
  --vinho-claro: #6a2430;
  --vinho-texto: #4a121c;
  --creme: #d5cebc;
  --dourado: #b9925a;
  --dourado-claro: #f0c68a;
  --cinza-claro: #f2f2f2;
  --vermelho: #eb2b37;
  --verde-whats: #00ec73;
  --gradiente-dourado: linear-gradient(90deg, var(--dourado), var(--dourado-claro));

  --fonte: "Bricolage Grotesque", system-ui, sans-serif;

  /* 1 "pixel do Figma" no desktop */
  --u: min(1px, calc(100vw / 1920));
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--vinho);
  color: var(--creme);
  font-family: var(--fonte);
  font-optical-sizing: auto;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}
img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong { font-weight: 800; color: var(--dourado); }

/* ---------- Estrutura ---------- */
.secao {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--vinho);
  overflow: hidden;
}
.secao--clara { background: var(--cinza-claro); color: var(--vinho); }

/* ---------- Tipografia compartilhada ---------- */
.titulo-h2 {
  font-size: calc(47.92 * var(--u));
  font-weight: 600;
  text-wrap: balance;
}
.titulo-h2--claro { color: var(--creme); }
.subtitulo {
  font-size: calc(42.61 * var(--u));
  font-weight: 300;
  text-wrap: balance;
}
.subtitulo--claro { color: var(--creme); }

/* ---------- Botão CTA ---------- */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(13.12 * var(--u));
  width: calc(606 * var(--u));
  min-height: calc(98.38 * var(--u));
  padding: calc(13.12 * var(--u));
  border-radius: calc(6.56 * var(--u));
  background: var(--gradiente-dourado);
  color: #000;
  font-size: calc(26.23 * var(--u));
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-cta img { width: calc(22.3 * var(--u)); height: auto; }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); filter: brightness(1.05); }
.btn-cta:focus-visible { outline: 3px solid var(--dourado-claro); outline-offset: 3px; }

.logo { width: calc(368 * var(--u)); height: auto; }

/* =========================================================
   01 · Barra de oferta
   ========================================================= */
.barra-oferta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(121 * var(--u));
  padding: 10px;
  background: var(--vermelho);
  color: #fff;
  font-size: calc(45.07 * var(--u));
  font-weight: 600;
  text-align: center;
}
.js-contador { font-variant-numeric: tabular-nums; }

/* =========================================================
   02 · Hero
   ========================================================= */
.hero { display: block; }
.hero__inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  min-height: calc(860 * var(--u));
  display: flex;
  align-items: flex-end;
}
.hero__conteudo {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  width: calc(608 * var(--u));
  margin: calc(87 * var(--u)) 0 0 calc(390 * var(--u));
  text-align: left;
}
.hero__logo { width: calc(367 * var(--u)); margin-left: calc(2 * var(--u)); }
.hero__titulo {
  margin-top: calc(30 * var(--u));
  font-size: calc(36.98 * var(--u));
  font-weight: 600;
  width: calc(599 * var(--u));
}
.hero__titulo strong { font-variation-settings: "opsz" 96; }
.hero__subtitulo {
  margin-top: calc(24 * var(--u));
  font-size: calc(29.14 * var(--u));
  font-weight: 300;
}
.hero__subtitulo strong { font-weight: 500; color: inherit; }
.hero .btn-cta { margin-top: calc(30 * var(--u)); }
.hero__visual {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(910 * var(--u));
}
.hero__visual img { width: 100%; }

/* =========================================================
   03 · Problema
   ========================================================= */
.problema { padding: calc(90 * var(--u)) 0 calc(84 * var(--u)); }
.problema__titulo { max-width: calc(881 * var(--u)); font-weight: 700; }
.problema__titulo { font-weight: 600; }
.problema__titulo strong u { text-decoration-thickness: from-font; text-underline-position: from-font; }
.problema__titulo b { font-weight: 700; }
.problema__subtitulo { max-width: calc(874 * var(--u)); margin-top: calc(40 * var(--u)); }
.grid-midias {
  display: grid;
  grid-template-columns: repeat(4, calc(417 * var(--u)));
  gap: calc(21 * var(--u));
  margin: calc(53 * var(--u)) 0 calc(90 * var(--u));
}
.midia {
  aspect-ratio: 417 / 678;
  width: 100%;
  border-radius: calc(5.32 * var(--u));
  overflow: hidden;
  object-fit: cover;
}
.midia--placeholder { background: #d9d9d9; }
.video-problema {
  /* vídeo vertical (formato stories): o maior possível sem passar da altura da tela */
  width: min(100%, calc(82vh * 9 / 16), 560px);
  aspect-ratio: 9 / 16;
  margin: calc(53 * var(--u)) auto calc(90 * var(--u));
  border-radius: calc(10 * var(--u));
  overflow: hidden;
  background: #000;
}
.video-problema iframe { display: block; width: 100%; height: 100%; border: 0; }

/* =========================================================
   04 · O que você vai aprender
   ========================================================= */
.aprender { padding: calc(90 * var(--u)) 0 calc(137 * var(--u)); }
.aprender .titulo-h2 { max-width: calc(740 * var(--u)); }
.grid-modulos {
  display: grid;
  grid-template-columns: repeat(3, calc(474 * var(--u)));
  gap: calc(30 * var(--u)) calc(12 * var(--u));
  margin: calc(53 * var(--u)) 0 calc(85 * var(--u));
}
.card-modulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(29.14 * var(--u));
  min-height: calc(453 * var(--u));
  padding: calc(30 * var(--u)) calc(48 * var(--u));
  background: var(--cinza-claro);
  border: calc(0.86 * var(--u)) solid var(--dourado);
  border-radius: calc(11.14 * var(--u));
  box-shadow: 0 calc(18 * var(--u)) calc(9.86 * var(--u)) rgba(0,0,0,.13);
  color: var(--vinho);
}
.card-modulo__icone { width: calc(var(--i) * var(--u)); }
.card-modulo h3 {
  width: calc(371 * var(--u));
  padding-bottom: calc(29.14 * var(--u));
  border-bottom: calc(1.71 * var(--u)) solid var(--dourado);
  font-size: calc(32.25 * var(--u));
  font-weight: 800;
}
.card-modulo p {
  width: calc(377 * var(--u));
  padding-bottom: calc(29.14 * var(--u));
  border-bottom: calc(1.71 * var(--u)) solid var(--dourado);
  font-size: calc(25.94 * var(--u));
  font-weight: 300;
}
/* a linha de baixo é mais curta que a do título, como no Figma */
.card-modulo p { border-image: linear-gradient(90deg, transparent 6.6%, var(--dourado) 6.6%, var(--dourado) 93.4%, transparent 93.4%) 1; }

/* =========================================================
   05 · Prova social
   ========================================================= */
.prova { padding: calc(80 * var(--u)) 0 calc(91 * var(--u)); }
.prova__titulo { max-width: calc(967 * var(--u)); }
.prova__subtitulo { margin-top: calc(36 * var(--u)); max-width: none; }
.grid-videos {
  display: grid;
  grid-template-columns: repeat(4, calc(430.3 * var(--u)));
  gap: calc(14.92 * var(--u));
  margin-top: calc(90 * var(--u));
}
.grid-videos img { width: 100%; aspect-ratio: 430 / 670; object-fit: cover; }
.prova__titulo-resultados { max-width: calc(1084 * var(--u)); margin-top: calc(154 * var(--u)); }
.grid-prints {
  display: grid;
  grid-template-columns: repeat(2, calc(747 * var(--u)));
  gap: calc(10 * var(--u));
  margin-top: calc(46 * var(--u));
}
.grid-prints img { width: 100%; aspect-ratio: 747 / 283; object-fit: cover; }
.prova__chamada { margin-top: calc(88 * var(--u)); font-size: calc(35.64 * var(--u)); max-width: none; }
.prova .btn-cta { margin-top: calc(29 * var(--u)); }

/* =========================================================
   06 · Para quem é
   ========================================================= */
.para-quem { padding: calc(88 * var(--u)) 0 calc(38 * var(--u)); }
.para-quem__titulo { max-width: calc(720 * var(--u)); }
.para-quem__titulo strong { font-weight: 700; }
.para-quem__subtitulo { max-width: calc(717 * var(--u)); margin-top: calc(29 * var(--u)); font-size: calc(35.64 * var(--u)); }
.grid-negocios {
  display: grid;
  grid-template-columns: repeat(4, calc(388 * var(--u)));
  gap: calc(39 * var(--u)) calc(17 * var(--u));
  margin: calc(39 * var(--u)) 0 calc(74 * var(--u));
}
.card-negocio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(35.7 * var(--u));
  min-height: calc(437 * var(--u));
  padding: calc(8.5 * var(--u));
  background: #fff;
  border-radius: calc(8.5 * var(--u));
}
.card-negocio h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(244 * var(--u));
  min-height: calc(51.5 * var(--u));
  padding: calc(6.7 * var(--u)) 0;
  border-block: calc(1.15 * var(--u)) solid var(--dourado);
  color: var(--vinho);
  font-size: calc(32.06 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}
.card-negocio--longo h3 { font-size: calc(25.3 * var(--u)); width: auto; border-image: linear-gradient(90deg, transparent calc(44.5 * var(--u)), var(--dourado) calc(44.5 * var(--u)), var(--dourado) calc(100% - 44.5 * var(--u)), transparent calc(100% - 44.5 * var(--u))) 1; }
.card-negocio--duas-linhas h3 { font-size: calc(23.49 * var(--u)); white-space: normal; }
.card-negocio img {
  width: calc(294 * var(--u));
  aspect-ratio: 294 / 247;
  object-fit: cover;
  border-radius: calc(10 * var(--u));
}

/* =========================================================
   07 · Oferta
   ========================================================= */
.oferta { padding: calc(36 * var(--u)) 0; scroll-margin-top: 20px; }
.card-oferta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(42.86 * var(--u));
  width: calc(867 * var(--u));
  padding: calc(66 * var(--u)) calc(17.15 * var(--u));
  background: linear-gradient(180deg, var(--vinho-claro), var(--vinho));
  border: calc(3.43 * var(--u)) solid rgba(185,146,90,.5);
  border-radius: calc(25.72 * var(--u));
}
.card-oferta__logo { width: calc(498 * var(--u)); }
.card-oferta__titulo {
  width: calc(715 * var(--u));
  padding: calc(14.6 * var(--u)) 0;
  border-block: calc(1.68 * var(--u)) solid var(--dourado);
  border-image: linear-gradient(90deg, transparent 2.9%, var(--dourado) 2.9%, var(--dourado) 97.1%, transparent 97.1%) 1;
  color: #fff;
  font-size: calc(65.33 * var(--u));
  font-weight: 600;
}
.card-oferta__descricao { width: calc(721 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 300; }
.card-oferta__descricao strong { font-weight: 600; color: inherit; }
.preco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  color: var(--dourado-claro);
  text-transform: uppercase;
  line-height: 1.1;
}
.preco__parcelas, .preco__avista { font-size: calc(39.14 * var(--u)); letter-spacing: .02em; }
.preco__valor { font-size: calc(152.9 * var(--u)); font-weight: 700; line-height: 1; }
.btn-cta--oferta {
  width: calc(741 * var(--u));
  min-height: calc(120.3 * var(--u));
  border-radius: calc(8.02 * var(--u));
  color: var(--vinho-texto);
  font-size: calc(32.08 * var(--u));
}
.card-oferta__nota { width: calc(659 * var(--u)); font-size: calc(26.34 * var(--u)); font-weight: 300; }

/* =========================================================
   08 · Garantia
   ========================================================= */
.garantia { padding: calc(38 * var(--u)) 0 calc(37 * var(--u)); }
.card-garantia {
  display: flex;
  align-items: center;
  gap: calc(39 * var(--u));
  width: calc(1077 * var(--u));
  min-height: calc(484 * var(--u));
  padding: calc(23 * var(--u)) calc(60 * var(--u)) calc(23 * var(--u)) calc(41 * var(--u));
  background: #ba935b;
  border-radius: calc(28.24 * var(--u));
  color: #fff;
  text-align: left;
}
.card-garantia__selo { width: calc(436 * var(--u)); flex-shrink: 0; }
.card-garantia h2 { font-size: calc(35.05 * var(--u)); font-weight: 600; }
.card-garantia p { font-size: calc(17.65 * var(--u)); font-weight: 300; }
.card-garantia h2 + p { margin-top: calc(10 * var(--u)); }
.card-garantia p + p { margin-top: 1em; }

/* =========================================================
   09 · Sobre os autores
   ========================================================= */
.sobre { padding: calc(37 * var(--u)) 0 calc(86 * var(--u)); }
.sobre__inner {
  display: grid;
  grid-template-columns: calc(681 * var(--u)) calc(655 * var(--u));
  grid-template-areas: "foto titulo" "foto bio" "foto btn";
  grid-template-rows: auto auto 1fr;
  column-gap: calc(37 * var(--u));
  text-align: left;
}
.sobre__foto { grid-area: foto; width: 100%; aspect-ratio: 681 / 928; object-fit: cover; border-radius: calc(24 * var(--u)); }
.sobre__titulo { grid-area: titulo; margin-top: calc(38 * var(--u)); font-size: calc(52.03 * var(--u)); }
.sobre__bio { grid-area: bio; margin-top: calc(26 * var(--u)); font-size: calc(25.27 * var(--u)); font-weight: 300; }
.sobre__bio p + p { margin-top: 1.2em; }
.sobre__bio b { font-weight: 700; }
.sobre__bio strong { font-weight: 600; color: inherit; }
.sobre__btn { grid-area: btn; margin-top: calc(40 * var(--u)); }

/* =========================================================
   10 · FAQ
   ========================================================= */
.faq { padding: calc(85 * var(--u)) 0 calc(131 * var(--u)); }
.faq__inner {
  display: flex;
  align-items: flex-start;
  gap: calc(115 * var(--u));
  text-align: left;
}
.faq__intro { display: flex; flex-direction: column; align-items: flex-start; gap: calc(27 * var(--u)); width: calc(466 * var(--u)); }
.faq__intro h2 { font-size: calc(50 * var(--u)); font-weight: 400; line-height: 1.224; letter-spacing: -0.03em; }
.faq__intro p { width: calc(384 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.36; letter-spacing: -0.03em; }
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  width: calc(282 * var(--u));
  min-height: calc(74 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--verde-whats);
  color: #fff;
  font-family: "Sora", var(--fonte);
  font-size: calc(19.37 * var(--u));
  font-weight: 600;
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease;
}
.btn-whatsapp:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn-whatsapp__icone {
  display: grid;
  place-items: center;
  width: calc(39 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
}
.btn-whatsapp__icone img { width: calc(18 * var(--u)); }

.faq__lista { display: flex; flex-direction: column; gap: calc(10 * var(--u)); width: calc(573 * var(--u)); }
.faq-item__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  width: 100%;
  min-height: calc(90 * var(--u));
  padding: calc(16 * var(--u)) calc(38 * var(--u)) calc(16 * var(--u)) calc(34 * var(--u));
  background: #e6e6e6;
  border: 1px solid #cecece;
  border-radius: calc(10 * var(--u));
  color: #000;
  font-size: max(14px, calc(14.32 * var(--u)));
  font-weight: 600;
  line-height: 1.28;
  text-align: left;
}
.faq-item__pergunta img { width: 12px; flex-shrink: 0; transform: rotate(45deg); transition: transform .25s ease; }
.faq-item.is-aberto .faq-item__pergunta img { transform: rotate(135deg); }
.faq-item__resposta { padding: calc(23 * var(--u)) calc(38 * var(--u)) calc(13 * var(--u)); }
.faq-item__resposta p { font-size: max(14px, calc(16 * var(--u))); line-height: 1.36; letter-spacing: -0.03em; }

/* =========================================================
   11 · Rodapé
   ========================================================= */
.rodape { padding: calc(130 * var(--u)) 20px calc(60 * var(--u)); gap: calc(70 * var(--u)); }
.rodape__logo { width: calc(532 * var(--u)); }
.rodape__copy { font-size: 12px; opacity: .5; }

/* =========================================================
   MOBILE / TABLET (< 1024px) — frame mobile 390px do Figma
   ========================================================= */
@media (max-width: 1023px) {
  .secao { padding: 48px 20px; gap: 24px; }
  .secao > * { width: 100%; max-width: 560px; }

  .titulo-h2 { font-size: 24px; max-width: 560px !important; }
  .subtitulo { font-size: 17px; max-width: 560px !important; margin-top: 0 !important; }

  .btn-cta {
    width: 100%;
    max-width: 560px;
    min-height: 58px;
    margin: 0 !important;
    padding: 0 16px;
    gap: 8px;
    border-radius: 6.5px;
    font-size: 15px;
  }
  .btn-cta img { width: 13px; }

  .barra-oferta { min-height: 0; padding: 14px 16px; font-size: 16px; }

  /* Hero */
  .hero { padding: 32px 0 0; }
  .hero__inner { flex-direction: column; align-items: center; min-height: 0; }
  .hero__conteudo {
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    width: 100%; max-width: 600px; margin: 0; padding: 0 20px; text-align: center;
  }
  .hero__logo { width: 228px; margin: 0; }
  .hero__titulo { width: auto; margin: 0; font-size: 25px; text-wrap: balance; }
  .hero__subtitulo { margin: 0; font-size: 16px; }
  .hero__visual { position: static; width: 100%; max-width: 480px; margin-top: 28px; }

  /* Problema */
  .grid-midias { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }
  .midia { border-radius: 5px; }
  .video-problema { width: min(100%, calc(82vh * 9 / 16)); margin: 0 auto; border-radius: 8px; }

  /* Aprender */
  .grid-modulos { grid-template-columns: 1fr; gap: 14px; margin: 0; }
  .card-modulo { min-height: 0; gap: 20px; padding: 32px 28px; border-width: 1px; border-radius: 8px; box-shadow: 0 13px 7px rgba(0,0,0,.13); }
  .card-modulo__icone { width: calc(var(--i) * .74px); }
  .card-modulo h3, .card-modulo p { width: 100%; padding-bottom: 20px; border-bottom-width: 1.3px; }
  .card-modulo h3 { font-size: 22px; }
  .card-modulo p { font-size: 17px; }

  /* Prova social */
  .grid-videos { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }
  .prova__titulo-resultados { font-size: 22px; margin: 0; }
  .grid-prints { grid-template-columns: 1fr; gap: 10px; margin: 0; }
  .prova__chamada { margin: 0; font-size: 17px; }

  /* Para quem é */
  .para-quem__subtitulo { font-size: 16px; }
  .grid-negocios { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }
  .card-negocio { min-height: 0; gap: 16px; padding: 18px 8px 14px; border-radius: 4px; }
  .card-negocio h3 { width: 80%; min-height: 26px; padding: 4px 0; border-width: .6px; font-size: 14px; }
  .card-negocio--longo h3 { width: auto; font-size: 11px; border-image: none; }
  .card-negocio--duas-linhas h3 { font-size: 10.5px; }
  .card-negocio img { width: 76%; border-radius: 4.4px; }

  /* Oferta */
  .oferta { padding: 40px 20px 48px; }
  .card-oferta { width: 100%; gap: 20px; padding: 32px 20px; border-width: 1.4px; border-radius: 18px; }
  .card-oferta__logo { width: 249px; }
  .card-oferta__titulo, .card-oferta__descricao, .card-oferta__nota { width: 100%; }
  .card-oferta__titulo { padding: 10px 0; border-width: 1px; font-size: 28px; }
  .card-oferta__descricao { font-size: 15px; }
  .preco { gap: 0; }
  .preco__parcelas, .preco__avista { font-size: 18px; }
  .preco__valor { font-size: 64px; line-height: 1.1; }
  .btn-cta--oferta { font-size: 15px; }
  .card-oferta__nota { font-size: 13px; }

  /* Garantia */
  .garantia { padding: 16px 20px 48px; }
  .card-garantia {
    flex-direction: column; gap: 14px; width: 100%; min-height: 0;
    padding: 28px 20px; border-radius: 20px; text-align: center;
  }
  .card-garantia__selo { width: 180px; }
  .card-garantia h2 { font-size: 22px; }
  .card-garantia p { font-size: 14px; }

  /* Sobre */
  .sobre__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "titulo" "foto" "bio" "btn";
    grid-template-rows: auto;
    row-gap: 24px;
  }
  .sobre__titulo { margin: 0; font-size: 24px; text-align: center; }
  .sobre__foto { border-radius: 16px; }
  .sobre__bio { margin: 0; font-size: 15px; }

  /* FAQ */
  .faq__inner { flex-direction: column; gap: 20px; }
  .faq__intro { width: 100%; gap: 20px; }
  .faq__intro h2 { font-size: 28px; }
  .faq__intro p { width: 100%; font-size: 15px; }
  .btn-whatsapp { width: auto; min-height: 56px; gap: 14px; padding: 0 24px; border-radius: 10px; font-size: 16px; }
  .btn-whatsapp__icone { width: 32px; }
  .btn-whatsapp__icone img { width: 15px; }
  .faq__lista { width: 100%; gap: 10px; }
  .faq-item__pergunta { min-height: 0; gap: 12px; padding: 18px 16px; border-radius: 10px; font-size: 14px; }
  .faq-item__resposta { padding: 12px 4px 4px; }
  .faq-item__resposta p { font-size: 14px; }

  /* Rodapé */
  .rodape { padding: 56px 20px 40px; gap: 32px; }
  .rodape__logo { width: 266px; max-width: 266px; }
}

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