/* style.css - Rota 21 (versão final com correções de banner e caixas) */
:root{
  --orange:#ff7a1a;
  --dark:#222;
  --muted:#666;
  --bg:#f7f7f7;
  --maxwidth:1100px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{margin:0;color:var(--dark);background:var(--bg);line-height:1.5}
a{color:var(--orange);text-decoration:none}
.container{max-width:var(--maxwidth);margin:0 auto;padding:24px}

/* HEADER */
.header-fixed{
  position:fixed; top:0; left:0; right:0;
  background:#fff; box-shadow:0 1px 6px rgba(0,0,0,0.06);
  z-index:100;
}
.header-inner{
  max-width:var(--maxwidth); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
}
.logo-small{ height:80px; width:auto; }
.main-nav a{ margin-left:18px; color:var(--dark); font-weight:600; }

/* BANNER DA HOME (força hero grande) */
.banner[style*="hero"]{
  background-size:cover; background-position:center;
  padding:80px 12px 100px 12px; margin-top:72px;
  min-height:360px !important;
}

/* BANNERS INTERNOS — por padrão (todos exceto hero) ficam finos) */
.banner:not([style*="hero"]) {
  background-size:cover; background-position:center;
  min-height:110px !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
  margin-top:72px;
}

/* Remove fundo da caixa sobre o banner se existir */
.banner .banner-box { background:transparent !important; padding:0 !important; box-shadow:none !important; }

/* Banner cta (botão logo abaixo do banner) */
.banner-cta{ margin-top:8px !important; padding-left:20px !important; padding-top:4px !important; }
.banner-cta .btn-main{ display:inline-block; background:var(--orange); color:#fff; padding:12px 22px; border-radius:8px; font-weight:700; }

/* Layout geral */
.row{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
.sideimg img{ width:100%; border-radius:8px; object-fit:cover; }
.three-cols{ display:flex; gap:16px; flex-wrap:wrap; }
.card{ flex:1; background:#fff; padding:16px; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.footer{ background:#fff; padding:18px 24px; margin-top:24px; border-top:8px solid #eee; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; }

/* Whats float */
.whatsapp-float{ position:fixed; right:18px; bottom:18px; z-index:200; }
.whatsapp-float img{ width:56px; height:56px; border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,0.15); }

/* Botão padrão */
.btn-main{ display:inline-block; background:var(--orange); color:#fff; padding:12px 18px; border-radius:8px; font-weight:700; }

/* RESPONSIVE */
@media(max-width:900px){
  .sideimg, .content{ flex-basis:100% }
  .banner[style*="hero"]{ padding:40px 12px 60px 12px; min-height:240px !important; }
  .banner:not([style*="hero"]){ min-height:85px !important; padding-top:8px !important; padding-bottom:8px !important; }
  .logo-small{ height:80px }
  .main-nav a{ margin-left:12px; font-size:14px }
  .three-cols{ flex-direction:column }
}

/* ============================= */
/* LOGO/HEADER (tamanho controlado) */
/* ============================= */
.header-fixed .logo img{ height:90px !important; width:auto !important; }
.header-fixed .logo{ display:flex; align-items:center; padding:10px 0; }

/* ============================= */
/* QUEM SOMOS: texto à esquerda; imagem à direita */
/* ============================= */
.quem-somos{
  display:flex; align-items:flex-start; gap:28px; flex-direction:row; margin:40px 0;
}
.quem-somos .texto{ flex:1; }
.quem-somos .sideimg{ flex:0 0 48%; }
.quem-somos .sideimg img{ width:100%; height:auto; border-radius:8px; object-fit:cover; }

/* ============================= */
/* CAIXAS: MISSÃO / VISÃO / VALORES (TÍTULO em cima do texto) */
/* ============================= */
/* As caixas agora ficam em coluna interna: título em cima, texto embaixo */
.extra-areas{
  display:flex; gap:18px; margin-top:24px; flex-wrap:wrap;
}
.extra-areas .box{
  flex:1;
  background:#fff;
  border:8px solid #eee;
  padding:18px;
  border-radius:8px;
  text-align:center;
  min-height:120px;
  display:flex;
  flex-direction:column;    /* importante: título acima do texto */
  align-items:center;
  justify-content:flex-start;
}
.extra-areas .box h3{ margin:0 0 10px 0; font-size:18px; }
.extra-areas .box p{ margin:0; }

/* ============================= */
/* SERVIÇOS */
/* ============================= */
.servicos{
  display:flex; gap:28px; align-items:flex-start; margin:40px 0; flex-direction:row;
}
.servicos .sideimg{ flex:0 0 50%; }
.servicos .texto{ flex:1; }

/* se precisar, aqui você pode ajustar o tamanho máximo da imagem de serviços */
.servicos .sideimg img{ max-height:420px; width:100%; object-fit:cover; border-radius:8px; }

/* Mobile: empilha colunas */
@media(max-width:900px){
  .quem-somos, .servicos{ flex-direction:column; }
  .extra-areas{ flex-direction:column; }
  header .logo img{ max-height:36px; }
}
/* === CORREÇÃO: impedir logo gigante na página Serviços === */

/* Diminui a logo padrão em todas as páginas internas */
.page-servicos .logo img,
.page-servicos .logo-small {
    height: 40px !important;
    max-height: 40px !important;
}

/* Garante que NÃO aparece a logo enorme dentro do conteúdo */
.page-servicos img[alt="Rota 21"],
.page-servicos .content img {
    max-width: 220px !important; 
    height: auto !important;
}