/* ==========================================================================
   Recepção 5 Estrelas, landing page
   Identidade visual espelhada da referência kitsuperhost.vivedehospedagem.com.br
   Tokens medidos no DOM da referência (fonte, cores, raios, espaçamentos).
   ========================================================================== */

:root {
  /* Paleta medida na referência */
  --bg: #faf8f5;
  --bg-dark: #081706;
  --text: #222;
  --text-ondark: #fff;
  --accent: #80ae72;        /* verde sálvia de destaque em títulos */
  --accent-texto: #4a7040;  /* verde para TEXTO em fundo claro: o #80ae72 rende
                               só 2,41:1 sobre o #faf8f5 e reprova no WCAG AA;
                               este rende 5,38:1. Use o --accent apenas em
                               elemento decorativo ou sobre fundo escuro. */
  --cta: #6fcf52;           /* verde do botão principal */
  --check: #22c55e;         /* verde do check de lista */
  --error: #c1524a;         /* vermelho das dores */
  --price-cut: #e23d3d;     /* preço riscado */

  /* Tipografia */
  --font-heading: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;

  /* Raios medidos */
  --radius-photo: 16px;
  --radius-card: 16px;
  --radius-card-offer: 24px;
  --radius-btn: 9999px;
}

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

html,
body {
  overflow-x: hidden;
}

html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  /* Para o botão "QUERO VER OS 7 GUIAS", que rola até #entregaveis.
     Desligado em prefers-reduced-motion mais abaixo. */
  scroll-behavior: smooth;
}

/* Respiro acima do alvo das âncoras, para o título não encostar no topo. */
#sem-design,
#entregaveis,
#oferta {
  scroll-margin-top: 24px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--text);
}

p {
  margin: 0;
}

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

a {
  color: inherit;
}

/* Barra de rolagem herda a cor do texto da seção, como na referência */
* {
  scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent;
}

.skip {
  position: fixed;
  top: -100px;
  left: 10px;
  z-index: 99;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  background: var(--text);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 14px;
  text-decoration: none;
}

