/* =========================================================================
   Filhos do Axé — Design System
   Paleta: preto profundo, dourado, vinho, creme (tema escuro)
   ========================================================================= */

:root {
  --color-white: #ffffff;
  --color-cream: #faf6ee;
  --color-gold: #c79a3d;
  --color-gold-light: #e6c877;
  --color-wine: #6d0f2b;
  --color-wine-dark: #4a0a1d;
  --color-black: #17130f;

  /* Fundo e superfícies (tema escuro) */
  --color-bg: #0c0a13;
  --color-bg-alt: #100c17;
  --color-surface: #171220;
  --color-surface-2: #1c1626;
  --color-border: rgba(230, 200, 119, 0.16);
  --color-border-strong: rgba(230, 200, 119, 0.4);

  --text-heading: #f5efe0;
  --text-main: #beb6c7;
  --text-muted: #948da3;
  --text-inverse: var(--color-cream);

  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 32px;

  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-medium: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 8px 24px rgba(199, 154, 61, 0.35);

  --font-heading: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --transition-fast: 180ms ease;
  --transition-medium: 320ms cubic-bezier(0.22, 1, 0.36, 1);

  --max-width: 1180px;

  /* Escala de espaçamento (ritmo vertical consistente) */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Escala tipográfica fluida */
  --text-xs: 0.8rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: clamp(1.05rem, 1rem + 0.3vw, 1.15rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem);
  --text-xl: clamp(1.4rem, 1.2rem + 1vw, 1.7rem);
  --text-2xl: clamp(1.8rem, 1.5rem + 1.6vw, 2.4rem);
  --text-3xl: clamp(2.4rem, 2rem + 2.6vw, 3.6rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-main);
  background:
    radial-gradient(ellipse 900px 500px at 10% 0%, rgba(199, 154, 61, 0.09), transparent 60%),
    radial-gradient(ellipse 800px 600px at 100% 15%, rgba(109, 15, 43, 0.16), transparent 55%),
    radial-gradient(ellipse 700px 500px at 15% 85%, rgba(109, 15, 43, 0.1), transparent 55%),
    var(--color-bg);
  background-attachment: fixed;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin: 0 0 0.5em;
  color: var(--text-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p, .hero-subtitle, .section-subtitle, .testimonial-text { text-wrap: pretty; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 0;
  background: var(--color-gold);
  color: var(--color-black);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transform: translateY(-150%);
  transition: transform var(--transition-fast);
}
.skip-link:focus { transform: translateY(12px); }

.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex-shrink: 0; }

/* --------------------------------- Botões --------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:hover { transform: translateY(-2px) scale(1.03); }
.btn:active { transform: translateY(0) scale(1); }

.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 650ms ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.4), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}
.btn:hover::before { opacity: 1; }

.btn-primary {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-black);
  box-shadow: var(--shadow-gold);
  animation: pulseGold 2.8s ease-in-out infinite;
}
.btn-primary:hover { box-shadow: 0 12px 28px rgba(199, 154, 61, 0.45); animation-play-state: paused; }

@keyframes pulseGold {
  0%, 100% { box-shadow: var(--shadow-gold); }
  50% { box-shadow: 0 8px 30px rgba(199, 154, 61, 0.55); }
}

.btn-outline {
  background: transparent;
  color: var(--text-inverse);
  border-color: rgba(245, 239, 224, 0.35);
}
.btn-outline:hover { background: rgba(245, 239, 224, 0.1); border-color: rgba(245, 239, 224, 0.6); }

.btn-outline-gold {
  background: transparent;
  color: var(--color-gold-light);
  border-color: var(--color-border-strong);
}
.btn-outline-gold:hover { background: rgba(230, 200, 119, 0.1); border-color: var(--color-gold-light); }

.btn-whatsapp {
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
}
.btn-whatsapp:hover { background: #1ebe5a; }

.btn-small { padding: 10px 20px; font-size: 0.85rem; }

.btn-block { width: 100%; justify-content: center; }

/* --------------------------------- Header --------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(12, 10, 19, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-heading);
}
.logo span { color: var(--color-gold-light); font-weight: 400; }
.logo-light { color: var(--text-heading); }
.logo-light span { color: var(--color-gold-light); }

.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav ul { display: flex; list-style: none; gap: 24px; margin: 0; padding: 0; }
.main-nav a:not(.btn) {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-main);
  position: relative;
  padding-bottom: 4px;
}
.main-nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}
.main-nav a:not(.btn):hover { color: var(--text-heading); }
.main-nav a:not(.btn):hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--text-heading);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* --------------------------------- Hero --------------------------------- */

.hero {
  position: relative;
  background: radial-gradient(circle at 50% 15%, rgba(199, 154, 61, 0.14), transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(109, 15, 43, 0.25), transparent 55%),
    linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
  color: var(--text-inverse);
  padding: var(--space-2xl) 0 var(--space-3xl);
  overflow: hidden;
  text-align: center;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
}
.hero-text { display: flex; flex-direction: column; align-items: center; }

/* -------- Selo/badge de confiança do hero -------- */

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-gold-light);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--space-lg);
  animation: heroFadeInUp 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* -------- Campo de estrelas animado (fundo místico do hero) -------- */

