/* 
  styles.css - Nei Fretes
  Observação de performance: Para produção, minifique este arquivo (ex.: via cssnano) e sirva com cache.
  Mantemos comentários extensivos para explicar escolhas de design e facilitar manutenção.
*/

:root{
  /* Paleta futurista clean */
  --cor-fundo-escuro:#0b1220;
  --cor-fundo-claro:#f6f8fc;
  --cor-primaria:#00e5ff;
  --cor-secundaria:#3df29b;
  --cor-texto-claro:#e6eef7;
  --cor-texto-medio:#96a0b5;
  --cor-sombra:rgba(0,0,0,.24);
  --raio:16px;
  --raio-2xl:22px;
  --duracao:.25s;
  --container:1180px;
  --altura-header:72px;
  --gradiente:linear-gradient(135deg, rgba(0,229,255,.12), rgba(61,242,155,.12));
}

/* Tema: classe aplicada ao body. Armazena preferência no localStorage. */
body.tema-escuro{background:var(--cor-fundo-escuro);color:var(--cor-texto-claro)}
body.tema-claro{background:var(--cor-fundo-claro);color:#0b1220}

/* Reset/Normalização leve */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;line-height:1.6}
img{max-width:100%;height:auto;display:block;border-radius:var(--raio)}
a{color:inherit;text-decoration:none}
ul{padding-left:1.25rem}

/* Foco visível e acessível */
:focus{outline:2px solid var(--cor-primaria);outline-offset:2px;border-radius:8px}

/* Utilitários */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding:0 1rem}
.visualmente-oculto{position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;border:0;padding:0}

/* Header fixo */
.cabecalho{position:sticky;top:0;z-index:1000;background:rgba(11,18,32,.8);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.cabecalho__conteudo{display:flex;align-items:center;justify-content:space-between;height:var(--altura-header)}

/* Logo tipográfica com microanimação */
.logo__marca{font-weight:800;letter-spacing:.5px}
.logo__marca .logo__destaque{background:linear-gradient(90deg,var(--cor-primaria),var(--cor-secundaria));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Navegação */
.navegacao__lista{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.navegacao a{padding:.5rem .75rem;border-radius:12px;transition:background var(--duracao),transform var(--duracao)}
.navegacao a:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}

/* Menu mobile (hambúrguer) */
.btn-hamburguer{display:none;background:none;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:.5rem}
.hamburguer__barra{display:block;width:22px;height:2px;background:#e6eef7;margin:4px 0;border-radius:2px}

/* CTA header e botões gerais */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--raio);padding:.8rem 1rem;cursor:pointer;transition:transform var(--duracao),box-shadow var(--duracao),background var(--duracao)}
.btn--primario{background:linear-gradient(135deg,var(--cor-primaria),var(--cor-secundaria));color:#0b1220;font-weight:700;box-shadow:0 6px 24px rgba(0,229,255,.2)}
.btn--primario:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(61,242,155,.22)}
.btn--secundario{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}

/* Toggle tema */
.btn-toggle-tema{margin-left:.5rem;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);border-radius:12px;padding:.55rem .7rem}
.icone-tema{filter:drop-shadow(0 0 6px rgba(0,229,255,.45))}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem 1rem;z-index:1001;border-radius:10px}

/* Hero */
.hero{padding:clamp(64px,12vh,160px) 0;background:radial-gradient(1200px 600px at 20% 10%, rgba(0,229,255,.08), transparent),var(--gradiente)}
.hero__grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.hero__subtitulo{color:var(--cor-texto-medio)}
.hero__diferenciais{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;margin:1rem 0}
.hero__selos{display:flex;gap:.5rem;flex-wrap:wrap}
.selo{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:.4rem .6rem;border-radius:999px;font-size:.9rem}

