/* ── Fontes (servidas daqui, sem chamada externa) ───────────────── */
@font-face { font-family: "DM Serif Display"; src: url("fonts/dm-serif-display.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("fonts/dm-serif-display-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

/* ── Paleta: papelaria rosa-blush e vermelho-tomate ─────────────── */
:root {
  --marfim: #fbf6f2;   /* o tecido onde os cartões estão apoiados */
  --blush:  #f7dcdf;   /* cartão claro */
  --rosa:   #f3c3ca;   /* cartão mais forte */
  --tomate: #d33a2c;   /* tinta, cartão vermelho */
  --vinho:  #a3221e;   /* tomate mais escuro, pra contraste */
  --tinta:  #4a1a18;   /* texto corrido sobre rosa */
  --display: "DM Serif Display", Georgia, serif;
  --texto:   "Figtree", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--marfim);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.55;
}
a { color: inherit; text-decoration-color: var(--tomate); text-underline-offset: .15em; }
a:focus-visible { outline: 2px solid var(--tomate); outline-offset: 3px; }
p { margin: 0; }

/* ── A mesa: uma coluna, cartões apoiados ───────────────────────── */
.mesa {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cartao {
  --cartao: var(--blush);
  position: relative;
  padding: 2.25rem 1.5rem 2.5rem;
  text-align: center;
  background: var(--blush);
  color: var(--tinta);
  box-shadow: 0 18px 40px -28px rgba(74, 26, 24, .35);
}
.cartao h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: .01em;
  margin: 0 0 1rem;
  color: var(--tomate);
  text-wrap: balance;
}
.intro { max-width: 30rem; margin: 0 auto 1.5rem; }
.marca {
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--tomate);
}

/* Formas: cada cartão é um recorte diferente, como na mesa da referência */
.cartao-arco { border-radius: 999px 999px 8px 8px; padding-top: clamp(4.5rem, 26%, 7rem); }
.cartao-liso { background: #fff; border: 1.5px solid var(--rosa); border-radius: 8px; }
.cartao-rosa { background: var(--rosa); border-radius: 8px; }
.cartao-vermelho { --cartao: var(--tomate); background: var(--tomate); color: var(--blush); border-radius: 8px; }
.cartao-vermelho h2 { color: var(--blush); }

/* Borda ondulada embaixo (scallop), feita com um pseudo-elemento */
.cartao-ondulado { border-radius: 8px 8px 0 0; padding-bottom: 3rem; }
.cartao-ondulado::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -14px; height: 28px;
  background: radial-gradient(circle at 14px 14px, var(--cartao) 14px, transparent 15px);
  background-size: 28px 28px;
  background-repeat: round no-repeat;
}

/* Leque: ondulado em cima, com listras no topo como o cartão da referência */
.cartao-leque { border-radius: 0 0 8px 8px; padding-top: 3rem; margin-top: .5rem; }
.cartao-leque::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -14px; height: 28px;
  background: radial-gradient(circle at 14px 14px, var(--cartao) 14px, transparent 15px);
  background-size: 28px 28px;
  background-repeat: round no-repeat;
}

/* ── 1. Capa ────────────────────────────────────────────────────── */
.capa { padding-top: clamp(3rem, 16%, 4.5rem); padding-bottom: 3rem; border-radius: 999px 999px 0 0; }
.capa .marca { font-size: clamp(1.15rem, 4.5vw, 1.5rem); letter-spacing: .16em; margin-top: .25rem; }
.capa .capa-titulo { margin-top: 2.25rem; }
.laco { width: 4.5rem; height: auto; margin: 0 auto .75rem; display: block; fill: none; stroke: var(--tomate); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.laco circle { fill: var(--tomate); stroke: none; }
.capa-nome {
  margin: 1.25rem 0 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1;
  color: var(--tomate);
}
.capa-titulo { margin-top: 2.25rem; }
.laco { width: 4.5rem; height: auto; margin: 0 auto .75rem; display: block; fill: none; stroke: var(--tomate); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.laco circle { fill: var(--tomate); stroke: none; }
.capa-nome {
  margin: 1.25rem 0 0;
  font-size: clamp(2.6rem, 11vw, 4rem);
  line-height: 1;
  color: var(--tomate);
  font-weight: 400;
}
.capa-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 5.5vw, 1.8rem);
  line-height: 1.2;
  margin: 1.75rem auto 0;
  color: var(--vinho);
}
.brilhos { margin-top: 1.5rem; color: var(--tomate); font-size: .8rem; letter-spacing: .3em; }

/* ── 2. A ideia ─────────────────────────────────────────────────── */
.ideia h2 { margin-bottom: 1.5rem; }
.ideia p { max-width: 30rem; margin: 0 auto; }
.ideia-frase {
  margin-top: 2rem !important;
  color: #fff;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.3;
}

