/* ============================================================
   LEMBRANÇAS QUE VENDEM — camada de componentes desta página
   Estende styles.css (DS "Nature Distilled / Editorial Artisan").
   Light-only. Sem @import extra: fontes já vêm do styles.css.
   ============================================================ */

/* ---------- 1. Barra de oferta (topo) ---------- */
.offer-bar {
  position: relative;
  background: linear-gradient(100deg, var(--terracotta-deep), var(--terracotta) 42%, var(--clay-deep) 100%);
  color: #FFF6EC;
  overflow: hidden;
}
.offer-bar::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 9px);
  pointer-events: none;
}
.offer-bar-in {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.62rem 1rem;
  font-size: clamp(0.68rem, 0.6rem + 0.4vw, 0.84rem);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; line-height: 1.35;
}
.offer-bar-in b { font-weight: 800; color: #FFE9C9; }
.ob-ico { width: 16px; height: 16px; flex: none; color: #FFD59A; animation: flicker 2.6s ease-in-out infinite; }
@keyframes flicker { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.72; transform: scale(0.9); } }

/* ---------- 2. Hero ---------- */
.hero-cta { margin-top: 1.9rem; }
.cta-nudge {
  font-family: var(--f-serif); font-style: italic;
  font-size: 0.98rem; color: var(--text-soft);
  margin-bottom: 0.7rem; text-align: center;
}
.hero-media { position: relative; }
.hero-shot {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-lg);
  border: 6px solid var(--card);
  transform: rotate(-1.1deg);
}
.hero-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.hero-shot-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 1.9rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(58,39,27,0.82), transparent);
  color: #FDF6EA; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
}
.hero-shot-cap svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.hero-shot-mini {
  position: absolute; right: -8px; bottom: -26px;
  width: clamp(92px, 26%, 140px); aspect-ratio: 1;
  border-radius: var(--r-lg); overflow: hidden;
  border: 5px solid var(--card); box-shadow: var(--sh);
  transform: rotate(4deg); z-index: 3;
}
.hero-shot-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 52px;
  background: linear-gradient(to bottom, transparent, var(--sand)); z-index: 1; pointer-events: none;
}

/* ---------- 3. Faixa de benefícios ---------- */
.section-tight { padding-block: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); }
.bene-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.bene {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--card); border-radius: var(--r);
  border: 1px solid rgba(199,163,92,0.26);
  padding: 0.95rem 1.05rem; box-shadow: var(--sh-xs);
  transition: transform var(--t), box-shadow var(--t);
}
.bene:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.bene p { font-size: 0.92rem; font-weight: 600; color: var(--olive); line-height: 1.4; }
.bene .ico-circle { width: 44px; height: 44px; }
.bene .ico-circle svg { width: 21px; height: 21px; }

