/* =========================================================================
   DJ DENNY BOY — Estilos
   Paleta neon premium para nicho de DJ / produção de eventos.
   ========================================================================= */

:root{
  /* Fundos */
  --bg:            #08080f;
  --bg-2:          #0b0d1c;   /* azul-marinho quase preto */
  --bg-soft:       #101227;
  --surface:       rgba(255,255,255,.04);
  --surface-2:     rgba(255,255,255,.06);
  --border:        rgba(255,255,255,.09);

  /* Neon */
  --purple:        #b14bff;
  --blue:          #2a7bff;
  --magenta:       #ff3fae;
  --cyan:          #23e0ff;

  /* Texto */
  --text:          #f4f5fb;
  --muted:         #a7abc4;
  --dim:           #6d7292;

  /* WhatsApp */
  --wa:            #25d366;
  --wa-dark:       #1ebe5a;

  /* Gradientes */
  --grad-neon:     linear-gradient(120deg, var(--purple), var(--magenta) 55%, var(--blue));
  --grad-btn:      linear-gradient(120deg, #7b2fff, #b14bff 45%, #ff3fae);

  /* Layout */
  --maxw:          1180px;
  --radius:        18px;
  --radius-lg:     26px;

  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset básico ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video,canvas{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3{ line-height:1.15; margin:0; letter-spacing:-.02em; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--purple); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 12px 0;
}
.skip-link:focus{ left:0; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem); }
.container-narrow{ max-width:820px; }
.center{ text-align:center; }
.dim{ color:var(--dim); }

/* Fundo global com leve tom marinho e brilho superior */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(123,47,255,.16), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(42,123,255,.10), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
}

/* =========================================================================
   BOTÕES
   ========================================================================= */
.btn{
  --glow:rgba(177,75,255,.45);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:700; font-size:1rem; line-height:1;
  padding:.95rem 1.5rem; border-radius:999px; border:1px solid transparent;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  will-change:transform;
  text-align:center;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-lg{ padding:1.15rem 2rem; font-size:1.06rem; }
.btn-block{ width:100%; }

.btn-primary{
  background:var(--grad-btn); color:#fff;
  box-shadow:0 8px 28px -6px var(--glow), inset 0 0 0 1px rgba(255,255,255,.12);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -6px var(--glow), 0 0 22px rgba(255,63,174,.35); }

.btn-outline{
  background:var(--surface); color:var(--text); border-color:var(--border);
}
.btn-outline:hover{ border-color:var(--purple); box-shadow:0 0 22px -6px var(--purple); transform:translateY(-2px); }

.btn-ghost{
  background:rgba(255,255,255,.05); color:var(--text); border-color:var(--border);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.10); transform:translateY(-2px); }

.btn-nav{ padding:.65rem 1.25rem; background:var(--grad-btn); color:#fff; box-shadow:0 6px 20px -6px var(--glow); }
.btn-nav:hover{ transform:translateY(-1px); }

/* Botão de WhatsApp do cabeçalho — estilo limpo (só texto, contorno sutil) */
.btn-wa{
  padding:.58rem 1.25rem; font-weight:700; letter-spacing:.01em;
  color:var(--text); background:rgba(255,255,255,.05);
  border:1px solid var(--border); backdrop-filter:blur(6px);
}
.btn-wa:hover{ transform:translateY(-1px); background:rgba(255,255,255,.10); border-color:var(--purple); }
.theme-wedding .btn-wa:hover{ border-color:var(--gold); }
.btn-wa:active{ transform:translateY(0) scale(.99); }

.wa-ico{ width:1.25em; height:1.25em; fill:currentColor; flex:none; }

/* =========================================================================
   SISTEMA DE ÍCONES (sprite SVG) — herdam a cor via currentColor
   ========================================================================= */
.ico{ width:1em; height:1em; display:inline-block; vertical-align:-.14em; flex:none; overflow:visible; }
.trust-ico .ico, .card-ico .ico, .stat-ico .ico{ filter:drop-shadow(0 0 9px currentColor); }
.trust-ico .ico{ filter:drop-shadow(0 0 8px rgba(35,224,255,.6)); }

/* Pulso discreto no CTA final */
.btn-pulse{ animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ box-shadow:0 8px 28px -6px var(--glow); }
  50%{ box-shadow:0 8px 34px -2px rgba(255,63,174,.55), 0 0 30px rgba(177,75,255,.35); }
}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(8,8,15,.85), rgba(8,8,15,.55));
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.site-header.scrolled{ border-bottom-color:var(--border); background:rgba(8,8,15,.9); }
.header-inner{ display:flex; align-items:center; gap:1rem; height:64px; }

.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.02em; }
.brand-text{ font-size:1.02rem; background:var(--grad-neon); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-mark{ display:flex; align-items:flex-end; gap:2px; height:20px; }
.brand-mark span{ width:3px; background:var(--grad-neon); border-radius:2px; animation:eqbar 1.1s ease-in-out infinite; }
.brand-mark span:nth-child(1){ height:8px; animation-delay:0s;}
.brand-mark span:nth-child(2){ height:18px; animation-delay:.15s;}
.brand-mark span:nth-child(3){ height:12px; animation-delay:.3s;}
.brand-mark span:nth-child(4){ height:16px; animation-delay:.45s;}
@keyframes eqbar{ 0%,100%{ transform:scaleY(.45);} 50%{ transform:scaleY(1);} }

.main-nav{ margin-left:auto; display:flex; gap:1.6rem; }
.main-nav a{ color:var(--muted); font-size:.94rem; font-weight:600; position:relative; padding:.2rem 0; }
.main-nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--grad-neon); transition:width .25s; border-radius:2px; }
.main-nav a:hover{ color:var(--text); }
.main-nav a:hover::after{ width:100%; }
.header-inner .btn-nav{ margin-left:0; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative; overflow:hidden;
  min-height:calc(100svh - 64px);
  display:flex; align-items:center;
  padding:clamp(3rem,9vh,6rem) 0;
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-content{ position:relative; z-index:2; max-width:820px; }

/* Glows animados lentos */
.hero-glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.glow-a{ width:520px; height:520px; background:radial-gradient(circle, rgba(177,75,255,.9), transparent 65%); top:-8%; left:-6%; animation:float1 16s ease-in-out infinite; }
.glow-b{ width:460px; height:460px; background:radial-gradient(circle, rgba(42,123,255,.8), transparent 65%); bottom:-12%; right:-4%; animation:float2 20s ease-in-out infinite; }
.glow-c{ width:400px; height:400px; background:radial-gradient(circle, rgba(255,63,174,.7), transparent 65%); top:30%; right:22%; animation:float1 22s ease-in-out infinite reverse; }
@keyframes float1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(40px,30px);} }
@keyframes float2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-40px,-24px);} }

