:root {
  --cor-primaria: #0a2a43;
  --cor-secundaria: #07eb07;
  --cor-texto: #333;
  --cor-fundo: #ffffff;

  --header-height: 72px; /* ajusta conforme seu layout */
  --container-max: 1200px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-6: 6px;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-2: 0 4px 10px rgba(0,0,0,0.08);
}



/* HEADER */
.header {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #eee;
  z-index: 1000;
  box-shadow: var(--shadow-1);
}

/* CONTAINER PADRÃO */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* LOGO */
.logo img {
  height: 140px; /* reduzido um pouco para header */
  width: auto;
  display: block;
}



/* LISTA */
.nav-list {
  display: flex;
  list-style: none;
  gap: var(--space-6);
}

/* LINKS do menu */
.nav-list a {
  text-decoration: none;
  color: var(--cor-texto);
  font-weight: 500;
  position: relative;
  padding-bottom: 4px; /* espaço para underline animado */
}

/* ANIMAÇÃO UNDERLINE */
.nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: var(--cor-secundaria);
  transition: width 200ms ease;
}
.nav-list a:hover::after,
.nav-list a:focus-visible::after,
.nav-list a[aria-current="page"]::after {
  width: 100%;
}

/* BOTÃO CTA */
.btn-cta {
  background: var(--cor-secundaria);
  color: #ffffff;
  padding: 0.6rem 1rem;
  border-radius: 15px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--shadow-1);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.btn-cta:active {
  transform: translateY(0);
}

/* BOTÃO MOBILE */
.menu-toggle {
  display: none;
  font-size: 1.6rem;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}

/* SEÇÕES (espacamento responsivo) */
.section {
  /* padding horizontal adaptável: entre 1rem e 4rem */
  padding: 4rem clamp(1rem, 5vw, 4rem);
  max-width: var(--container-max);
  margin: 0 auto;
  font-style: oblique;
  color: #ffffff;
  font-size: 19px;
  text-align: center;
}



/* RESPONSIVO */
@media (max-width: 1024px) {
  .logo img { height: 96px; }
}

@media (max-width: 768px) {
  /* Header: reorganiza para mobile-first */
  .container {
    gap: var(--space-4);
  }

  .logo img { height: 72px; }

  /* Oculta lista inicialmente e mostra com toggle */
  .nav {
    flex: 1 1 auto;
    justify-content: flex-end;
    position: relative;
  }

  .nav-list {
    position: absolute;
    top: calc(var(--header-height));
    right: 0;
    left: 0;
    background: #fff;
    flex-direction: column;
    width: 100%;
    padding: var(--space-4);
    display: none;
    border-bottom: 1px solid #eee;
    box-shadow: var(--shadow-2);
  }

  /* Classe padronizada para abertura */
  .nav-list.is-open {
    display: flex;
  }

  .btn-cta {
    display: none; /* se quiser mostrar, mova para dentro do menu mobile */
  }

  .menu-toggle {
    display: block;
  }

  
}



html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-color);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.5;
}


/* Imagem de fundo com efeito de zoom */
.card img {
 width: 100%;
 height: auto;
 animation: zoomSuave 10s ease-in-out infinite;
 }
@keyframes zoomSuave {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

 .footer{
  background: #111;
  color: #fff;
  padding: 50px 8% 20px;
   }

 

 .footer h3 .footer h4 {
  color: #0f172a
  
 }

 .footer p {
  font-size: 12px;
  line-height: 1.6;
 }

.btn-whats {
  display: inline-block;
  margin-top: 15px;
  padding: 8px 10px;
  background: #25d366;
  color: #fff;
  border-radius: 15px;
  text-decoration: none;
  transition: 0.3s;
  }

  .btn-whats:hover{
    background: #07eb07;
  }

/* Container do footer em grid */
.footer-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas no desktop */
  gap: 20px;
}

/* Mapa (iframe) com cantos arredondados e responsivo */
.footer-col iframe {
  width: 100%;
  height: 250px;      /* ajuste conforme seu layout */
  border: 0;
  border-radius: 20px;
}

/* Mobile */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr; /* 1 coluna no mobile */
  }

  .footer-col iframe {
    height: 220px; /* altura um pouco menor no mobile */
  }
}

