/* =========================================================
   VITA — CSS COMPLETO RESPONSIVO (ATUALIZADO)
   Foco: zero overflow horizontal + comportamento fluido
========================================================= */

/* ---------- Base ---------- */
*{ box-sizing:border-box; min-width:0 } /* evita filhos de grid estourarem */
:root{
  /* VITA – paleta da logo */
  --brand:#1E3766;            /* azul principal (marca) */
  --accent:#E1262D;           /* vermelho do “+” */
  --accent-rgb:225, 38, 45;   /* para usar em rgba() */

  --bg:#fafafa;
  --panel:#fff;
  --ink:#1b1b1b;
  --muted:#6b7280;
  --line:#eceef2;
  --radius:18px;
  --shadow:0 18px 50px rgba(0,0,0,.12);
}
html,body{ height:100% }
html{ overflow-x:hidden }        /* trava scroll lateral global */
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;             /* redundância intencional */
}
img,video{ max-width:100%; height:auto; display:block }
a{ color:inherit }
button{ font:inherit }

/* Tipografia fluida */
h1{font-size:clamp(26px,5.6vw,44px);line-height:1.18;margin:0 0 .6rem}
h2{font-size:clamp(22px,4.8vw,32px);line-height:1.22;margin:0 0 .5rem}
h3{font-size:clamp(18px,4vw,22px); line-height:1.25; margin:.2rem 0 }

/* Links/btns */
.btn{
  background:var(--brand); color:#fff; border:0; cursor:pointer;
  padding:12px 18px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
}
.btn.orcamento{ box-shadow:0 10px 24px rgba(var(--accent-rgb),.25) }

/* Containers & Sections */
.container{ width:min(1160px,94vw); margin-inline:auto }
.section{ padding:clamp(28px,5vw,54px) 0; background:#f6f7fb }
.section > .container{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:28px clamp(14px,3.2vw,28px);
}
.section-head{ text-align:center; margin-bottom:22px }
.grid{ display:grid; gap:16px }
.card{ background:#fff; border:1px solid #eee; border-radius:16px; box-shadow:var(--shadow); padding:18px }

/* =========================================================
   HEADER
========================================================= */
.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.85); backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid #eee;
}
.nav{ display:flex; align-items:center; gap:16px; padding:12px 0 }
.brand-logo-img{ height:42px; width:auto; object-fit:contain; max-width:56vw }
.menu{ margin-left:auto; display:flex; gap:18px; align-items:center }
.menu a{ text-decoration:none; font-weight:500; color:#111 }
.hide-sm{ display:inline-flex }
.show-sm{ display:none }
.hamburger{
  margin-left:10px; width:40px; height:40px; border-radius:10px;
  border:1px solid #e5e7eb; background:#fff; display:none;
  flex-direction:column; justify-content:center; gap:4px
}
.hamburger span{ display:block; height:2px; background:#111; margin-inline:8px; border-radius:2px }

/* Mobile menu */
@media (max-width:980px){
  .hide-sm{ display:none }
  .show-sm{ display:inline-flex }
  .hamburger{ display:flex }
  .menu{
    position:fixed; left:0; right:0; top:64px; bottom:0;   /* preenche tela */
    display:none; flex-direction:column; gap:14px; padding:18px 7%;
    background:#fff; border-top:1px solid #eee; overflow:auto;
  }
  .menu.open{ display:flex }
  .btn.orcamento{ display:none }  /* CTA desktop */
}

/* =========================================================
   BANNER
========================================================= */
.banner{ position:relative; background:#000 }
.banner-stage{ position:relative; overflow:hidden }
.banner-slides{ position:relative; height:62vh; min-height:320px; max-height:740px }
@media (max-width:900px){ .banner-slides{ height:56vh } }
@media (max-width:600px){ .banner-slides{ height:48vh; min-height:260px } }

.slide{ position:absolute; inset:0; opacity:0; transform:scale(1.02); transition:opacity .6s,transform .6s }
.slide.is-active{ opacity:1; transform:scale(1) }
.slide img{ width:100%; height:100%; object-fit:cover }
.placeholder .ph{ color:#fff; display:grid; place-items:center; height:100%; font-weight:600 }

.banner-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px; border:0;
  cursor:pointer; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.25); display:grid; place-items:center
}
/* sem valores negativos => não cria overflow lateral */
.banner-btn.prev{ left:10px } 
.banner-btn.next{ right:10px }
.banner-btn:hover{ background:rgba(var(--accent-rgb),.35) }

.banner-dots{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:7px }
.banner-dots button{ width:7px; height:7px; border-radius:999px; border:0; background:#fff9; opacity:.75 }
.banner-dots button.is-active{ opacity:1; background:#fff }

/* =========================================================
   HERO
========================================================= */
.hero{ background:#fff }
.hero-grid{ display:grid; gap:18px; grid-template-columns:1.2fr 1fr; align-items:center }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr } }
.hero-copy h1{ margin:.2rem 0 1rem }
.accent{ color:var(--brand) }
.photo-hole{
  height:clamp(220px,34vw,300px);
  border-radius:16px; border:1px dashed #ddd; display:grid; place-items:center
}

/* =========================================================
   SERVIÇOS
========================================================= */
.services.triple{ grid-template-columns:repeat(3,1fr) }
@media (max-width:980px){ .services.triple{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){  .services.triple{ grid-template-columns:1fr } }

/* =========================================================
   STATS
========================================================= */
.stats{ background:linear-gradient(#fff,#f6f7fb) }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
@media (max-width:900px){ .stats-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .stats-grid{ grid-template-columns:1fr } }
.stat{ background:#fff; border:1px solid #eee; border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.12); padding:22px; text-align:center }
.count{ display:block; font-size:30px; font-weight:800 }

/* =========================================================
   CARROSSEIS (Clientes / Galeria)
========================================================= */
.carousel{ position:relative }
.carousel .track{
  display:flex; gap:16px; padding:8px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.carousel .track > *{ scroll-snap-align:center; flex:0 0 auto }
.carousel .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2; width:40px; height:40px; border-radius:999px; border:0;
  background:rgba(0,0,0,.35); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25)
}
/* NUNCA usar left/right negativos */
.carousel .nav.prev{ left:10px }
.carousel .nav.next{ right:10px }
.carousel .nav:hover{ background:rgba(var(--accent-rgb),.55) }

/* Clientes – logos sempre centrados */
.client-card{
  width:clamp(140px,38vw,220px);
  height:clamp(120px,32vw,170px);
  border-radius:14px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow); display:grid; place-items:center; padding:14px
}
.client-card img{ max-width:86%; max-height:70%; object-fit:contain }

/* Galeria – cards menores (sem criar overflow) */
.gallery .track{ justify-content:center; flex-wrap:wrap }
.gallery .shot{
  width:clamp(140px,40vw,240px);
  aspect-ratio:4/3;
  border-radius:12px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); transition:transform .18s, box-shadow .18s;
}
.gallery .shot img{ width:100%; height:100%; object-fit:cover }
.gallery .shot:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.12) }

/* =========================================================
   EQUIPE
========================================================= */
.team{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); justify-items:center }
.team .card{ width:100%; max-width:340px; text-align:center }
.team .avatar{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:1px solid #eee }

/* =========================================================
   LIGHTBOX
========================================================= */
.lightbox{ position:fixed; inset:0; display:grid; place-items:center; z-index:99 }
.lightbox[hidden]{ display:none }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(3px) }
.lightbox-content{
  position:relative; background:#000; border-radius:12px; overflow:hidden;
  max-width:min(92vw,1100px)
}
.lightbox-content img{ display:block; max-width:92vw; max-height:80vh; object-fit:contain }
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute; top:8px; border:0; width:46px; height:46px; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25);
  backdrop-filter:blur(4px); cursor:pointer
}
.lightbox-close{ right:8px; font-size:20px }
.lightbox-prev{ left:8px; top:50%; transform:translateY(-50%) }
.lightbox-next{ right:8px; top:50%; transform:translateY(-50%) }

