/* PATYGLAM - estilos customizados */

/* --- Cores do projeto --- */
:root {
  --pg-dark: #424242;
  --pg-dark-bg: #414040;
  --pg-gold: #BE904A;
  --pg-gold-light: #d4a85c;
  --pg-gold-dark: #9a6b35;
  --pg-gold-pale: #E3BF67;
  --pg-brown-dark: #6C4100;
  --pg-brown: #7E5D4F;
  --pg-border: #E3BF67;
  --pg-cream: #F5F3EF;
  --pg-black: #000000;
  /* Fontes do projeto */
  --font-display: 'Contralto Big', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Montserrat', sans-serif;
}

/* --- Navbar --- */
.navbar-patyglam {
  background: linear-gradient(135deg, var(--pg-gold-light) 0%, var(--pg-gold) 50%, var(--pg-gold-dark) 100%) !important;
}

/* --- Hero (#inicio) --- */
#inicio {
  position: relative;
  z-index: 2;
  min-height: 80vh;
  background-color: var(--pg-cream);
  background-image: url('../img/foto1.png');
  background-size: 45% 100%;
  background-position: left center;
  background-repeat: no-repeat;
}

/* Mobile: só o fundo, sem a imagem */
@media (max-width: 991.98px) {
  #inicio {
    background-image: none;
  }
}

/* Overlay para suavizar a divisão (lado direito da imagem) */
#inicio::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 28%,
    rgba(238, 234, 234, 0.75) 50%,
    var(--pg-cream) 55%
  );
  pointer-events: none;
  z-index: 0;
}

#inicio .container {
  position: relative;
  z-index: 1;
}

/* --- Resumo do Hero --- */
.hero-resumo {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--pg-dark);
  max-width: 480px;
  margin: 1.5rem auto 0;
  text-align: center;
}

.hero-resumo strong {
  color: var(--pg-gold-dark);
  font-weight: 700;
}

@media (min-width: 992px) {
  .hero-resumo {
    font-size: 1.15rem;
    text-align: right;
    margin-left: auto;
    margin-right: 0;
  }
}

/* --- Foto hero mobile --- */
.hero-foto-mobile {
  width: 100%;
  max-width: 400px;
  border-radius: 1rem;
  margin: 1.5rem auto 0;
  display: block;
}

/* --- Imagem toxina botulínica: mais à esquerda e mais para baixo --- */
.hero-img-left {
  position: relative;
  z-index: 3; /* acima das demais imagens (small=2, large=1) */
  display: inline-block;
  max-width: 200px;
  border: 2px solid var(--pg-border);
  border-radius: var(--bs-border-radius-lg, 0.5rem);
  overflow: hidden;
  transform: rotate(-4deg) scale(0.9) translate(-2rem, 2rem); /* esquerda e baixo */
  animation: float-left 3.5s ease-in-out infinite;
  animation-delay: 1s;
  margin-right: 10rem; /* mais à esquerda no bloco */
  margin-bottom: -8rem;
}

.hero-img-left img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes float-left {
  0%, 100% { transform: rotate(-4deg) scale(0.9) translate(-2rem, 2rem) translateY(0); }
  50% { transform: rotate(-4deg) scale(0.9) translate(-2rem, 2rem) translateY(-10px); }
}

/* --- Coluna direita: bloco mais à esquerda e mais baixo --- */
@media (min-width: 992px) {
  .hero-col-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .hero-col-right .hero-images-block {
    margin-top: auto;   /* empurra o bloco para baixo */
    margin-right: 4rem; /* mais para a esquerda (afasta da borda direita) */
  }
}

/* --- Bloco das imagens (pequena + grande) --- */
.hero-images-block {
  position: relative;
  display: inline-block;
  text-align: right;
  margin-top: 0px;
}

/* Caixa pequena (bioestimulador) - acima da grande com z-index */
.hero-img-small {
  position: relative;
  z-index: 2;
  display: inline-block;
  max-width: 200px;
  border: 2px solid var(--pg-border);
  border-radius: var(--bs-border-radius-lg, 0.5rem);
  overflow: hidden;
  margin-bottom: -0.5rem;
  /* transform e movimento vêm da animação float-small */
}

.hero-img-small img {
  display: block;
  width: 100%;
  height: auto;
}