/* Footer geral */
.footer {
  display: grid;          /* para usar justify-items */
  justify-items: center;  /* centraliza o conteúdo de cada célula */
  text-align: center;
  padding: 20px 0;
  /* opcional:
  background-color: #f8f8f8;
  */
}



.social i {
  color: #d50446;            /* ícone também branco */
  margin-right: 6px;
}





.footer-col.map iframe {
  width: 520px;     /* defina a largura desejada */
  max-width: 100%;  /* não ultrapassa a largura do container */
  height: 220px;    /* ajuste conforme necessário */
  display: block;
  margin: 0 auto;   /* centraliza */
  border: 0;
  border-radius: 20px;
  margin-top: 80px; /* empurra toda a coluna para baixo */
  
  }
  

.footer-bottom {
  border-top: 1px solid #ddd;   /* barra em cima */
  padding: 14px 0;              /* espaço interno */
  margin-top: 48px;             /* desce em relação ao conteúdo acima */
  text-align: center;
  color: #333;
  /* opcional:
  background-color: #fafafa;    /* leve contraste */
  */
}


/* Desktop / padrão */
.footer-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas no desktop */
  gap: 40px; /* separação maior entre as colunas */
}

/* Mobile */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr; /* 1 coluna no mobile */
    gap: 20px; /* espaçamento vertical entre as seções */
  }
} /* <-- esta chave é ESSENCIAL para fechar a media query */




.title-horario,
.title-contato,
.title-endereco {
  color: #fff;                        /* branco para todos */
  font-family: 'Arial', sans-serif;   /* ou outra fonte */
  font-size: 1.4rem;                  /* ajuste conforme necessário */
  font-weight: bold;                  /* negrito */
  text-transform: uppercase;          /* opcional: tudo em maiúsculas */
  margin-bottom: 8px;                 /* espaçamento abaixo */
  transition: text-shadow 200ms ease, transform 200ms ease;
}

.title-horario:hover,
.title-contato:hover,
.title-endereco:hover {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* brilho branco suave */
  transform: scale(1.1);
}




#home h1:hover {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.9); /* brilho mais forte */
  transform: translateY(-2px);                    /* efeito de "levantar" */
}
#home p:hover {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.9); /* brilho mais forte */
  transform: translateY(-2px);                    /* efeito de "levantar" */
  
}



.btn-cta:hover {
  background-color: #d0ff00;       /* tom mais escuro no hover */
  transform: scale(1.25);          /* leve aumento no hover */
}



.email-link {
  color: #fff;                 /* texto branco */
  text-decoration: none;       /* remove sublinhado */
  font-weight: bold;
  display: inline-flex;        /* alinha ícone e texto */
  align-items: center;
  gap: 6px;                    /* espaço entre ícone e texto */
  transition: text-shadow 200ms ease, color 200ms ease;
}

.email-link:hover {
  color: #fff; /* mantém branco */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.85); /* brilho branco */
}

.email-link i {
  color: #fff;                 /* ícone branco */
  font-size: 1.2rem;
  transition: filter 200ms ease;
}

.email-link:hover i {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)); /* brilho no ícone */
}


.social a {
  color: #fff;            /* cor branca para o texto */
  text-decoration: none;  /* remove sublinhado */
  font-weight: bold;          /* opcional para destaque */
  display: inline-flex;       /* alinha ícone e texto */
  align-items: center;
  gap: 6px;                   /* espaço entre ícone e texto */
  transition: color 0.3s ease;
}


.social a:hover {
  color: #fff;                 /* mantém branco no hover */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* brilho branco */
}


.phone-link {
  color: #fff;                 /* texto branco */
  text-decoration: none;
  font-weight: bold;
  transition: text-shadow 0.3s ease;
}

.phone-link:hover {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* brilho branco */
}


.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  text-decoration: none;
  background-color: #222;
  color: #fff; /* cor dos ícones */
  transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}

.btn-nav:hover,
.btn-nav:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(255,255,255,0.15);
}

.btn-nav i {
  font-size: 22px;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0)); /* sem brilho padrão */
  transition: filter 200ms ease;
}

.btn-nav:hover i,
.btn-nav:focus-visible i {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.85)); /* brilho branco no hover */
}

