/* ==========================================================================
   assets/css/style.css
   --------------------------------------------------------------------------
   Paleta institucional:
     - Off-white   (#F8F6F2) - fundo principal, sensação de leveza
     - Grafite      (#222222) - contraste, seções de autoridade
     - Dourado      (#C9A24B) - detalhes, CTAs, elementos de destaque
     - Champagne    (#E9DEC9) - apoio suave para fundos secundários
   ========================================================================== */

:root {
  --cor-off-white: #F8F6F2;
  --cor-grafite: #222222;
  --cor-grafite-claro: #3A3A3A;
  --cor-dourado: #C9A24B;
  --cor-dourado-escuro: #A9853A;
  --cor-champagne: #E9DEC9;

  --fonte-titulo: 'Playfair Display', serif;
  --fonte-corpo: 'Montserrat', sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--fonte-corpo);
  color: var(--cor-grafite);
  background-color: var(--cor-off-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-script {
  font-family: var(--fonte-titulo);
}

/* ---------------------------------------------------------------------- */
/* Utilitários de cor                                                      */
/* ---------------------------------------------------------------------- */
.text-dourado     { color: var(--cor-dourado) !important; }
.bg-off-white     { background-color: var(--cor-off-white) !important; }
.bg-grafite       { background-color: var(--cor-grafite) !important; }
.bg-dourado-suave { background-color: var(--cor-champagne) !important; }
.text-white-75    { color: rgba(255,255,255,.75) !important; }

.btn-dourado {
  background-color: var(--cor-dourado);
  border-color: var(--cor-dourado);
  color: #fff;
  font-weight: 500;
  letter-spacing: .03em;
  transition: all .25s ease;
}
.btn-dourado:hover {
  background-color: var(--cor-dourado-escuro);
  border-color: var(--cor-dourado-escuro);
  color: #fff;
}

.btn-grafite {
  background-color: var(--cor-grafite);
  border-color: var(--cor-grafite);
  color: #fff;
}
.btn-grafite:hover {
  background-color: #000;
  color: #fff;
}

.btn-outline-grafite {
  border: 1px solid var(--cor-grafite);
  color: var(--cor-grafite);
  background: transparent;
  font-weight: 500;
}
.btn-outline-grafite:hover {
  background-color: var(--cor-grafite);
  color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Navbar                                                                  */
/* ---------------------------------------------------------------------- */
.brand-script {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cor-grafite);
}
.navbar .nav-link {
  font-size: .9rem;
  font-weight: 500;
  color: var(--cor-grafite-claro);
  letter-spacing: .02em;
}
.navbar .nav-link:hover { color: var(--cor-dourado); }

/* ---------------------------------------------------------------------- */
/* Hero Section                                                            */
/* ---------------------------------------------------------------------- */
.hero-section {
  min-height: 90vh;
  margin-top: 106px;
  background:
    linear-gradient(180deg, rgba(34,34,34,.55), rgba(34,34,34,.65)),
    url('../img/hero-bg.jpg') center center / cover no-repeat;
  color: #fff;
}
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .8rem;
  color: var(--cor-dourado);
  font-weight: 600;
}
.hero-headline {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.25;
}
.hero-subheadline {
  font-size: 1.1rem;
  color: rgba(255,255,255,.85);
}

/* Botão flutuante do WhatsApp */
.whatsapp-flutuante {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 1050;
  transition: transform .2s ease;
}
.whatsapp-flutuante:hover {
  transform: scale(1.08);
  color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Títulos de seção (padrão reutilizado)                                   */
/* ---------------------------------------------------------------------- */
.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--cor-dourado-escuro);
  margin-bottom: .5rem;
}
.section-title {
  font-weight: 600;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
}

/* ---------------------------------------------------------------------- */
/* Seção "Sobre"                                                           */
/* ---------------------------------------------------------------------- */
.sobre-imagem-wrapper img { width: 100%; object-fit: cover; }
.sobre-lista-credenciais li {
  padding: .4rem 0;
  font-size: .95rem;
}

/* ---------------------------------------------------------------------- */
/* Cards de diferenciais                                                   */
/* ---------------------------------------------------------------------- */
.card-diferencial {
  background-color: rgba(255,255,255,.04);
  border: 1px solid rgba(201,162,75,.25);
  border-radius: 1rem;
  transition: transform .25s ease, border-color .25s ease;
}
.card-diferencial:hover {
  transform: translateY(-6px);
  border-color: var(--cor-dourado);
}