.hero-starfield {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
}
.hero-stars-sm {
  box-shadow:
    59.7vw 16.5vh rgba(230,200,119,0.65),
    67.2vw 29.1vh rgba(230,200,119,0.83),
    7.5vw 54.9vh rgba(255,255,255,0.47),
    99.3vw 3.2vh rgba(255,255,255,0.56),
    7.2vw 37.1vh rgba(230,200,119,0.86),
    74.1vw 3.5vh rgba(255,255,255,0.69),
    20.4vw 49.1vh rgba(230,200,119,0.39),
    14.6vw 1.5vh rgba(230,200,119,0.74),
    86.3vw 45.0vh rgba(230,200,119,0.81),
    3.6vw 18.6vh rgba(255,255,255,0.43),
    38.3vw 16.5vh rgba(255,255,255,0.78),
    87.4vw 30.7vh rgba(255,255,255,0.46),
    57.4vw 22.8vh rgba(230,200,119,0.51),
    60.1vw 19.4vh rgba(255,255,255,0.74),
    39.9vw 31.6vh rgba(255,255,255,0.48),
    59.1vw 28.9vh rgba(255,255,255,0.60),
    45.2vw 4.4vh rgba(255,255,255,0.77),
    12.1vw 46.8vh rgba(255,255,255,0.68),
    93.2vw 13.7vh rgba(255,255,255,0.61),
    63.2vw 37.4vh rgba(255,255,255,0.48),
    61.7vw 0.0vh rgba(230,200,119,0.51),
    76.6vw 23.8vh rgba(255,255,255,0.55),
    25.4vw 16.1vh rgba(255,255,255,0.81),
    59.5vw 3.2vh rgba(255,255,255,0.83),
    44.8vw 9.6vh rgba(255,255,255,0.81),
    22.1vw 25.0vh rgba(255,255,255,0.78),
    0.1vw 23.2vh rgba(230,200,119,0.41),
    27.8vw 31.7vh rgba(230,200,119,0.68),
    72.1vw 53.6vh rgba(255,255,255,0.49),
    49.5vw 21.7vh rgba(255,255,255,0.78),
    94.4vw 42.8vh rgba(230,200,119,0.63),
    39.0vw 32.1vh rgba(255,255,255,0.84),
    33.8vw 40.9vh rgba(230,200,119,0.84),
    18.0vw 13.5vh rgba(255,255,255,0.54),
    13.6vw 36.4vh rgba(255,255,255,0.80),
    55.2vw 15.7vh rgba(255,255,255,0.45),
    64.3vw 50.4vh rgba(255,255,255,0.85),
    68.1vw 6.5vh rgba(255,255,255,0.80),
    31.2vw 38.1vh rgba(230,200,119,0.41),
    35.5vw 15.2vh rgba(255,255,255,0.69),
    55.6vw 51.3vh rgba(230,200,119,0.60),
    7.4vw 32.2vh rgba(255,255,255,0.71),
    60.8vw 42.2vh rgba(255,255,255,0.67),
    89.6vw 26.2vh rgba(230,200,119,0.59),
    75.6vw 8.7vh rgba(255,255,255,0.84),
    9.7vw 12.0vh rgba(230,200,119,0.39),
    76.6vw 31.8vh rgba(255,255,255,0.36),
    81.5vw 24.4vh rgba(255,255,255,0.45),
    16.0vw 32.9vh rgba(255,255,255,0.67),
    65.8vw 6.8vh rgba(255,255,255,0.82),
    99.0vw 7.7vh rgba(255,255,255,0.49),
    69.0vw 24.1vh rgba(255,255,255,0.72),
    6.1vw 0.0vh rgba(255,255,255,0.42),
    6.2vw 54.3vh rgba(255,255,255,0.52),
    21.3vw 17.8vh rgba(255,255,255,0.61),
    98.0vw 39.0vh rgba(255,255,255,0.68),
    28.3vw 43.6vh rgba(255,255,255,0.76),
    8.7vw 39.9vh rgba(255,255,255,0.76),
    11.3vw 17.5vh rgba(255,255,255,0.47),
    63.7vw 30.6vh rgba(255,255,255,0.82),
    86.0vw 27.9vh rgba(255,255,255,0.42),
    51.3vw 29.1vh rgba(230,200,119,0.78),
    62.0vw 37.9vh rgba(255,255,255,0.83),
    91.7vw 27.5vh rgba(230,200,119,0.83),
    93.5vw 47.6vh rgba(255,255,255,0.65),
    70.5vw 4.6vh rgba(255,255,255,0.68),
    95.5vw 0.7vh rgba(230,200,119,0.82),
    4.4vw 24.1vh rgba(255,255,255,0.41),
    5.1vw 18.8vh rgba(255,255,255,0.47),
    78.3vw 42.8vh rgba(255,255,255,0.86);
  animation: starDriftSlow 80s linear infinite, starTwinkle 4s ease-in-out infinite alternate;
}
.hero-stars-lg {
  width: 3px;
  height: 3px;
  box-shadow:
    76.2vw 1.4vh rgba(230,200,119,0.79),
    54.9vw 19.6vh rgba(255,255,255,0.61),
    59.1vw 5.9vh rgba(255,255,255,0.42),
    12.1vw 41.3vh rgba(230,200,119,0.85),
    26.9vw 46.8vh rgba(255,255,255,0.88),
    66.8vw 37.5vh rgba(255,255,255,0.58),
    97.3vw 1.4vh rgba(255,255,255,0.82),
    57.4vw 25.9vh rgba(230,200,119,0.39),
    29.6vw 15.6vh rgba(230,200,119,0.77),
    70.5vw 24.6vh rgba(255,255,255,0.45),
    3.6vw 22.7vh rgba(255,255,255,0.66),
    8.0vw 8.4vh rgba(255,255,255,0.52),
    65.3vw 28.6vh rgba(255,255,255,0.48),
    29.2vw 25.7vh rgba(255,255,255,0.64),
    42.7vw 35.2vh rgba(255,255,255,0.71),
    81.1vw 47.5vh rgba(255,255,255,0.45),
    85.9vw 41.1vh rgba(255,255,255,0.82),
    68.0vw 43.6vh rgba(230,200,119,0.49),
    46.3vw 0.6vh rgba(255,255,255,0.58),
    97.5vw 3.6vh rgba(230,200,119,0.49),
    47.8vw 34.8vh rgba(255,255,255,0.50),
    62.6vw 0.3vh rgba(255,255,255,0.54);
  animation: starDriftSlow 130s linear infinite reverse, starTwinkle 5.5s ease-in-out infinite alternate-reverse;
}
@keyframes starDriftSlow {
  from { transform: translate(0, 0); }
  to { transform: translate(-48px, 32px); }
}
@keyframes starTwinkle {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-gold-light);
  margin-bottom: 14px;
}
.eyebrow-light { color: var(--color-gold-light); }
.hero-text h1 {
  color: var(--color-gold-light); /* cor sólida de segurança se o navegador não suportar o gradiente abaixo */
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  margin-bottom: 0.35em;
  max-width: 20ch;
  animation: heroFadeInUp 900ms 80ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-text h1 {
    background: linear-gradient(100deg, var(--color-gold-light) 0%, #ffffff 45%, var(--color-gold-light) 90%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: heroTitleShine 7s ease-in-out infinite, heroFadeInUp 900ms 80ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
.hero-subtitle {
  color: var(--text-main);
  font-size: var(--text-md);
  line-height: 1.7;
  max-width: 56ch;
  animation: heroFadeInUp 900ms 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
  animation: heroFadeInUp 900ms 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-checklist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
  margin: var(--space-lg) 0 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--text-main);
  animation: heroFadeInUp 900ms 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-checklist li { display: flex; align-items: center; gap: 8px; }
.hero-checklist .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(37, 211, 102, 0.18);
  color: #25d366;
  font-size: 0.75rem;
  flex-shrink: 0;
}

@keyframes heroTitleShine {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
@keyframes heroFadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -------- Divisória curva entre o hero e a próxima seção -------- */

.hero-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 70px;
  z-index: 1;
  display: block;
}
.hero-wave path { fill: var(--color-bg); }

/* --------------------------------- Sections --------------------------------- */

.section { padding: var(--space-3xl) 0; position: relative; }
.section-alt { background: var(--color-bg-alt); }

.section-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  position: relative;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.section-title::before {
  content: '◆';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  color: var(--color-gold);
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}
.section-title-spaced { margin-top: var(--space-2xl); }

/* Selo/pílula usado como cabeçalho de seção (ex.: "Promoção do Dia") */
.section-badge {
  display: table;
  margin: 0 auto var(--space-lg);
  padding: 10px 22px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-gold-light);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.section-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 auto var(--space-xl);
}

/* --------------------------------- Sobre --------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.about-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  border-top: 3px solid var(--color-gold);
  transition: transform var(--transition-medium), border-color var(--transition-medium);
}
.about-card:hover { transform: translateY(-6px); border-color: var(--color-border-strong); }
.about-card h3 { color: var(--color-gold-light); font-size: var(--text-lg); }
.about-card p { line-height: 1.7; margin-bottom: 0; }

/* Cards de confiança (check) */
.checkcard-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin: var(--space-xl) 0 0;
  padding: 0;
}
.checkcard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: transform var(--transition-medium), border-color var(--transition-medium);
}
.checkcard:hover { transform: translateY(-4px); border-color: var(--color-border-strong); }
.checkcard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(230, 200, 119, 0.12);
  color: var(--color-gold-light);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}
