/* PIB Maceió — design system v2 (modern) */
:root {
  --navy: #0A2A5E;
  --navy-2: #123170;
  --blue: #0B57C2;
  --gold: #E7A93A;
  --gold-dark: #C98F1F;
  --ink: #14181F;
  --text: #3D4552;
  --text-soft: #5B6472;
  --text-mute: #6B7480;
  --border: #EAE7E0;
  --bg: #FAF9F6;
  --bg-tint: #F3F1EB;
  --bg-tint-2: #ECE9E1;
  --white: #ffffff;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(20,24,31,0.05), 0 6px 18px rgba(20,24,31,0.06);
  --shadow-md: 0 2px 6px rgba(10,42,94,0.06), 0 18px 44px rgba(10,42,94,0.14);
  --shadow-lg: 0 8px 20px rgba(10,42,94,0.12), 0 36px 90px rgba(10,42,94,0.22);
  --ease: cubic-bezier(.22,.8,.24,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
}
a { color: var(--blue); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--navy); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::selection { background: var(--blue); color: #fff; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { color: var(--navy); font-weight: 600; letter-spacing: -0.5px; margin: 0; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.kicker { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--blue); font-weight: 600; display: inline-block; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 14px; z-index: 40;
  margin: 0 auto; max-width: 1280px; padding: 0 16px;
}
.site-header .wrap {
  padding: 10px 18px;
  display: flex; align-items: center; gap: clamp(10px,2vw,26px);
  flex-wrap: wrap; row-gap: 10px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(20,24,31,0.06);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-logo { height: 44px; width: auto; display: block; flex: 0 0 auto; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 50%; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 19px; letter-spacing: -0.5px;
  overflow: hidden; flex: 0 0 auto;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }

.main-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; }
.main-nav > .nav-item { position: relative; }
.main-nav > .nav-item > a, .main-nav > .nav-item > span.nav-trigger {
  font-size: 14px; font-weight: 400; color: var(--text); cursor: pointer;
  padding: 10px 16px; border-radius: 999px; transition: all .15s;
  display: inline-block;
}
.main-nav > .nav-item.active > a, .main-nav > .nav-item.active > span.nav-trigger {
  color: var(--navy); font-weight: 500; background: var(--bg-tint);
}
.main-nav > .nav-item > a:hover, .main-nav > .nav-item > span.nav-trigger:hover { color: var(--navy); background: var(--bg-tint); }

.dropdown { position: relative; }
.dropdown .dropdown-panel {
  display: none; flex-direction: column; position: absolute; top: 100%; left: 0; margin-top: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 230px; max-width: 280px; max-height: 60vh; overflow-y: auto;
  padding: 10px; z-index: 50;
  opacity: 0; transform: translateY(-6px); transition: opacity .18s var(--ease), transform .18s var(--ease);
}
/* Hover-to-open is a desktop-pointer affordance only. Unscoped, it also fires on mobile
   (a touch/synthetic pointer moving across stacked accordion triggers to reach one lower in
   the list "hovers" the ones above it on the way), popping their panels open, reflowing the
   list, and shifting the real target out from under the tap. Mobile relies solely on the
   JS click-toggle .open class instead — see nav.js. */
@media (min-width: 721px) {
  .dropdown::before {
    /* invisible bridge over the visual gap so hover doesn't drop between trigger and panel */
    content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px;
  }
  .dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel { display: flex; }
  .dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel, .dropdown-panel.js-open { opacity: 1; transform: translateY(0); }
}
.dropdown-panel a {
  display: block; padding: 10px 14px; font-size: 13.5px; color: var(--text);
  border-radius: 10px; flex: 0 0 auto;
}
.dropdown-panel a:hover { background: var(--bg-tint); color: var(--navy); }

.nav-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.btn-outline {
  font-size: 13.5px; font-weight: 500; color: var(--navy);
  border: 1px solid #DEDAD0; padding: 10px 18px; cursor: pointer;
  border-radius: 999px; white-space: nowrap; transition: all .25s var(--ease);
}
.btn-outline:hover { border-color: var(--navy); background: var(--bg-tint); color: var(--navy); transform: translateY(-2px); }
.btn-live {
  font-size: 13.5px; font-weight: 500; color: #fff; background: var(--blue);
  padding: 11px 18px; border-radius: 999px; display: flex; align-items: center; gap: 8px;
  white-space: nowrap; transition: all .25s var(--ease); box-shadow: 0 4px 14px rgba(11,87,194,0.28);
}
.btn-live:hover { background: var(--navy); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10,42,94,0.32); }
.btn-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: inline-block; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Page hero (subpages) ---------- */
.page-hero { padding: 64px 28px 40px; }
.page-hero .kicker { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.page-hero h1 { margin: 14px 0 18px; font-size: clamp(34px,4vw,54px); line-height: 1.06; letter-spacing: -1.6px; max-width: 18ch; }
.page-hero p.lede { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text); font-weight: 300; max-width: 60ch; }