/* ---------- 4. "É para você que..." ---------- */
.para-list { display: grid; gap: 0.85rem; margin-top: 2rem; }
.para-list li {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start;
  background: var(--card-soft);
  border-left: 3px solid var(--clay);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.05rem 1.2rem;
  font-size: 1.01rem; line-height: 1.6; color: var(--text);
  box-shadow: var(--sh-xs);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.para-list li:hover { transform: translateX(4px); border-color: var(--terracotta); box-shadow: var(--sh-sm); }
.para-mark {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(200,117,125,0.16); color: var(--clay-deep);
  margin-top: 1px;
}
.para-mark svg { width: 15px; height: 15px; }
.para-close {
  margin-top: 2rem; text-align: center;
  font-family: var(--f-serif); font-style: italic;
  font-size: var(--fs-lead); color: var(--olive); line-height: 1.6;
}
.para-close b { font-style: normal; font-weight: 700; color: var(--terracotta-deep); }

/* ---------- 5. As 3 coisas ---------- */
.tres-wrap { display: grid; gap: 2.4rem; margin-top: 3rem; align-items: start; }
.tres-shot { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 6px solid var(--card); box-shadow: var(--sh-lg); }
.tres-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.tres-shot-glow {
  position: absolute; inset: -14%; z-index: -1;
  background: radial-gradient(closest-side, rgba(199,163,92,0.42), transparent 70%);
  filter: blur(38px);
}
.tres-list { display: grid; gap: 1.15rem; counter-reset: tres; }
.tres-item {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  background: var(--card); border-radius: var(--r-lg);
  border: 1px solid rgba(199,163,92,0.26);
  padding: 1.35rem 1.4rem; box-shadow: var(--sh-xs);
  transition: transform var(--t), box-shadow var(--t);
  overflow: hidden;
}
.tres-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--gold), var(--clay));
  opacity: 0; transition: opacity var(--t);
}
.tres-item:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.tres-item:hover::before { opacity: 1; }
.tres-num {
  font-family: var(--f-serif); font-weight: 600; font-style: italic;
  font-size: clamp(2.1rem, 1.6rem + 1.8vw, 2.8rem);
  line-height: 0.9; color: var(--gold);
  -webkit-text-stroke: 0; flex: none;
}
.tres-item h3 { margin-bottom: 0.4rem; }
.tres-item p { color: var(--text-soft); line-height: 1.65; font-size: 0.97rem; }
.tres-close {
  margin-top: 2.4rem; text-align: center;
  font-family: var(--f-serif); font-style: italic;
  font-size: var(--fs-lead); color: var(--olive);
}
.tres-close b { font-style: normal; font-weight: 700; color: var(--terracotta-deep); }

/* ---------- 6. Carrossel de peças ---------- */
.pecas-rail-wrap { position: relative; margin-top: 2.4rem; }
.pecas-rail {
  display: flex; gap: 1.1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.4rem 0.2rem 1.4rem;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.pecas-rail::-webkit-scrollbar { display: none; }
.peca-card {
  position: relative; flex: none; flex-basis: 72%;
  scroll-snap-align: center;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--card); box-shadow: var(--sh-sm);
  border: 1px solid rgba(199,163,92,0.24);
  transition: transform var(--t), box-shadow var(--t);
}
.peca-card:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.peca-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4/5; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.peca-card:hover img { transform: scale(1.045); }
.peca-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(58,39,27,0.85), transparent);
  color: #FDF6EA; font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.02em; text-align: center;
}

/* ---------- 7. Entregáveis ---------- */
.ent-grid { display: grid; gap: 1.1rem; margin-top: 2.6rem; grid-template-columns: 1fr; }
.ent-card {
  position: relative;
  background: var(--card); border-radius: var(--r-lg);
  border: 1px solid rgba(199,163,92,0.26);
  padding: 1.5rem 1.4rem; box-shadow: var(--sh-xs);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.ent-card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--clay), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.ent-card:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: rgba(199,163,92,0.5); }
