/* =====================================================================
   Topo unificado Caraíva — foto (hero) + menu
   Usado em TODAS as páginas do caraiva.net.br (mesmo visual do empresa.php).
   As regras são específicas o bastante para não serem afetadas pelo
   style19.css / zerogrid.css / responsive.css antigos.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* ---------- Foto / Hero ---------- */
.hero-caraiva{
  position:relative;
  width:100%;
  height:150px;
  background-image:url('https://www.caraivabahia.com.br/images/topo-caraiva-bahia.jpg');
  background-size:cover;
  background-position:center;
  overflow:hidden;
  z-index:30;
  box-sizing:border-box;
  text-align:left;
}
.hero-caraiva *{ box-sizing:border-box; }
.hero-caraiva .overlay{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.20);
}
.hero-caraiva .hero-content{
  position:relative; z-index:2;
  max-width:1200px; height:100%;
  margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 35px;
}
.hero-caraiva .logo-area{ text-align:center; }
.hero-caraiva .logo-area h1{
  float:none; position:static; padding:0;
  font-size:30px; color:#fff; font-family:Georgia, serif; font-style:italic; font-weight:bold;
  margin:0; line-height:1.05; display:flex; align-items:center; justify-content:center; gap:8px;
}
.hero-caraiva .logo-area h1 img{ width:46px; max-width:46px; height:auto; vertical-align:middle; margin-left:6px; }
.hero-caraiva .logo-area h2{
  float:none; position:static; padding:0;
  font-size:16px; color:#fff; font-family:Georgia, serif; font-style:italic; font-weight:normal;
  margin:1px 0 0; line-height:1;
}
.hero-caraiva .logo-area p{
  color:#fff; font-family:Georgia, serif; font-size:9.5px; letter-spacing:1px;
  margin:4px 0 0; padding:0; line-height:1.3;
}
.hero-caraiva .guia-area{
  text-align:right; max-width:300px;
  padding-left:24px; border-left:1px solid rgba(255,255,255,.35);
}
.hero-caraiva .guia-area h2{
  float:none; position:static; padding:0;
  color:#fff; font-size:21px; font-family:Georgia, serif; font-style:italic; font-weight:normal;
  margin:0; line-height:1.15;
}
.hero-caraiva .guia-area p{
  color:#fff; font-family:Georgia, serif; font-size:11px;
  margin:4px 0 0; padding:0; line-height:1.4; text-align:center;
}
@media (max-width:900px){
  .hero-caraiva{ height:auto; min-height:220px; }
  .hero-caraiva .hero-content{ flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px; gap:14px; }
  .hero-caraiva .logo-area h1{ font-size:28px; justify-content:center; }
  .hero-caraiva .guia-area{ text-align:center; border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,.35); padding-top:14px; }
}

/* ---------- Menu ---------- */
nav.menu-caraiva{
  float:none; position:relative; z-index:30;
  width:100%; background:#f6f6f6; padding:8px 0; margin:0;
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px 18px;
  border-bottom:1px solid #ddd; box-sizing:border-box;
  line-height:1.4;
}
nav.menu-caraiva a,
nav.menu-caraiva a:link,
nav.menu-caraiva a:visited{
  position:relative; color:#005d78; text-decoration:none; font-size:13px;
  font-family:'Montserrat', Arial, sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.3px; transition:all .3s ease; display:flex; align-items:center; padding:0 6px;
  line-height:1.4;
}
nav.menu-caraiva a:hover,
nav.menu-caraiva a:active{ color:#0ba6c9; }
nav.menu-caraiva .menu-home img,
nav.menu-caraiva .menu-icone img{ width:24px; max-width:24px; height:auto; opacity:.8; transition:.3s; }
nav.menu-caraiva .menu-home img:hover,
nav.menu-caraiva .menu-icone img:hover{ opacity:1; }
nav.menu-caraiva a:not(:last-child)::after{
  content:""; position:absolute; right:-9px; top:50%; transform:translateY(-50%);
  width:1px; height:20px; background:#d7d7d7;
}
@media (max-width:700px){
  nav.menu-caraiva{ gap:14px; padding:12px; }
  nav.menu-caraiva a:not(:last-child)::after{ display:none; }
}