/* ---------- Content body (cleaned WP content) ---------- */
.content-body { padding: 0 28px 96px; max-width: 1240px; margin: 0 auto; }
.content-body-split { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 56px; align-items: start; }
.content-body-inner { max-width: 720px; display: flex; flex-direction: column; gap: 18px; }
.page-aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 96px; }
.aside-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.aside-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.aside-title { font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.aside-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-soft); font-weight: 300; }
.aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.aside-list li a { display: block; padding: 9px 10px; margin: 0 -10px; border-radius: 10px; font-size: 14px; color: var(--text); }
.aside-list li a:hover { background: var(--bg-tint); color: var(--navy); }
@media (max-width: 860px) {
  .content-body-split { grid-template-columns: 1fr; }
  .page-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .aside-card { flex: 1 1 260px; }
}
.content-body-inner h2 { font-size: 24px; line-height: 1.3; letter-spacing: -0.5px; margin-top: 12px; }
.content-body-inner h3 { font-size: 19px; line-height: 1.35; margin-top: 8px; }
.content-body-inner h4 { font-size: 16px; margin-top: 6px; }
.content-body-inner p { font-size: 16px; line-height: 1.8; color: var(--text); margin: 0; font-weight: 300; }
.content-body-inner ul, .content-body-inner ol { margin: 0; padding-left: 22px; font-size: 15.5px; line-height: 1.85; color: var(--text); font-weight: 300; }
.content-body-inner li { margin-bottom: 4px; }
.content-body-inner strong { color: var(--navy); font-weight: 600; }
.content-body-inner blockquote {
  margin: 0; padding: 20px 24px; border-left: 3px solid var(--gold);
  background: var(--bg-tint); font-style: italic; color: var(--navy); font-size: 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.content-body-inner img { border-radius: var(--radius-sm); width: 100%; height: auto; object-fit: cover; }
.content-body-inner a { border-bottom: 1px solid #C4D5EE; padding-bottom: 1px; }
.content-body-inner a:hover { border-color: var(--navy); }
.content-body-inner table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.content-body-inner th, .content-body-inner td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.content-body-inner iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius-sm); }
.content-body-inner form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; background: var(--bg-tint); padding: 28px; border-radius: var(--radius); }
.content-body-inner label { font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-mute); }
.content-body-inner input, .content-body-inner textarea, .content-body-inner select {
  font-family: 'Poppins', sans-serif; font-size: 15px; padding: 12px 14px;
  border: 1px solid #DEDAD0; border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.content-body-inner button { align-self: flex-start; }

.img-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px; margin: 8px 0; }
.img-gallery img { height: 180px; object-fit: cover; width: 100%; border-radius: var(--radius-sm); }

/* ---------- Masonry photo gallery (true masonry via CSS columns) ---------- */
.masonry-gallery { column-count: 4; column-gap: 18px; }
.masonry-gallery img {
  width: 100%; display: block; margin: 0 0 18px; border-radius: var(--radius-sm);
  break-inside: avoid; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  cursor: pointer;
}
.masonry-gallery img:hover { transform: translateY(-10px) rotate(-0.4deg) scale(1.015); box-shadow: var(--shadow-lg); }
@media (max-width: 1024px) { .masonry-gallery { column-count: 3; } }
@media (max-width: 720px) { .masonry-gallery { column-count: 2; column-gap: 12px; } .masonry-gallery img { margin-bottom: 12px; } }