.ent-card:hover::after { transform: scaleX(1); }
.ent-card .ico-circle { margin-bottom: 0.9rem; }
.ent-card h3 { font-size: 1.06rem; margin-bottom: 0.5rem; line-height: 1.3; }
.ent-card p { color: var(--text-soft); font-size: 0.95rem; line-height: 1.62; }
.ent-card--bonus { background: linear-gradient(160deg, var(--card), #FAF2E2); border-color: rgba(199,163,92,0.55); }
.ent-tag {
  position: absolute; top: 0.9rem; right: 0.9rem;
  background: var(--gold); color: #3A271B;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.26rem 0.6rem; border-radius: var(--r-pill);
}

/* ícones circulares — variações de cor */
.ico-clay  { background: rgba(200,117,125,0.15); color: var(--clay-deep); }
.ico-olive { background: rgba(121,134,79,0.17);  color: #5F6B3C; }
.ico-gold  { background: rgba(199,163,92,0.20);  color: var(--gold-deep); }

/* ---------- 8. "Aqui você vai..." ---------- */
.vai-list { display: grid; gap: 0.8rem; margin-top: 2rem; }
.vai-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start;
  background: var(--card); border-radius: var(--r);
  border: 1px solid rgba(199,163,92,0.24);
  padding: 1rem 1.15rem; box-shadow: var(--sh-xs);
  font-size: 1rem; line-height: 1.6; color: var(--text);
  transition: transform var(--t), box-shadow var(--t);
}
.vai-list li:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.vai-mark {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(121,134,79,0.18); color: #5F6B3C; margin-top: 1px;
}
.vai-mark svg { width: 15px; height: 15px; }

/* ---------- 9. Bio ---------- */
.bio-grid { display: grid; gap: 2.2rem; margin-top: 2.6rem; align-items: center; }
.bio-photo { position: relative; max-width: 380px; margin-inline: auto; }
.bio-photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--r-xl);
  border: 6px solid var(--card); box-shadow: var(--sh-lg);
  position: relative; z-index: 1;
}
.bio-frame {
  position: absolute; inset: 14px -14px -14px 14px;
  border: 1.5px solid var(--gold); border-radius: var(--r-xl);
  z-index: 0;
}
.bio-sign {
  position: relative; z-index: 2;
  margin-top: -0.6rem; text-align: center;
  font-family: var(--f-script); font-size: 1.75rem; font-weight: 600;
  color: var(--clay);
}
.bio-text p { color: var(--text-soft); line-height: 1.72; margin-bottom: 0.9rem; font-size: 1.01rem; }
.bio-text p b { color: var(--olive); font-weight: 700; }
.bio-turn {
  font-family: var(--f-serif); font-style: italic;
  font-size: 1.18rem; color: var(--terracotta) !important;
  margin-block: 1.2rem 1.1rem !important;
}
.bio-text .quote-block {
  margin-top: 1.5rem; text-align: left;
  border-left: 3px solid var(--gold);
  padding: 0.9rem 0 0.9rem 1.2rem;
  font-family: var(--f-serif); font-style: italic;
  font-size: 1.12rem; line-height: 1.55; color: var(--olive);
}

/* ---------- 10. Oferta ---------- */
.offer-card {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--card) 0%, #FBF3E4 100%);
  border: 1.5px solid rgba(199,163,92,0.55);
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 1.2rem + 3vw, 3rem) clamp(1.3rem, 0.9rem + 2.4vw, 2.6rem);
  box-shadow: var(--sh-lg);
  text-align: center; margin-top: 2.4rem;
}
.offer-card::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px dashed rgba(199,163,92,0.42); border-radius: calc(var(--r-xl) - 8px);
  pointer-events: none;
}
/* Selo reto no canto, nao fita diagonal. A fita (right:-42px, rotate 38deg)
   vazava para fora do card em TODO breakpoint — 33px no desktop, 16px no mobile —
   e cobria a copy da oferta (medido: 8x48px sobre "Uma colecao completa..." em
   1440; 90x69px em 375). O selo entrega a mesma leitura de desconto sem invadir
   texto nem estourar a borda. */
