/*
 * BELLA FLÔ DECOR — AJUSTES E PERSONALIZAÇÃO
 * Edite este arquivo para mudar aparência ou adicionar regras do projeto.
 * A base completa, formatada e não minificada está em css/estilos.css.
 */
:root {
  --cor-dourado: #c9a961;
  --cor-texto: #262626;
  --cor-fundo-claro: #fafafa;
  --altura-cabecalho: 112px;
}

/* Âncoras dentro da página não ficam encobertas pelo cabeçalho fixo. */
html { scroll-behavior: smooth; scroll-padding-top: var(--altura-cabecalho); }
body { color: var(--cor-texto); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cor-dourado); outline-offset: 4px; }

/* Cabeçalho em páginas roladas. */
#cabecalho { will-change: box-shadow; }
#cabecalho.is-scrolled { box-shadow: 0 3px 22px rgb(0 0 0 / 8%); padding-top: 8px; padding-bottom: 8px; }

/* Menu móvel: aberto/fechado por js/site.js e navegável pelo teclado. */
.menu-mobile { visibility: hidden; max-height: 0; opacity: 0; pointer-events: none; }
.menu-mobile.is-open { visibility: visible; max-height: 480px !important; opacity: 1 !important; margin-top: 16px !important; padding-top: 16px !important; pointer-events: auto; }

/* Slider principal: os três banners permanecem totalmente editáveis no HTML. */
[data-carousel="hero"] .slide-principal { opacity: 0; z-index: 0; pointer-events: none; transition: opacity .6s ease; }
[data-carousel="hero"] .slide-principal.is-active { opacity: 1; z-index: 10; pointer-events: auto; }
[data-carousel="hero"] .slider-dot { background: #ddd; }
[data-carousel="hero"] .slider-dot.is-active,
[data-carousel="hero"] .slider-dot.active { background: var(--cor-dourado); }

/* Galeria de fotos da loja — evite saltos de layout entre slides. */
[data-carousel="galeria"] .galeria-slide { opacity: 0; pointer-events: none; z-index: 0; transition: opacity .5s ease; }
[data-carousel="galeria"] .galeria-slide.is-active { opacity: 1; pointer-events: auto; z-index: 10; }
[data-carousel="galeria"] .galeria-slide img { display: block; width: 100%; aspect-ratio: 800 / 450; object-fit: cover; }
[data-carousel="galeria"] [data-slide-for="galeria"].is-active { width: 32px; background-color: var(--cor-dourado); }
[data-carousel="galeria"] [data-slide-for="galeria"]:not(.is-active) { width: 8px; background-color: rgb(255 255 255 / 70%); }

/* Indicadores dos depoimentos. */
[data-carousel="depoimentos"] [data-slide-for="depoimentos"].is-active { width: 24px; background-color: var(--cor-dourado); }
[data-carousel="depoimentos"] [data-slide-for="depoimentos"]:not(.is-active) { width: 8px; background-color: #d1d5db; }

/* Pré-visualização local dos produtos. */
.produto-modal { width: min(92vw, 540px); max-height: 92dvh; overflow-y: auto; border: 0; border-radius: 8px; padding: 30px; background: white; box-shadow: 0 20px 90px rgb(0 0 0 / 30%); margin: auto; }
.produto-modal::backdrop { background: rgb(0 0 0 / 75%); }
.produto-modal figure { margin: 0 0 24px; }
.produto-modal figure img { width: 100%; height: auto; max-height: 58dvh; object-fit: contain; }
.produto-modal figcaption { font-size: 1.3rem; font-family: Georgia, serif; text-align: center; color: var(--cor-texto); margin: 16px 0; }
.produto-modal .btn-gold { text-align: center; display: block; }
.produto-modal-fechar { position: absolute; right: 14px; top: 10px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ddd; border-radius: 100%; color: #333; background: white; font-size: 26px; cursor: pointer; }
.produto-modal-fechar:hover { background: #eee; }

/* Mapa fornecido como ilustração 100% local, não incorporado por API externa. */
.mapa-ilustrativo { width: 100%; height: 400px; object-fit: cover; display: block; background: #f5f1ea; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}