.btn-gold {
  display: inline-block; background: var(--gold); color: var(--ink); font-size: 14.5px;
  font-weight: 600; padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer;
  transition: all .25s var(--ease); box-shadow: 0 6px 18px rgba(231,169,58,0.28);
}
.btn-gold:hover { background: var(--gold-dark); color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201,143,31,0.36); }
.btn-blue {
  display: inline-block; background: var(--blue); color: #fff; font-size: 14.5px;
  font-weight: 500; padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer;
  transition: all .25s var(--ease); box-shadow: 0 6px 18px rgba(11,87,194,0.24);
}
.btn-blue:hover { background: var(--navy); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,42,94,0.32); }

/* ---------- Ministries grid ---------- */
.grid-cards {
  display: flex; flex-wrap: wrap; gap: 28px; padding: 0 28px 96px; max-width: 1240px; margin: 0 auto;
}
.grid-cards > * { flex: 1 1 320px; max-width: 390px; }
@media (max-width: 640px) { .grid-cards > * { flex-basis: 100%; max-width: none; } }
.card {
  display: flex; flex-direction: column; gap: 14px; background: #fff; padding: 16px;
  border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card .thumb { height: 190px; background: var(--bg-tint-2); overflow: hidden; border-radius: var(--radius-sm); }
.card .thumb .play-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(20,24,31,0.72); backdrop-filter: blur(4px);
  color: #fff; font-size: 11px; letter-spacing: 0.4px; padding: 5px 10px; border-radius: 999px;
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .thumb img { transform: scale(1.07); }
.card .kicker { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--blue); font-weight: 600; padding: 0 4px; }
.card h3 { font-size: 19px; letter-spacing: -0.3px; padding: 0 4px; }
.card p { font-size: 14.5px; line-height: 1.7; color: var(--text-soft); font-weight: 300; margin: 0; padding: 0 4px 4px; }