/* =========================================================
   BLOG
========================================================= */
.grid.blog{ display:grid; gap:22px; margin-bottom:8px }
.grid.blog .post{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:22px;
}
.grid.blog .post .meta{ color:var(--muted); margin:.25rem 0 1rem }
.grid.blog .post .btn{ display:inline-flex; align-items:center; margin-top:.2rem }
.cta-posts{ display:flex; justify-content:center; margin-top:18px }
.cta-posts .btn.posts{ padding:12px 20px; border-radius:999px }
@media (min-width:900px){
  .grid.blog .post{ display:grid; grid-template-columns:1fr auto; gap:12px }
  .grid.blog .post .btn{ justify-self:end; align-self:start }
}

/* =========================================================
   CONTATO + MAPA
========================================================= */
.contact{ background:linear-gradient(#fff,#f6f7fb) }
.contact-grid{ display:grid; gap:20px; grid-template-columns:1.15fr 1fr }
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr } }

.contact-card{ background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:22px }
.contact-list{ list-style:none; margin:0 0 6px; padding:0; display:grid; gap:14px }

.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px }
.contact-form input,.contact-form textarea{
  width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:12px; font:inherit; background:#fff
}
.contact-form textarea{ grid-column:1 / -1; min-height:170px; resize:vertical }
.contact-form .btn{ grid-column:1 / 2; justify-self:start }
@media (max-width:980px){
  .contact-form{ grid-template-columns:1fr }
  .contact-form .btn{ grid-column:auto }
}

.map-card{
  background:#f8f9fb; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:10px; display:flex; min-height:420px
}
.map-card iframe{ width:100%; height:100%; border:0; border-radius:12px; display:block }
@media (max-width:980px){ .map-card{ min-height:320px } }