/* Imagem grande (lábios) - diagonal direita + flutuação (atrás da pequena) */
/* scale() reduz só o tamanho visual do card, não altera altura da página */
.hero-img-large {
  position: relative;
  z-index: 1;
  display: inline-block;
  max-width: 90%;
  border: 2px solid var(--pg-border);
  border-radius: var(--bs-border-radius-lg, 0.5rem);
  transform: rotate(-6deg) scale(0.78);
}

/* Animação de flutuação - imagem grande (lábios) */
@keyframes float {
  0%, 100% { transform: rotate(-6deg) scale(0.78) translateY(0); }
  50% { transform: rotate(-6deg) scale(0.78) translateY(-12px); }
}

/* Animação de flutuação - imagem pequena (bioestimulador) */
@keyframes float-small {
  0%, 100% { transform: rotate(6deg) translateY(3rem); }
  50% { transform: rotate(6deg) translateY(2.25rem); }
}

.img-float {
  animation: float 4s ease-in-out infinite;
}

.hero-img-large.img-float {
  animation: float 4s ease-in-out infinite;
}

.hero-img-small {
  animation: float-small 3s ease-in-out infinite;
  animation-delay: 0.5s; /* começa em outro momento que a grande */
}

/* --- Seção Serviços --- */
.section-servicos {
  position: relative;
  z-index: 2;
  background-color: var(--pg-cream);
}

.section-servicos .text-gold {
  color: var(--pg-gold) !important;
}

.section-servicos .card-servico {
  background: #fff;
  border-radius: 0.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.section-servicos .card-servico:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(190, 144, 74, 0.15) !important;
}

/* Imagem circular com borda tracejada + anel bege (estilo referência) */
.section-servicos .card-servico-circle-wrapper {
  width: 220px;
  height: 220px;
  margin: 1.5rem auto 0;
  padding: 6px;
  border-radius: 50%;
  border: 3px solid var(--pg-border);
}

.section-servicos .card-servico-img-circle {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px dotted var(--pg-gold-pale);
  display: block;
}

/* Círculo placeholder para serviços sem imagem */
.section-servicos .card-servico-circle-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pg-gold-pale) 0%, var(--pg-gold) 50%, var(--pg-gold-dark) 100%);
}

.card-servico-placeholder-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--pg-cream);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.section-servicos .card-servico-estilo .card-body {
  padding-top: 1.25rem;
}

/* Círculo em destaque (maior) - Toxina Botulínica */
.section-servicos .card-servico-circle-destaque {
  width: 300px;
  height: 300px;
  margin-top: -1.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* Serviços: círculos responsivos (tablet) */
@media (max-width: 991.98px) {
  .section-servicos .card-servico-circle-wrapper {
    width: 200px;
    height: 200px;
  }
  .section-servicos .card-servico-circle-destaque {
    width: 260px;
    height: 260px;
  }
}

/* Serviços: círculos responsivos (mobile) */
@media (max-width: 575.98px) {
  .section-servicos .card-servico-circle-wrapper {
    width: 160px;
    height: 160px;
  }
  .section-servicos .card-servico-circle-destaque {
    width: 200px;
    height: 200px;
  }
}

/* Serviços: título e descrição (fontes e paleta) */
.section-servicos .servico-col {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.section-servicos .servico-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--pg-dark);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.section-servicos .servico-titulo-destaque {
  color: var(--pg-gold-dark);
  font-size: 1.65rem;
}

.section-servicos .servico-descricao {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--pg-dark);
  line-height: 1.5;
  margin: 0;
  opacity: 0.92;
}

@media (max-width: 575.98px) {
  .section-servicos .servico-titulo {
    font-size: 1.35rem;
  }
  .section-servicos .servico-titulo-destaque {
    font-size: 1.5rem;
  }
  .section-servicos .servico-descricao {
    font-size: 0.85rem;
  }
}

/* Serviços mobile: overflow horizontal arrastável + setas indicando direção */
.servicos-scroll-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.25rem;
}

.servicos-scroll-arrow {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pg-gold);
  border: 2px solid var(--pg-cream);
  border-radius: 50%;
  color: var(--pg-cream);
  box-shadow: 0 2px 12px rgba(190, 144, 74, 0.4);
  transition: background-color 0.2s, transform 0.2s;
  cursor: pointer;
}

.servicos-scroll-arrow:hover {
  background-color: var(--pg-gold-dark);
}

.servicos-scroll-arrow:active {
  transform: scale(0.95);
}

.servicos-scroll-arrow-icon {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 300;
}

.servicos-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