/* Linhas de laser sutis */
.laser{ position:absolute; width:180%; height:1px; left:-40%; opacity:.35;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent); }
.laser-1{ top:36%; transform:rotate(-8deg); animation:laser 9s linear infinite; }
.laser-2{ top:64%; transform:rotate(6deg); background:linear-gradient(90deg, transparent, var(--magenta), transparent); animation:laser 12s linear infinite reverse; }
@keyframes laser{ 0%{ opacity:0; } 20%{ opacity:.4;} 80%{ opacity:.4;} 100%{ opacity:0; transform:translateX(30px) rotate(-8deg);} }

#particles{ position:absolute; inset:0; width:100%; height:100%; opacity:.6; }

/* Equalizador de fundo */
.equalizer{
  position:absolute; left:0; right:0; bottom:0; height:34%;
  display:flex; align-items:flex-end; gap:clamp(3px,1vw,7px);
  padding-inline:2%; opacity:.28; mask-image:linear-gradient(to top, #000, transparent);
}
.equalizer span{
  flex:1; min-width:2px; border-radius:4px 4px 0 0;
  background:var(--grad-neon);
  animation:eq 1.4s ease-in-out infinite;
  height:20%;
}
.equalizer span:nth-child(4n){ animation-duration:1.1s; }
.equalizer span:nth-child(3n){ animation-duration:1.7s; }
.equalizer span:nth-child(2n){ animation-duration:1.9s; }
.equalizer span:nth-child(5n){ animation-duration:1.3s; }
@keyframes eq{ 0%,100%{ height:15%;} 50%{ height:90%;} }
/* delays variados */
.equalizer span:nth-child(1){animation-delay:0s}.equalizer span:nth-child(2){animation-delay:.2s}
.equalizer span:nth-child(3){animation-delay:.4s}.equalizer span:nth-child(4){animation-delay:.1s}
.equalizer span:nth-child(5){animation-delay:.5s}.equalizer span:nth-child(6){animation-delay:.3s}
.equalizer span:nth-child(7){animation-delay:.6s}.equalizer span:nth-child(8){animation-delay:.15s}
.equalizer span:nth-child(9){animation-delay:.45s}.equalizer span:nth-child(10){animation-delay:.25s}

/* Badge */
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .95rem; border-radius:999px; font-size:.85rem; font-weight:600;
  color:var(--text); background:var(--surface); border:1px solid var(--border);
  backdrop-filter:blur(6px); margin-bottom:1.4rem;
}
.badge-dot{ width:8px; height:8px; border-radius:50%; background:var(--wa); box-shadow:0 0 10px var(--wa); animation:blink 2s infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.35} }

.hero-title{ font-size:clamp(2.2rem,6vw,4.1rem); font-weight:800; margin-bottom:1.2rem; }
.grad-text{ background:var(--grad-neon); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ font-size:clamp(1.02rem,2.2vw,1.25rem); color:var(--muted); max-width:640px; margin:0 0 2rem; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.2rem; }
.micro-cta{ display:inline-block; color:var(--cyan); font-weight:600; font-size:.98rem; margin-bottom:1.4rem; transition:opacity .2s, transform .2s; }
.micro-cta:hover{ opacity:.8; transform:translateX(3px); }
.hero-microcopy{ font-size:.86rem; color:var(--dim); margin:0; }

.scroll-hint{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:24px; height:38px; border:2px solid var(--border); border-radius:14px; z-index:2; }
.scroll-hint span{ position:absolute; top:7px; left:50%; transform:translateX(-50%); width:4px; height:7px; background:var(--purple); border-radius:2px; animation:scrolldot 1.8s infinite; }
@keyframes scrolldot{ 0%{opacity:0; top:7px} 40%{opacity:1} 100%{opacity:0; top:20px} }

/* =========================================================================
   TRUST BAR
   ========================================================================= */
.trustbar{ border-block:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.trust-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; padding-block:1.6rem; }
.trust-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; padding:.6rem; border-radius:14px; transition:transform .2s, background .2s; }
.trust-item:hover{ transform:translateY(-3px); background:var(--surface); }
.trust-ico{ font-size:1.7rem; color:var(--cyan); display:inline-flex; }
.trust-item p{ margin:0; font-size:.86rem; font-weight:600; color:var(--muted); }

/* =========================================================================
   SEÇÕES GERAIS
   ========================================================================= */
.section{ position:relative; padding:clamp(3.5rem,8vw,6rem) 0; }
.section-head{ max-width:720px; margin:0 auto clamp(2rem,5vw,3rem); text-align:center; }
.eyebrow{ display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--purple); margin-bottom:.7rem; }
.section-head h2{ font-size:clamp(1.7rem,4vw,2.7rem); font-weight:800; margin-bottom:.8rem; }
.section-lead{ color:var(--muted); font-size:clamp(1rem,2vw,1.12rem); margin:0; }
.section-lead.center{ text-align:center; max-width:760px; margin-inline:auto; }

/* Divisória inspirada em áudio (linha neon) entre seções */
.section + .section::before,
.section-combos::before, .section-gallery::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(80%,var(--maxw)); height:1px;
  background:linear-gradient(90deg, transparent, rgba(177,75,255,.5), rgba(42,123,255,.5), transparent);
}

/* Card base — glassmorphism escuro */
.card{
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(10px);
  position:relative;
}

/* =========================================================================
   TIPOS DE EVENTO
   ========================================================================= */
.event-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.event-card{ padding:1.6rem 1.4rem; transition:transform .25s, border-color .25s, box-shadow .25s; overflow:hidden; }
.event-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--grad-neon); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .25s; }
.event-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -20px rgba(177,75,255,.6); }
.event-card:hover::after{ opacity:.9; }
.card-ico{ display:inline-flex; align-items:center; justify-content:center; font-size:1.55rem; width:52px; height:52px; margin-bottom:1rem; color:var(--purple); border-radius:14px; background:linear-gradient(150deg, rgba(177,75,255,.16), rgba(42,123,255,.06)); border:1px solid rgba(177,75,255,.25); transition:color .25s, border-color .25s, box-shadow .25s; }
.event-card:hover .card-ico{ color:var(--magenta); border-color:rgba(255,63,174,.5); box-shadow:0 0 18px -4px rgba(255,63,174,.5); }
.event-card h3{ font-size:1.12rem; margin-bottom:.5rem; }
.event-card p{ margin:0; color:var(--muted); font-size:.94rem; }

/* =========================================================================
   COMBOS
   ========================================================================= */
.combo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; align-items:stretch; max-width:920px; margin-inline:auto; }
.combo-card{ padding:2rem 1.8rem; display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s; }
.combo-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -22px rgba(42,123,255,.7); }

