/* =========================================================
   HOME
========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 10vw, 128px) clamp(56px, 9vw, 112px);
  background:
    radial-gradient(circle at 12% 24%, rgba(239, 184, 180, .38) 0 8%, transparent 8.2%),
    radial-gradient(circle at 88% 78%, rgba(217, 165, 132, .22) 0 10%, transparent 10.2%),
    linear-gradient(145deg, var(--color-cream) 0%, #fffaf7 55%, var(--color-blush-soft) 100%);
}
.hero::before,.hero::after { content:""; position:absolute; border:1px solid rgba(142,28,51,.12); border-radius:50%; pointer-events:none; }
.hero::before { width:280px; height:280px; left:-170px; top:18%; }
.hero::after { width:380px; height:380px; right:-250px; bottom:-180px; }
.hero__inner { position:relative; z-index:1; }
.hero__content { display:flex; flex-direction:column; align-items:center; gap:var(--space-5); max-width:900px; margin-inline:auto; text-align:center; }
.hero__eyebrow { display:flex; align-items:center; justify-content:center; gap:var(--space-2); }
.hero__eyebrow svg { width: 12px; height: 12px; color: var(--color-brand); }
.hero__title { font-size:clamp(3rem, 8vw, 6.8rem); line-height:.92; max-width:11ch; text-wrap:balance; }
.hero__subtitle { font-size:var(--fs-lead); max-width:58ch; }
.hero__ctas { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4); margin-top:var(--space-2); }
.hero__highlights { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-top:clamp(18px,4vw,36px); padding-top:var(--space-6); border-top:1px solid var(--color-border); }
.hero__highlights li { padding-inline:var(--space-4); }
.hero__highlights strong { display:block; color:var(--color-cocoa); font-size:var(--fs-small); }
.hero__highlights span { display:block; margin-top:4px; color:var(--color-text-soft); font-size:var(--fs-xs); line-height:var(--lh-normal); }
@media(max-width:767px){.hero{padding-block:52px 44px}.hero__title{font-size:clamp(3.1rem,17vw,4.8rem)}.hero__subtitle{font-size:1rem}.hero__highlights{grid-template-columns:1fr;text-align:left;gap:0}.hero__highlights li{padding:var(--space-3) 0;border-bottom:1px solid var(--color-border)}.hero__highlights li:last-child{border-bottom:0}.hero__ctas{width:100%}.hero__ctas .btn{flex:1}}

/* ---------- Menu / cardápio editorial ---------- */
.menu-section { background: var(--color-surface-sunken); }
.menu-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Faixa "como pedir" */
.steps-grid {
  display: grid;
  gap: var(--space-6);
}
.step-card { display: flex; flex-direction: column; gap: var(--space-3); }
.step-card__number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--color-brand-soft);
  line-height: 1;
}
.step-card h3 { font-size: var(--fs-h3); }
.step-card p { font-size: var(--fs-small); }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }

/* Sobre */
.about-section {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
.about-media {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.about-content h2 { margin-bottom: var(--space-4); }
.about-content p + p { margin-top: var(--space-3); }
@media (min-width: 1024px) { .about-section { grid-template-columns: 0.8fr 1fr; } }

/* Depoimentos */
.testimonials-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.testimonial-card p { color: var(--color-text); font-style: italic; }
.testimonial-card__author { margin-top: var(--space-4); font-size: var(--fs-small); font-weight: 700; color: var(--color-cocoa); font-style: normal; }

/* CTA final */
.cta-band {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  margin-inline: var(--container-padding);
}
.cta-band h2 { color: var(--color-text-inverse); }
.cta-band p { color: var(--color-brand-soft); margin-top: var(--space-3); }
.cta-band .btn { margin-top: var(--space-6); }
.cta-band .btn--primary { background: var(--color-cream); color: var(--color-brand); box-shadow: none; }
.cta-band .btn--primary:hover { background: var(--color-surface); }