/* Cores de marca (opcional) */
.btn-nav.waze { background-color: #2D9BF0; }
.btn-nav.gmaps { background: linear-gradient(45deg, #34A853, #1A73E8); }

/* Mobile */
@media (max-width: 768px) {
  .btn-nav { width: 48px; height: 48px; }
  .btn-nav i { font-size: 24px; }
}


@media (max-width: 768px) {
  nav,
  .menu,
  .navbar {
    background-color: #ffffff; /* fundo claro */
    color: #222;              /* texto escuro */
  }

  .navbar a {
    color: #222;              /* links escuros */
  }

  .navbar a:hover {
    color: #b90000;           /* cor de destaque no hover */
  }
}


@media (prefers-color-scheme: dark) {
  nav,
  .menu,
  .navbar {
    background-color: #ffffff !important;
    color: #222 !important;
  }
  .navbar a {
    color: #222 !important;
  }
}


/*--------hamburguer--------------*/



/* Mobile: centralizar o menu quando ativo */
@media (max-width: 768px) {
  .nav .nav-list {
    display: none; /* escondido por padrão */
  }

  .nav .nav-list.active {
    display: block;
    position: fixed;              /* vira overlay */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* centraliza nos dois eixos */
    width: 90vw;                  /* largura responsiva */
    max-width: 380px;             /* limite para não ficar enorme */
    background: #fff;             /* fundo claro para legibilidade */
    color: #222;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    z-index: 9999;
    text-align: center;           /* centraliza os itens */
  }

  .nav .nav-list.active li {
    margin: 10px 0;               /* espaçamento entre itens */
    list-style: none;
  }

  .nav .nav-list.active a {
    display: inline-block;        /* melhor alinhamento central */
    color: #222;
    font-size: 1.05rem;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 200ms ease, color 200ms ease;
  }

  .nav .nav-list.active a:hover,
  .nav .nav-list.active a:focus-visible {
    background: #f2f2f2;
    color: #b90000;               /* sua cor de destaque */
  }

  /* Botão hambúrguer aparece no mobile */
  .menu-toggle {
    display: inline-block;
  }
}

/* Opcional: esconder o hambúrguer no desktop */
@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }
}

/*---------deixa o ctalist invisivel no caso o botão do whatsapp e ativa no hamburguer-------------*/
  

/* Oculta o CTA sempre */
.nav .nav-list .nav-ctalist {
  display: none;
}

/* Exibe quando o menu estiver ativo (hambúrguer clicado) */
.nav .nav-list.active .nav-ctalist {
  display: block;
}




/* ---------- Dark mode opcional ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page: #0f172a;
    --bg-soft: #0b1222;
    --text-color: #e5e7eb;
    --text-muted: #9ca3af;
    --border-color: #1f2a3c;
    --shadow-s: 0 1px 3px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.5);
    --shadow-m: 0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.45);
  }
   
}






/* ===== Sessão de Contato (escopo limitado) ===== */


.mf-contact {
  padding: 40px 20px;
  color: #080808; /* cinza-900 */

}

.mf-contact .mf-container {
  max-width: 1100px;
  margin: 0 auto;
}

.mf-contact .mf-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* esquerda > direita */
  gap: 24px;
  align-items: start;
}

@media (max-width: 992px) {
  .mf-contact .mf-grid {
    grid-template-columns: 1fr; /* empilha no mobile */
  }
}

/* Coluna esquerda */
.mf-contact .mf-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mf-contact .mf-title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  margin: 0;
  color: white;
}

.mf-contact .mf-card {
  background: #f9fafb;            /* cinza-50 */
  border: 1px solid #e5e7eb;       /* cinza-200 */
  border-radius: 14px;
  padding: 18px 16px;
}

.mf-contact .mf-city {
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 700;
  margin: 0 0 8px;
}

.mf-contact .mf-address {
  margin: 0 0 14px;
}

.mf-contact .mf-address-line {
  margin: 2px 0;
  font-size: 15px;
}

.mf-contact .mf-divider {
  border: none;
  border-top: 1px dashed #e5e7eb;
  margin: 14px 0;
}

/* Lista de contatos */
.mf-contact .mf-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.mf-contact .mf-contact-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.mf-contact .mf-label {
  font-weight: 600;
  color: #111827;
}

.mf-contact .mf-link {
  color: #0ea5e9;
  text-decoration: none;
}
.mf-contact .mf-link:hover,
.mf-contact .mf-link:focus-visible {
  color: #0284c7;
  text-decoration: underline;
  outline: none;
}