/* ---------------------------------------------------------------------- */
/* Cards de pacotes                                                         */
/* ---------------------------------------------------------------------- */
.card-pacote {
  border-radius: 1.25rem;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.card-pacote-destaque {
  background-color: var(--cor-grafite);
  color: #fff;
  transform: scale(1.02);
}
.pacote-lista li { padding: .35rem 0; font-size: .95rem; }

/* ---------------------------------------------------------------------- */
/* Cards de depoimentos                                                     */
/* ---------------------------------------------------------------------- */
.card-depoimento {
  border-radius: 1.25rem;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.card-depoimento p { font-size: .95rem; color: var(--cor-grafite-claro); }

/* ---------------------------------------------------------------------- */
/* Filtros do portfólio                                                    */
/* ---------------------------------------------------------------------- */
.btn-filtro {
  border: 1px solid var(--cor-grafite);
  background: transparent;
  color: var(--cor-grafite);
  padding: .5rem 1.4rem;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .03em;
  transition: all .25s ease;
}
.btn-filtro:hover { border-color: var(--cor-dourado); color: var(--cor-dourado-escuro); }
.btn-filtro.active {
  background-color: var(--cor-grafite);
  color: #fff;
  border-color: var(--cor-grafite);
}

/* Cards do portfólio + efeito de transição (controlado via JS) */
.item-portfolio {
  transition: opacity .35s ease, transform .35s ease;
}
.item-portfolio.fade-out {
  opacity: 0;
  transform: scale(.96);
}
.item-portfolio.oculto {
  display: none !important;
}

.card-portfolio {
  border-radius: 1rem;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  cursor: pointer;
}
.card-portfolio-imagem { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card-portfolio-imagem img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.card-portfolio:hover .card-portfolio-imagem img { transform: scale(1.06); }

/* Selo "Ver galeria" exibido sobre a imagem ao passar o mouse ou focar */
.overlay-ver-galeria {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,34,34,.55);
  color: #fff;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .03em;
  opacity: 0;
  transition: opacity .3s ease;
}
.card-portfolio:hover .overlay-ver-galeria,
.card-portfolio:focus-visible .overlay-ver-galeria {
  opacity: 1;
}

/* Grid de fotos exibido dentro do modal de galeria (página pública) */
.galeria-modal-grid img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: .5rem;
  cursor: zoom-in;
  transition: opacity .2s ease, transform .2s ease;
}
.galeria-modal-grid img:hover { opacity: .85; transform: scale(1.02); }

/* ---------------------------------------------------------------------- */
/* LIGHTBOX — visualização ampliada com navegação entre fotos             */
/* ---------------------------------------------------------------------- */
.lightbox-content {
  background-color: rgba(15, 15, 15, .97);
  border: none;
  height: 100vh;
}

.lightbox-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  flex-shrink: 0;
}

.lightbox-contador {
  color: rgba(255,255,255,.75);
  font-size: .85rem;
  letter-spacing: .05em;
}

.lightbox-botao-icone {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.lightbox-botao-icone:hover { background: rgba(255,255,255,.18); }
.lightbox-botao-icone.ativo {
  background-color: var(--cor-dourado);
  border-color: var(--cor-dourado);
}

.lightbox-palco {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
  padding: 0 4rem;
}

.lightbox-imagem {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: .25rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  user-select: none;
}

.lightbox-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
  z-index: 5;
}
.lightbox-seta:hover { background: rgba(255,255,255,.2); }
.lightbox-seta:active { transform: translateY(-50%) scale(.92); }
.lightbox-seta-esquerda { left: 1rem; }
.lightbox-seta-direita { right: 1rem; }

@media (max-width: 575.98px) {
  .lightbox-palco { padding: 0 1rem; }
  .lightbox-seta { width: 44px; height: 44px; font-size: 1.3rem; }
  .lightbox-seta-esquerda { left: .25rem; }
  .lightbox-seta-direita { right: .25rem; }
}

.badge-categoria {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: rgba(34,34,34,.85);
  color: var(--cor-dourado);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .3rem .7rem;
  border-radius: 50px;
}

/* ---------------------------------------------------------------------- */
/* Rodapé                                                                   */
/* ---------------------------------------------------------------------- */
.footer-link { color: rgba(255,255,255,.75); text-decoration: none; }
.footer-link:hover { color: var(--cor-dourado); }

/* ---------------------------------------------------------------------- */
/* Responsividade fina                                                     */
/* ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .card-pacote-destaque { transform: none; }
  .hero-section { min-height: 80vh; }
}