/* =========================================================
   BASE (compartilhado) - NÃO quebra Portal
   ========================================================= */

:root{
  --site-text: #0b1220;
  --site-muted: #5a667a;
  --site-border: rgba(12, 26, 57, 0.12);
  --site-surface: rgba(255,255,255,0.80);
  --site-surface-2: rgba(255,255,255,0.92);
  --site-shadow: 0 16px 44px rgba(12, 26, 57, 0.14);

  --brand: #0b2a55;
  --brand-2: #1b5bbf;
  --brand-3: #2aa7ff;

  --radius: 18px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  color: var(--site-text);
  background: #ffffff; /* Portal não fica “pintado” */
  line-height: 1.55;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
}

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

/* Acessibilidade: foco visível */
:where(a, button, input, textarea, select, summary):focus-visible{
  outline: 3px solid rgba(42, 167, 255, 0.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Evita sobrescrever Bootstrap na Home.
   Portal e páginas fora do Bootstrap continuam com container do site. */
body:not([data-page="site"]) .container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px;
}

/* Links fora do Bootstrap (Portal/Institucional antigo) */
body:not([data-page="site"]) a{
  color: inherit;
  text-decoration: none;
}

/* Redução de animações para quem prefere */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   TOPO (includes/cabecalho.php) - usado no Portal
   (CSS mais específico para não colidir com Bootstrap)
   ========================================================= */

.topo{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 248, 251, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--site-border);
}

.topo__linha{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}

.marca{
  display: flex;
  align-items: center;
  gap: 12px;
}

.marca__logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--site-border);
  background: #fff;
  box-shadow: 0 10px 30px rgba(12, 26, 57, 0.10);
}

.marca__texto strong{
  display: block;
  font-size: 15px;
  letter-spacing: .2px;
}

.marca__texto span{
  display: block;
  font-size: 12px;
  color: rgba(12, 26, 57, 0.60);
}

/* nav do topo do includes */
.topo .nav{
  display: flex;
  align-items: center;
  gap: 16px;
}

.topo .nav a{
  font-size: 14px;
  color: rgba(12, 26, 57, 0.78);
  padding: 10px 10px;
  border-radius: 12px;
  transition: background .18s ease, color .18s ease;
}

.topo .nav a:hover{
  background: rgba(11, 42, 85, 0.06);
  color: var(--brand);
}

/* =========================================================
   RODAPÉ (includes/rodape.php) - usado no Portal e Home
   ========================================================= */

.rodape{
  margin-top: 26px;
  border-top: 1px solid var(--site-border);
  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(10px);
}

.rodape__grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  padding: 18px 0;
}

.rodape__marca{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.rodape__texto{
  color: rgba(12, 26, 57, 0.70);
  margin: 0;
}

.rodape__titulo{
  display: block;
  margin-bottom: 10px;
}

.rodape__lista{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.rodape__lista a{
  color: rgba(12, 26, 57, 0.70);
}

.rodape__lista a:hover{
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rodape__base{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0 18px;
  border-top: 1px solid var(--site-border);
  color: rgba(12, 26, 57, 0.70);
}

.rodape__base a{
  color: rgba(12, 26, 57, 0.70);
}

.rodape__base a:hover{
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Toast (div do rodape.php) */
.toast{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(11,42,85,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 16px 44px rgba(12,26,57,.22);
  max-width: min(520px, calc(100vw - 24px));
  z-index: 9999;
}

/* Rodapé responsivo */
@media (max-width: 980px){
  .rodape__grid{ grid-template-columns: 1fr; }
  .rodape__base{ flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   HOME NOVA (Bootstrap) - SOMENTE no index.php
   Tudo aqui fica isolado com body[data-page="site"]
   ========================================================= */

body[data-page="site"]{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  background:
    radial-gradient(900px 520px at 15% 5%, rgba(42,167,255,.14), transparent 55%),
    radial-gradient(900px 520px at 85% 10%, rgba(27,91,191,.10), transparent 55%),
    linear-gradient(180deg, #f6f8fb, #eef3ff 45%, #f6f8fb);
}

/* Compensa navbar fixa no scroll */
body[data-page="site"] section[id]{ scroll-margin-top: 96px; }

/* Navbar sobre o hero */
body[data-page="site"] .navbar-hero{
  background: rgba(11,42,85,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body[data-page="site"] .navbar-hero.is-scrolled{
  background: rgba(11,42,85,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.25);
}

body[data-page="site"] .brand-logo{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
}

body[data-page="site"] .navbar-hero .nav-link{
  color: rgba(255,255,255,0.88);
  font-weight: 600;
}

body[data-page="site"] .navbar-hero .nav-link:hover{ color: #ffffff; }
body[data-page="site"] .navbar-hero .nav-link.active{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* HERO / Carousel */
body[data-page="site"] .hero{ position: relative; }

body[data-page="site"] .hero-img{
  height: 88vh;
  min-height: 560px;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.05);
}

body[data-page="site"] .hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.30) 45%, rgba(0,0,0,0.70));
  pointer-events: none;
}

body[data-page="site"] .carousel-caption{ bottom: 16%; }
body[data-page="site"] .carousel-caption .container{ position: relative; }

body[data-page="site"] .hero-content{
  max-width: 760px;
  padding: 18px 16px;
  border-radius: 22px;
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14);
}

body[data-page="site"] .hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(42,167,255,0.18);
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 10px;
}

body[data-page="site"] .hero-title{
  font-weight: 800;
  letter-spacing: -0.35px;
  line-height: 1.10;
  font-size: clamp(1.8rem, 3.2vw, 3.0rem);
}

body[data-page="site"] .hero-lead{
  color: rgba(255,255,255,0.90);
  font-size: 1.05rem;
  margin-bottom: 0;
  max-width: 62ch;
}

body[data-page="site"] .hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="site"] .badge-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-weight: 700;
}

/* “descer” */
body[data-page="site"] .hero-scroll{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  display: grid;
  place-items: center;
  text-decoration: none;
}

body[data-page="site"] .hero-scroll-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.9;
  animation: heroDot 1.3s ease-in-out infinite;
}

@keyframes heroDot{
  0%,100%{ transform: translateY(0); opacity: 0.65; }
  50%{ transform: translateY(6px); opacity: 1; }
}

/* Seções */
body[data-page="site"] .section{ padding: 64px 0; }

body[data-page="site"] .section-alt{
  background: rgba(11,42,85,0.03);
  border-top: 1px solid var(--site-border);
  border-bottom: 1px solid var(--site-border);
}

body[data-page="site"] .section-title{
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}

body[data-page="site"] .section-lead{
  color: rgba(12, 26, 57, 0.72);
  max-width: 720px;
}

/* Cards custom */
body[data-page="site"] .info-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--site-border);
  box-shadow: 0 12px 30px rgba(12,26,57,0.08);
}

body[data-page="site"] .info-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(27,91,191,0.10);
  border: 1px solid rgba(27,91,191,0.14);
  color: var(--brand);
  font-size: 1.2rem;
}