.combo-featured{
  border-color:transparent;
  background:linear-gradient(160deg, rgba(177,75,255,.14), rgba(42,123,255,.06));
  box-shadow:0 0 0 1px rgba(177,75,255,.35), 0 24px 60px -26px rgba(177,75,255,.7);
}
.combo-featured::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px;
  background:var(--grad-neon);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.combo-badge{
  position:absolute; top:-12px; right:22px;
  background:var(--grad-btn); color:#fff; font-size:.75rem; font-weight:700;
  padding:.35rem .85rem; border-radius:999px; letter-spacing:.03em;
  box-shadow:0 6px 18px -4px rgba(255,63,174,.6);
}
.combo-head{ margin-bottom:1rem; }
.combo-name{ font-size:1.35rem; margin-bottom:.6rem; }
.combo-price{ font-size:2.5rem; font-weight:800; letter-spacing:-.03em; background:var(--grad-neon); -webkit-background-clip:text; background-clip:text; color:transparent; }
.price-currency{ font-size:1.1rem; vertical-align:top; }
.price-cents{ font-size:1.2rem; }
.combo-desc{ color:var(--muted); font-size:.96rem; margin:0 0 1.2rem; }
.combo-list{ list-style:none; padding:0; margin:0 0 1.6rem; display:grid; gap:.6rem; }
.combo-list li{ position:relative; padding-left:1.9rem; font-size:.95rem; color:var(--text); }
.combo-list li::before{
  content:""; position:absolute; left:0; top:.15em; width:1.15em; height:1.15em; border-radius:50%;
  background:rgba(37,211,102,.14);
}
.combo-list li::after{
  content:""; position:absolute; left:.22em; top:.42em; width:.72em; height:.72em;
  background:var(--wa);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.5 4.5L19.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.5 4.5L19.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.combo-card .btn{ margin-top:auto; }
.combo-note{ text-align:center; color:var(--dim); font-size:.88rem; max-width:640px; margin:1.8rem auto 0; }

/* =========================================================================
   TABELA COMPARATIVA
   ========================================================================= */
.compare-wrap{ overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
.compare-table{ width:100%; border-collapse:collapse; min-width:560px; background:var(--surface); }
.compare-table th, .compare-table td{ padding:1rem 1.1rem; text-align:left; border-bottom:1px solid var(--border); font-size:.95rem; vertical-align:top; }
.compare-table thead th{ background:rgba(255,255,255,.03); font-size:.9rem; letter-spacing:.02em; }
.compare-table tbody th{ color:var(--muted); font-weight:600; width:22%; }
.compare-table .col-featured{ background:rgba(177,75,255,.08); }
.compare-table thead .col-featured{ color:var(--purple); }
.compare-table tr:last-child td, .compare-table tr:last-child th{ border-bottom:0; }
.ok{ color:var(--wa); font-weight:700; }

/* =========================================================================
   QUAL COMBO É IDEAL
   ========================================================================= */
.ideal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; max-width:900px; margin-inline:auto; }
.ideal-card{ padding:1.8rem; }
.ideal-card h3{ font-size:1.2rem; margin-bottom:.7rem; background:var(--grad-neon); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.ideal-card p{ margin:0; color:var(--muted); }
.ideal-featured{ border-color:rgba(177,75,255,.4); box-shadow:0 0 0 1px rgba(177,75,255,.25); }
.ideal-cta{ text-align:center; margin-top:2.2rem; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.ideal-cta p{ margin:0; font-weight:600; font-size:1.05rem; }

/* =========================================================================
   ADICIONAIS
   ========================================================================= */
.addon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.9rem; }
.addon{
  display:flex; align-items:center; gap:.7rem;
  padding:1rem 1.1rem; border-radius:14px;
  background:var(--surface); border:1px solid var(--border);
  font-size:.95rem; font-weight:600;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.addon-ico{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; font-size:1.15rem; color:var(--cyan); background:rgba(35,224,255,.08); border:1px solid rgba(35,224,255,.2); transition:color .2s, box-shadow .2s, border-color .2s; }
.addon:hover{ transform:translateY(-3px); border-color:var(--cyan); box-shadow:0 0 20px -8px var(--cyan); }
.addon:hover .addon-ico{ color:#7ff0ff; box-shadow:0 0 14px -3px var(--cyan); border-color:var(--cyan); }

/* =========================================================================
   GALERIA (placeholders)
   ========================================================================= */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:1rem; }
.ph, .gallery-grid img, .gallery-grid video{
  border-radius:var(--radius); overflow:hidden; width:100%; height:100%; object-fit:cover;
}
.ph{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, rgba(177,75,255,.10), rgba(42,123,255,.08));
  border:1px dashed var(--border); color:var(--muted); font-size:.9rem; font-weight:600; padding:1rem;
}
.ph span{ opacity:.9; display:inline-flex; flex-direction:column; align-items:center; gap:.55rem; }
.ph-ico{ font-size:2rem; color:var(--purple); opacity:.9; filter:drop-shadow(0 0 10px rgba(177,75,255,.5)); }
.ph-wide{ grid-column:span 2; }
.ph-tall{ grid-row:span 2; }

/* =========================================================================
   DEPOIMENTOS
   ========================================================================= */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.testi-card{ padding:1.8rem; position:relative; }
.testi-card::before{ content:"\201C"; position:absolute; top:.2rem; left:1rem; font-size:4rem; line-height:1; color:var(--purple); opacity:.4; font-family:Georgia,serif; }
.stars{ color:#ffcf4d; margin-bottom:.7rem; display:inline-flex; gap:2px; font-size:1.05rem; }
.stars .ico{ filter:drop-shadow(0 0 6px rgba(255,207,77,.5)); }
.testi-card blockquote{ margin:0 0 1rem; font-size:1.02rem; color:var(--text); }
.testi-card figcaption{ display:flex; flex-direction:column; }
.testi-card figcaption strong{ color:var(--text); }
.testi-card figcaption span{ color:var(--dim); font-size:.85rem; }

/* =========================================================================
   EXPERIÊNCIA
   ========================================================================= */
.section-experience{ overflow:hidden; }
.exp-bg{ position:absolute; inset:0; z-index:0; opacity:.6; }
.exp-bg .glow-a{ top:20%; left:60%; opacity:.4; }
.wave{ position:absolute; bottom:0; left:0; right:0; height:120px;
  background:radial-gradient(120% 80px at 50% 100%, rgba(42,123,255,.25), transparent 70%); }
.exp-inner{ position:relative; z-index:1; }
.exp-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; max-width:960px; margin-inline:auto; }
.exp-card{ padding:1.8rem; margin:0; font-size:1.05rem; color:var(--muted); }
.exp-card:first-child{ color:var(--text); }

/* =========================================================================
   COMO FUNCIONA
   ========================================================================= */
.steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; counter-reset:step; }
.step{ padding:1.6rem 1.2rem; }
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; margin-bottom:.9rem;
  font-weight:800; font-size:1.1rem; color:#fff; background:var(--grad-btn);
  box-shadow:0 8px 20px -8px rgba(177,75,255,.7);
}
.step h3{ font-size:1rem; margin-bottom:.4rem; }
.step p{ margin:0; color:var(--muted); font-size:.9rem; }

/* =========================================================================
   FORMULÁRIO
   ========================================================================= */