.checkcard h3 { color: var(--text-heading); font-size: var(--text-md); margin-bottom: 0.35em; }
.checkcard p { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: 0; }

/* --------------------------------- Daily highlight --------------------------------- */

.daily-highlight {
  background: linear-gradient(120deg, var(--color-surface), var(--color-wine-dark));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--text-inverse);
  padding: var(--space-2xl) 0;
}
.daily-highlight-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.daily-highlight-inner img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-gold);
}
.daily-highlight-inner h2 { color: var(--color-gold-light); font-size: var(--text-xl); }
.daily-highlight-inner p { color: var(--text-main); line-height: 1.7; }
.daily-highlight-price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-gold-light);
}

/* --------------------------------- Cards de serviço --------------------------------- */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  perspective: 1200px;
}

.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  will-change: transform;
}
.card:hover { box-shadow: var(--shadow-medium); border-color: var(--color-border-strong); }
.card:not(.tilting):hover { transform: translateY(-8px); }
.card-image { transition: transform 400ms ease; }
.card:hover .card-image { transform: scale(1.05); }

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(230, 200, 119, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}
.card:hover::before { opacity: 1; }

.card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-surface-2);
}

.card-body { padding: var(--space-md); display: flex; flex-direction: column; flex: 1; gap: var(--space-2xs); }
.card-body h3 { margin: 0; color: var(--text-heading); font-size: var(--text-lg); letter-spacing: -0.005em; }
.card-body p { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.65; flex: 1; }
.card-price { font-weight: 700; color: var(--color-gold-light); font-size: var(--text-sm); }

/* Ícone circular no topo dos cards de consulta */
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: rgba(230, 200, 119, 0.07);
  color: var(--color-gold-light);
  margin-bottom: var(--space-2xs);
}
.service-icon .icon { width: 1.3em; height: 1.3em; }

/* Linha de preço parseada a partir do price_note (ex.: "1 pergunta R$10 · 3 perguntas R$15") */
.price-rows { list-style: none; margin: var(--space-2xs) 0; padding: var(--space-2xs) 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 6px; }
.price-rows li { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); }
.price-rows .price-label { color: var(--text-muted); }
.price-rows .price-value { color: var(--color-gold-light); font-weight: 700; font-family: var(--font-heading); }

/* Link "Consultar →" (cards de Consultas) */
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gold-light);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: auto;
  transition: gap var(--transition-fast);
}
.service-link:hover { gap: 10px; }

.card-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.card-actions .btn { flex: 1; justify-content: center; padding: 10px 16px; font-size: 0.85rem; }

/* Promoções */
.promo-card { border-color: var(--color-border-strong); cursor: pointer; }
.promo-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.promo-card-head h3 { flex: 1; }
.promo-badge {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-black);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  font-family: var(--font-heading);
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}
.promo-old-price { text-decoration: line-through; color: var(--text-muted); font-size: 0.85rem; }

.empty-state { text-align: center; color: var(--text-muted); font-style: italic; }

/* --------------------------------- Trabalhos espirituais --------------------------------- */

.work-card .card-body { text-align: left; }
.work-card .btn-outline-gold { margin-top: var(--space-2xs); }

/* --------------------------------- Testimonials --------------------------------- */

.testimonial-rail {
  margin-top: var(--space-xl);
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: var(--space-2xs) var(--space-3xs) var(--space-md);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
.testimonial-rail::-webkit-scrollbar { height: 6px; }
.testimonial-rail::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 999px; }

.testimonial-card {
  scroll-snap-align: start;
  flex: 0 0 min(340px, 85vw);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
}
.testimonial-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-sm); }
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-black);
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  flex-shrink: 0;
}
.testimonial-name { font-weight: 700; color: var(--text-heading); margin: 0; }
.testimonial-stars { color: var(--color-gold); font-size: 0.9rem; letter-spacing: 2px; margin: 0; }
.testimonial-text {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-main);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin: 0;
}

/* --------------------------------- Redes sociais --------------------------------- */

.social-icons { display: flex; gap: 14px; margin-top: 20px; }
.social-icons a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-gold-light);
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.social-icons a:hover { background: var(--color-gold); color: var(--color-black); border-color: var(--color-gold); transform: translateY(-4px); }

/* --------------------------------- Números --------------------------------- */

.stats-band {
  position: relative;
  overflow: hidden;
  padding: var(--space-2xl) 0;
  background: var(--color-bg);
}
.stats-grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: var(--space-lg);
  text-align: center;
}
.stat-number {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-gold-light);
  margin: 0 0 0.2em;
}
.stat-label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

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

