/* =========================================================
   DNA DISTRIBUIDORA - versão corrigida
   Mantém a arte exatamente como enviada, centralizada
   e com áreas clicáveis funcionais.
   ========================================================= */

:root {
  --dna-max-width: 1086px;
}

html,
body {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Força a página a ocupar TODA a largura disponível.
   Isso evita o deslocamento para a esquerda em hospedagens
   que aplicam estilos padrão ao documento. */
.dna-page {
  display: block;
  width: 100vw;
  max-width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: #ffffff;
  overflow: visible;
}

/* Centralização real do layout */
.dna-canvas {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--dna-max-width);
  aspect-ratio: 1086 / 1448;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  isolation: isolate;
}

/* A imagem não recebe cliques.
   Assim, todas as áreas transparentes sobre ela permanecem clicáveis. */
.dna-layout-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  object-fit: fill;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none !important;
}

/* Áreas clicáveis */
.dna-hotspot {
  position: absolute;
  z-index: 999;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 106, 0, 0);
  cursor: pointer;
  pointer-events: auto !important;
  touch-action: manipulation;
}

/* Em foco por teclado, deixa visível onde está o clique
   sem alterar o visual normal da página. */
.dna-hotspot:focus-visible {
  outline: 3px solid #ff6a00;
  outline-offset: 2px;
  border-radius: 8px;
}

/* MENU
   Coordenadas relativas à arte 1086 x 1448 */
.dna-nav-inicio {
  left: 39.4%;
  top: 2.45%;
  width: 8.2%;
  height: 4.7%;
}

.dna-nav-sobre {
  left: 47.0%;
  top: 2.45%;
  width: 7.3%;
  height: 4.7%;
}

.dna-nav-segmentos {
  left: 54.2%;
  top: 2.45%;
  width: 11.0%;
  height: 4.7%;
}

.dna-nav-contato {
  left: 65.1%;
  top: 2.45%;
  width: 8.1%;
  height: 4.7%;
}

/* Botão laranja "Fale Conosco" */
.dna-btn-fale {
  left: 75.6%;
  top: 2.15%;
  width: 18.5%;
  height: 5.35%;
  border-radius: 999px;
}

/* Rodapé */
.dna-footer-email {
  left: 35.2%;
  top: 93.4%;
  width: 36.8%;
  height: 4.8%;
}

.dna-footer-phone {
  left: 72.4%;
  top: 93.4%;
  width: 23.0%;
  height: 4.8%;
}

/* Desktop muito largo: continua centralizado */
@media (min-width: 1087px) {
  .dna-canvas {
    width: var(--dna-max-width);
  }
}

/* Tablet e celular: a arte reduz proporcionalmente */
@media (max-width: 1086px) {
  .dna-canvas {
    width: 100%;
    max-width: 100%;
  }
}

/* Em telas extremamente estreitas, mantém o clique fácil */
@media (max-width: 480px) {
  .dna-nav-inicio,
  .dna-nav-sobre,
  .dna-nav-segmentos,
  .dna-nav-contato,
  .dna-btn-fale {
    min-height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}