.skip:focus {
  top: 10px;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* ---------------------------------------------------------------- layout -- */

.section {
  padding: 40px 0;
}

.wrap {
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-820 { max-width: 820px; }
.wrap-672 { max-width: 672px; }
.wrap-768 { max-width: 768px; }
.wrap-1024 { max-width: 1024px; }
.wrap-1152 { max-width: 1152px; }

.center {
  text-align: center;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ------------------------------------------------------------ tipografia -- */

.h-display {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.05;
}

.h-section {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

.h-section-caps {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.h-card {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.accent {
  color: var(--accent);
  font-weight: 600;
}

.lead {
  font-size: 18px;
  color: rgba(34, 34, 34, 0.8);
}

.note {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
}

.prose {
  max-width: 65ch;
}

.mx-auto { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------- botões --- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  border-radius: var(--radius-btn);
  background: var(--cta);
  color: #000;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-decoration: none;
  animation: cta-pulse 2s ease-in-out infinite;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.cta:hover {
  animation: none;
  transform: scale(1.05);
  box-shadow: 0 18px 45px -15px rgba(111, 207, 82, 0.7);
}

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

.cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cta-light {
  background: #fff;
  box-shadow: 0 25px 60px -20px rgba(255, 255, 255, 0.4);
}

.cta-light:hover {
  box-shadow: 0 18px 45px -15px rgba(255, 255, 255, 0.55);
}

.cta-lg {
  height: 56px;
  padding: 0 40px;
  font-size: 16px;
}

.cta-block {
  width: 100%;
}

.cta-row {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* -------------------------------------------------------- reveal / anim --- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s, transform 0.5s;
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-zoom {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.7s, transform 0.7s;
}

.reveal-zoom.visible {
  opacity: 1;
  transform: scale(1);
}

.shake-in.visible {
  animation: shake-in 0.5s;
}

@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes shake-in {
  0% { transform: translate(0); }
  20% { transform: translate(-2px); }
  40% { transform: translate(2px); }
  60% { transform: translate(-1px); }
  80% { transform: translate(1px); }
  100% { transform: translate(0); }
}

@keyframes orb-a {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes orb-b {
  0%, 100% { opacity: 0.5; transform: scale(1.05); }
  50% { opacity: 0.95; transform: scale(1); }
}

@keyframes orb-c {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

@keyframes orb-d {
  0%, 100% { opacity: 0.5; transform: scale(1.04); }
  50% { opacity: 0.9; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta { animation: none; }
  .reveal,
  .reveal-zoom {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----------------------------------------------------------------- hero --- */

.hero {
  padding: 64px 0;
}

.hero h1 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.05;
  text-wrap: balance;
}

.hero .lead {
  margin-top: 20px;
}

.hero-photo {
  margin-top: 4px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-photo);
  object-fit: contain;
}

/* ------------------------------------------------------------ cards dor --- */

.card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.pain-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid rgba(193, 82, 74, 0.25);
  border-radius: var(--radius-card);
  background: #fff;
}

.pain-card p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.375;
}

.pain-card svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: none;
  stroke: var(--error);
  stroke-width: 2;
  stroke-linecap: round;
}

/* --------------------------------------------------------- checklist ------ */

.check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.check-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-btn);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.check-card span {
  font-size: 15px;
  line-height: 1.375;
}

.check-card svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: none;
  stroke: var(--check);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------- entregável ------- */

.deliverable {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-card-offer);
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.deliverable-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.deliverable-media img {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  height: auto;
  object-fit: contain;
}

.deliverable-copy {
  margin-top: 20px;
  text-align: center;
}

.deliverable-copy p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.625;
  color: rgba(34, 34, 34, 0.85);
}

/* ------------------------------------------------------------- bônus ------ */

/* Os dois cartões vivem no MESMO asset e se tocam (análise de componentes
   conectados no canal alfa deu 1 peça só), então não há recorte limpo
   possível: mostramos a foto real uma vez e deixamos os cards só com texto. */
.bonus-figure {
  margin: 40px 0 0;
}

.bonus-figure img {
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-photo);
  object-fit: contain;
}

.bonus-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  text-align: center;
  color: rgba(34, 34, 34, 0.65);
}

.bonus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
}

.bonus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-card-offer);
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.bonus-tag {
  position: absolute;
  top: -12px;
  left: -12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}


.bonus-card .h-card {
  margin-top: 20px;
  text-align: center;
}

.bonus-price {
  margin-top: 12px;
  text-align: center;
  font-size: 16px;
  color: rgba(34, 34, 34, 0.7);
}

.bonus-price s {
  color: var(--price-cut);
}

.bonus-price strong {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
}

.bonus-card > p:last-child {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.625;
  text-align: center;
  color: rgba(34, 34, 34, 0.8);
}

/* ---------------------------------------------- bônus 3: mensagens -------- */

/* Selo "BÔNUS 3" acima do título: mesmo visual da .bonus-tag, fora do card. */
.bonus-tag-inline {
  position: static;
  margin-bottom: 16px;
}

.bonus-card-wide {
  max-width: 760px;
  margin: 32px auto 0;
}

.bonus-text {
  font-size: 15px;
  line-height: 1.625;
  text-align: center;
  color: rgba(34, 34, 34, 0.85);
}

.bonus-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.bonus-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.375;
}

.bonus-list svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: var(--check);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 768px) {
  .bonus-card-wide {
    padding: 32px;
  }

  .bonus-text,
  .bonus-list li {
    font-size: 16px;
  }

  .bonus-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------- depoimentos em faixa ------- */

/* Faixa que desliza sem parar e sem controles. A trilha tem a lista duas
   vezes e anda -50%: quando a 1ª cópia sai, a 2ª está no lugar exato dela.
   O espaço entre os cards é padding-right (não gap) para as duas metades
   terem a mesma largura e o encaixe não dar pulo. */
.marquee {
  --marquee-h: 300px;
  --marquee-dur: 37s; /* 6 prints: mesma velocidade que os 70s davam aos 11 */
  margin-top: 32px;
  overflow: hidden;
  /* Some suavemente nas bordas em vez de cortar seco. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-dur) linear infinite;
  will-change: transform;
}

.marquee-group {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: var(--marquee-h);
  margin-right: 16px;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

/* Prints de celular ocupam a altura toda; os comentários do Instagram, que
   são largos e baixos, ficam limitados na largura e centralizados no card. */
.marquee-item img {
  display: block;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 300px;
  border-radius: 10px;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (min-width: 768px) {
  .marquee {
    --marquee-h: 400px;
    margin-top: 40px;
  }

  .marquee-item {
    margin-right: 24px;
  }

  .marquee-item img {
    max-width: 380px;
  }
}

/* Quem pediu ao sistema para reduzir movimento recebe a faixa parada e
   rolável com o dedo; a cópia duplicada some para não repetir os prints. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .marquee-track {
    animation: none;
  }

  .marquee-group[aria-hidden="true"] {
    display: none;
  }
}

/* ------------------------------------------ bônus agrupados (1, 2 e 3) --- */

/* Subtítulo de cada bloco dentro da seção única de bônus. */
.bonus-sub {
  margin-top: 40px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

/* Destaques da frase "Somam R$ 67 e entram no combo GRATUITAMENTE". */
.valor-vermelho {
  color: var(--price-cut);
  font-weight: 700;
}

/* Grifo de marca-texto: faixa verde atrás do texto, que continua escuro
   para manter o contraste. */
.grifo-verde {
  padding: 0 6px;
  border-radius: 4px;
  background: var(--cta);
  color: var(--text);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Separa o bônus 3 dos cartões sem criar outra seção. */
.bonus-block {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Valor somado dos bônus, logo acima do preço. */
.offer-bonus-value {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.offer-bonus-value s {
  color: rgba(255, 255, 255, 0.55);
  text-decoration-thickness: 2px;
}

/* ------------------------------------------ barra de compra (celular) --- */

.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80; /* abaixo da barra de consentimento (90) e do .skip (99) */
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: calc(64px + env(safe-area-inset-bottom));
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: var(--bg-dark);
  box-shadow: 0 -6px 24px rgba(8, 23, 6, 0.25);
  animation: sticky-in 0.25s ease-out;
}

.sticky-cta[hidden] { display: none; }

.sticky-cta-info {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  line-height: 1.1;
  font-family: var(--font-heading);
  color: #fff;
}

.sticky-cta-info strong {
  font-size: 22px;
  font-weight: 700;
}

.sticky-cta-sub {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* Dourado claro sobre o verde-escuro: 10:1 de contraste com o texto. */
.sticky-cta-btn {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  background: #d8bf8a;
  color: var(--bg-dark);
  font-size: 15px;
  font-weight: 600;
  animation: none;
}

.sticky-cta-btn:hover {
  box-shadow: 0 12px 30px -12px rgba(216, 191, 138, 0.6);
}

/* Espaço no fim da página para a barra não cobrir o rodapé. */
body.tem-sticky-cta {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

@keyframes sticky-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (min-width: 768px) {
  .bonus-sub {
    font-size: 24px;
  }

  .sticky-cta,
  .sticky-cta:not([hidden]) {
    display: none;
  }

  body.tem-sticky-cta {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { animation: none; }
}

/* ------------------------------------------------------- prova social ----- */

/* ------------------------------------------------------ galeria guias ----- */

.gallery {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  padding-bottom: 8px;
  overflow-x: auto;
  /* proximity (e não mandatory) para o snap não cancelar o scroll das setas */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

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

/* Barra nativa escondida: a navegação fica só nas setas, como na referência. */
.gallery {
  scrollbar-width: none;
}

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

.guide {
  flex: 0 0 calc((100% - 16px) / 2);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-card-offer);
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.guide-preview {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-photo);
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  overflow: hidden;
}

.guide-preview img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}

.guide-preview:hover img {
  transform: scale(1.04);
}

.guide-preview span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-btn);
  background: rgba(8, 23, 6, 0.8);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 12px;
}

.guide h3 {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
}

.guide p {
  margin-top: 6px;
  /* Reserva duas linhas para a fileira de cards não desalinhar. */
  min-height: 2.9em;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: rgba(34, 34, 34, 0.75);
}

.gallery-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.round-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-btn);
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.round-button:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(128, 174, 114, 0.1);
}

.round-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.round-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.round-button.is-prev svg {
  transform: rotate(180deg);
}

/* ------------------------------------------------- seção escura / oferta -- */

.dark {
  position: relative;
  background: var(--bg-dark);
  color: var(--text-ondark);
}

.dark h1,
.dark h2,
.dark h3 {
  color: var(--text-ondark);
}

.orbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(202, 236, 191, 0.42) 0%,
    rgba(128, 174, 114, 0.2) 45%,
    transparent 70%
  );
  filter: blur(60px);
  pointer-events: none;
}

.orb-a { top: -10%; left: -15%; width: 520px; height: 520px; animation: orb-a 9s ease-in-out infinite; }
.orb-b { top: 40%; left: 70%; width: 480px; height: 480px; animation: orb-b 10s ease-in-out infinite; }
.orb-c { top: 70%; left: -5%; width: 440px; height: 440px; animation: orb-c 12s ease-in-out infinite; }
.orb-d { top: 10%; left: 50%; width: 380px; height: 380px; animation: orb-d 11s ease-in-out infinite; }

.offer-wrap {
  position: relative;
  z-index: 10;
}

.offer-card {
  position: relative;
  padding: 32px;
  border: 1px solid rgba(128, 174, 114, 0.3);
  border-radius: var(--radius-card-offer);
  background: rgba(8, 23, 6, 0.95);
  box-shadow: 0 25px 60px -20px rgba(128, 174, 114, 0.35);
}

.offer-card h2 {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}

.recap {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

.recap li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.recap li:last-child {
  border-bottom: 0;
}

.recap-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--check);
}

.recap-check svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recap span:last-child {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.375;
}

.offer-mockup {
  width: 100%;
  height: auto;
  margin-top: 8px;
  object-fit: contain;
}

.offer-label {
  margin-top: 32px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  color: var(--accent);
}

.offer-anchor {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.offer-anchor s {
  color: rgba(255, 255, 255, 0.55);
  text-decoration-thickness: 2px;
}

.offer-price {
  margin-top: 8px;
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--text-ondark);
}

.offer-price-alt {
  margin-top: 8px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.offer-parcela {
  margin-top: 6px;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

.offer-parcela strong {
  font-weight: 700;
  color: var(--text-ondark);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-btn);
  font-family: var(--font-heading);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.badge svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.offer-cta-row {
  margin-top: 24px;
}

/* ------------------------------------------------------------ garantia --- */

.guarantee {
  text-align: center;
}

.guarantee-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guarantee h2 {
  margin-top: 4px;
}

.guarantee p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.8);
}

.guarantee p + p {
  margin-top: 16px;
}

/* --------------------------------------------------------- autoridade ---- */

.author {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.author-photo {
  width: 100%;
  max-width: 85%;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-photo);
  object-fit: cover;
}

.author h2 {
  line-height: 1.25;
}

.author p {
  margin-top: 24px;
  line-height: 1.625;
  color: rgba(34, 34, 34, 0.85);
}

.author p + p {
  margin-top: 16px;
}

.author a {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(128, 174, 114, 0.4);
}

.author a:hover {
  text-decoration-color: var(--accent);
}

.author-social {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.author-social svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------- FAQ ----- */

.faq-list {
  margin-top: 40px;
}

.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  color: var(--text);
}

.faq-trigger svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease-out;
}

