*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; background:#fff; color:#1a1a2e; overflow-x:hidden; }

/* ── scrollbar ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#f0f0f0}
::-webkit-scrollbar-thumb{background:#b91e70;border-radius:4px}

/* ── TYPOGRAPHY — matching brandbook exactly ──
   H1 section titles: DM Sans Bold, navy, large — like "História do FAMILY IN CONCERT"
   H2 subtitles: DM Sans Bold, magenta, uppercase, tracking — like "MISSÃO", "VISÃO"
   Body: DM Sans Regular, dark gray
*/
.title-h1 {
  font-family:'DM Sans',sans-serif;
  font-weight:800;
  color:#211f60;
  line-height:1.1;
  letter-spacing:-0.01em;
}
.title-h2 {
  font-family:'DM Sans',sans-serif;
  font-weight:700;
  color:#b91e70;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:0.85rem;
}
.title-h3 {
  font-family:'DM Sans',sans-serif;
  font-weight:700;
  color:#211f60;
  line-height:1.25;
}
.body-text {
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  color:#3d3d5c;
  line-height:1.75;
}
.highlight-mg { color:#b91e70; font-weight:600; }
.highlight-nv { color:#211f60; font-weight:600; }

/* ── nav underline ── */
.nav-link { position:relative; transition:color .25s; font-weight:500; }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px; background:#b91e70; transform:scaleX(0); transition:transform .3s; }
.nav-link:hover { color:#211f60 !important; }
.nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); }
.nav-link.active { color:#211f60 !important; font-weight:600; }

/* ── mobile menu ── */
#mob-menu { max-height:0; overflow:hidden; opacity:0; transition:all .4s cubic-bezier(.4,0,.2,1); }
#mob-menu.open { max-height:500px; opacity:1; }

/* ── wm logo (watermark) ── */
.wm { position:absolute; pointer-events:none; user-select:none; }

/* ── grafismo decorativo (PNG) ── */
.grafismo { position:absolute; pointer-events:none; overflow:hidden; }

/* ── card hover ── */
.card { transition:transform .3s ease, box-shadow .3s ease; border:1.5px solid #e8e8f2; background:#fff; border-radius:16px; }
.card:hover { transform:translateY(-5px); box-shadow:0 16px 48px rgba(33,31,96,.11); border-color:#d0d0e8; }

/* ── section divider — magenta line like brandbook ── */
.divider-mg { width:48px; height:3px; background:#b91e70; border-radius:2px; margin-top:12px; }

/* ── waveform bars ── */
.wbar { display:inline-block; width:3px; border-radius:3px; background:#524de0; animation:wv 1.4s ease-in-out infinite; vertical-align:bottom; }
@keyframes wv { 0%,100%{height:4px} 50%{height:26px} }

/* ── swiper ── */
.swiper-pagination-bullet { background:#b91e70 !important; opacity:.3; }
.swiper-pagination-bullet-active { opacity:1 !important; }

/* ── input ── */
.fic-inp {
  width:100%; border:1.5px solid #ddddf0; border-radius:8px;
  padding:13px 16px; font-family:'DM Sans',sans-serif; font-size:.9rem;
  color:#1a1a2e; background:#fff; outline:none; transition:border-color .3s, box-shadow .3s;
}
.fic-inp:focus { border-color:#b91e70; box-shadow:0 0 0 3px rgba(185,30,112,.08); }
.fic-inp::placeholder { color:#b0aaaa; }

/* ── hero navy gradient (keep the one client liked) ── */
#home {
  background: linear-gradient(135deg, #211f60 0%, #12103a 40%, #0a0918 100%);
}

/* ── notas musicais: canvas de fundo em seções claras ── */
.notes-bg {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.32;
  mix-blend-mode:normal;
}
.notes-bg { z-index:1; }

/* ── HERO logo: branco sobre fundo navy ── */
.rs1, .rs2 { animation:none !important; }
.float { animation:none !important; }
/* Logo no hero: PNG nítido + filtro suavizado (menos “borrado” que invert puro) */
.hero-logo-src {
  width:460px;
  height:460px;
  max-width:min(460px, 85vw);
  object-fit:contain;
  object-position:center;
  display:block;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);
  filter:brightness(0) invert(1) contrast(1.06);
  image-rendering:auto;
}
@keyframes bsc { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }
.bsc { animation:bsc 2s ease-in-out infinite; }

/* ── toast ── */
#toast {
  position:fixed; bottom:28px; right:28px; z-index:9000;
  padding:14px 22px; border-radius:10px;
  display:flex; align-items:center; gap:10px;
  background:#211f60; color:#fff;
  box-shadow:0 8px 30px rgba(33,31,96,.25);
  transform:translateY(20px); opacity:0;
  transition:all .4s; pointer-events:none; font-size:.88rem;
}
#toast.show { transform:translateY(0); opacity:1; }

/* ── back top ── */
#btop {
  position:fixed; bottom:28px; left:28px; z-index:800;
  width:42px; height:42px; border-radius:50%;
  background:#211f60; color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; pointer-events:none;
  transition:all .3s; box-shadow:0 4px 16px rgba(33,31,96,.3);
}
#btop.show { opacity:1; pointer-events:auto; }
#btop:hover { background:#b91e70; transform:translateY(-2px); }

/* ── video placeholder ── */
.vph { transition:border-color .3s, background .3s; cursor:pointer; }
.vph:hover { border-color:#211f60 !important; }
.vph:hover .vplay { background:#b91e70 !important; transform:scale(1.1); }
.vplay { transition:all .3s; }

/* ── modal ── */
#vmodal {
  display:none; position:fixed; inset:0; z-index:9500;
  background:rgba(33,31,96,.55); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:24px;
}
#vmodal.open { display:flex; }

/* ── selo shine ── */
.selo-card { position:relative; overflow:hidden; }
.selo-card::after {
  content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(254,189,35,.07),transparent);
  transform:skewX(-20deg); animation:shine 6s infinite 2s;
}
@keyframes shine { 0%{left:-100%} 100%{left:160%} }

/* ── tag pill ── */
.tag-pill {
  display:inline-block; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:4px 12px; border-radius:20px;
}

/* ── section bg alternation ── */
.bg-offwhite { background:#fafafa; }
.bg-lightblue { background:#f4f4fb; }

/* ── logos em fundos escuros (rodapé + bloco "Certificação Oficial") ── */
footer img[src*="assets/images/logoups.png"],
footer img[src*="assets/images/logo.png"],
footer img[src*="assets/images/logo-removebg-preview.png"],
footer img[src*="/assets/images/logoups.png"],
footer img[src*="/assets/images/logo.png"],
footer img[src*="/assets/images/logo-removebg-preview.png"]{
  filter: brightness(0) invert(1) contrast(1.06);
}

/* bloco escuro dentro do "Selo FIC" (tem gradiente navy) */
#selo-fic div[style*="linear-gradient(135deg,#211f60"] img[src*="assets/images/"],
#selo-fic div[style*="linear-gradient(135deg,#211f60"] img[src*="/assets/images/"]{
  filter: brightness(0) invert(1) contrast(1.06);
}

/* Paginação (Agenda) — acento na marca */
.fic-pagination-wrap nav span[aria-current="page"] span {
  background: #211f60 !important;
  border-color: #211f60 !important;
  color: #fff !important;
}
.fic-pagination-wrap nav a:hover {
  color: #b91e70 !important;
}

/* ── Agenda / Próximos Eventos: composição mais “editorial” (sem mudar markup) ── */
#eventos .max-w-7xl > .mb-14 {
  position: relative;
  padding-left: 18px;
}
#eventos .max-w-7xl > .mb-14::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #b91e70, #524de0);
  opacity: 0.9;
}

#eventos .grid.md\:grid-cols-2 > .card {
  position: relative;
  overflow: hidden;
  border-color: rgba(33, 31, 96, 0.10);
}
#eventos .grid.md\:grid-cols-2 > .card::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background:
    radial-gradient(900px 240px at 10% 0%, rgba(185, 30, 112, 0.10), transparent 55%),
    radial-gradient(700px 260px at 90% 10%, rgba(82, 77, 224, 0.12), transparent 55%);
}
#eventos .grid.md\:grid-cols-2 > .card:hover::after {
  opacity: 1;
}

#eventos .grid.md\:grid-cols-2 > .card > .relative.overflow-hidden {
  position: relative;
}
#eventos .grid.md\:grid-cols-2 > .card > .relative.overflow-hidden::before {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: soft-light;
  opacity: 0.22;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      -18deg,
      rgba(255, 255, 255, 0.10) 0 1px,
      rgba(255, 255, 255, 0.00) 1px 10px
    );
}

/* ── Depoimentos: carrossel com “palco” (foco no slide ativo) ── */
#depoimentos .dep-swiper {
  padding: 10px 6px 6px;
}
#depoimentos .dep-swiper .swiper-slide {
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1), filter 0.45s ease, opacity 0.45s ease;
  filter: saturate(0.92);
  opacity: 0.78;
}
#depoimentos .dep-swiper .swiper-slide-active {
  transform: translateY(-6px);
  filter: saturate(1);
  opacity: 1;
}
#depoimentos .dep-swiper .swiper-slide .card {
  border-color: rgba(33, 31, 96, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.98));
}
#depoimentos .dep-swiper .swiper-slide-active .card {
  box-shadow: 0 22px 70px rgba(33, 31, 96, 0.12);
  border-color: rgba(82, 77, 224, 0.22);
}

#depoimentos .dep-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #211f60 !important;
  opacity: 0.18 !important;
}
#depoimentos .dep-swiper .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b91e70, #524de0) !important;
  opacity: 1 !important;
}