/* ============================================
   VARIÁVEIS CSS
   ============================================ */
:root{
  --blue-dark:#0E0E1B;
  --bg:#323061;
  --bg-2:#111642;
  --paper:#f3f5f9;
  --ink:#0b0e1a;
  --muted:#6b6f80;
  --brand:#323061;
  --accent:#dbe1ff;
  --primary:#ffffff;
  --cta:#C2B988;
  --radius:16px;
  --shadow:0 10px 30px rgba(17,22,66,.12);
}

/* ============================================
   RESET E BASE
   ============================================ */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased;}
h1, h2, h3, h4, h5, h6{font-family: Outfit, Inter, sans-serif; font-weight: 700; margin-bottom: 0px;}
p{margin-bottom: 0px;}

/* ============================================
   ANIMAÇÕES E UTILITÁRIOS
   ============================================ */
.page-enter{opacity:0; transform:translateY(10px); animation:enter .6s ease forwards;}
@keyframes enter{to{opacity:1; transform:none}}
.container{width:min(1120px, 92vw); margin-inline:auto}
.text-center{text-align:center}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}

/* ============================================
   HEADER E NAVEGAÇÃO
   ============================================ */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(6px); background:rgba(255,255,255,.75); border-bottom:1px solid rgba(16,16,40,.08);}
.nav-wrap{display:flex; gap:1rem; align-items:center; padding:14px 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--brand); text-decoration:none; letter-spacing:.04em}
.brand-symbol{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff}
.main-nav{margin-left:auto; display:flex; gap:1.2rem; font-size: 0.875rem;}
.nav-link{position:relative; text-decoration:none; color:#2a2a44; font-weight:500}
.nav-link::after{content:""; position:absolute; left:0; bottom:-8px; width:0; height:2px; background:var(--brand); transition:width .25s ease}
.nav-link:hover::after, .nav-link.active::after{width:100%}
.nav-toggle{display:none; background:transparent; border:0; width:42px; height:42px; position:relative}
.nav-toggle span{position:absolute; left:8px; right:8px; height:2px; background:#111; border-radius:2px; transition:.2s ease}
.nav-toggle span:nth-child(1){top:12px}
.nav-toggle span:nth-child(2){top:20px}
.nav-toggle span:nth-child(3){top:28px}

/* ============================================
   BOTÕES E BADGES
   ============================================ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.85rem 1.1rem; border-radius:999px; text-decoration:none; border:1px solid transparent; transition:transform .15s ease, background .2s ease, border-color .2s ease; font-size: 0.875rem;}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--blue-dark); color:#fff}
.btn-primary:hover{background:var(--cta); color: var(--blue-dark); border-color:var(--cta);}
.btn-outline{border-color:var(--brand); color: white; background: var(--brand);}
.btn-outline:hover{background:var(--cta); color: var(--blue-dark); border-color:var(--cta);}
.btn-outline-light:hover{background:var(--cta); color: var(--brand); border-color:var(--cta);}
.btn-outline-light{border-color:var(--cta); color: #FFF; background:transparent}
.btn-ghost{background:transparent; color:var(--brand)}
.btn-light{background:#fff; border-color:#fff; color:var(--brand)}
.badges{display:flex; gap: 0.5rem; flex-wrap: wrap;}
.badge{display:inline-block; background: white; color:var(--blue-dark); padding:.35rem .6rem; border-radius:999px; font-size:.85rem; display: flex; align-items: center; gap: 0.2rem;}

/* ============================================
   HOME PAGE
   ============================================ */
.hero{background-image: url(../img/bg-hero.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; color:#fff; padding:88px 0}
.hero-copy h1{font-family: Outfit, Inter, sans-serif; font-size: clamp(2rem, 1.1rem + 3.5vw, 3.4rem); line-height:1.1; margin:0 0 10px}
.hero-copy .accent{color:#C2B988}
.hero-copy p{color:#FFFFFF; max-width:60ch}
.cta-row{display:flex; gap:.8rem; margin-top:18px; flex-wrap:wrap; margin-bottom:16px}
.hero-visual .img-placeholder{height:360px; border:2px dashed rgba(255,255,255,.35); color:#fff;}
.features .section-head h2 {color: var(--brand);}
.services{background: var(--brand);}
.services .section-head h2 {color: var(--cta);}
.services .section-head p {color: #fff;}
.numbers{background:#fff}
.numbers .section-head h2 {color: var(--brand);}
.blog .section-head h2 {color: var(--brand);}
.blog .cards{grid-template-columns: repeat(4, minmax(0,1fr))}
.blog .card{display:flex; flex-direction:column; }
.blog .card .btn{margin-top:auto; align-self:flex-start}
.strip-cta{background:linear-gradient(90deg, var(--brand), #182164); color:#fff}
.strip{display:flex; gap:20px; align-items:center; justify-content:space-between}
.strip-actions{display:flex; gap:.8rem; flex-wrap:wrap}

/* ============================================
   COMPONENTES GLOBAIS
   ============================================ */
.section{padding:72px 0}
.section-head{margin-bottom:3rem}
.section-head h2{font-size: 2.5rem; line-height: 1.2; margin-bottom: 0.5rem;}
.section-intro{max-width:70ch; color:var(--muted); margin-bottom:2.5rem; font-size:1.05rem}
.grid-2{display:grid; grid-template-columns: 1.1fr .9fr; gap:48px}
.grid-3{display:grid; grid-template-columns: repeat(3,1fr); gap:24px}
.vcenter{align-items:center}
.vstart{align-items:start}
.gap-xl{gap:56px}
.cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px}
.card{background:#fff; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.card img{width:100%; border-radius:12px; object-fit:cover; max-height:130px;}
.card .icon{font-size:28px}
.counters{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px}
.counter{background:#fff; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); text-align:center}
.counter .num{font-size:clamp(2rem, 1rem + 3vw, 3rem); font-weight:700; color:var(--cta); display:block}
.counter .label{color:var(--muted); font-size:.95rem}

/* ============================================
   PÁGINAS INTERNAS (Page Hero)
   ============================================ */
.page-hero{background:linear-gradient(180deg, #10163b, var(--brand)); color:#fff; padding:64px 0}
.page-hero h1{margin:0}
.page-hero p{font-size: 1rem; max-width: 100%;}
.page-hero-quem-somos h1{color: var(--cta);}

/* ============================================
   INSTITUCIONAL PAGE
   ============================================ */
.prose p{max-width:70ch; margin-bottom:1.25rem}
.prose h2{margin-top:3rem; margin-bottom:1.5rem}
.history-image{display:flex; align-items:stretch; min-height:100%}
.history-image img{object-fit:cover; min-height:100%}
.gallery{background:#fff}
.gallery h2{color:var(--brand); margin-bottom:1rem}
.gallery-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:2rem}
.gallery-item{position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); aspect-ratio:4/3}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.05)}
.locations{background:var(--paper)}
.locations h2{color:var(--brand); margin-bottom:1rem}
.locations-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:2rem}
.location-card{background:#fff; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.location-card h3{color:var(--brand); margin:0 0 8px; font-size:1.5rem}
.location-city{color:var(--cta); font-weight:600; margin:0 0 12px; font-size:1rem}
.location-card p{color:var(--muted); margin-bottom:20px; line-height:1.7; flex-grow:1}
.map-container{margin-top:auto; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.1)}
.map-container iframe{display:block; width:100%}

/* ============================================
   SERVIÇOS PAGE
   ============================================ */
.services .card:hover{transform: translateY(-4px); box-shadow: 0 16px 40px rgba(17,22,66,.16);}
.services .card{transition: transform 0.3s ease, box-shadow 0.3s ease;}
.services .list{list-style: none; padding: 0; margin: 0;}
.services .list li{position: relative; padding-left: 1.5rem;}
.services .list li::before{content: "✓"; position: absolute; left: 0; color: var(--cta); font-weight: 700;}
.section-head-services h2{color: var(--brand);}

/* ============================================
   CONTATO PAGE
   ============================================ */
.form{padding:24px}
.form-grid{display:grid; grid-template-columns: repeat(2,1fr); gap:16px}
.form-grid label{display:grid; gap:6px; font-size:.95rem}
.form-grid input, .form-grid textarea{width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid #d7dcff; background:#fff;}
.form-grid .span-2{grid-column:1 / -1}
.form-actions{display:flex; align-items:center; gap:12px; margin-top:8px}
.form-actions button{cursor:pointer;}
.contact-box{display:grid; gap:12px}
.mt{margin-top:12px}

/* ============================================
   BLOG POST PAGE
   ============================================ */
.blog-post{background: var(--paper);}
.post-hero{background: linear-gradient(180deg, #10163b, #121945); color: #fff; padding: 64px 0 48px;}
.back-link{display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 0.9rem; margin-bottom: 1.5rem; transition: color 0.2s ease;}
.back-link:hover{color: var(--cta);}
.post-meta{display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;}
.post-category{background: var(--cta); color: var(--blue-dark); padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;}
.post-date{color: rgba(255, 255, 255, 0.7); font-size: 0.9rem;}
.post-title{font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); line-height: 1.2; margin: 0 0 1rem; color: #fff;}
.post-excerpt{font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, 0.9); max-width: 70ch; margin: 0;}
.post-featured-image{width: 100vw; max-width: 100%; max-height: 300px; overflow: hidden; margin: 0; display: flex; align-items: center; justify-content: center; background-color: var(--paper); position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;}
.post-featured-image img{width: 100%; max-height: 300px; height: auto; object-fit: cover; object-position: center; display: block;}
.post-content{padding: 64px 0; background: #fff;}
.post-body{max-width: 800px; margin: 0 auto;}
.post-body h2{font-size: 2rem; line-height: 1.3; margin: 2.5rem 0 1rem; color: var(--brand);}
.post-body h3{font-size: 1.5rem; line-height: 1.4; margin: 2rem 0 0.75rem; color: var(--brand);}
.post-body p{font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.25rem; color: var(--ink);}
.post-body ul, .post-body ol{margin: 1.5rem 0; padding-left: 2rem;}
.post-body li{font-size: 1.05rem; line-height: 1.8; margin-bottom: 0.75rem; color: var(--ink);}
.post-body strong{font-weight: 600; color: var(--brand);}
.post-footer{max-width: 800px; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem;}
.post-tags{display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;}
.tags-label{font-weight: 600; color: var(--muted); font-size: 0.9rem;}
.tag{display: inline-block; background: var(--paper); color: var(--brand); padding: 0.4rem 0.9rem; border-radius: 999px; text-decoration: none; font-size: 0.85rem; transition: background 0.2s ease, color 0.2s ease; border: 1px solid rgba(50, 48, 97, 0.2);}
.tag:hover{background: var(--brand); color: #fff; border-color: var(--brand);}
.post-share{display: flex; align-items: center; gap: 0.75rem;}
.share-label{font-weight: 600; color: var(--muted); font-size: 0.9rem;}
.share-link{display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); color: var(--brand); text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; border: 1px solid rgba(50, 48, 97, 0.2);}
.share-link:hover{background: var(--brand); color: #fff; transform: translateY(-2px); border-color: var(--brand);}
.related-posts{padding: 64px 0; background: var(--paper);}
.related-title{font-size: 2rem; color: var(--brand); margin-bottom: 2rem; text-align: center;}
.related-posts .cards{grid-template-columns: repeat(3, minmax(0, 1fr));}

/* ============================================
   FOOTER
   ============================================ */
.site-footer{background:#0f1433; color:#d2d6ff; padding:40px 0 24px}
.footer-grid{display:grid; grid-template-columns: 1.1fr 1fr 1fr; gap:24px}
.site-footer h4{color:#fff; margin:0 0 8px}
.site-footer a{color:#e2e6ff; text-decoration:none;}
.madeby{margin-top:18px; border-top:1px solid rgba(255,255,255,.12); padding-top:12px; text-align:center}

/* ============================================
   WHATSAPP FLOAT BUTTON
   ============================================ */
.whatsapp-button{position:fixed; right:26px; bottom:26px; z-index:100;}
.whatsapp-float{position: fixed; right: 26px; bottom: 26px; z-index: 100; background: #25d366; color: #fff; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 4px 16px rgba(11, 233, 116, 0.25), 0 1.5px 4px rgba(16, 28, 34, .10); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: box-shadow 0.18s, transform 0.16s; font-size: 2rem;}
.whatsapp-float:hover, .whatsapp-float:focus{box-shadow: 0 8px 24px rgba(11,233,116,.19), 0 3px 10px rgba(16,28,34,.13); transform: translateY(-2px) scale(1.08); color: #fff; background: #1ebc5b;}

/* ============================================
   MEDIA QUERIES
   ============================================ */
@media (max-width: 1200px){
  .gallery-grid{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width: 920px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .counters{grid-template-columns: repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .main-nav{display:none}
  .nav-toggle{display:block}
  .gallery-grid{grid-template-columns:1fr}
  .locations-grid{grid-template-columns:1fr}
  .services .cards{grid-template-columns: 1fr !important;}
  .post-footer{flex-direction: column; align-items: flex-start;}
  .related-posts .cards{grid-template-columns: 1fr;}
  .post-body h2{font-size: 1.75rem;}
  .post-body h3{font-size: 1.35rem;}
}

@media (max-width: 700px) {
  .whatsapp-float{right: 16px; bottom: 16px; width: 48px; height: 48px; font-size: 1.5rem;}
}

@media (max-width: 600px) {
  .post-hero{padding: 48px 0 32px;}
  .post-title{font-size: 1.75rem;}
  .post-excerpt{font-size: 1rem;}
  .post-content{padding: 48px 0;}
  .post-body{font-size: 1rem;}
  .post-body h2{font-size: 1.5rem;}
  .post-body h3{font-size: 1.25rem;}
}