/* ---------- Section helper ---------- */
.section-dark { background: var(--navy); color: #fff; border-radius: var(--radius); }
.section-tint { background: var(--bg-tint); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #fff; border-radius: 24px 24px 0 0; margin-top: 28px; }
.footer-grid { padding: 40px 28px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 28px; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; max-width: 34ch; }
.footer-brand-top { display: flex; align-items: center; gap: 10px; }
.footer-brand-top strong { font-size: 16px; font-weight: 600; }
.footer-grid p { margin: 0; font-size: 13px; line-height: 1.6; color: #9AA3AF; font-weight: 300; }
.footer-col { display: flex; flex-direction: column; gap: 7px; }
.footer-col .col-title { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #6B7480; margin-bottom: 2px; }
.footer-col a { font-size: 13px; color: #D5DBE3; font-weight: 300; }
.footer-col a:hover { color: #fff; }
.footer-social { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.footer-social a { font-size: 12px; color: #D5DBE3; border: 1px solid rgba(255,255,255,0.18); padding: 6px 12px; border-radius: 999px; }
.footer-social a:hover { color: #fff; border-color: #fff; }
.footer-brand .btn-outline { padding: 8px 16px; font-size: 12.5px; }
.footer-seals {
  max-width: 1240px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-seals .label { font-size: 11px; color: #6B7480; letter-spacing: 1.2px; text-transform: uppercase; margin-right: 4px; }
.footer-seals img { width: 38px; height: 38px; border-radius: 50%; background: #fff; padding: 2px; }
.footer-bottom {
  max-width: 1240px; margin: 0 auto; padding: 14px 28px 22px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.footer-bottom span { font-size: 12px; color: #6B7480; font-weight: 300; }

/* ---------- Home page specific ---------- */
.hero-home {
  max-width: 1240px; margin: 8px auto 0; padding: 0 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px),1fr));
  align-items: stretch; gap: 20px; min-height: 520px;
}
.hero-home .copy {
  background: var(--navy); color: #fff; padding: clamp(40px,6vw,72px) clamp(28px,5vw,56px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px;
  border-radius: var(--radius);
  background-image: radial-gradient(circle at 100% 0%, rgba(231,169,58,0.18), transparent 55%);
}
.hero-home .copy .kicker { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: #9DB6DD; font-weight: 600; }
.hero-home .copy h1 { color: #fff; font-size: clamp(34px,4vw,54px); line-height: 1.06; letter-spacing: -1.6px; max-width: 13ch; }
.hero-home .copy p { margin: 0; font-size: 16px; line-height: 1.7; color: #CBD7EA; max-width: 46ch; font-weight: 300; }
.hero-home .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.hero-home .photo { position: relative; min-height: 340px; background: var(--bg-tint-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.hero-home .photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .8s var(--ease); }
.hero-home .photo:hover img { transform: scale(1.04); }

.services-strip {
  max-width: 1240px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 14px;
}
.services-strip > div {
  padding: 22px 22px; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
}
.services-strip .day { font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-mute); }
.services-strip .time { font-size: 22px; font-weight: 600; color: var(--navy); letter-spacing: -0.5px; }
.services-strip .name { font-size: 14px; color: var(--text); }

.stats-row { display: flex; gap: 40px; margin-top: 20px; flex-wrap: wrap; }
.stats-row .stat { display: flex; flex-direction: column; gap: 2px; }
.stats-row .stat .n { font-size: 34px; font-weight: 600; color: var(--navy); letter-spacing: -1.4px; }
.stats-row .stat .label { font-size: 12.5px; color: var(--text-mute); letter-spacing: 0.4px; }

.section { max-width: 1240px; margin: 0 auto; padding: 96px 28px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.section-head .titles { display: flex; flex-direction: column; gap: 10px; }
.section-head .kicker { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.section-head h2 { font-size: clamp(26px,2.6vw,36px); letter-spacing: -1px; }
.section-head .more { font-size: 14.5px; font-weight: 500; color: var(--blue); border-bottom: 1px solid #C4D5EE; padding-bottom: 4px; }

.map-embed { height: 380px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

.leader-card { transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.leader-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.leader-card img { transition: transform .5s var(--ease); }
.leader-card:hover img { transform: scale(1.05); }
.zigzag-photo img { transition: transform .6s var(--ease); }
.zigzag-photo:hover img { transform: scale(1.06); }

/* ---------- Mural de avisos ---------- */
.mural-scroll { display: flex; gap: 18px; overflow-x: auto; padding: 6px 2px 18px; scroll-snap-type: x proximity; }
.mural-card {
  flex: 0 0 auto; width: 220px; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); background: #fff; transition: transform .35s var(--ease), box-shadow .35s var(--ease); position: relative;
}
.mural-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-md); }
.mural-card img { width: 100%; height: 290px; object-fit: cover; transition: transform .5s var(--ease); }
.mural-card:hover img { transform: scale(1.06); }
.mural-card .date-chip {
  position: absolute; top: 12px; left: 12px; background: rgba(20,24,31,0.72); backdrop-filter: blur(4px);
  color: #fff; font-size: 11px; letter-spacing: 0.6px; padding: 5px 11px; border-radius: 999px; text-transform: uppercase;
}

/* ---------- Mensagem do dia ---------- */
.message-card {
  border-radius: var(--radius); background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 70%, #0d3a7a 100%);
  color: #fff; padding: clamp(36px,5vw,64px); display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,320px); gap: 48px;
  position: relative; overflow: hidden;
}
.message-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 0% 100%, rgba(231,169,58,0.16), transparent 50%);
  pointer-events: none;
}
.message-card .kicker { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.message-card .quote { font-size: clamp(19px,2vw,24px); line-height: 1.55; font-style: italic; font-weight: 300; margin: 18px 0 8px; max-width: 46ch; }
.message-card .ref { font-size: 13.5px; color: #9DB6DD; letter-spacing: 0.6px; }
.message-card .lessons { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.message-card .lessons li { list-style: none; display: flex; gap: 10px; font-size: 14.5px; line-height: 1.7; color: #D6E0F0; font-weight: 300; }
.message-card .lessons { padding: 0; margin: 24px 0 0; }
.message-card .signature { margin-top: 20px; font-size: 13px; color: #9DB6DD; letter-spacing: 0.4px; }
.message-card .side {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm);
  padding: 24px; display: flex; flex-direction: column; gap: 16px; align-self: start;
}
.message-card .side .side-title { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: #9DB6DD; }
.message-card .side p { font-size: 13.5px; line-height: 1.7; color: #D6E0F0; margin: 0; font-weight: 300; }
.message-card-video { grid-template-columns: 240px minmax(0,1fr) 200px; align-items: center; gap: 40px; }
.message-video {
  width: 240px; aspect-ratio: 9/16; border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow-lg); background: #000; position: relative; z-index: 1;
  transition: transform .4s var(--ease);
}
.message-video:hover { transform: translateY(-4px); }
.message-video video { width: 100%; height: 100%; object-fit: cover; }
.message-side {
  align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  border-left: 1px solid rgba(255,255,255,0.14); padding-left: 32px;
}
.message-side .side-title { font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #9DB6DD; margin-bottom: 4px; }
.message-side a {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #D6E0F0; font-weight: 300;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.08); transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.message-side a:last-child { border-bottom: 0; }
.message-side a:hover { color: #fff; padding-left: 4px; }
.message-side a img { width: 16px; height: 16px; }
.message-side a .dot-icon { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); display: inline-block; }
@media (max-width: 900px) {
  .message-card-video { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .message-side { border-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding-left: 0; padding-top: 20px; width: 100%; }
}

/* ---------- Horários (schedule cards) ---------- */
.horario-day { max-width: 1240px; margin: 0 auto; padding: 0 28px; display: flex; flex-direction: column; gap: 18px; }
.horario-day h2 { font-size: 22px; letter-spacing: -0.5px; }
.horario-card {
  background: linear-gradient(120deg, var(--blue) 0%, var(--navy) 100%); border-radius: var(--radius);
  padding: 8px; box-shadow: var(--shadow-md); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.horario-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.horario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.horario-item { padding: 22px 26px; display: flex; align-items: baseline; gap: 16px; }
.horario-item .time { font-size: 19px; font-weight: 600; color: #fff; letter-spacing: -0.3px; white-space: nowrap; }
.horario-item .name { font-size: 15px; color: #D6E0F0; font-weight: 300; }
.horario-link { display: block; padding: 16px 26px; font-size: 14px; color: #fff; border-top: 1px solid rgba(255,255,255,0.16); font-weight: 500; }
.horario-link:hover { color: var(--gold); }

/* ---------- WhatsApp form pages ---------- */
.wa-form-section { max-width: 720px; padding: 88px 28px 120px; margin: 0 auto; }
.wa-form-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 40px; }
.wa-form-header .wa-icon {
  width: 64px; height: 64px; border-radius: 50%; background: #25A85B; display: flex; align-items: center;
  justify-content: center; box-shadow: var(--shadow-md); margin-bottom: 8px;
}
.wa-form-header h1 { font-size: clamp(28px,3vw,38px); letter-spacing: -1px; }
.wa-form-header .lede { color: var(--text-soft); font-size: 15.5px; }
.wa-form {
  background: var(--bg-tint); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: clamp(28px,4vw,48px); display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.wa-form label { align-self: flex-start; font-size: 13px; font-weight: 500; color: var(--navy); }
.wa-form textarea {
  width: 100%; font-family: 'Poppins', sans-serif; font-size: 15.5px; padding: 16px; border-radius: var(--radius-sm);
  border: 1px solid #DEDAD0; background: #fff; resize: vertical; color: var(--ink);
}
.wa-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,87,194,0.12); }
.wa-form button {
  background: var(--wa-btn, var(--blue)); color: #fff; border: 0; font-size: 15px; font-weight: 600;
  padding: 15px 36px; border-radius: 999px; cursor: pointer; transition: all .25s var(--ease);
  box-shadow: 0 6px 18px rgba(20,24,31,0.16);
}
.wa-form button:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 24px rgba(20,24,31,0.22); }

/* ---------- Scroll-entrance reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
.drawer-backdrop, .nav-close { display: none; }

@media (max-width: 720px) {
  .site-header { top: 10px; }
  /* .wrap's backdrop-filter creates a stacking context that would otherwise trap the
     fixed-position drawer beneath .drawer-backdrop regardless of the drawer's own z-index */
  .site-header .wrap { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-actions { display: none; }
  .drawer-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(10,14,20,0.55);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); z-index: 190;
  }
  .drawer-backdrop.open { opacity: 1; pointer-events: auto; }

  .main-nav {
    display: flex !important; flex-direction: column; flex-wrap: nowrap; gap: 2px;
    position: fixed; top: 0; right: 0; height: 100vh; width: min(300px, 82vw);
    background: linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 55%, var(--blue) 130%);
    padding: 66px 18px 28px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform .38s var(--ease);
    box-shadow: -16px 0 50px rgba(0,0,0,0.28); z-index: 200; justify-content: flex-start;
  }
  .main-nav.open { transform: translateX(0); }

  /* Sits directly over the header's hamburger button, so it reads as the same
     icon flipping into an X rather than a second close control inside the drawer. */
  .nav-close {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    position: fixed; top: 20px; right: 26px; border-radius: 50%;
    background: rgba(255,255,255,0.14); border: 0; color: #fff; font-size: 16px; cursor: pointer;
    z-index: 210;
  }
  .nav-close:hover { background: rgba(255,255,255,0.24); }

  .main-nav > .nav-item { position: static; width: 100%; min-width: 0; }
  .main-nav > .nav-item > a, .main-nav > .nav-item > span.nav-trigger, .main-nav .nav-trigger {
    color: #fff; font-size: 15.5px; font-weight: 400; padding: 13px 10px; border-radius: 12px; width: 100%;
    display: flex; align-items: center; justify-content: space-between; min-width: 0; box-sizing: border-box;
  }
  .main-nav > .nav-item > a:hover, .main-nav .nav-trigger:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .main-nav > .nav-item.active > a, .main-nav > .nav-item.active > span.nav-trigger { background: rgba(255,255,255,0.12); color: #fff; }
  .dropdown .nav-trigger::after { content: '⌄'; font-size: 15px; flex: 0 0 auto; margin-left: 8px; transition: transform .25s var(--ease); opacity: .7; }
  .dropdown.open .nav-trigger::after { transform: rotate(180deg); }

  .dropdown .dropdown-panel {
    position: static; display: none; flex-direction: column; box-shadow: none; border: 0; margin: 0 0 4px;
    padding: 2px 4px 2px 18px; transform: none; opacity: 1; max-width: none; max-height: none; background: transparent;
    width: 100%; min-width: 0; box-sizing: border-box;
  }
  .dropdown.open .dropdown-panel { display: flex; }
  .dropdown-panel a { color: #CBD7EA; font-size: 14px; padding: 10px 10px; min-width: 0; word-break: break-word; }
  .dropdown-panel a:hover { background: rgba(255,255,255,0.08); color: #fff; }

  .nav-toggle { display: inline-flex !important; }
  body.drawer-locked { overflow: hidden; }
  .message-card { grid-template-columns: 1fr; }
}
.nav-toggle {
  display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 50%; background: #fff; cursor: pointer; font-size: 18px;
  margin-left: auto;
}

/* =============================================================================
   PÁGINA DE EVENTO
   Os flyers vêm do WhatsApp em retrato (576x1024) e, soltos, ocupavam a tela
   inteira empurrando o texto pra baixo. Aqui eles ganham um quadro de altura
   limitada, com o próprio flyer desfocado ao fundo preenchendo as laterais.
   ========================================================================== */
.evento-topo { display: flex; flex-direction: column; gap: 14px; }
.evento-voltar {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--text-mute);
  transition: color .2s var(--ease), gap .2s var(--ease);
}
.evento-voltar:hover { color: var(--navy); gap: 11px; }
.evento-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.evento-meta .kicker { margin: 0; }
.evento-meta .data {
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600;
  color: var(--gold-dark); padding-left: 12px; border-left: 1px solid var(--border);
}

.evento-media {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--bg-tint-2); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  max-height: 540px; min-height: 260px;
}
.evento-media .fundo {
  position: absolute; inset: -24px; background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.25); opacity: .55; transform: scale(1.08);
}
.evento-media img, .evento-media video {
  position: relative; z-index: 1; max-height: 540px; width: auto; max-width: 100%;
  object-fit: contain; display: block;
}
.evento-media video { border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }

.evento-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; }
.evento-extras img { border-radius: var(--radius-sm); width: 100%; height: 180px; object-fit: cover; }

.evento-cta {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--border);
}

/* --- outros eventos, com miniatura em vez de só o link --- */
.evento-mini { display: flex; gap: 11px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.evento-mini:last-child { border-bottom: 0; }
.evento-mini img {
  width: 54px; height: 54px; object-fit: cover; border-radius: var(--radius-sm);
  flex: 0 0 auto; transition: transform .35s var(--ease);
}
.evento-mini:hover img { transform: scale(1.06); }
.evento-mini .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evento-mini .nome {
  font-size: 13.5px; line-height: 1.35; color: var(--text); font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.evento-mini:hover .nome { color: var(--navy); }
.evento-mini .quando { font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-mute); }

@media (max-width: 640px) {
  .evento-media { max-height: 420px; }
  .evento-media img, .evento-media video { max-height: 420px; }
}

/* =============================================================================
   CAMADA DE MOVIMENTO  (aditiva — nada acima deste bloco foi alterado)

   Tudo aqui é escopado em `html.motion-ready`, classe que o nav.js só coloca
   quando o Motion carregou E o visitante não pediu menos movimento. Sem ela,
   o site cai exatamente no comportamento anterior.
   ========================================================================== */

/* --- barra de progresso de leitura --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--gold); z-index: 300; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
}

/* --- header ganha profundidade ao sair do topo --- */
.site-header .wrap { transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.site-header.is-stuck .wrap {
  background: rgba(255,255,255,0.93);
  box-shadow: 0 6px 24px rgba(10,42,94,0.13);
}

/* --- o Motion assume a entrada: a transição de CSS sairia por cima --- */
.motion-ready .reveal { transition: none; will-change: opacity, transform; }

/* --- deslocamento de hover passa a ser mola no JS ---------------------------
   Só o translate/scale sai daqui; sombra, brilho e zoom da foto continuam no
   CSS e seguem funcionando sem JS. Sem isto, o transform do CSS e o do Motion
   brigariam pelo mesmo elemento.                                            */
.motion-ready .card:hover,
.motion-ready .mural-card:hover,
.motion-ready .leader-card:hover,
.motion-ready .aside-card:hover,
.motion-ready .horario-card:hover,
.motion-ready .btn-gold:hover,
.motion-ready .btn-blue:hover,
.motion-ready .btn-live:hover,
.motion-ready .btn-outline:hover,
.motion-ready .wa-form button:hover { transform: none; }

/* --- folga pro parallax da foto do hero ------------------------------------
   A foto é `position:absolute; inset:0`. Deslocá-la descobriria o fundo do
   quadro, então ela passa a ser mais alta que o quadro e se move dentro dessa
   folga.                                                                     */
.motion-ready .hero-home .photo img {
  height: 124%; top: -12%; bottom: auto;
  transition: none;                 /* o zoom de hover também vira Motion */
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .motion-ready .reveal { opacity: 1 !important; transform: none !important; }
}