.faq-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.25s ease-out, opacity 0.25s ease-out;
}

.faq-item.open .faq-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-panel > div {
  overflow: hidden;
}

.faq-panel p {
  padding: 0 32px 24px 0;
  line-height: 1.625;
  color: rgba(34, 34, 34, 0.8);
}

/* ------------------------------------------------------------- rodapé ---- */

.footer {
  padding: 24px 0 64px;
  text-align: center;
}

.footer-meta {
  margin-top: 40px;
  font-size: 13px;
  line-height: 1.625;
  color: rgba(34, 34, 34, 0.6);
}

.footer-meta .footer-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(34, 34, 34, 0.5);
}

.footer-brand {
  margin-top: 4px;
  font-family: var(--font-heading);
  font-size: 16px;
  color: rgba(34, 34, 34, 0.8);
}

.footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.footer-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(34, 34, 34, 0.85);
}

.footer-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-copy {
  margin-top: 16px;
  color: rgba(34, 34, 34, 0.45);
}

/* ================================================== desktop (md: 768px) === */

@media (min-width: 768px) {
  .section {
    padding: 64px 0;
  }

  .hero {
    padding: 128px 0;
  }

  .hero h1 {
    font-size: 54px;
  }

  .hero .lead {
    font-size: 20px;
  }

  .hero-photo {
    margin-top: 8px;
  }

  .h-section,
  .h-section-caps {
    font-size: 32px;
  }

  .h-card {
    font-size: 24px;
  }

  .note {
    font-size: 20px;
  }

  .cta {
    height: 56px;
    font-size: 16px;
  }

  .cta-lg {
    height: 64px;
    font-size: 18px;
  }

  .pain-card,
  .check-card {
    padding: 20px 24px;
  }

  .pain-card p,
  .check-card span,
  .recap span:last-child {
    font-size: 16px;
  }

  .deliverable {
    padding: 32px;
  }

  .deliverable-media {
    gap: 24px;
  }

  .deliverable-media img {
    max-width: 380px;
  }

  .deliverable-copy p {
    font-size: 16px;
  }

  .bonus-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* Três cards inteiros por página, sem corte parcial na borda. */
  .guide {
    flex: 0 0 calc((100% - 32px) / 3);
  }

  .guide h3 {
    font-size: 18px;
  }

  .offer-card {
    padding: 40px;
  }

  .offer-card h2 {
    font-size: 22px;
  }

  .offer-anchor {
    font-size: 20px;
  }

  .offer-price {
    font-size: 40px;
  }

  .offer-price-alt {
    font-size: 20px;
  }

  .offer-parcela {
    font-size: 19px;
  }

  .badge {
    font-size: 14px;
  }

  .guarantee p {
    font-size: 18px;
  }

  .author {
    grid-template-columns: 40fr 60fr;
    gap: 56px;
  }

  .faq-trigger {
    font-size: 20px;
  }

  .footer {
    padding: 32px 0 80px;
  }
}

