/* ========= BILIBOT • Header & Footer ONLY ========= */
@font-face{
  font-family: 'Slenco-Black demo';
  src: url('fonts/Slenco-Black demo.otf') format('opentype');
}
:root{
  --footer-h: clamp(44px, 6vw, 64px);
  --white:#ffffff;
  --shadow:0 10px 30px rgba(2,8,23,.15);
}
*{ box-sizing:border-box; }
html, body{
  margin:0; padding:0;
  font-family:'Slenco-Black demo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing:.5px;
  color:#fff;
  scroll-behavior:smooth;
}
/* Header */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 16px;
  color:var(--white);
  background:rgba(200,219,239,.75);
  backdrop-filter:saturate(120%) blur(8px);
  box-shadow:0 2px 14px rgba(15,23,42,.15);
  min-height:56px;
}
.logo-container{ display:flex; align-items:center; margin-left:clamp(16px,4vw,100px); }
.logo{ width:clamp(72px,10vw,100px); transition: transform .25s ease; }
.logo:hover, .logo:focus{ transform: translateY(-2px) scale(1.06); outline:none; }
nav{
  display:flex; align-items:center; justify-content:center; flex-grow:1;
  margin-top:6px; flex-wrap: wrap; gap:8px;
  padding-inline: 8px;
}
nav a{
  padding:10px 16px;
  font-size: clamp(14px, 2.2vw, 20px);
  font-weight:700;
  color:#00264d;
  text-decoration:none;
  background: rgba(255,255,255,.7);
  border-radius:999px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
nav a:hover, nav a:focus{
  background:#deebf7;
  transform: translateY(-1px);
  outline:none;
  box-shadow: var(--shadow);
}
nav a.active-link{
  background: #deebf7;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.social-icons{ display:flex; align-items:center; margin:0 clamp(12px,4vw,65px) 0 auto; gap:8px; }
.social-icon{ display:inline-flex; padding:6px; border-radius:12px; transition: transform .2s ease, background .2s ease; }
.social-icon img{ max-width:50px; height:auto; }
.social-icon:hover, .social-icon:focus{ transform: translateY(-2px); background: rgba(255,255,255,.25); outline:none; }
/* Hamburger */
.menu-toggle{ display:none; background: rgba(255,255,255,.7); border-radius:12px; padding:8px 10px; line-height:0; box-shadow: var(--shadow); border: none; cursor: pointer; }
.menu-toggle .menu-bar{ display:block; width:22px; height:3px; margin:4px 0; background:#0f172a; border-radius:2px; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle.is-open .menu-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
menu-toggle.is-open .menu-bar:nth-child(2){ opacity:0; }
.menu-toggle.is-open .menu-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 768px){
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  nav#site-nav{ position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; gap:6px;
    padding:10px; background: rgba(200,219,239,.95); backdrop-filter: saturate(120%) blur(8px); box-shadow: 0 8px 22px rgba(15,23,42,.25); }
  nav#site-nav.is-open{ display:flex; }
  nav#site-nav a{ width:100%; text-align:center; padding:12px 16px; font-size: clamp(16px, 4.5vw, 18px); }
}

/* ====== Animações de entrada ====== */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-delay-1 { transition-delay: 0.2s; }
.fade-delay-2 { transition-delay: 0.4s; }
.fade-delay-3 { transition-delay: 0.6s; }
.fade-delay-4 { transition-delay: 0.8s; }


/* ===== Footer (mantido) ===== */
:root{
  --glass-bg: rgba(200,219,239,.75);
  --glass-bg-strong: rgba(200,219,239,.9);
  --ink: #00264d;
  --frost-blur: 8px;
  --frost-saturate: 120%;
  --border-glow: 0 -4px 18px rgba(15,23,42,.18);
}
.footer{
	  pointer-events: none; /* evita bloquear cliques */
  z-index: 1000;
  min-height: var(--footer-h);
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(var(--frost-saturate)) blur(var(--frost-blur));
  backdrop-filter: saturate(var(--frost-saturate)) blur(var(--frost-blur));
  border-top: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--border-glow);
  color: #0f172a;
  text-align: center; padding: 8px 12px;
  font-size: clamp(14px, 2.2vw, 18px);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease, background .25s ease, backdrop-filter .25s ease;
}
.footer.is-ready{ will-change: opacity, transform; }
.footer.is-visible{ opacity: 1; transform: translateY(0); }
.footer .footer-nav{ opacity: .95; }
.footer .footer-nav a{ padding: 0; margin: 0 .2rem; font-size: clamp(12px, 1.6vw, 14px); background: transparent; color: var(--ink); text-decoration: none; border-radius: 0; box-shadow: none; transform: none; transition: color .2s ease, text-shadow .2s ease; }
.footer .footer-nav a:hover, .footer .footer-nav a:focus{ color: #0b3a73; text-shadow: 0 0 1px rgba(255,255,255,.45); outline: none; }
.footer .footer-social{ display:flex; align-items:center; justify-content:center; gap: 10px; }
.footer .footer-social img{ width: 28px; height: 28px; display:block; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(2,8,23,.15)); transition: transform .2s ease, filter .2s ease; }
.footer .footer-social a:hover img, .footer .footer-social a:focus img{ transform: translateY(-1px) scale(1.03); filter: drop-shadow(0 3px 8px rgba(2,8,23,.25)); }
@media (min-width: 768px){ .footer .footer-social img{ width: 44px; height: 44px; } }
.footer.is-strong{ background: var(--glass-bg-strong); }