/* ── 3. O que vem no kit ────────────────────────────────────────── */
.kit { border-radius: 8px; }
.kit-lista { margin: 0; display: grid; gap: 1.25rem; text-align: left; }
.kit-lista div { padding-left: 1rem; border-left: 2px solid var(--tomate); }
.kit-lista dt { font-family: var(--display); font-size: 1.2rem; color: var(--vinho); line-height: 1.2; }
.kit-lista dd { margin: .2rem 0 0; }
@media (min-width: 36rem) {
  .kit-lista { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
}

/* ── 4. Como funciona (é uma sequência de verdade, então numera) ── */
.passos {
  list-style: none; counter-reset: passo;
  margin: 0; padding: 0; text-align: left;
  display: grid; gap: 1.1rem;
}
.passos li {
  counter-increment: passo;
  display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .75rem;
}
.passos li::before {
  content: counter(passo, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--tomate);
  line-height: 1.1;
}
.passos strong { grid-column: 2; display: block; font-weight: 600; color: var(--vinho); }
.passos span { grid-column: 2; display: block; }
.funciona-fecho {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1.5px solid var(--rosa);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--vinho);
  text-wrap: balance;
}

/* ── 5. Por que Georgette ───────────────────────────────────────── */
.motivos { list-style: none; margin: 0 0 2rem; padding: 0; text-align: left; display: grid; gap: .75rem; }
.motivos strong { font-weight: 600; color: var(--vinho); }
.depoimentos { display: grid; gap: 3rem 1rem; margin-top: 3.25rem; }
.depoimentos blockquote {
  position: relative;
  margin: 0; padding: 3rem 1.25rem 1.5rem;
  background: var(--blush);
  border-radius: 8px;
  font-size: .98rem;
}
.retrato {
  position: absolute; top: -2.1rem; left: 0; right: 0; margin: 0 auto;
  width: 4.2rem; height: 4.2rem;
  border-radius: 50%;
  border: 2px dashed var(--tomate);
  padding: 3px;
  background: var(--blush);
  display: block;
}
.retrato img {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--blush);
}
.quem { font-family: var(--display); font-size: 1.15rem; color: var(--tomate); line-height: 1.15; margin-bottom: .75rem; }
.quem small { display: block; font-style: italic; font-size: .8em; color: var(--vinho); margin-top: .15rem; }
.fala::before { content: "“"; color: var(--tomate); font-family: var(--display); }
.fala::after { content: "”"; color: var(--tomate); font-family: var(--display); }
@media (min-width: 40rem) {
  .depoimentos { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .depoimentos blockquote { font-size: .92rem; padding-inline: 1rem; }
}

/* ── 6. Investimento ────────────────────────────────────────────── */
.investimento { background: var(--blush); }
.investimento::before {
  /* moldura tracejada, eco do cartão listrado da referência; imprime igual à tela */
  content: "";
  position: absolute; inset: 10px;
  border-radius: 989px 989px 4px 4px;
  border: 5px dashed var(--tomate);
  opacity: .5;
  pointer-events: none;
}
.furo {
  /* o furinho da etiqueta, com o mesmo tracejado da moldura em volta */
  position: absolute; top: 3.3rem; left: 50%; transform: translateX(-50%);
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--marfim);
}
.furo::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 5px dashed var(--tomate); opacity: .5;
}
.investimento { padding-top: clamp(6.5rem, 32%, 8.5rem); padding-inline: 3rem; padding-bottom: 3.5rem; }
.investimento h2 { font-size: 1.5rem; margin-bottom: .25rem; }
.valor {
  font-family: var(--display);
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  line-height: 1.05;
  color: var(--tomate);
  margin: .5rem 0 1.5rem;
}
.inclui {
  list-style: none; padding: 0;
  width: fit-content; max-width: 100%;
  margin: 0 auto 1.75rem;
  text-align: left;
  display: grid; gap: .35rem;
}
.inclui li { padding-left: 1.3em; text-indent: -1.3em; }
.inclui li::before { content: "✦"; display: inline-block; width: 1.3em; text-indent: 0; color: var(--tomate); font-size: .75em; }
.condicoes { margin: 0 auto; max-width: 24rem; display: grid; gap: .6rem; padding-top: 1.25rem; border-top: 1.5px solid var(--rosa); }
.condicoes dt { font-family: var(--display); font-style: italic; color: var(--vinho); }
.condicoes dd { margin: 0; }

/* ── 7. Encerramento ────────────────────────────────────────────── */
.fim-intro {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1rem, 4.2vw, 1.25rem);
  line-height: 1.3;
  margin-bottom: 1.25rem;
}
.fim-titulo { color: #fff; margin-bottom: 1.5rem; }
.rodape {
  margin-top: -.5rem;
  padding: 1rem 1.5rem;
  background: #000;
  color: #fff;
  border-radius: 8px;
  font-size: .85rem;
  text-align: center;
  display: flex; justify-content: center; gap: 1.5rem;
}
.rodape a { color: inherit; text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.link-ig { display: inline-flex; align-items: center; gap: .4em; }
.ig { width: 1.15em; height: 1.15em; flex: none; }
.fim .marca { color: var(--blush); font-size: .95rem; letter-spacing: .16em; }
.fim .laco { stroke: var(--blush); width: 3rem; margin-bottom: .5rem; }
.fim .laco circle { fill: var(--blush); }
.marca-sub { font-family: var(--display); font-style: italic; font-size: .8rem; color: var(--blush); }

/* ── Impressão: vira um PDF limpo, um cartão por bloco ──────────── */
@media print {
  @page { margin: 12mm; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mesa { max-width: none; padding: 0; gap: 8mm; }
  .cartao { box-shadow: none; break-inside: avoid; }
  .cartao-leque::before { display: none; }
  .cartao-leque { border-radius: 8px; }
  a { text-decoration: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}