/* ------------------------------------------------- prévia ampliada ------- */

#guide-dialog {
  width: min(92vw, 560px);
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-card-offer);
  background: #fff;
  color: var(--text);
}

#guide-dialog::backdrop {
  background: rgba(8, 23, 6, 0.75);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.dialog-header h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#guide-dialog .round-button {
  width: 36px;
  height: 36px;
  font-size: 20px;
  line-height: 1;
}

#dialog-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-photo);
  object-fit: contain;
}

#guide-dialog p {
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
  color: rgba(34, 34, 34, 0.7);
}

/* ------------------------------------------------------------- consentimento --
   Barra discreta no rodape, nao modal: a pagina continua inteira utilizavel e
   nada fica entre o visitante e o botao de compra. z-index 90 fica abaixo do
   .skip (99), para o atalho de teclado continuar alcancavel, e o <dialog> dos
   modelos usa a top layer nativa, entao aparece acima de tudo isso.        */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--bg-dark);
  color: var(--text-ondark);
  box-shadow: 0 -6px 24px rgba(8, 23, 6, 0.18);
}

.consent[hidden] { display: none; }

.consent-text {
  margin: 0;
  max-width: 640px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.consent-text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.consent-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.consent-aceitar,
.consent-recusar {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.consent-aceitar {
  padding: 11px 26px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--cta);
  color: var(--bg-dark);
}

.consent-recusar {
  padding: 11px 8px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-aceitar:hover { filter: brightness(1.06); }
.consent-recusar:hover { color: #fff; }

@media (max-width: 700px) {
  .consent {
    justify-content: space-between;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    gap: 10px 16px;
  }
  .consent-text { font-size: 13px; flex: 1 1 100%; }
  .consent-actions { flex: 1 1 100%; justify-content: flex-end; }
}

/* Botao presente no documento mas fora da vista, aparecendo so quando alguem
   chega nele pelo teclado. Mesmo padrao do .skip no topo da pagina.
   Existe porque conteudo que se move sozinho por mais de cinco segundos
   precisa de um mecanismo de pausa (WCAG 2.2.2), e quem navega por teclado
   nao tem hover para contar com. Visualmente a pagina fica sem o botao. */
.so-no-foco {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.so-no-foco:focus-visible,
.so-no-foco:focus {
  position: static;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

/* Botao com aparencia de link, para o rodape. Precisa ser <button> e nao <a>
   porque a acao abre um controle na propria pagina, nao navega para lugar
   nenhum: um <a href="#"> mentiria para leitor de tela e para o teclado. */
.link-botao {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* -------------------------------------------------------------- hero novo --
   Selo pequeno acima do titulo, foto com destaque e a linha de recursos. */
.hero-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-texto);
}

/* A foto ganha um brilho suave atras e sombra mais presente, para puxar o
   olho sem moldura pesada nem borda competindo com o conteudo da arte. */
.hero-photo-frame {
  position: relative;
  margin: 8px 0 0;
  width: 100%;
}

.hero-photo-frame::before {
  content: "";
  position: absolute;
  inset: 8% 4% 2%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(128, 174, 114, 0.35), transparent 70%);
  filter: blur(36px);
}

.hero-photo-frame .hero-photo {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 22px 34px rgba(8, 23, 6, 0.22));
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.hero-features li {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Separador desenhado no CSS para o leitor de tela nao ler "bolinha" entre
   cada item: a lista ja transmite a separacao por conta propria. */
.hero-features li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 700px) {
  .hero-eyebrow { font-size: 11px; letter-spacing: 0.1em; }
  .hero-features { font-size: 13px; gap: 6px 10px; margin-top: 16px; }
  .hero-features li { gap: 10px; }
}


/* Personalização: conteúdo sem mídia, com a identidade da página. */
.ready-section {
  --ready-gold: #a38b59;
  --ready-green: #173f35;
  background: #f2eee6;
}

.ready-intro {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.ready-title {
  color: var(--ready-green);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.2;
  text-wrap: balance;
}

.ready-title span { font-weight: 400; }

.ready-intro p {
  max-width: 720px;
  margin: 20px auto 0;
  color: #46564e;
  font-size: 18px;
  line-height: 1.6;
}

.ready-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.ready-card {
  padding: 24px;
  background: var(--bg);
  border: 1px solid #ded6c8;
  border-radius: var(--radius-card);
}

.ready-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  fill: none;
  stroke: var(--ready-green);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ready-card h3 {
  color: var(--ready-green);
  font-size: 21px;
  line-height: 1.25;
}

.ready-card p {
  margin-top: 12px;
  color: #46564e;
  font-size: 16px;
  line-height: 1.55;
}

.ready-closing {
  width: fit-content;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--ready-gold);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--ready-green);
}

.ready-closing strong { font-weight: 500; }

/* Demonstração da edição: proporção original 4/5 reservada antes do arquivo
   chegar, sem corte (contain). No celular ocupa a largura do .wrap. */
.demo-video {
  max-width: 480px;
  margin: 32px auto 0;
}

.demo-video-frame {
  position: relative;
  aspect-ratio: 720 / 900;
  border-radius: var(--radius-photo);
  overflow: hidden;
  background: #e9e2d5;
  box-shadow: 0 24px 48px -20px rgba(23, 63, 53, 0.35);
}

.demo-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.demo-video-frame video:focus-visible {
  outline: 2px solid var(--ready-gold);
  outline-offset: -4px;
}

.demo-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid var(--ready-gold);
  border-radius: var(--radius-btn);
  background: var(--ready-green);
  color: var(--bg);
  cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45);
}