/* Serviços */
.cards-servicos{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
.card-servico{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:1rem;border-radius:var(--raio-2xl);box-shadow:0 10px 24px var(--cor-sombra);transition:transform var(--duracao),box-shadow var(--duracao)}
.card-servico:hover{transform:translateY(-2px);box-shadow:0 16px 32px var(--cor-sombra)}
.card-servico__icone svg{width:36px;height:36px;fill:var(--cor-primaria)}

/* Sobre */
.sobre__grid{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center}

/* Carrossel */
.carrossel{position:relative;overflow:hidden;border-radius:var(--raio-2xl);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.carrossel__lista{display:flex;scroll-behavior:smooth;overflow-x:auto;gap:1rem;padding:1rem;scroll-snap-type:x mandatory}
.carrossel__item{min-width:80%;scroll-snap-align:center;background:rgba(255,255,255,.06);border-radius:var(--raio);padding:1rem}
.carrossel__controle{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50%;width:40px;height:40px;cursor:pointer}
.carrossel__controle--prev{left:.5rem}
.carrossel__controle--next{right:.5rem}

/* Galeria */
.galeria-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}
.galeria-item img{aspect-ratio:4/3;object-fit:cover}

/* Atendemos */
.atendemos__grid{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center}
.mapa-ilustrativo img{border-radius:var(--raio-2xl)}

/* Formulário */
.grid-formulario{display:grid;grid-template-columns:1fr;gap:1rem}
.campo-form label{display:block;margin-bottom:.25rem}
.campo-form input,.campo-form select,.campo-form textarea{width:100%;padding:.75rem;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:inherit}
.campo--largura-total{grid-column:1 / -1}
.campo--check{display:flex;align-items:center;gap:.5rem}
.erro{display:block;color:#ff6b6b;font-size:.9rem;min-height:1.2em;margin-top:.25rem}

/* Contato */
.contato__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contato-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:1rem;border-radius:var(--raio-2xl)}

/* Rodapé */
.rodape{border-top:1px solid rgba(255,255,255,.08);margin-top:2rem;padding:2rem 0;color:var(--cor-texto-medio)}
.rodape__conteudo{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}

/* WhatsApp flutuante com animação de pulso */
.whatsapp-flutuante{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--cor-secundaria),var(--cor-primaria));box-shadow:0 12px 28px rgba(0,229,255,.28);animation:pulso 2.8s infinite ease-in-out}
.whatsapp-flutuante svg{width:28px;height:28px;fill:#0b1220}
@keyframes pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Seções */
.secao{padding:64px 0}
.secao h2{margin:0 0 .5rem}
.grupo-ctas{display:flex;flex-wrap:wrap;gap:.75rem}

/* Animação de revelar com IntersectionObserver */
.revelar{opacity:0;transform:translateY(12px);transition:opacity var(--duracao) ease,transform var(--duracao) ease}
.revelar--visivel{opacity:1;transform:none}

/* Breakpoints mobile-first */
@media (min-width:360px){
  .carrossel__item{min-width:70%}
}
@media (min-width:768px){
  .hero__grid{grid-template-columns:1.1fr .9fr}
  .cards-servicos{grid-template-columns:repeat(2,1fr)}
  .sobre__grid{grid-template-columns:1fr 1fr}
  .galeria-grid{grid-template-columns:repeat(3,1fr)}
  .grid-formulario{grid-template-columns:repeat(2,1fr)}
  .contato__grid{grid-template-columns:repeat(4,1fr)}
  .carrossel__item{min-width:50%}
  .btn-hamburguer{display:inline-flex}
  .navegacao{position:fixed;inset:var(--altura-header) 0 auto 0;transform:translateY(-120%);transition:transform var(--duracao);background:rgba(11,18,32,.96);border-bottom:1px solid rgba(255,255,255,.08);padding:1rem}
  .navegacao--aberta{transform:translateY(0)}
}
@media (min-width:1024px){
  .cards-servicos{grid-template-columns:repeat(4,1fr)}
  .galeria-grid{grid-template-columns:repeat(4,1fr)}
  .carrossel__item{min-width:40%}
  .navegacao{position:static;transform:none;background:transparent;border:none;padding:0}
  .btn-hamburguer{display:none}
}
@media (min-width:1440px){
  .container{max-width:1320px}
}


/* menu */

/* 🔹 Submenu de cidades */
.submenu {
  position: relative;
}

.submenu > a {
  cursor: pointer;
}

.submenu__lista {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #111;
  border-radius: 6px;
  padding: 0.5rem 0;
  list-style: none;
  min-width: 200px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  z-index: 1000;
}

.submenu__lista li {
  margin: 0;
}

.submenu__lista a {
  display: block;
  padding: 0.6rem 1rem;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
}

.submenu__lista a:hover {
  background-color: #25D366;
  color: #111;
}

/* Exibir submenu ao passar o mouse */
.submenu:hover > .submenu__lista,
.submenu:focus-within > .submenu__lista {
  display: block;
}