.quote-form{ max-width:760px; margin-inline:auto; padding:clamp(1.5rem,4vw,2.4rem); }
.form-row{ margin-bottom:1.15rem; display:flex; flex-direction:column; }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.quote-form label, .form-label{ font-size:.88rem; font-weight:600; color:var(--muted); margin-bottom:.45rem; }
.quote-form input, .quote-form select, .quote-form textarea{
  width:100%; padding:.85rem 1rem; border-radius:12px;
  background:rgba(0,0,0,.25); border:1px solid var(--border); color:var(--text);
  font-family:inherit; font-size:1rem; transition:border-color .2s, box-shadow .2s;
}
.quote-form input::placeholder, .quote-form textarea::placeholder{ color:var(--dim); }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{
  outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(177,75,255,.2);
}
.quote-form textarea{ resize:vertical; }
.form-hint{ text-align:center; color:var(--dim); font-size:.84rem; margin:.9rem 0 0; }
.form-hint-inline{ font-weight:500; color:var(--dim); font-size:.8rem; }

/* =========================================================================
   CHIPS PREMIUM — "Adicionais de interesse"
   Cada chip é um <label> clicável por inteiro, com checkbox escondido
   (mas acessível por teclado). Estado controlado via :has(input:checked).
   ========================================================================= */
.chips-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:.2rem; }
.chip{
  position:relative; display:flex; align-items:center; gap:.7rem; margin:0;
  padding:.85rem 1rem; border-radius:14px; cursor:pointer;
  background:linear-gradient(155deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border); backdrop-filter:blur(6px);
  font-size:.92rem; font-weight:600; color:var(--text);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
/* checkbox visualmente escondido, mas presente e focável para acessibilidade */
.chip input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.chip-ico{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:10px; font-size:1.1rem; color:var(--purple);
  background:rgba(177,75,255,.12); border:1px solid rgba(177,75,255,.22);
  transition:color .2s, background .2s, border-color .2s;
}
.chip-label{ flex:1; line-height:1.25; }
.chip-check{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:22px; height:22px; border-radius:50%; font-size:.8rem; color:#fff;
  background:transparent; border:1px solid var(--border);
  opacity:0; transform:scale(.6); transition:opacity .2s, transform .2s, background .2s, border-color .2s;
}
/* Hover (desktop) */
.chip:hover{ transform:translateY(-2px); border-color:rgba(177,75,255,.55); box-shadow:0 8px 22px -12px rgba(177,75,255,.8); }
.chip:hover .chip-ico{ color:#d59bff; border-color:rgba(177,75,255,.5); }
/* Selecionado */
.chip:has(input:checked){
  border-color:transparent;
  background:linear-gradient(150deg, rgba(177,75,255,.28), rgba(255,63,174,.14) 55%, rgba(42,123,255,.16));
  box-shadow:0 0 0 1px rgba(177,75,255,.55), 0 12px 30px -14px rgba(177,75,255,.9);
}
.chip:has(input:checked) .chip-ico{ color:#fff; background:linear-gradient(150deg, var(--purple), var(--magenta)); border-color:transparent; box-shadow:0 4px 14px -4px rgba(255,63,174,.7); }
.chip:has(input:checked) .chip-check{ opacity:1; transform:scale(1); background:linear-gradient(150deg, var(--purple), var(--magenta)); border-color:transparent; box-shadow:0 0 12px -2px rgba(255,63,174,.7); }
/* Foco por teclado visível no card inteiro */
.chip:has(input:focus-visible){ outline:2px solid var(--cyan); outline-offset:2px; }
.chip:active{ transform:translateY(0) scale(.99); }

/* =========================================================================
   LOCALIZAÇÃO
   ========================================================================= */
.cities{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; max-width:820px; margin-inline:auto; }
.cities li{ padding:.55rem 1.1rem; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:.9rem; font-weight:600; color:var(--muted); transition:transform .2s, color .2s, border-color .2s; }
.cities li:hover{ transform:translateY(-2px); color:var(--text); border-color:var(--blue); }

/* =========================================================================
   INDICADORES
   ========================================================================= */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.stat{ padding:1.6rem; text-align:center; }
.stat-ico{ font-size:1.9rem; display:inline-flex; margin-bottom:.7rem; color:var(--blue); }
.stat-ico .ico{ filter:drop-shadow(0 0 10px rgba(42,123,255,.6)); }
.stat p{ margin:0; font-weight:700; color:var(--text); }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-list{ display:grid; gap:.8rem; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color .2s; }
.faq-item[open]{ border-color:rgba(177,75,255,.4); }
.faq-item summary{ list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-weight:700; font-size:1.02rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.5rem; font-weight:400; color:var(--purple); transition:transform .25s; flex:none; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-a{ padding:0 1.3rem 1.2rem; color:var(--muted); }
.faq-a p{ margin:0; }

/* =========================================================================
   CTA FINAL
   ========================================================================= */
.final-cta{ position:relative; overflow:hidden; text-align:center; }
.final-bg{ position:absolute; inset:0; z-index:0; }
.final-bg .glow-a{ top:-10%; left:20%; opacity:.5; }
.final-bg .glow-c{ bottom:-20%; right:15%; top:auto; opacity:.5; }
.eq-final{ height:45%; opacity:.2; }
.final-cta .container{ position:relative; z-index:1; }
.final-title{ font-size:clamp(1.9rem,5vw,3rem); font-weight:800; margin-bottom:1rem; }
.final-text{ color:var(--muted); font-size:1.1rem; max-width:560px; margin:0 auto 2rem; }
.final-buttons{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.final-microcopy{ color:var(--dim); font-size:.9rem; margin:1.4rem 0 0; }

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.site-footer{ border-top:1px solid var(--border); background:linear-gradient(180deg, transparent, rgba(11,13,28,.6)); padding-top:3rem; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; padding-bottom:2.4rem; }
.footer-brand .brand-text{ font-size:1.3rem; }
.footer-brand p{ color:var(--muted); margin:.7rem 0 0; max-width:320px; }
.footer-links, .footer-contact{ display:flex; flex-direction:column; gap:.6rem; }
.footer-links h3, .footer-contact h3{ font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:0 0 .4rem; }
.footer-links a, .footer-contact a{ color:var(--muted); font-size:.95rem; transition:color .2s; width:fit-content; }
.footer-links a:hover, .footer-contact a:hover{ color:var(--purple); }
.footer-bottom{ border-top:1px solid var(--border); padding-block:1.4rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; }
.footer-bottom p{ margin:0; font-size:.85rem; color:var(--dim); }

/* =========================================================================
   BOTÃO FLUTUANTE WHATSAPP
   ========================================================================= */
.fab-whatsapp{
  position:fixed; right:18px; bottom:18px; z-index:120;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--wa); color:#fff; font-weight:700;
  padding:.85rem 1.3rem; border-radius:999px;
  box-shadow:0 10px 30px -6px rgba(37,211,102,.6);
  animation:fabpulse 2.8s ease-in-out infinite;
}
.fab-whatsapp .wa-ico{ width:1.5em; height:1.5em; }
.fab-whatsapp:hover{ background:var(--wa-dark); transform:translateY(-2px); }
@keyframes fabpulse{ 0%,100%{ box-shadow:0 10px 30px -6px rgba(37,211,102,.55);} 50%{ box-shadow:0 10px 34px -2px rgba(37,211,102,.9), 0 0 0 8px rgba(37,211,102,.12);} }

/* =========================================================================
   ANIMAÇÃO DE ENTRADA NO SCROLL (reveal)
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================================
   GLOW QUE SEGUE O MOUSE (desktop)
   ========================================================================= */
.cursor-glow{
  position:fixed; top:0; left:0; width:420px; height:420px; border-radius:50%;
  pointer-events:none; z-index:0; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(177,75,255,.12), transparent 60%);
  transition:opacity .3s; opacity:0;
}

/* =========================================================================
   RESPONSIVIDADE
   ========================================================================= */
@media (max-width:980px){
  .event-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .testi-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:820px){
  .main-nav{ display:none; }
  .header-inner .btn-nav{ margin-left:auto; }
  .trust-grid{ grid-template-columns:repeat(3,1fr); }
  .combo-grid{ grid-template-columns:1fr; max-width:480px; }
  .ideal-grid{ grid-template-columns:1fr; }
  .chips-grid{ grid-template-columns:repeat(2,1fr); }
  .exp-cards{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .ph-wide{ grid-column:span 2; }
  .ph-tall{ grid-row:span 1; }
}

@media (max-width:560px){
  .form-grid-2{ grid-template-columns:1fr; }
  .chips-grid{ grid-template-columns:1fr; }
  .event-grid{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  .final-buttons{ flex-direction:column; }
  .final-buttons .btn{ width:100%; }
  .fab-whatsapp .fab-text{ display:none; }   /* botão compacto no mobile */
  .fab-whatsapp{ padding:.9rem; }
  .fab-whatsapp .wa-ico{ width:1.7em; height:1.7em; }

  /* Reduz efeitos pesados no mobile para manter performance */
  #particles{ display:none; }
  .laser{ display:none; }
  .cursor-glow{ display:none; }
  .hero-glow{ filter:blur(50px); }
}

/* Comparativo vira cards no mobile */
@media (max-width:620px){
  .compare-wrap{ border:0; overflow:visible; }
  .compare-table{ min-width:0; }
  .compare-table thead{ display:none; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td{ display:block; width:100%; }
  .compare-table tr{ margin-bottom:1rem; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); }
  .compare-table tbody th{ background:rgba(177,75,255,.12); color:var(--text); font-size:.95rem; padding:.7rem 1rem; }
  .compare-table td{ display:flex; justify-content:space-between; gap:1rem; text-align:right; border-bottom:1px solid var(--border); }
  .compare-table td::before{ content:attr(data-label); font-weight:600; color:var(--muted); text-align:left; }
  .compare-table .col-featured{ background:rgba(177,75,255,.06); }
  .compare-table tr td:last-child{ border-bottom:0; }
}

/* =========================================================================
   PREFERS-REDUCED-MOTION — respeita acessibilidade
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  #particles{ display:none; }
}

/* Foco visível para navegação por teclado */
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* =========================================================================
   ==========  ATUALIZAÇÃO: MULTI-PÁGINA (FESTAS + CASAMENTOS)  ============
   ========================================================================= */

/* ---------- Tokens do tema de CASAMENTO (dourado suave / champanhe) ---------- */
:root{
  --gold:      #e7c987;
  --gold-2:    #d9b978;
  --champagne: #f3e6c8;
  --warm:      #fff4e0;
  --gold-soft: rgba(231,201,135,.16);
  --grad-gold: linear-gradient(120deg, #e7c987, #f3e6c8 55%, #cbb98f);
}

/* ===================== HEADER: NAV CROSS-PAGE + MENU MOBILE ===================== */
.main-nav{ align-items:center; }
.main-nav a{ display:inline-flex; flex-direction:column; }
.main-nav a.active{ color:var(--text); }
.main-nav a.active::after{ width:100%; }
.nav-wedding small{ font-size:.66rem; font-weight:600; color:var(--gold); letter-spacing:.02em; opacity:.9; line-height:1; margin-top:2px; }
.nav-cta{ margin-left:.4rem; }
.nav-cta::after{ display:none; }

/* Hambúrguer (escondido no desktop) */
.nav-toggle{
  display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface); flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer; transition:border-color .2s, background .2s;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s, opacity .2s; }
.site-header.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-header.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1024px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute; top:100%; left:0; right:0; margin-left:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,11,20,.98); backdrop-filter:blur(14px);
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:.6rem clamp(1.1rem,4vw,2rem) 1.1rem;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .3s ease, opacity .25s ease, visibility .25s;
  }
  .site-header.nav-open .main-nav{ max-height:85vh; overflow:auto; opacity:1; visibility:visible; }
  .main-nav a{ flex-direction:row; align-items:baseline; gap:.5rem; padding:.9rem .2rem; border-bottom:1px solid var(--border); font-size:1.02rem; }
  .main-nav a::after{ display:none; }
  .nav-wedding small{ margin-top:0; }
  .nav-cta{ margin:.9rem 0 .2rem; justify-content:center; }
  .nav-cta.btn{ padding:.9rem 1.5rem; }
}

/* ===================== BREADCRUMB ===================== */
.breadcrumb{ padding-top:1.2rem; }
.breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0; font-size:.85rem; color:var(--dim); }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--purple); }
.breadcrumb li+li::before{ content:"/"; margin-right:.4rem; color:var(--dim); }
.breadcrumb [aria-current="page"]{ color:var(--text); }

/* ===================== SEÇÃO "QUAL MOMENTO?" (ESCOLHA DE SERVIÇO) =====================
   Composição em 3 camadas: fundo (recortado) + overlay + avatar PNG que ultrapassa a área.
   IMPORTANTE: o CARD usa overflow:visible (senão cortaria o avatar). Só o .service-card-background
   recorta o excesso da imagem de fundo. */
.service-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; align-items:stretch; max-width:960px; margin-inline:auto; }
.service-card{
  position:relative; overflow:visible; padding:0; display:flex; flex-direction:column;
  border-radius:var(--radius-lg); transition:transform .3s, box-shadow .3s;
}
.service-card:hover{ transform:translateY(-6px); }

/* Área visual superior (mais alta; cantos de cima arredondados) */
.service-card-visual{
  position:relative; overflow:visible;
  aspect-ratio:10/9;      /* altura acompanha a largura do card */
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
/* Camada 1 — fundo do ambiente (ÚNICO elemento que recorta o excesso) */
.service-card-background{
  position:absolute; inset:0; z-index:1; overflow:hidden; border-radius:inherit;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.service-card-background img, .service-card-bg-img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .5s ease; will-change:transform;
}
.service-card:hover .service-card-background img,
.service-card:hover .service-card-bg-img{ transform:scale(1.05); }
.service-card-party .service-card-background{ background:linear-gradient(150deg, rgba(177,75,255,.28), rgba(42,123,255,.16)); }
.service-card-wedding .service-card-background{ background:linear-gradient(150deg, rgba(231,201,135,.26), rgba(90,60,120,.24)); }
/* rótulo do placeholder de fundo */
.service-emb{ display:flex; flex-direction:column; align-items:center; gap:.6rem; color:#fff; opacity:.9; text-align:center; padding:1rem; }
.service-emb .ico{ font-size:2.4rem; filter:drop-shadow(0 0 12px rgba(255,255,255,.35)); }
.service-emb span{ font-size:.82rem; color:rgba(255,255,255,.78); max-width:230px; }

/* Camada 2 — overlay para contraste (escurece a base) */
.service-card-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg, rgba(8,8,15,.12) 0%, rgba(8,8,15,.32) 55%, rgba(8,8,15,.85) 100%);
}