/* Chips (telefone e Instagram lado a lado) */
.mf-contact .mf-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.mf-contact .mf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #1f2937;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.08s ease, border-color 0.2s ease;
}
.mf-contact .mf-chip:hover {
  background: #f3f4f6; /* cinza-100 */
  border-color: #d1d5db; /* cinza-300 */
  transform: translateY(-1px);
}
.mf-contact .mf-chip:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}
.mf-contact .mf-icon {
  font-size: 16px;
  line-height: 1;
}
.mf-contact .mf-chip-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

/* Texto e botão */
.mf-contact .mf-subtitle {
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 700;
  margin: 8px 0 0;
  color: white;
}
.mf-contact .mf-text {
  font-size: 15px;
  color: #6b7280; /* cinza-500 */
  margin: 4px 0 10px;
}

.mf-contact .mf-btn {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background 0.2s ease, transform 0.08s ease, box-shadow 0.2s ease;
}
.mf-contact .mf-btn--primary {
  background: #0ea5e9;
  color: #fff;
}
.mf-contact .mf-btn--primary:hover,
.mf-contact .mf-btn--primary:focus-visible {
  background: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.22);
}

/* Coluna direita (mapa) */
.mf-contact .mf-map {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px;
}
.mf-contact .mf-map-frame {
  width: 100%;
  min-height: 340px;
  border: 0;
  border-radius: 8px;
}

@media (max-width: 480px) {
  .mf-contact .mf-map-frame {
    min-height: 280px;
  }
}