.servicos-scroll::-webkit-scrollbar {
  height: 6px;
}

.servicos-scroll::-webkit-scrollbar-track {
  background: var(--pg-border);
  border-radius: 4px;
}

.servicos-scroll::-webkit-scrollbar-thumb {
  background: var(--pg-gold);
  border-radius: 4px;
}

.servicos-scroll-track {
  display: flex;
  gap: 0;
  padding: 1rem 0;
  width: max-content;
}

.servicos-scroll-slide {
  flex-shrink: 0;
  width: calc(100vw - 7rem);
  scroll-snap-align: center;
}

/* Desktop: 3 serviços visíveis por vez, rolagem + setas */
@media (min-width: 768px) {
  .servicos-scroll-track {
    gap: 1rem;
  }
  .servicos-scroll-slide {
    width: min(380px, calc((100vw - 10rem) / 3));
    min-width: 260px;
  }
}

/* No scroll mobile, círculo de destaque igual aos demais */
.servicos-scroll-wrapper .card-servico-circle-destaque {
  width: 200px;
  height: 200px;
  margin-top: 0;
}

@media (max-width: 575.98px) {
  .servicos-scroll-wrapper .card-servico-circle-destaque {
    width: 160px;
    height: 160px;
  }
}

/* CTA Serviços: paleta e fontes do projeto */
.btn-servicos-cta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pg-cream) !important;
  background: linear-gradient(135deg, var(--pg-gold-light) 0%, var(--pg-gold) 50%, var(--pg-gold-dark) 100%);
  padding: 0.65rem 1.5rem;
  border-radius: 2rem;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(190, 144, 74, 0.35);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: inline-block;
}

.btn-servicos-cta:hover {
  color: var(--pg-cream) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(190, 144, 74, 0.45);
  border-color: var(--pg-gold-dark);
}

.btn-servicos-cta:active {
  transform: translateY(0);
}

/* --- Curtain / Sticky: imagem só “gruda” na transição Serviços → Nosso Espaço (e ao voltar) --- */
.section-espaco-imagem {
  position: relative;
  height: 200vh;
  z-index: 0;
}

.section-espaco-imagem-inner {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  background-image: url('../img/Ensaio/IMG_9900.JPG');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Nosso Espaço: fundo opaco sobe por cima da imagem sticky (cortina) */
.section-nosso-espaco {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  background: linear-gradient(180deg, var(--pg-dark-bg) 0%, var(--pg-dark) 50%, var(--pg-brown) 100%);
  color: var(--pg-cream);
}

.section-nosso-espaco .container {
  position: relative;
}

.section-nosso-espaco-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  color: var(--pg-gold-pale);
  text-align: center;
  margin-bottom: 0.5rem;
}

.section-nosso-espaco .servico-titulo-destaque {
  color: var(--pg-gold-pale);
}

.section-nosso-espaco-texto {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--pg-cream);
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0.95;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.section-nosso-espaco-img-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 0.75rem;
  border: 3px solid var(--pg-gold);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(227, 191, 103, 0.2);
  background: var(--pg-cream);
}

.section-nosso-espaco-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
  border: 2px dotted var(--pg-gold-pale);
}

@media (max-width: 575.98px) {
  .section-nosso-espaco-titulo {
    font-size: 1.65rem;
  }
  .section-nosso-espaco-texto {
    font-size: 0.9rem;
  }
}

/* --- Seção Antes e Depois (padrão: fontes e paleta do projeto) --- */
.section-antes-depois {
  position: relative;
  z-index: 2;
  background-color: var(--pg-cream);
}

.section-antes-depois-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  color: var(--pg-gold-dark);
  text-align: center;
  margin-bottom: 0.5rem;
}

.section-antes-depois .servico-titulo-destaque {
  color: var(--pg-gold-dark);
}

.section-antes-depois-texto {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--pg-dark);
  text-align: center;
  margin-bottom: 0.25rem;
  opacity: 0.9;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.section-antes-depois-dica {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--pg-gold);
  text-align: center;
  margin-bottom: 1.25rem;
  opacity: 0.9;
}

/* Faixa horizontal arrastável (scroll) */
.section-antes-depois-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0 1.5rem;
  margin: 0 -0.5rem;
}

.section-antes-depois-scroll::-webkit-scrollbar {
  height: 8px;
}

.section-antes-depois-scroll::-webkit-scrollbar-track {
  background: var(--pg-border);
  border-radius: 4px;
}