/* Camada 3 — avatar PNG transparente que ultrapassa a área visual */
.service-card-avatar{
  position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  z-index:3; width:100%; max-width:100%; height:auto;
  object-fit:contain; object-position:bottom center;
  pointer-events:none; user-select:none;
  transition:transform .3s ease; will-change:transform;
}
.service-card-party .service-card-avatar{ filter:drop-shadow(0 20px 30px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(167,76,255,.22)); }
.service-card-wedding .service-card-avatar{ filter:drop-shadow(0 20px 30px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(231,201,135,.2)); }
.service-card:hover .service-card-avatar{ transform:translateX(-50%) translateY(-6px); }
/* Silhueta de placeholder do avatar (enquanto não há PNG real) */
.service-card-avatar-ph{
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:1.5rem;
  width:clamp(120px,15vw,175px); border-radius:100px 100px 26px 26px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border:1px dashed var(--border); border-bottom:none;
}
.service-card-avatar-ph .ico{ font-size:2.6rem; opacity:.9; }
.service-card-party .service-card-avatar-ph .ico{ color:var(--purple); }
.service-card-wedding .service-card-avatar-ph .ico{ color:var(--gold); }

/* Área de conteúdo — o topo recebe espaço para o avatar invadir sem cobrir o texto.
   Sem fundo próprio: o avatar (z-3) aparece sobre a base do card; o texto (z-4) fica por cima. */
.service-body{ padding:1.7rem 1.6rem 1.9rem; display:flex; flex-direction:column; flex:1; position:relative; z-index:4; }
/* Só reserva espaço no topo quando há um avatar recortado que ultrapassa a área.
   Com apenas a foto de fundo, o texto vem logo abaixo (sem buraco). */
.service-card.has-avatar .service-card-content{ padding-top:30px; }
.service-kicker{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.5rem; }
.service-card-party .service-kicker{ color:var(--purple); }
.service-card-wedding .service-kicker{ color:var(--gold); }
.service-body h3{ font-size:1.4rem; margin-bottom:.7rem; }
.service-body p{ color:var(--muted); margin:0 0 1.4rem; }
.service-body .btn{ margin-top:auto; }
.service-card-wedding{ border-color:rgba(231,201,135,.35); box-shadow:0 0 0 1px rgba(231,201,135,.18); }
.service-card-wedding:hover{ box-shadow:0 26px 50px -24px rgba(231,201,135,.5); }
.service-card-party:hover{ box-shadow:0 26px 50px -24px rgba(177,75,255,.6); }

/* Responsivo da composição (tablet / celular) */
@media (max-width:640px){
  .service-card-avatar{ bottom:-8px; }
  .service-card.has-avatar .service-card-content{ padding-top:24px; }
}
/* Sem animação de hover no avatar/fundo quando o usuário prefere menos movimento */
@media (prefers-reduced-motion:reduce){
  .service-card:hover .service-card-avatar,
  .service-card:hover .service-card-background img,
  .service-card:hover .service-card-bg-img{ transform:translateX(-50%); }
  .service-card:hover .service-card-background img,
  .service-card:hover .service-card-bg-img{ transform:none; }
}