.demo-video-play[hidden] { display: none; }

.demo-video-play svg {
  width: 28px;
  height: 28px;
  margin-left: 4px;
  fill: currentColor;
}

.demo-video-play:focus-visible {
  outline: 2px solid var(--ready-gold);
  outline-offset: 3px;
}

.demo-video-caption {
  margin-top: 14px;
  color: #46564e;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

#autoridade { padding-top: 24px; }

/* Vídeo do YouTube na seção do criador: fachada com a miniatura até o
   clique, 16:9, largura do texto no celular e no máximo 640px. */
.author-video {
  max-width: 640px;
  margin-top: 28px;
}

.author-video[hidden] { display: none; }

.author-video-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: #173f35;
}

.yt-facade {
  position: relative;
  margin-top: 14px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-photo);
  overflow: hidden;
  background: var(--bg-dark);
  box-shadow: 0 24px 48px -20px rgba(23, 63, 53, 0.35);
}

.yt-facade-btn {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* A miniatura hqdefault é 4:3 com faixas pretas: o cover tira as faixas. */
.yt-facade-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid #a38b59;
  border-radius: var(--radius-btn);
  background: #173f35;
  color: var(--bg);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease-out;
}

.yt-facade-btn:hover .yt-facade-play { transform: translate(-50%, -50%) scale(1.06); }