/* ====== Contact Page Styles (NOVO — não altera header/footer) ====== */
:root{
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --brand-50: #f0f6ff;
  --brand-100: #e2eeff;
  --brand-200: #cfe3ff;
  --brand-300: #b7d4ff;
  --brand-600: #2563eb;
  --ok-600: #16a34a;
  --surface: #ffffff;
  --radius: 18px;
  --gap: clamp(16px, 3vw, 28px);
}
body{ background: rgba(200,219,239,.95); }
.contact-page{ padding: calc(56px + 32px) 16px 24px; max-width: 1100px; margin: 0 auto; color: var(--ink-900); }
.spacer-footer{ height: calc(var(--footer-h) + 24px); }

.contact-hero{
  margin-top: 24px;
  background: radial-gradient(1200px 400px at 20% -20%, var(--brand-100), transparent 60%),
              radial-gradient(800px 260px at 80% -10%, var(--brand-200), transparent 60%),
              var(--surface);
  border: 1px solid rgba(2,8,23,.06);
  border-radius: clamp(16px, 2vw, 24px);
  box-shadow: 0 10px 30px rgba(2,8,23,.08);
}
.contact-hero-inner{ padding: clamp(20px, 5vw, 44px); text-align: center; }
.contact-hero h1{ margin: 0 0 8px; font-size: clamp(28px, 4.6vw, 42px); letter-spacing: .2px; color: var(--ink-900); }
.contact-hero .subtitle{ margin: 0 auto 18px; max-width: 720px; font-size: clamp(14px, 2.5vw, 18px); color: var(--ink-700); }
.cta-row{ display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 12px 18px;
  border-radius: 999px; font-weight: 700; text-decoration: none; border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(37,99,235,.12); transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:focus{ outline: 2px solid #93c5fd; outline-offset: 2px; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(37,99,235,.18); }
.btn-primary{ background: var(--brand-600); color: #fff; }
.btn-outline{ background: #fff; border-color: rgba(2,8,23,.10); color: var(--ink-900); }

.mini-social{ margin-top: 12px; display:flex; gap:10px; justify-content:center; color: var(--ink-500); }
.mini-social a{ color: var(--ink-700); text-decoration: none; font-weight: 600; }
.mini-social a:hover{ text-decoration: underline; }

.contact-grid{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.card{
  grid-column: span 6;
  background: var(--surface);
  border: 1px solid rgba(2,8,23,.06);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(2,8,23,.06);
  padding: clamp(16px, 3.5vw, 24px);
}
.card h2{ margin: 0 0 10px; font-size: clamp(18px, 3vw, 24px); }
.contact-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.contact-list a{ color: var(--brand-600); text-decoration: none; font-weight: 700; }
.contact-list a:hover{ text-decoration: underline; }

.map-embed{ display:grid; place-items:center; height: 180px; background: var(--brand-50); border: 1px dashed rgba(2,8,23,.15); border-radius: 12px; color: var(--ink-500); }

.hours{ list-style:none; padding:0; margin:0; display:grid; gap:8px; color: var(--ink-700); }

.contact-form{ display:grid; gap: 10px; }
.contact-form label{ font-size: 14px; color: var(--ink-700); }
.contact-form input, .contact-form textarea{
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(2,8,23,.12);
  background: #fff; color: var(--ink-900); font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus{
  border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(147,197,253,.45);
  outline: none;
}

/* FAQ */
.faq{ margin: 28px 0 0; }
.faq details{
  background: var(--surface); border: 1px solid rgba(2,8,23,.06); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: 0 8px 24px rgba(2,8,23,.05); margin-bottom: 10px;
}
.faq summary{ cursor: pointer; font-weight: 700; color: var(--ink-900); }
.faq p{ margin: 10px 0 0; color: var(--ink-700); }

/* Responsivo */
@media (max-width: 960px){
  .card{ grid-column: span 12; }
}