/* ===================== BOTÃO DOURADO (casamentos) ===================== */
.btn-gold{ background:var(--grad-gold); color:#2a1f0e; box-shadow:0 8px 26px -8px rgba(231,201,135,.6); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -8px rgba(231,201,135,.7); }
.btn-outline-gold{ background:var(--surface); color:var(--warm); border-color:rgba(231,201,135,.4); }
.btn-outline-gold:hover{ border-color:var(--gold); box-shadow:0 0 22px -6px var(--gold); transform:translateY(-2px); }

/* ===================== TEMA CASAMENTO (aplicado no body.theme-wedding) ===================== */
.theme-wedding .eyebrow{ color:var(--gold); }
.theme-wedding .grad-text{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.theme-wedding .badge-dot{ background:var(--gold); box-shadow:0 0 10px var(--gold); }
.theme-wedding .hero-glow.glow-a{ background:radial-gradient(circle, rgba(231,201,135,.55), transparent 65%); }
.theme-wedding .hero-glow.glow-c{ background:radial-gradient(circle, rgba(255,244,224,.4), transparent 65%); }
.theme-wedding body::before,
.theme-wedding.body::before{ }
.theme-wedding .section-head h2 .grad-text,
.theme-wedding .final-title .grad-text{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wed-warm-bg::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(900px 480px at 20% 0%, rgba(231,201,135,.10), transparent 60%),
             radial-gradient(700px 460px at 90% 20%, rgba(120,80,150,.14), transparent 60%);
}

/* ===================== LINHA DO TEMPO — MÚSICA PARA CADA MOMENTO ===================== */
.timeline{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.tl-item{ display:flex; gap:1rem; padding:1.4rem 1.4rem; }
.tl-ico{
  flex:none; width:46px; height:46px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.35rem; color:var(--gold); background:var(--gold-soft); border:1px solid rgba(231,201,135,.3);
}
.tl-item h3{ font-size:1.08rem; margin-bottom:.35rem; }
.tl-item p{ margin:0; color:var(--muted); font-size:.94rem; }

/* ===================== PACOTES DE CASAMENTO ===================== */
.wed-package{ padding:2rem 1.8rem; display:flex; flex-direction:column; }
.wed-pkg-ico{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px;
  font-size:1.4rem; color:var(--gold); background:var(--gold-soft); border:1px solid rgba(231,201,135,.3); margin-bottom:.9rem; }
.wed-price{ font-size:1.15rem; font-weight:700; color:var(--warm); margin-top:.2rem; }
/* Grade de 3 pacotes (responsiva — substitui estilos inline p/ não quebrar no mobile) */
.wed-grid{ grid-template-columns:repeat(3,1fr); max-width:1020px; }
.wed-diff-list{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .wed-grid{ grid-template-columns:1fr; max-width:520px; } }
@media (max-width:560px){ .wed-diff-list{ grid-template-columns:1fr; } }
.wed-featured{ border-color:transparent; background:linear-gradient(160deg, rgba(231,201,135,.16), rgba(120,80,150,.10)); }
.wed-featured::before{ background:var(--grad-gold); }
.wed-featured .combo-badge{ background:var(--grad-gold); color:#2a1f0e; box-shadow:0 6px 18px -4px rgba(231,201,135,.6); }
.theme-wedding .combo-list li::before{ background:rgba(231,201,135,.18); }
.theme-wedding .combo-list li::after{ background:var(--gold); }

/* ===================== GALERIA COM FILTROS + MODAL ===================== */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2rem; }
.gfilter{
  display:inline-flex; align-items:center; gap:.45rem; padding:.6rem 1.1rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--border); color:var(--muted); font-weight:600; font-size:.9rem; cursor:pointer;
  transition:color .2s, border-color .2s, background .2s, box-shadow .2s;
}
.gfilter:hover{ color:var(--text); border-color:var(--purple); }
.gfilter.active{ color:#fff; background:var(--grad-btn); border-color:transparent; box-shadow:0 6px 18px -6px rgba(177,75,255,.6); }
.gfilter .ico{ font-size:1rem; }

.gallery-grid-dyn{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:1rem; }
.g-item{
  position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--border);
  padding:0; cursor:pointer; background:linear-gradient(160deg, rgba(177,75,255,.10), rgba(42,123,255,.08));
  transition:transform .25s, box-shadow .25s, border-color .25s; color:var(--muted);
}
.g-item:hover{ transform:translateY(-4px); box-shadow:0 18px 36px -20px rgba(177,75,255,.7); border-color:rgba(177,75,255,.5); }
.g-item img{ width:100%; height:100%; object-fit:cover; }
.g-ph{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center; padding:1rem;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px);
  font-size:.86rem; font-weight:600;
}
.g-ph-ico{ font-size:1.8rem; color:var(--purple); opacity:.9; }
.g-badge{ position:absolute; top:.6rem; left:.6rem; font-size:.7rem; font-weight:700; padding:.25rem .6rem; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(4px); }
.g-tag{ position:absolute; bottom:.6rem; right:.6rem; font-size:.68rem; font-weight:700; padding:.2rem .55rem; border-radius:6px; background:rgba(0,0,0,.6); color:#fff; }
.g-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.g-play .ico{ font-size:2.6rem; color:#fff; filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
.g-item[data-category="wedding"]{ background:linear-gradient(160deg, rgba(231,201,135,.14), rgba(90,60,120,.12)); }
.g-item[data-category="wedding"] .g-ph-ico{ color:var(--gold); }

/* Modal / lightbox */
.media-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; }
.media-modal[hidden]{ display:none; }
.media-modal-backdrop{ position:absolute; inset:0; background:rgba(4,4,10,.86); backdrop-filter:blur(6px); }
.media-modal-box{ position:relative; z-index:1; width:min(92vw,960px); max-height:90vh; display:flex; flex-direction:column; align-items:center; }
.media-modal-content{ width:100%; display:flex; align-items:center; justify-content:center; }
.media-modal-content img, .media-modal-content video{ max-width:100%; max-height:78vh; border-radius:14px; display:block; }
.media-ph{ text-align:center; padding:3rem 1.5rem; border:1px dashed var(--border); border-radius:16px; background:var(--surface); width:100%; }
.media-ph .ico{ font-size:3rem; color:var(--purple); }
.media-ph p{ margin:.6rem 0 0; } .media-ph code{ color:var(--cyan); font-size:.85em; }
.media-modal-caption{ color:var(--muted); font-size:.9rem; margin:.9rem 0 0; text-align:center; max-width:640px; }
.media-modal-close{ position:absolute; top:-52px; right:0; width:42px; height:42px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.media-modal-close:hover{ background:rgba(255,255,255,.14); }
.media-modal-close .ico{ font-size:1.2rem; }
.media-nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,.5); border:1px solid var(--border); color:#fff; display:inline-flex; align-items:center; justify-content:center; z-index:2; }
.media-nav:hover{ background:rgba(0,0,0,.75); }
.media-prev{ left:-8px; } .media-next{ right:-8px; }
@media (max-width:640px){ .media-prev{ left:4px; } .media-next{ right:4px; } .media-nav{ width:40px; height:40px; } }

/* ===================== FORM ADAPTÁVEL: grupos ===================== */
.form-group[hidden]{ display:none; }
.form-group-title{ font-size:.95rem; font-weight:700; color:var(--text); margin:1.4rem 0 .8rem; padding-top:1.2rem; border-top:1px solid var(--border); }
.theme-wedding .quote-form input:focus,
.theme-wedding .quote-form select:focus,
.theme-wedding .quote-form textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(231,201,135,.2); }

/* CTA cruzado (festa -> casamento) */
.cross-cta{ text-align:center; margin-top:2.5rem; padding:1.8rem; border:1px solid rgba(231,201,135,.3); border-radius:var(--radius-lg); background:linear-gradient(150deg, rgba(231,201,135,.08), rgba(255,255,255,.02)); }
.cross-cta p{ margin:0 0 1rem; font-size:1.1rem; font-weight:600; color:var(--warm); }
.cross-cta-party{ border-color:rgba(177,75,255,.3); background:linear-gradient(150deg, rgba(177,75,255,.1), rgba(255,255,255,.02)); }
.cross-cta-party p{ color:var(--text); }

/* Apresentação da dupla — BANNER horizontal (imagem única já composta: fundo + dupla). */
.wedding-duo-banner{
  position:relative; overflow:hidden; margin:1.6rem auto 0;
  width:100%; max-width:1100px; aspect-ratio:1920/900;   /* mantém a proporção da arte (sem cortar) */
  border-radius:26px; border:1px solid rgba(231,201,135,.28);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.wedding-duo-background{ position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; }
.wedding-duo-background img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s ease; will-change:transform; }
/* placeholder elegante caso a imagem ainda não exista */
.wedding-duo-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 120% at 72% 18%, rgba(231,201,135,.20), transparent 55%),
    linear-gradient(120deg, #1b1526, #241c14 55%, #12101f); }
.wedding-duo-ph .ico{ font-size:3rem; color:var(--gold); opacity:.5; }
.wedding-duo-banner:hover .wedding-duo-background img{ transform:scale(1.025); }
/* overlay bem sutil (só uma leve vinheta inferior, sem escurecer a arte) */
.wedding-duo-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg, rgba(0,0,0,0) 64%, rgba(0,0,0,.26) 100%);
}