/* Utilitário opcional (caso precise esconder textos) */
.mf-contact .visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* EStilização do menu de lojas */

  /* Grid */
  .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  @media (max-width: 980px){ .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .grid { grid-template-columns: 1fr; } }

  /* Cartões - fundo da imagem */
  .card { background: #13122e; border: 1px solid #13122e; border-radius: 14px; padding: 12px; }
  .card-media { height: 120px; border-radius: 10px; background: #eef6ff; border: 1px dashed #cfe8ff;
                display:flex; align-items:center; justify-content:center; color:#0284c7; font-size: 13px; }
  .card-title { font-size: 16px; margin: 10px 0 6px; }
  .card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

  /* Botões */
  .btn { display: inline-block; padding: 8px 12px; border-radius: 10px; border: 1px solid #e5e7eb;
         background: #fff; color: #111827; font-weight: 600; text-decoration: none;
         transition: background .2s ease, transform .08s ease; }
  .btn:hover { background: #f3f4f6; transform: translateY(-1px); }
  .btn-primary { background: #0ea5e9; color: #fff; border-color: transparent; }
  .btn-primary:hover { background: #0284c7; }
  .btn-qty { padding: 6px 10px; }

  .qty-wrap { display: inline-flex; align-items: center; gap: 6px; }
  .qty-input { width: 68px; padding: 6px; border: 1px solid #e5e7eb; border-radius: 8px; }

  /* Barra de cotação */
  .quote-bar { position: sticky; bottom: 12px; display:flex; justify-content: space-between; align-items: center;
               gap: 10px; background:#fff; border:1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px;
               margin-top: 16px; }
  .quote-summary { color:#111827; font-weight: 600; }
  .btn-whatsapp { background: #25D366; color: #fff; border-color: transparent; }
  .btn-whatsapp:hover { background: #1ebe57; }



/* ===== Página "Quem Somos" - Sócio Proprietário ===== */

/* Tipografia elegante para o texto "sobre" */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap');


.sobre {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #fff;
  text-align: right;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);

  /* respiro nas laterais */
  padding: 0.5rem 1rem;   /* topo/baixo 0.5rem, lados 1rem */
  box-sizing: border-box;
}


/* Layout lado a lado: imagem + texto */
.perfil-wrapper {
  display: flex;
  align-items: flex-start; /* topo alinhado */
  gap: 1.5rem;
  /* --- Ative o fundo escuro se precisar de contraste para o texto branco --- */
  /* background: #0b2b40;       */
  /* padding: 1rem;             */
  /* border-radius: 8px;        */
}

/* Figure ao lado do texto */
.fig-centered {
  display: inline-block; /* mantém comportamentos de figure */
  margin: 0;             /* sem auto-centro quando em flex */
  text-align: center;    /* legenda centralizada */
  flex: 0 0 320px;       /* largura reservada para a coluna da imagem */
}


figcaption {
  color: #fff; /* branco */
  font-style: italic;
  font-size: 1.1rem;
}


/* Imagem com transições e brilho suave */
.img-brilho {
  display: block;
  width: 100%;
  max-width: 300px;     /* respeita sua largura desejada */
  height: auto;
  margin: 0 auto;
  transition: filter 0.6s ease, transform 0.6s ease;
  filter: brightness(1);
  will-change: filter, transform;
}

.img-brilho:hover {
  filter: brightness(1.15) saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}

/* Acessibilidade: menos movimento para quem prefere */
@media (prefers-reduced-motion: reduce) {
  .img-brilho {
    transition: none;
    transform: none;
  }
}

/* Responsividade: empilha no mobile e centraliza o texto */
@media (max-width: 860px) {
  .perfil-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .fig-centered {
    flex: 0 1 auto;
    width: 100%;
    max-width: 480px;   /* opcional: imagem maior no mobile */
  }
  .sobre {
    text-align: center; /* melhor leitura no mobile */
    margin-top: 0.75rem;
    width: 100%;
  }
}

/* Título do sócio (opcional, caso queira um ajuste visual) */


/* Título do sócio: fluido e responsivo */
.socio {
  /* Tamanho da fonte se adapta: mínimo 1.2rem, ideal 2.2rem, máximo 2.6rem */
  font-size: clamp(1.2rem, 2.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;

  /* Empurra para a direita e para baixo em telas médias/grandes */
  /* topo | direita | baixo | esquerda */
  margin: 2.5rem env(safe-area-inset-right) 1rem clamp(1rem, 5vw, 3rem);

  /* Caso tenha um fundo atrás e precise de respiro adicional */
  /* padding-right: 0.5rem; */
}

/* ====== Breakpoints ====== */

/* Tablets e desktops pequenos */
@media (max-width: 1024px) {
  .socio {
    /* Menos deslocamento lateral em telas menores */
    margin: 2rem env(safe-area-inset-right) 0.75rem clamp(0.75rem, 4vw, 2rem);
    font-size: clamp(1.2rem, 3vw, 2.4rem);
  }
}

/* Mobile (smartphones) */
@media (max-width: 768px) {
  .socio {
    /* No mobile, normalmente é melhor centralizar ou reduzir o deslocamento */
    text-align: center;  /* opcional: remova se quiser manter alinhado à esquerda */
    margin: 1.25rem env(safe-area-inset-right) 0.5rem env(safe-area-inset-left);
    font-size: clamp(1.1rem, 4.5vw, 2rem);
    line-height: 1.3;
  }
}

/* Mobile muito pequeno (<= 360px de largura) */
@media (max-width: 360px) {
  .socio {
    margin: 1rem env(safe-area-inset-right) 0.5rem env(safe-area-inset-left);
    font-size: clamp(1rem, 5vw, 1.8rem);
  }
}


.sobre {


  /* transição suave */
  transition: transform 0.25s ease, text-shadow 0.25s ease, color 0.25s ease;
  transform-origin: right center; /* expande “para o lado” certo */
}

.sobre:hover {
  transform: scale(1.04); /* fica um pouco maior */
  color: #ffffff;         /* mantém branco puro */
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7); /* mais destaque */
  

  /* brilho mais suave */
  text-shadow:
    0 0 4px rgba(255,255,255,0.8),
    0 0 8px rgba(255,255,255,0.5),
    0 0 12px rgba(255,255,255,0.3),
    1px 1px 3px rgba(0,0,0,0.4); /* leve contraste */
  transform: scale(1.02); /* menor aumento */


}

/* Acessibilidade: reduzir movimento para quem prefere */
@media (prefers-reduced-motion: reduce) {
  .sobre {
    transition: color 0.25s ease, text-shadow 0.25s ease;
    transform: none;
  }
}

/* BLOQUEAR DARK MODE DO SISTEMA SEM REMOVER TEU CÓDIGO */
:root {
  color-scheme: light;
}

.hero-logo {
  width: 280px;
  height: auto;

  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8))
          drop-shadow(0 0 25px rgb(254, 254, 254));

  transition: transform 0.3s ease, filter 0.3s ease;
  will-change: transform;
}

/* Zoom ao passar o mouse */
.hero-logo:hover {
  transform: scale(1.08);
}
.float {
  position: fixed;
  width: 60px;
  height: 60px;
  right: 20px;
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  z-index: 999;
}

/* WhatsApp */
.whatsapp {
  bottom: 90px;
  background: #25D366;
  animation: pulse 1.5s infinite;
}

/* Ligação */
.call {
  bottom: 20px;
  background: #007BFF;
  animation: pulse 1.8s infinite;
}

/* 🔥 efeito pulsar (chamando atenção) */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* hover */
.float:hover {
  transform: scale(1.15);
  transition: 0.2s;
}
/* scroll suave */
html {
  scroll-behavior: smooth;
}

/* TÍTULO */
.services-title {
  text-align: center;
  font-size: 2.2rem;
  color: #fff;
  margin: 30px 0;
  font-weight: bold;
}

/* ACCORDION */
.accordion {
  max-width: 800px;
  margin: auto;
}

/* ITEM */
.accordion-item {
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  transition: 0.3s;
}

.accordion-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* HEADER */
.accordion-header {
  width: 100%;
  background: #1975d2;
  color: #fff;
  border: none;
  padding: 14px;

  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 1rem;
  cursor: pointer;
  position: relative;
}

/* efeito brilho */
.accordion-header::before {
  content: "";
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: 0.5s;
}

.accordion-header:hover::before {
  left: 100%;
}

/* seta */
.arrow {
  margin-left: auto;
  transition: 0.3s;
}

.accordion-item.active .arrow {
  transform: rotate(180deg);
}

/* CONTEÚDO */
.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.4s ease;
  background: #f8fafc;
}

/* layout interno */
.service-content {
  display: flex;
  gap: 20px;
  padding: 15px;
}

/* texto */
.service-text {
  flex: 1;
  color: #0a2a43;
}

/* imagem */
.service-image {
  flex: 1;
}

.service-image img {
  width: 100%;
  border-radius: 10px;
  transition: 0.3s;
}

.service-image img:hover {
  transform: scale(1.05);
}

/* RESPONSIVO */
@media (max-width: 768px) {
  .service-content {
    flex-direction: column;
  }
}
.btn-loja {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 16px;
  background: #07eb07;
  color: #000;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;

  transition: all 0.25s ease;
}

.btn-loja:hover {
  background: #00c400;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

.product-media {
  position: relative;
  height: 160px;
  border-radius: 14px;
  overflow: hidden;

  /* fundo moderno */
  background: linear-gradient(145deg, #f8fafc, #e2e8f0);

  /* borda e sombra profissional */
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* imagem */
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 🔥 preenche toda a caixa */
  transition: transform 0.4s ease;
}

/* hover no card inteiro */
.card:hover .product-media {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* zoom da imagem */
.card:hover .product-media img {
  transform: scale(1.1);
}
.card.selected {
  opacity: 0.5;
  filter: grayscale(1);
  transition: 0.2s;
}

.card button:disabled {
  background: #999;
  cursor: not-allowed;
}
.btn.selected {
  background: #9ca3af;
  color: #fff;
  opacity: 0.7;
  transform: scale(0.98);
}
.carousel-section {
  padding: 60px 20px;
  position: relative;
}

.carousel {
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  min-width: 100%;
  opacity: 0.5;
  transition: 0.4s;
}

.carousel-item.active {
  opacity: 1;
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.dot.active {
  background: #fff;
  transform: scale(1.2);
}

/* Clientes */
.clientes {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.clientes img {
  width: 120px;
  opacity: 0.8;
  transition: 0.3s;
}

.clientes img:hover {
  opacity: 1;
  transform: scale(1.1);
}

.h2-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin: 12px auto;
  padding: 10px 14px;

  background: #f5f5f5;
  border-radius: 10px;
  max-width: 520px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: 0.3s ease;
}

.h2-item:hover {
  transform: translateY(-2px);
  background: #eaeaea;
}

.h2-item i {
  font-size: 18px;
  color: #d60000; /* cor destaque da marca */
}

.h2-item h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: #1a1a1a;
}

/* ===== BLOQUEAR INVERÇÃO AUTOMÁTICA DO ANDROID ===== */

/* impede adaptação automática de tema do navegador */
:root {
  color-scheme: light;
}

/* garante que o navegador não “force” dark mode em inputs e UI */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* evita interferência em alguns browsers Android */
body {
  color-scheme: light;
}