/* ============================================================
   Delícias da Jô — Landing Page
   Sistema de design
   ============================================================ */

:root {
  /* Paleta da marca */
  --rosa-claro: #F7D7DE;
  --rosa-claro-2: #FCEAEE;
  --rosa-cereja: #D96B8A;
  --rosa-cereja-escuro: #C24F70;
  --cereja: #8F0E1A;
  --cereja-2: #A81825;
  --chocolate: #5B3427;
  --chocolate-claro: #7A4D3D;
  --creme: #FFF7F0;
  --creme-2: #FDEFE3;
  --bege: #E8D4BD;
  --verde: #75845A;
  --verde-claro: #93A077;

  --branco: #FFFDFB;
  --texto: #4A2A20;
  --texto-suave: #7A5C50;

  /* Tipografia */
  --f-script: "Grand Hotel", cursive;
  --f-titulo: "Cormorant Garamond", Georgia, serif;
  --f-corpo: "Nunito", system-ui, sans-serif;

  /* Sombras */
  --sombra-suave: 0 10px 30px -12px rgba(143, 14, 26, 0.18);
  --sombra-card: 0 18px 40px -20px rgba(91, 52, 39, 0.28);
  --sombra-forte: 0 24px 60px -24px rgba(143, 14, 26, 0.35);

  /* Layout */
  --max: 1200px;
  --raio: 22px;
  --raio-sm: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-corpo);
  color: var(--texto);
  background: var(--creme);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Decoração: textura de pontinhos suaves */
.dot-grid {
  background-image: radial-gradient(rgba(217, 107, 138, 0.12) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}

/* ============================================================
   Botões
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-corpo);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn svg { width: 20px; height: 20px; flex: none; }

.btn-wpp {
  background: var(--cereja);
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(143, 14, 26, .55);
}
.btn-wpp:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(143, 14, 26, .6); background: var(--cereja-2); }

.btn-rosa {
  background: var(--rosa-cereja);
  color: #fff;
  box-shadow: 0 12px 22px -12px rgba(217, 107, 138, .7);
}
.btn-rosa:hover { transform: translateY(-2px); background: var(--rosa-cereja-escuro); }

.btn-ghost {
  background: transparent;
  color: var(--cereja);
  border: 2px solid rgba(143, 14, 26, .25);
}
.btn-ghost:hover { background: rgba(143, 14, 26, .06); border-color: var(--cereja); }

.btn-pequeno { padding: 11px 18px; font-size: .92rem; }

/* ============================================================
   Cabeçalhos de seção
   ============================================================ */
.secao { padding: 92px 0; position: relative; }

.eyebrow {
  font-family: var(--f-corpo);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rosa-cereja);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before, .eyebrow.center::after {
  content: "";
  width: 26px; height: 2px;
  background: var(--rosa-cereja);
  border-radius: 2px;
  opacity: .6;
}

.titulo-secao {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height: 1.12;
  color: var(--cereja);
  letter-spacing: -0.01em;
  margin-top: 14px;
}
.titulo-secao .script {
  font-family: var(--f-script);
  color: var(--rosa-cereja);
  font-weight: 400;
  font-size: 1.18em;
  line-height: 1;
}

.sub-secao {
  font-size: 1.08rem;
  color: var(--texto-suave);
  max-width: 56ch;
  margin-top: 16px;
}

.head-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.head-center .sub-secao { margin-inline: auto; }