.accordion { max-width: 800px; margin: var(--space-lg) auto 0; display: flex; flex-direction: column; }
.accordion-item {
  border-bottom: 1px solid var(--color-border);
}
.accordion-item:first-child { border-top: 1px solid var(--color-border); }
.accordion-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-sm) var(--space-2xs);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.accordion-question:hover { color: var(--color-gold-light); }
.accordion-question .icon { transition: transform var(--transition-fast); color: var(--color-gold); }
.accordion-item.open .accordion-question .icon { transform: rotate(180deg); }
.accordion-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-medium);
  padding: 0 var(--space-2xs);
  color: var(--text-muted);
  line-height: 1.7;
}
.accordion-item.open .accordion-answer { padding-bottom: var(--space-sm); }

/* --------------------------------- CTA final --------------------------------- */

.cta-band {
  text-align: center;
  padding: var(--space-3xl) 0 var(--space-lg);
  background: radial-gradient(circle at 50% 0%, rgba(109, 15, 43, 0.35), transparent 60%);
}
.cta-band h2 { font-size: var(--text-2xl); max-width: 22ch; margin: 0 auto 0.4em; }
.cta-band p { color: var(--text-main); max-width: 50ch; margin: 0 auto var(--space-lg); }

/* --------------------------------- Contato --------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; }
.contact-info { list-style: none; padding: 0; margin: var(--space-md) 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-info li { display: flex; align-items: center; gap: var(--space-xs); color: var(--text-muted); }
.contact-info .icon { color: var(--color-gold-light); }

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.contact-form label { font-weight: 600; font-size: var(--text-xs); margin-top: var(--space-2xs); color: var(--color-gold-light); }
.contact-form input, .contact-form textarea {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-family: inherit;
  font-size: 16px;
  color: var(--text-heading);
  background: var(--color-surface-2);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-muted); }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(199, 154, 61, 0.2);
}
.contact-form button { margin-top: 18px; }
.form-feedback { font-size: 0.9rem; min-height: 1.2em; font-weight: 600; }
.form-feedback.success { color: #4fbf78; }
.form-feedback.error { color: #e2716b; }

/* --------------------------------- Footer --------------------------------- */

.site-footer { position: relative; background: var(--color-bg-alt); color: var(--text-muted); padding-top: var(--space-2xl); line-height: 1.7; border-top: 1px solid var(--color-border); }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}
.footer-brand p { max-width: 32ch; }
.site-footer h4 { color: var(--color-gold-light); font-size: var(--text-base); letter-spacing: 0.02em; margin-bottom: var(--space-sm); }
.footer-hours p a:hover { color: var(--color-gold-light); }
.footer-bottom { padding: var(--space-md) 0; font-size: var(--text-sm); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.footer-bottom-inner p { margin: 0; }
.footer-bottom .back-to-top-link { color: var(--color-gold-light); font-weight: 600; }
.footer-bottom .back-to-top-link:hover { text-decoration: underline; }

.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-gold-light);
  box-shadow: var(--shadow-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 400;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.floating-whatsapp {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-medium);
  z-index: 400;
  animation: pulse 2.4s infinite;
}
.floating-whatsapp .icon { width: 1.7em; height: 1.7em; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* --------------------------------- Responsivo --------------------------------- */

@media (max-width: 960px) {
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; text-align: left; }
  .daily-highlight-inner { grid-template-columns: 1fr; text-align: center; }
  .daily-highlight-inner img { max-width: 220px; margin: 0 auto; }
}

@media (max-width: 800px) {
  .main-nav {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 20px;
    box-shadow: var(--shadow-medium);
    transform: translateY(-140%);
    transition: transform var(--transition-medium);
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav ul { flex-direction: column; gap: 16px; text-align: center; }
  .nav-toggle { display: flex; }
}

@media (max-width: 520px) {
  .section { padding: var(--space-2xl) 0; }
  .about-card, .contact-form { padding: var(--space-md); }
  .floating-whatsapp { width: 50px; height: 50px; bottom: 20px; left: 16px; }
  .back-to-top { width: 46px; height: 46px; bottom: 20px; right: 16px; }
  .hero-wave { height: 40px; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
}

/* --------------------------------- Animação ao rolar a página --------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Reduz movimento para quem prefere (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}