/* Rodapé com dois serviços */
.footer-brand .brand-wedding{ display:block; margin-top:1.2rem; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===================== RESPONSIVIDADE (novos componentes) ===================== */
@media (max-width:900px){
  .service-grid{ grid-template-columns:1fr; max-width:460px; }
  .timeline{ grid-template-columns:1fr; }
  .gallery-grid-dyn{ grid-template-columns:repeat(3,1fr); grid-auto-rows:170px; }
}
/* Banner da dupla — cantos um pouco menores no celular (a altura acompanha a proporção da arte) */
@media (max-width:640px){ .wedding-duo-banner{ border-radius:20px; } }
@media (prefers-reduced-motion:reduce){
  .wedding-duo-background img{ transition:none; }
  .wedding-duo-banner:hover .wedding-duo-background img{ transform:none; }
}
@media (max-width:620px){
  .gallery-grid-dyn{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .wed-package{ padding:1.7rem 1.4rem; }
}
@media (max-width:400px){
  .gallery-grid-dyn{ grid-template-columns:1fr 1fr; grid-auto-rows:140px; }
}

/* =========================================================================
   ==========  SEÇÃO DE VÍDEOS EM DESTAQUE (festas e casamentos)  ==========
   Cards verticais 9:16. Nada toca sozinho: poster + play; vídeo abre em modal.
   ========================================================================= */
.video-showcase-grid{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:22px; margin:0 auto;
}
/* a largura máxima da grade define quantos cabem por linha (com centralização) */
.video-showcase-party  .video-showcase-grid{ max-width:900px; }
.video-showcase-wedding .video-showcase-grid{ max-width:1160px; }

/* ---- Card (é um <button> real para acessibilidade) ---- */
.featured-video-card{
  flex:0 0 auto; padding:0; border:1px solid var(--border); cursor:pointer; position:relative;
  width:clamp(220px,25vw,275px); aspect-ratio:9/16; border-radius:20px; overflow:hidden;
  background:#0e1020; box-shadow:0 14px 34px -18px rgba(0,0,0,.8);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.video-showcase-wedding .featured-video-card{ width:clamp(185px,14vw,215px); }
.featured-video-media{ position:absolute; inset:0; }
.featured-video-media img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s ease; will-change:transform; }
/* placeholder (quando ainda não há poster real) */
.featured-video-ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, rgba(177,75,255,.14), rgba(42,123,255,.10));
}
.featured-video-ph .ico{ font-size:2.2rem; color:var(--purple); opacity:.85; }
.video-showcase-wedding .featured-video-ph{ background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, rgba(231,201,135,.16), rgba(90,60,120,.12)); }
.video-showcase-wedding .featured-video-ph .ico{ color:var(--gold); }
/* overlay de contraste */
.featured-video-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,8,15,.05) 0%, rgba(8,8,15,.12) 45%, rgba(8,8,15,.78) 100%);
}
/* botão de play central */
.featured-video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--grad-btn); color:#fff; box-shadow:0 8px 24px -6px rgba(177,75,255,.7);
  transition:transform .25s ease, box-shadow .25s ease;
}
.theme-wedding .featured-video-play{ background:var(--grad-gold); color:#2a1f0e; box-shadow:0 8px 24px -6px rgba(231,201,135,.7); }
.featured-video-play svg{ width:24px; height:24px; fill:currentColor; margin-left:3px; }
.featured-video-badge{
  position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.68rem; font-weight:700; padding:.28rem .6rem; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(4px); letter-spacing:.03em;
}
.featured-video-badge .ico{ width:.85em; height:.85em; }
.featured-video-info{ position:absolute; left:0; right:0; bottom:0; padding:.9rem 1rem 1rem; text-align:left; }
.featured-video-info span{ display:block; font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
.theme-wedding .featured-video-info span{ color:var(--gold); }
.featured-video-info strong{ display:block; color:#fff; font-size:.98rem; line-height:1.2; margin-top:.15rem; }
/* hover (desktop) */
@media (hover:hover){
  .featured-video-card:hover{ transform:translateY(-5px); border-color:rgba(177,75,255,.5); box-shadow:0 22px 46px -18px rgba(177,75,255,.55); }
  .theme-wedding .featured-video-card:hover{ border-color:rgba(231,201,135,.5); box-shadow:0 22px 46px -18px rgba(231,201,135,.5); }
  .featured-video-card:hover .featured-video-media img{ transform:scale(1.03); }
  .featured-video-card:hover .featured-video-play{ transform:translate(-50%,-50%) scale(1.08); }
}
.featured-video-card:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

/* dica de arraste + indicadores (só no carrossel mobile) */
.video-showcase-hint{ display:none; align-items:center; justify-content:center; gap:.5rem; margin-top:1rem; color:var(--muted); font-size:.86rem; }
.video-showcase-hint .ico{ font-size:1.1rem; color:var(--purple); }
.theme-wedding .video-showcase-hint .ico{ color:var(--gold); }
.video-dots{ display:none; justify-content:center; gap:.5rem; margin-top:.9rem; }
.video-dots button{ width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--border); cursor:pointer; transition:background .2s, transform .2s; }
.video-dots button.active{ background:var(--purple); transform:scale(1.25); }
.theme-wedding .video-dots button.active{ background:var(--gold); }

/* ---- responsivo das grades ---- */
/* Casamentos: >1279 = 5 na linha; 861–1279 = 3 + 2 centralizados */
@media (max-width:1279px){ .video-showcase-wedding .video-showcase-grid{ max-width:720px; } }
/* Tablet: 2 por linha (ímpar centraliza sozinho pelo justify-content:center) */
@media (max-width:860px){
  .video-showcase-party  .video-showcase-grid{ max-width:580px; }
  .video-showcase-wedding .video-showcase-grid{ max-width:470px; }
}
/* Mobile: carrossel horizontal com scroll snap, sem scrollbar visível */
@media (max-width:600px){
  .video-showcase-grid{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; max-width:none;
    scroll-snap-type:x mandatory; gap:16px;
    padding-inline:20px; scroll-padding-inline:20px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .video-showcase-grid::-webkit-scrollbar{ display:none; }
  .featured-video-card,
  .video-showcase-wedding .featured-video-card{ width:min(78vw,290px); scroll-snap-align:center; }
  .video-showcase-hint{ display:flex; }
  .video-dots{ display:flex; }
}

/* ---- Modal de vídeo (9:16) ---- */
.video-modal{ position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; }
.video-modal[hidden]{ display:none; }
.video-modal-backdrop{ position:absolute; inset:0; background:rgba(4,4,10,.88); backdrop-filter:blur(6px); }
.video-modal-box{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.video-modal-player{ width:min(92vw,430px); max-height:88vh; aspect-ratio:9/16; object-fit:contain; border-radius:16px; background:#000; display:block; }
.video-modal-ph{ width:min(92vw,430px); aspect-ratio:9/16; max-height:88vh; border-radius:16px; border:1px dashed var(--border); background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem 1.4rem; }
.video-modal-ph .ico{ font-size:3rem; color:var(--purple); }
.theme-wedding .video-modal-ph .ico{ color:var(--gold); }
.video-modal-ph p{ margin:.6rem 0 0; color:var(--muted); } .video-modal-ph code{ color:var(--cyan); font-size:.85em; }
.video-modal-close{ position:absolute; top:-52px; right:0; width:42px; height:42px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.video-modal-close:hover{ background:rgba(255,255,255,.14); }
.video-modal-close .ico{ font-size:1.2rem; }
.video-modal-caption{ color:var(--muted); font-size:.9rem; margin:.9rem 0 0; text-align:center; }

@media (prefers-reduced-motion:reduce){
  .featured-video-card:hover{ transform:none; }
  .featured-video-card:hover .featured-video-media img{ transform:none; }
  .featured-video-card:hover .featured-video-play{ transform:translate(-50%,-50%); }
}