body[data-page="site"] .media-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--site-border);
  background: rgba(255,255,255,0.85);
  box-shadow: var(--site-shadow);
}

body[data-page="site"] .media-badge{
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--site-border);
  backdrop-filter: blur(8px);
}

body[data-page="site"] .media-badge i{ color: var(--brand); }

body[data-page="site"] .card-icon{
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(42,167,255,0.12);
  border: 1px solid rgba(42,167,255,0.16);
  color: var(--brand);
  font-size: 1.25rem;
}

body[data-page="site"] .feature-card{
  height: 100%;
  padding: 16px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--site-border);
  box-shadow: 0 12px 30px rgba(12,26,57,0.08);
}

body[data-page="site"] .feature-icon{
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(11,42,85,0.06);
  border: 1px solid rgba(11,42,85,0.10);
  color: var(--brand);
  font-size: 1.2rem;
}

/* CTA bar */
body[data-page="site"] .cta-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px;
  border-radius: 20px;
  background: rgba(27,91,191,0.08);
  border: 1px solid rgba(27,91,191,0.14);
}

/* Galeria */
body[data-page="site"] .gallery-tile{
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--site-border);
  box-shadow: 0 12px 30px rgba(12,26,57,0.08);
  cursor: pointer;
  display: block;
}

body[data-page="site"] .gallery-tile img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform .18s ease;
}

body[data-page="site"] .gallery-tile:hover img{ transform: scale(1.03); }

/* Modal (Bootstrap) com acabamento mais “premium” */
body[data-page="site"] .modal-content{
  border-radius: 18px;
  border: 1px solid rgba(12,26,57,0.10);
  box-shadow: 0 22px 70px rgba(0,0,0,0.25);
}
body[data-page="site"] .modal-header{
  background: rgba(11,42,85,0.03);
  border-bottom: 1px solid rgba(12,26,57,0.10);
}

/* Contato */
body[data-page="site"] .contact-card{
  border-radius: 22px;
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--site-border);
  box-shadow: var(--site-shadow);
  padding: 20px;
}

body[data-page="site"] .contact-card .bi{
  color: var(--brand);
  font-size: 1.1rem;
  line-height: 1;
}

body[data-page="site"] .map-card{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--site-border);
  box-shadow: var(--site-shadow);
  background: rgba(255,255,255,0.88);
}

body[data-page="site"] .map-frame{
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  display: block;
}

/* FAB WhatsApp (respeita safe-area do iPhone) */
body[data-page="site"] .fab-whats{
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  text-decoration: none;
  z-index: 9998;
}

body[data-page="site"] .fab-whats i{ font-size: 1.5rem; }

/* Responsivo */
@media (max-width: 992px){
  body[data-page="site"] .hero-img{
    height: 76vh;
    min-height: 560px;
  }
  body[data-page="site"] .carousel-caption{ bottom: 12%; }
  body[data-page="site"] .hero-content{ max-width: 100%; }
}

@media (max-width: 576px){
  body[data-page="site"] .hero-img{ min-height: 540px; }
  body[data-page="site"] .hero-title{ font-size: clamp(1.6rem, 6vw, 2.2rem); }
  body[data-page="site"] .gallery-tile img{ height: 170px; }
  body[data-page="site"] .cta-bar{ flex-direction: column; align-items: flex-start; }
}