.offer-ribbon {
  position: absolute; top: 0; right: 0; left: auto;
  transform: none;
  background: var(--clay-deep); color: #fff;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.46rem 1.05rem;
  border-radius: 0 var(--r-xl) 0 var(--r-md);
  box-shadow: var(--sh-sm); z-index: 4;
}
.offer-lead {
  position: relative; z-index: 1;
  max-width: 46ch; margin: 0 auto 1.8rem;
  color: var(--text-soft); line-height: 1.68; font-size: 1.01rem;
}
.price-box { position: relative; z-index: 1; margin-bottom: 1.5rem; }
.price-old { font-size: 1rem; color: var(--text-soft); margin-bottom: 0.35rem; }
.price-old s { text-decoration-color: var(--clay); text-decoration-thickness: 2px; }
.price-main { margin-bottom: 0.45rem; }
.price-cash { font-size: 1.05rem; color: var(--text-soft); }
.price-cash b { color: var(--terracotta-deep); font-weight: 800; }
.offer-urgency {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 0.6rem;
  text-align: left; max-width: 48ch; margin: 0 auto 1.7rem;
  background: rgba(200,117,125,0.11);
  border: 1px solid rgba(200,117,125,0.32);
  border-radius: var(--r);
  padding: 0.85rem 1rem;
  font-size: 0.83rem; font-weight: 600; line-height: 1.5;
  color: var(--clay-deep); letter-spacing: 0.01em;
}
.offer-urgency svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.offer-card .cta-nudge { position: relative; z-index: 1; }
.offer-card .btn { position: relative; z-index: 1; }
.pay-seals {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem 1.3rem;
  margin-top: 1.5rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(199,163,92,0.32);
}
.seal-item {
  display: inline-flex; align-items: center; gap: 0.42rem;
  font-size: 0.78rem; font-weight: 600; color: var(--text-soft);
  letter-spacing: 0.02em;
}
.seal-item svg { width: 16px; height: 16px; color: #5F6B3C; flex: none; }

/* ---------- 11. Garantia ---------- */
.guarantee {
  background: var(--card); border-radius: var(--r-xl);
  border: 1px solid rgba(199,163,92,0.32);
  padding: clamp(1.8rem, 1.2rem + 2.6vw, 2.8rem);
  box-shadow: var(--sh);
}
.guarantee p { color: var(--text-soft); line-height: 1.68; font-size: 1.01rem; }
.guarantee p b { color: var(--terracotta-deep); font-weight: 700; }
.h2--sm { font-size: clamp(1.3rem, 1rem + 1.5vw, 1.75rem); margin-bottom: 0.8rem; }
.seal svg { width: 100%; height: 100%; }

/* ---------- 12. FAQ (chevron do sprite) ---------- */
.faq-q svg { flex: none; width: 22px; height: 22px; color: var(--terracotta); transition: transform var(--t); }
.faq-item[open] .faq-q svg { transform: rotate(180deg); }
.faq-item[open] .faq-q { color: var(--terracotta-deep); }
.faq-a p { margin: 0; }

/* ---------- 13. Footer ---------- */
.foot-logo { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.foot-logo svg { color: inherit; }
.foot-logo span {
  font-family: var(--f-serif); font-style: italic;
  font-size: 1.02rem; color: var(--gold);
}

/* ---------- 14. Sticky CTA (mobile E desktop) ---------- */
.sticky-in {
  display: flex; align-items: center; gap: 0.85rem;
  max-width: var(--wrap); margin-inline: auto;
}
.sticky-price { display: flex; flex-direction: column; line-height: 1.1; flex: none; }
.sticky-old { font-size: 0.72rem; color: var(--text-soft); text-decoration: line-through; }
.sticky-now { font-size: 1rem; font-weight: 800; color: var(--terracotta-deep); }
.sticky-cta .btn { flex: 1; width: auto; font-size: 0.86rem; padding: 0.85rem 1.1rem; }

/* ---------- 15. Detalhe: eyebrow centrado ---------- */
.eyebrow.center { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-inline: auto; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (min-width: 620px) {
  .bene-grid { grid-template-columns: repeat(2, 1fr); }
  .ent-grid  { grid-template-columns: repeat(2, 1fr); }
  .peca-card { flex-basis: 44%; }
  .offer-bar-in { font-size: 0.86rem; }
}

@media (min-width: 980px) {
  .bene-grid { grid-template-columns: repeat(4, 1fr); }
  .bene { flex-direction: column; text-align: center; gap: 0.7rem; padding: 1.5rem 1.1rem; }
  .ent-grid { grid-template-columns: repeat(3, 1fr); }
  .peca-card { flex-basis: 26%; }
  .tres-wrap { grid-template-columns: 0.85fr 1.15fr; gap: 3.2rem; }
  .tres-shot { position: sticky; top: 2rem; }
  .bio-grid { grid-template-columns: 0.8fr 1.2fr; gap: 3.4rem; }
  .bio-photo { margin-inline: 0; }
  .vai-list { grid-template-columns: repeat(2, 1fr); }
  .para-list li { font-size: 1.05rem; }

  /* o sticky-CTA vale ~20% dos toques — mantido no desktop (P0 25/08) */
  .sticky-cta { display: block; }
  .sticky-cta .btn { flex: none; min-width: 260px; }
  .sticky-in { justify-content: center; gap: 1.6rem; }
  .sticky-now { font-size: 1.15rem; }
}

/* peças em grade no desktop largo — carrossel continua no mobile */
@media (min-width: 1180px) {
  .peca-card { flex-basis: 21.5%; }
}

/* ---------- Correções de layout (verificadas no Chrome 26/08) ---------- */
/* grid do hero: colunas de largura mínima 0 para o fr não colapsar */
.hero-grid > * { min-width: 0; }
.hero-media { width: 100%; }
.hero-shot { width: 100%; }
.hero-shot img { width: 100%; }

/* h1 não pode empurrar a coluna: quebra palavras longas */
.hero h1, .h1 { overflow-wrap: break-word; }

/* .mark herda white-space:nowrap do styles.css — numa headline longa isso vaza
   da coluna. Aqui o destaque abrange uma frase inteira, então precisa quebrar. */
.hero h1 .mark { white-space: normal; }
.hero h1 .mark::after { border-radius: 4px; }

/* legenda do hero-shot: cabe em 1 linha no mobile, 2 quando precisar */
.hero-shot-cap { padding-inline: 0.8rem; line-height: 1.35; }

/* mobile: badges em linha única e ritmo mais apertado no hero, para o CTA
   sobrar folga acima da dobra de 375x812 (medido: CTA em 631-728) */
@media (max-width: 619px) {
  .hero-badges { flex-wrap: nowrap; overflow: hidden; }
  .hero-badges .pill { font-size: 0.66rem; padding-inline: 0.75rem; white-space: nowrap; }
  .hero-cta { margin-top: 1.3rem; }
  .cta-nudge { font-size: 0.9rem; margin-bottom: 0.55rem; }
  .btn-lg { padding: 1.05rem 1.4rem; font-size: 0.95rem; }
}

/* mobile: a mini-foto sobrepunha a legenda da foto principal (colisão medida de
   85x66px, z-index 3 por cima do texto). Em 375 a foto grande já entrega a prova
   visual — a mini só volta a partir de 620px, onde há largura para as duas. */
@media (max-width: 619px) {
  .hero-shot-mini { display: none; }
}

/* O rodape do depoimento era flex-row em TODO breakpoint — as estrelas (largura
   fixa de ~227px) espremiam o texto do resultado em 40px, quebrando "venda de
   R$600 logo no inicio" em uma palavra por linha (medido: 40x127px em 1440 e em
   375). O card tem 312px: nao cabe estrela e frase lado a lado em largura
   nenhuma. Empilha em coluna sempre — o resultado em R$ e a prova, precisa ler. */
.depo-foot {
  flex-direction: column; align-items: flex-start; gap: 0.4rem;
}
.depo-foot .res { font-size: 0.86rem; line-height: 1.35; }
.depo-foot .stars svg { width: 15px; height: 15px; }

/* mobile: mesmo selo, escala menor — em 375 o card e estreito e o selo
   grande empurraria a primeira linha da copy. */
@media (max-width: 619px) {
  .offer-ribbon {
    padding: 0.34rem 0.75rem;
    font-size: 0.68rem;
    border-radius: 0 var(--r-md) 0 var(--r-md);
  }
}
/* o selo ocupa o canto superior direito do card: a copy comeca abaixo dele. */
.offer-card > p:first-of-type,
.offer-lead { margin-top: 1.5rem; }

/* desktop: a mini-foto (canto inferior direito) cobria o fim da legenda —
   colisao medida de 119x70px sobre "...do atelie". Encolhe a caixa da legenda
   ate onde a mini comeca, para o texto terminar antes dela. */
@media (min-width: 620px) {
  .hero-shot-cap { padding-right: 132px; }
}