.yt-facade-play svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
  fill: currentColor;
}

.yt-facade-btn:focus-visible {
  outline: 2px solid #a38b59;
  outline-offset: -4px;
}

.yt-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.author a.cta { text-decoration: none; }

@media (max-width: 767px) {
  .ready-intro p { font-size: 16px; margin-top: 16px; }
  .ready-benefits { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .ready-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px; }
  .ready-icon { flex: 0 0 28px; width: 28px; height: 28px; margin: 0; }
  .ready-card h3 { font-size: 20px; }
  .ready-card p { margin-top: 8px; font-size: 15px; }
  .ready-closing { max-width: 270px; font-size: 19px; }
  .ready-closing strong { display: block; }
}


/* Comparação com as artes originais: sem cortes, sobreposições ou molduras. */
.comparison { background: var(--bg); }
.comparison-wrap { max-width: 1280px; }
.comparison-intro {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.comparison-intro h2 {
  color: #173f35;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.2;
  text-wrap: balance;
}
.comparison-intro p {
  max-width: 700px;
  margin: 20px auto 0;
  color: #46564e;
  font-size: 18px;
  line-height: 1.6;
}
.comparison-images {
  display: grid;
  grid-template-columns: 3fr 5fr;
  align-items: start;
  gap: 32px;
  margin-top: 40px;
}
.comparison-figure { min-width: 0; margin: 0; }
.comparison-enlarge { display: block; }
.comparison-enlarge:focus-visible {
  outline: 2px solid #173f35;
  outline-offset: 6px;
}
.comparison-figure img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.comparison-action {
  max-width: 680px;
  margin: 28px auto 0;
  padding-top: 28px;
  border-top: 1px solid #d9cbb3;
  text-align: center;
}
.comparison-action p {
  margin: 0 auto 24px;
  font-family: var(--font-heading);
  color: #173f35;
  font-size: 24px;
  line-height: 1.35;
  text-wrap: balance;
}
.comparison-action strong { font-weight: 500; }
.comparison-action .cta {
  max-width: 100%;
  height: auto;
  min-height: 56px;
  padding: 16px 24px;
  white-space: normal;
  text-align: center;
}
@media (max-width: 899px) {
  .comparison-wrap { padding-inline: 16px; }
  .comparison-intro { max-width: 620px; }
  .comparison-intro p { margin-top: 16px; font-size: 16px; }
  .comparison-images { max-width: 620px; margin: 28px auto 0; grid-template-columns: 1fr; gap: 32px; }
  .comparison-action { max-width: 620px; }
  .comparison-action p { font-size: 22px; }
  .comparison-action .cta { font-size: 14px; }
}