.section-antes-depois-scroll::-webkit-scrollbar-thumb {
  background: var(--pg-gold);
  border-radius: 4px;
}

.section-antes-depois-track {
  display: flex;
  gap: 1.25rem;
  padding: 0 0.5rem;
  width: max-content;
}

.section-antes-depois-slide {
  flex-shrink: 0;
  width: 280px;
  scroll-snap-align: start;
  text-align: center;
}

.section-antes-depois-img-wrapper {
  width: 100%;
  margin: 0 auto 0.5rem;
  padding: 8px;
  border-radius: 0.75rem;
  border: 3px solid var(--pg-gold);
  box-shadow: 0 4px 20px rgba(190, 144, 74, 0.12);
  background: #fff;
}

.section-antes-depois-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
  border: 2px dotted var(--pg-gold-pale);
  aspect-ratio: 3/4;
  object-fit: cover;
}

.section-antes-depois-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pg-gold-dark);
  margin: 0;
}

@media (max-width: 575.98px) {
  .section-antes-depois-titulo {
    font-size: 1.65rem;
  }
  .section-antes-depois-texto {
    font-size: 0.9rem;
  }
  .section-antes-depois-slide {
    width: 240px;
  }
}

/* --- Seção Localização / Google Maps (padrão: fundo escuro + fontes do projeto) --- */
.section-localizacao {
  position: relative;
  z-index: 2;
  /* Topo igual ao final de Nosso Espaço (pg-brown); depois escuro embaixo */
  background: linear-gradient(180deg, var(--pg-brown) 0%, var(--pg-dark) 50%, var(--pg-dark-bg) 100%);
  color: var(--pg-cream);
}

.section-localizacao-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  color: var(--pg-gold-pale);
  text-align: center;
  margin-bottom: 0.5rem;
}

.section-localizacao .servico-titulo-destaque {
  color: var(--pg-gold-pale);
}

.section-localizacao-texto {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--pg-cream);
  text-align: center;
  margin-bottom: 1.5rem;
  opacity: 0.95;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.section-localizacao-info {
  text-align: center;
  margin-bottom: 2rem;
}

.section-localizacao-endereco {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--pg-cream);
  margin-bottom: 0.25rem;
}

.section-localizacao-telefone {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--pg-gold-pale);
  margin: 0;
}

.section-localizacao-mapa {
  max-width: 900px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 0.75rem;
  border: 3px solid var(--pg-gold);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(227, 191, 103, 0.2);
  background: var(--pg-cream);
  overflow: hidden;
}

.section-localizacao-mapa iframe {
  display: block;
  width: 100%;
  height: 450px;
  border-radius: 0.5rem;
  border: 2px dotted var(--pg-gold-pale);
}

@media (max-width: 575.98px) {
  .section-localizacao-titulo {
    font-size: 1.65rem;
  }
  .section-localizacao-texto {
    font-size: 0.9rem;
  }
  .section-localizacao-mapa iframe {
    height: 300px;
  }
}

/* --- Rodapé (footer) --- */
.site-footer {
  position: relative;
  z-index: 2;
  background-color: var(--pg-dark-bg);
  padding: 1.25rem 0;
  border-top: 2px solid var(--pg-gold-dark);
}

.site-footer-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--pg-cream);
  margin: 0;
  opacity: 0.85;
}

/* --- Botão flutuante WhatsApp (paleta PATYGLAM) --- */
.btn-whatsapp-float {
  position: fixed;
  bottom: 4rem;
  right: 1.5rem;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.5rem 0.25rem 0.5rem 1rem;
  background: var(--pg-gold);
  color: var(--pg-cream) !important;
  text-decoration: none !important;
  border-radius: 2.5rem 2.5rem 2.5rem 0.5rem;
  box-shadow: 0 4px 20px rgba(190, 144, 74, 0.5), 0 0 24px rgba(227, 191, 103, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-whatsapp-float:hover {
  color: var(--pg-cream) !important;
  transform: scale(1.03);
  box-shadow: 0 6px 24px rgba(190, 144, 74, 0.6), 0 0 32px rgba(227, 191, 103, 0.4);
}

.btn-whatsapp-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  font-size: 0.875rem;
}

.btn-whatsapp-text strong {
  font-size: 0.95rem;
}

.btn-whatsapp-number {
  font-size: 0.8rem;
  opacity: 0.95;
}

.btn-whatsapp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: 0.5rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  color: var(--pg-cream);
}