/* =========================================================
   FOOTER
========================================================= */
.footer{ background:#0e0f14; color:#e5e7eb; padding:34px 0 22px }
.foot-grid{ display:grid; gap:14px; grid-template-columns:1fr auto; align-items:center }
.foot-logo{ height:40px; width:auto; object-fit:contain; filter:brightness(100%) contrast(110%) }
.foot-credits{ justify-self:end }
@media (max-width:780px){
  .foot-grid{ grid-template-columns:1fr; gap:10px }
  .foot-credits{ justify-self:start }
}

/* =========================================================
   VOLTAR AO TOPO
========================================================= */
.to-top{
  position:fixed; right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:46px; height:46px; border-radius:999px; border:0;
  background:rgba(var(--accent-rgb),.9); color:#fff; display:grid; place-items:center;
  box-shadow:0 14px 38px rgba(var(--accent-rgb),.35); opacity:0; visibility:hidden;
  transform:translateY(10px); transition:opacity .2s,transform .2s,visibility .2s; z-index:50
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0) }

/* =========================================================
   LOADER AMBULÂNCIA
========================================================= */
.loading{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(255,255,255,.65); backdrop-filter:blur(10px);
  z-index:9999; transition:opacity .25s,visibility .25s
}
.loading.hide{ opacity:0; visibility:hidden }
.loader{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100% }
.load-text{ font-weight:600; color:#2b2b2b }
.runway{ position:relative; width:100vw; height:110px; overflow:visible }
.ambulance{
  position:absolute; top:0; left:-160px; width:135px; height:80px;
  filter:drop-shadow(0 8px 22px rgba(var(--accent-rgb),.45)); animation:driveAcross 3s linear infinite
}
.ambulance .body{ position:absolute; left:0; top:0; width:100px; height:80px; background:var(--brand); border-radius:15px; border-bottom-right-radius:0 }
.ambulance .plus{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:#fff }
.ambulance .hood{ position:absolute; right:0; bottom:0; width:35px; height:55px; background:var(--brand); border-top-right-radius:15px }
.ambulance .hood .window{ position:absolute; top:8px; left:3px; width:28px; height:19px; border-top-right-radius:9px; background:#fff }
.ambulance .wheel{ position:absolute; bottom:-15px; left:10px; width:30px; height:30px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 6px var(--brand) }
.ambulance .wheel + .wheel{ left:90px }
@keyframes driveAcross{ from{ transform:translateX(0) } to{ transform:translateX(calc(100vw + 320px)) } }

/* =========================================================
   ACESSIBILIDADE / MOTION
========================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
}

/* ===== Contato: evitar overflow do e-mail ===== */
.contact-card, .contact-list, .contact-list li{ min-width:0 }
#empresa-email{
  display:inline-block;
  max-width:100%;
  white-space:normal;           /* permite quebrar linha */
  overflow-wrap:anywhere;       /* quebra em pontos seguros */
  word-break:break-word;        /* fallback agressivo */
}

/* se quiser aplicar a qualquer link dentro da lista */
.contact-list a{
  display:inline-block;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ===== Voltar ao topo: posição com fallback (mobile) ===== */
.to-top{
  right:16px;                   /* fallback para navegadores sem env() */
  bottom:16px;                  /* idem */
  z-index:400;                  /* garante que fique acima do conteúdo */
}
@supports (bottom: env(safe-area-inset-bottom)){
  .to-top{
    right:calc(16px + env(safe-area-inset-right));
    bottom:calc(16px + env(safe-area-inset-bottom));
  }
}

/* ===== Header / Menu SEMPRE acima do banner ===== */
:root{
  --header-h: 64px;
  --z-header: 2000;  /* barra fixa */
  --z-menu:   2100;  /* painel do menu (mobile) */
}

.topbar{
  position: sticky;
  top: 0;
  z-index: var(--z-header); /* sobe o header */
}

/* menu mobile ocupa a tela e fica acima de tudo */
@media (max-width:980px){
  .menu{
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    height: calc(100dvh - var(--header-h));
    overflow: auto;
    background: #fff;
    border-top: 1px solid #eee;
    display: none;
    flex-direction: column;
    gap: 14px;
    padding: 18px 7%;
    z-index: var(--z-menu);     /* <<< chave para não ficar atrás do banner */
  }
  .menu.open{ display:flex }
}

/* (opcional) deixa o conteúdo um tom escuro ao abrir o menu */
@media (max-width:980px){
  body.menu-open::after{
    content:"";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(2px);
    z-index: calc(var(--z-menu) - 1); /* por baixo do menu, acima do site */
  }
}

/* garante que o banner fique abaixo do menu */
.banner, .banner-stage, .banner-slides{ position:relative; z-index:1 }

.photo-hole{ position:relative; overflow:hidden }
.photo-hole .hero-img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit }