/* ===========================
   style.css — Versão Responsiva (mantém visual original)
   =========================== */

/* ---------- Variáveis ---------- */
:root{
  --primary-color: #032859;
  --accent-color: #021D40;
  --yellow: #F2C12E;
  --text-color: #032859;
  --bg-light: #f9fbfc;
  --bg-white: #ffffff;
  --max-width: 1200px;
  --container-w: 90%;
  --radius: 12px;
  --transition: 0.25s ease;
  --shadow-soft: 0 6px 20px rgba(0,0,0,.06);
  --header-height: 80px; /* valor inicial; será atualizado por JS */
}

/* ---------- Reset / Base ---------- */
*,
*::before,
*::after{ box-sizing: border-box; margin:0; padding:0; }

html,body{
  height:100%;
  font-family: 'Montserrat','Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:var(--text-color);
  background:var(--bg-white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior: smooth;
}

/* garante que header fixo não sobreponha conteúdo */
body{ padding-top: calc(var(--header-height) + 8px); }

/* ---------- Containers ---------- */
.container{
  width:var(--container-w);
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 12px;
}

/* ---------- Header / Navegação ---------- */
header{
  position:fixed;
  left:0; right:0; top:0;
  z-index:1100;
  background:var(--bg-white);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  padding:10px 0;
}

/* permite referenciar via JS e CSS variável */
header.site-header{}

/* logo */
.logo img{ height:70px; width:auto; display:block; object-fit:contain; max-width:100%; }

/* nav */
nav ul{ list-style:none; display:flex; gap:20px; align-items:center; margin:0; padding:0; }

nav a{
  color:var(--accent-color);
  text-decoration:none;
  transition:color var(--transition), transform var(--transition);
  font-weight:600;
}

nav a:hover{ color:var(--yellow); transform:translateY(-1px); }

nav a.active{
  font-weight:700;
  border-bottom:2px solid var(--accent-color);
  padding-bottom:3px;
}

/* Menu toggle (mobile) */
.menu-toggle{
  display:none;
  background:none; border:0;
  font-size:1.6rem; color:var(--primary-color);
  cursor:pointer;
}
.menu-toggle:focus{ outline:2px solid var(--accent-color); outline-offset:2px; }

/* ---------- Carrossel ---------- */
.carousel-container{
  width:100%;
  height:80vh;
  max-height:800px;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  background: linear-gradient(180deg, #f5f7f9 0%, #fff 100%);
}

.slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .6s ease, transform .6s ease;
  transform:translateX(0);
}

.slide.active{ opacity:1; pointer-events:auto; transform:none; }

.slide picture,
.slide img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; max-width:100%; }

/* carousel controls */
.carousel-control{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--yellow); color:var(--accent-color);
  border:0; cursor:pointer; z-index:50;
  box-shadow:0 8px 22px rgba(3,40,89,.14);
  transition:transform .18s, background .18s, color .18s;
  opacity:.98;
  pointer-events: auto;
  backdrop-filter: blur(4px);
}


.carousel-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}




/* ajustes tamanhos em mobile */
.carousel-control svg { width: 22px; height: 22px; display:block; }

/* posições */
.carousel-control.left { left: 14px; }
.carousel-control.right { right: 14px; }

/* hover / foco */
.carousel-control:hover,
.carousel-control:focus {
  background: var(--accent-color);
  color: var(--yellow);
  transform: scale(1.06) translateY(-50%);
  outline: none;
  box-shadow: 0 10px 30px rgba(2,30,70,.2);
}

/* indicadores */
.carousel-indicators{
  position:absolute; left:50%; bottom:15px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:60;
}
.indicator{
  width:8px; height:8px; border-radius:50%; border:0;
  background:var(--yellow); cursor:pointer; padding:0; margin:0 4px;
  transition:transform .18s, background .18s;
}
.indicator.active{ background:var(--accent-color); transform:scale(1.2); }

/* ---------- Seções / Títulos ---------- */
section{ padding:60px 0; }
.titulo-secao{
  font-family:'Orbitron', sans-serif;
  font-weight:700; font-size:2.2rem;
  color:var(--text-color); text-align:center; margin-bottom:1.5rem;
  position:relative; transition:opacity .4s, transform .4s;
}
.titulo-secao::after{
  content:""; display:block; width:0; height:6px; background:var(--yellow);
  margin:12px auto 0; border-radius:6px; box-shadow:0 3px 10px rgba(3,40,89,.12);
  transition:width .45s ease;
}
.titulo-secao.animate::after{ width:180px; }

/* ---------- Quem Somos ---------- */
.sobre{
  background:var(--bg-white);
  border-radius:16px;
  box-shadow:var(--shadow-soft);
  margin:32px auto;
  padding:48px 24px;
  max-width:var(--max-width);
}
.sobre-texto{
  font-size:1.05rem; line-height:1.7; color:#3b5360;
  max-width:760px; margin:0 auto; text-align:center;
}



/* Foto abaixo do texto (Quem Somos) */
/* Foto abaixo do texto (Quem Somos) */
.sobre-foto {
  text-align: center;
  margin-top: 25px;
}

.sobre-foto img {
  width: 100%;
  max-width: 380px;  /* agora SIM vai diminuir */
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

/* Fade-in + blur */
.fade-blur {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.04) translateY(20px);
  transition: opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease;
}

.fade-blur.show {
  opacity: 1;
  filter: blur(0);
  transform: scale(1) translateY(0);
}



/* ---------- MVV (Missão, Visão, Valores) ---------- */
.mvv-cards{
  display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top:28px;
}
.mvv-card{
  background:var(--bg-white); padding:22px; border-radius:12px;
  box-shadow:var(--shadow-soft); width:280px; text-align:center;
  transition:transform .28s ease, box-shadow .28s ease;
}
.mvv-card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(0,0,0,.10); }
.mvv-card h3{ font-family:'Orbitron',sans-serif; font-size:1.25rem; margin:12px 0; color:#24494d; }
.mvv-card p{ font-size:1rem; color:#3b5360; line-height:1.5; }

/* ---------- Serviços (cards) ---------- */
.cards{
  display:flex; gap:28px; justify-content:center; flex-wrap:wrap; max-width:1100px; margin:0 auto;
}
.card{
  width:300px; background:var(--bg-white); padding:24px; border-radius:12px;
  text-align:center; box-shadow:var(--shadow-soft);
  transition:transform .28s ease, box-shadow .28s ease;
}
.card:hover{ transform:translateY(-10px); box-shadow:0 22px 40px rgba(0,0,0,.10); }
.card h3{ font-size:1.18rem; margin:12px 0; color:#24494d; }
.card p{ font-size:0.98rem; color:#3b4a50; line-height:1.5; }

/* ---------- Ícones padrão ---------- */
.icon-servico, .icon-mvv{
  color:var(--yellow);
  transition:transform var(--transition), color var(--transition), filter var(--transition);
  display:inline-block; font-size:3rem; line-height:1;
}
.card:hover .icon-servico, .mvv-card:hover .icon-mvv, .footer-item:hover i{
  color:var(--accent-color); transform:scale(1.12); filter:drop-shadow(0 4px 6px rgba(0,0,0,.22));
}

/* ---------- Parceiros / Texto destaque ---------- */
.parceiros{
  background:var(--bg-white); border-radius:16px; box-shadow:var(--shadow-soft);
  margin:32px auto; padding:48px 24px; max-width:var(--max-width);
}
.parceiros-texto{
  max-width:900px; margin:0 auto; text-align:center; font-size:1.05rem; line-height:1.7;
  color:#3b5360; background:var(--bg-light); padding:36px 26px; border-radius:16px;
  box-shadow:0 8px 28px rgba(0,0,0,.06); transition:transform .28s ease;
}
.parceiros-texto:hover{ transform:translateY(-5px); }
.parceiros-texto strong{ color:var(--primary-color); }
.parceiros-texto ul{ list-style:none; padding:0; margin:18px 0; }
.parceiros-texto ul li{ margin-bottom:12px; position:relative; padding-left:26px; font-weight:500; }
.parceiros-texto ul li::before{ content:"✔"; position:absolute; left:0; color:var(--yellow); font-weight:bold; }

/* ---------- Contato / Formulário ---------- */
#contato{ display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; padding:60px 16px; }
.contato-box{ width:100%; max-width:1100px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:40px; }
.formulario{ width:100%; max-width:600px; }
.input, input, textarea, .formulario input, .formulario textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #d2d8dd; margin:8px 0; font-size:1rem;
  transition:box-shadow .18s ease, border-color .18s ease;
}
.input:focus, input:focus, textarea:focus{ box-shadow:0 6px 18px rgba(3,40,89,.06); outline:none; border-color:var(--accent-color); }

.formulario button, button{
  width:100%; padding:14px; font-size:1.05rem;
  background:var(--primary-color); color:#fff; border-radius:10px; border:0; cursor:pointer; font-weight:600;
  transition:background var(--transition), transform var(--transition);
}
.formulario button:hover, button:hover{ background:var(--yellow); color:var(--accent-color); transform:translateY(-2px); }

/* Mapa responsivo */
.mapa{ width:100%; max-width:700px; }
.mapa iframe{ width:100%; height:400px; border-radius:12px; border:0; display:block; }

/* ---------- Rodapé ---------- */
footer{
  background:var(--accent-color); color:#fff; padding:20px 10px;
}
.footer-container{
  max-width:1300px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:48px; align-items:start;
}
.footer-logo .cnpj{ font-size:0.85rem; color:#ddd; margin-top:4px; }
.footer-logo img{ height:50px; margin-bottom:12px; }
.footer-logo p{ font-size:0.95rem; color:#ddd; margin-top:4px; }

.footer-nav h4, .footer-contact h4, .footer-social h4{ font-size:1.1rem; margin-bottom:12px; font-weight:600; }
.footer-nav ul{ list-style:none; padding:0; }
.footer-nav ul li{ margin-bottom:8px; }
.footer-nav a{ color:#fff; text-decoration:none; transition:color .25s; }
.footer-nav a:hover{ color:var(--yellow); }
.footer-contact .footer-item{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.footer-contact i{ color:var(--yellow); font-size:18px; }
.footer-social .social-icons a{ margin-right:12px; color:#fff; font-size:1.2rem; transition:color .25s; }
.footer-social .social-icons a:hover{ color:var(--yellow); }

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-btn{
  position:fixed; right:25px; bottom:25px; background:#25d366; color:#fff;
  width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow:0 6px 18px rgba(0,0,0,.18); z-index:1300; transition:transform .28s;
}
.whatsapp-btn:hover{ transform:scale(1.06); }

/* ---------- Responsividade (consolidada) ---------- */
@media (max-width: 1024px){
  .footer-container{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .cards{ gap:20px; }
  .carousel-container{ height:420px; }
  .titulo-secao{ font-size:1.9rem; }
}

@media (max-width: 768px){
  .menu-toggle{ display:block; }
  nav#main-menu{ position:absolute; left:0; right:0; top:calc(var(--header-height)); background:var(--bg-white); box-shadow:0 8px 20px rgba(3,40,89,.08); padding:12px; display:none; z-index:1200; }
  nav#main-menu:not([hidden]){ display:block; }
  header .container{ flex-direction:column; align-items:flex-start; gap:8px; }
  .carousel-container{ height:300px; }
  .cards, .mvv-cards{ flex-direction:column; gap:18px; }
  .contato-box{ flex-direction:column; }
  .footer-container{ grid-template-columns:repeat(2,1fr); }
  .logo img{ height:60px; }
  body{ padding-top: calc(var(--header-height) + 8px); }
}

@media (max-width: 480px){
  .footer-container{ grid-template-columns:1fr; text-align:center; }
  .container{ width:95%; }
  .titulo-secao{ font-size:1.6rem; }
  .icon-servico, .icon-mvv{ font-size:2.4rem; width:2.4rem; height:2.4rem; }
  .carousel-control{ width:38px; height:38px; }
  .carousel-control svg{ width:18px; height:18px; }
  .carousel-container{ height:260px; }
  .logo img{ height:52px; }
  .sobre{ padding:28px 16px; }
  .parceiros-texto{ padding:22px 16px; }
  .mapa iframe{ height:260px; }
  .cards .card, .mvv-cards .mvv-card{ width:100%; }
}

/* small improvement for long paragraphs on tiny viewports */
@media (max-width: 360px){
  .sobre-texto, .parceiros-texto{ font-size:0.98rem; line-height:1.6; padding:0 6px; }
}

/* utility */
.hide-on-desktop{ display:none; }
@media (max-width: 768px){ .hide-on-desktop{ display:block; } }