/* =============================================

   JESSY CAKE – Stylesheet

   Inspirado em paodegimonde.com

   v=98

   ============================================= */



/* ---- Reset & Base ---- */

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



:root {

  --color-dark:      #1a1a1a;

  --color-dark-2:    #2c2c2c;

  --color-bg:        #F8F3F0;

  --color-bg-alt:    #f3ede8;

  --color-text:      #333333;

  --color-muted:     #777777;

  --color-pink:      #d4608a;

  --color-pink-light:#f0aec8;

  --color-pink-pale: #fce8f0;

  --color-pink-dark: #b84e75;

  --color-gold:      #c9a96e;

  --color-white:     #ffffff;

  --font-serif:      'Playfair Display', Georgia, serif;

  --font-sans:       'Montserrat', Arial, sans-serif;

  --font-script:     'Dancing Script', cursive;

  --font-heading:    var(--font-serif);

  --font-secondary:  var(--font-sans);

  --radius:          4px;

  --radius-lg:       12px;

  --shadow-sm:       0 2px 8px rgba(0,0,0,.08);

  --shadow-md:       0 6px 24px rgba(0,0,0,.12);

  --shadow-lg:       0 16px 48px rgba(0,0,0,.16);

  --transition:      .35s cubic-bezier(0.4, 0, 0.2, 1);

  --header-h:        80px;

  --radius-bakery:   30px;

}



html { 

  scroll-behavior: smooth; 

  scroll-padding-top: 100px; /* Ajuda o browser a alinhar o scroll com o cabeçalho fixo */

  font-size: 16px; 

  width: 100%; 

}



body {

  font-family: var(--font-sans);

  background: var(--color-bg);

  color: var(--color-text);

  line-height: 1.7;

  width: 100%;

  position: relative;

  overflow-x: clip; /* Fix for horizontal scroll, does not break position:sticky */

}



/* Wrapper global (sem overflow para não quebrar o sticky!) */

.site-wrapper {

  width: 100%;

  position: relative;

  overflow-x: clip; /* Previne scroll horizontal sem quebrar o position: sticky */

}



img { 

  display: block; 

  max-width: 100%; 

  height: auto; 

  font-style: italic; /* Melhora aparecimento de Alts se a imagem falhar */

}



/* Reserva de espaço para evitar Layout Shift (CLS) */

.hero-slide, .hero-slide img {

  min-height: 70vh; /* Aumentado para 70% da altura do ecrã para maior reserva */

}



.stack-card-image {

  aspect-ratio: 1 / 1;

  background: var(--color-bg-alt); /* Cor de reserva enquanto carrega */

}



/* =============================================

   BILINGUAL & MULTILINGUAL SYSTEM

   ============================================= */

body:not(.lang-pt) [data-lang="pt"],

body:not(.lang-fr) [data-lang="fr"],

body:not(.lang-en) [data-lang="en"] {

  display: none !important;

}



a { color: inherit; text-decoration: none; }

ul  { list-style: none; }

button { cursor: pointer; border: none; background: none; font-family: inherit; }



.container {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding-left: 24px !important;

  padding-right: 24px !important;

}



/* Offset para o menu fixo ao navegar por âncoras */

section[id],

div[id] {

  scroll-margin-top: 100px; /* Reduzido de 120px para maior precisão */

}



/* =============================================

   HEADER

   ============================================= */

.site-header {

  position: sticky; /* Mantém o cabeçalho no fluxo, evitando o salto (jump) no scroll */

  top: 0;

  z-index: 1000;

  background: var(--color-bg);

  height: auto;

  min-height: var(--header-h);

  transition: all var(--transition);

}



/* O bico a descer no meio */

.site-header::after {

  content: '';

  position: absolute;

  top: calc(100% - 1px); /* Sobe um pixel para tapar o risco milimétrico e o possível bleeding da shadow */

  left: 50%;

  transform: translateX(-50%);

  width: 300px; /* Largura estática que corresponde às coordenadas do path */

  height: 90px; /* Altura do bico afiado */

  background: var(--color-bg); /* Mesma cor do header */

  

  /* Cria uma curva côncava de ambos os lados que termina num bico aguçado perfeito (como na imagem 2) */

  clip-path: path("M 0,0 Q 120,0 150,90 Q 180,0 300,0 Z");

  -webkit-clip-path: path("M 0,0 Q 120,0 150,90 Q 180,0 300,0 Z");

  

  z-index: 1; /* Valor positivo oculta a sombra projetada pelo elemento pai, resolvendo o risco escuro */

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  transform-origin: top center;

}



.site-header.scrolled { 

  width: 100%;

  height: 80px;

  background: rgba(248, 243, 240, 0.98); 

  backdrop-filter: blur(10px);

  box-shadow: var(--shadow-md); 

}



/* Oculta suavemente o bico no scroll puxando-o para cima e pondo-o transparente */

.site-header.scrolled::after {

  opacity: 0;

  transform: translateX(-50%) scaleY(0);

  background: rgba(248, 243, 240, 0.98);

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 100%;

  padding: 0 40px;

  position: relative; /* Added for absolute logo */

  z-index: 10; /* Garante que os navs fiquem acima do :after atualizado */

}



/* Split Nav sem pílula - Texto simples no header background */

.split-nav {

  display: flex;

  align-items: center;

}



.split-nav ul {

  display: flex;

  align-items: center;

  gap: 25px;

  list-style: none;

  margin: 0;

  padding: 0;

}



.split-nav a {

  font-family: var(--font-sans);

  font-size: 0.85rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;

  color: var(--color-dark); /* Texto escuro liso */

  transition: all 0.3s ease;

  padding: 8px 0;

  position: relative;

}



.split-nav a::after {

  content: '';

  position: absolute;

  bottom: 0; left: 0;

  width: 0; height: 2px;

  background: var(--color-pink);

  transition: width var(--transition);

}



.split-nav a:hover,

.split-nav a.active {

  color: var(--color-pink);

  text-decoration: none;

}



.split-nav a:hover::after,

.split-nav a.active::after {

  width: 100%;

}



.right-cluster {

  display: flex;

  align-items: center;

  gap: 30px;

}





.logo-area {

  position: absolute;

  left: 50%;

  top: 70%; /* Move o logo mais para cima, retirando os 85% anteriores */

  transform: translate(-50%, -50%);

  z-index: 101;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Animação de subida e resizing */

  width: 110px;

  height: 110px;

}



/* Quando se faz scroll, a área do logo adapta-se */

.site-header.scrolled .logo-area {

  top: 50%;

  width: 220px; /* Alarga para acomodar o logo horizontal */

  height: 60px;

}



.logo-area .logo-img {

  position: absolute;

  top: 50%; left: 50%;

  transform: translate(-50%, -50%);

  border: none; 

  background: transparent;

  padding: 0;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 

  object-fit: contain; 

  box-shadow: none;

}



.logo-circle {

  height: 115px; /* Aumentar o diâmetro do logo circular */

  width: 115px;

  border-radius: 50%;

  opacity: 1;

}



.logo-horiz {

  height: 50px;

  width: 180px;

  opacity: 0;

  border-radius: 0;

  pointer-events: none; /* Ignora cliques quando escondido */

}



/* Quando se faz scroll, inverte as visibilidades */

.site-header.scrolled .logo-circle {

  opacity: 0;

  transform: translate(-50%, -50%) scale(0.5); /* Efeito de scale para fora agradável */

  pointer-events: none;

}



.site-header.scrolled .logo-horiz {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1);

  pointer-events: auto;

}





.header-actions {

  display: flex;

  align-items: center;

  gap: 20px;

}



/* Language Switcher Dropdown (Globe) */

.lang-switcher-dropdown {

  position: relative;

  display: inline-block;

}



.lang-btn.globe-btn {

  display: flex !important;

  align-items: center;

  gap: 6px;

  font-family: var(--font-sans);

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--color-dark);

  opacity: 0.9;

  padding: 6px 12px;

  border-radius: 4px;

  transition: all var(--transition);

}



.lang-btn.globe-btn:hover {

  opacity: 1;

  background: rgba(0,0,0,0.05);

}



.globe-icon {

  width: 18px;

  height: 18px;

  stroke-width: 1.5;

}



.lang-menu {

  position: absolute;

  top: calc(100% + 5px);

  right: 0;

  background: var(--color-white);

  min-width: 100px;

  border-radius: 8px;

  box-shadow: 0 6px 20px rgba(0,0,0,0.1);

  padding: 8px 0;

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

  list-style: none;

  z-index: 1200;

  border: 1px solid rgba(0,0,0,0.04);

  display: flex;

  flex-direction: column;

}



/* Hover over language widget */

.lang-switcher-dropdown:hover .lang-menu {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.lang-menu li { margin: 0; }



.lang-menu button {

  display: block;

  width: 100%;

  text-align: left;

  padding: 8px 16px;

  font-family: var(--font-sans);

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--color-dark);

  text-transform: uppercase;

  transition: background var(--transition);

}



.lang-menu button:hover {

  background: rgba(235, 143, 177, 0.1);

  color: var(--color-pink);

}



.lang-menu button.active {

  color: var(--color-pink);

}



/* Mobile: dropdown opens via JS class */

.lang-menu.mobile-open {

  opacity: 1 !important;

  visibility: visible !important;

  transform: translateY(0) !important;

}



/* Utils for visibility */

.desktop-only {

  display: flex;

}



@media (max-width: 991px) {

  .desktop-only {

    display: none !important;

  }

}



/* Hamburger */

.hamburger {

  display: flex;

  flex-direction: column;

  gap: 5px;

  padding: 6px;

  order: -1;

}

.hamburger span {

  display: block;

  width: 24px;

  height: 2px;

  background: var(--color-dark); /* Visível no header claro desktop */

  border-radius: 2px;

  transition: var(--transition);

}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.hamburger.open span:nth-child(2) { opacity: 0; }

.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



/* Desktop Nav */

.desktop-nav { display: flex; align-items: center; }

.desktop-nav ul { display: flex; gap: 36px; align-items: center; }

.desktop-nav .nav-link {

  color: rgba(255,255,255,.8);

  font-size: .85rem;

  font-weight: 600;

  letter-spacing: .08em;

  text-transform: uppercase;

  position: relative;

  padding-bottom: 4px;

  transition: color var(--transition);

}

.desktop-nav .nav-link::after {

  content: '';

  position: absolute;

  bottom: 0; left: 0;

  width: 0; height: 2px;

  background: var(--color-pink);

  transition: width var(--transition);

}

.desktop-nav .nav-link:hover { color: var(--color-white); }

.desktop-nav .nav-link:hover::after { width: 100%; }

.desktop-nav .cta-nav {

  background: var(--color-pink);

  color: var(--color-white) !important;

  padding: 8px 20px;

  border-radius: 50px;

  letter-spacing: .06em;

}

.desktop-nav .cta-nav::after { display: none; }

.desktop-nav .cta-nav:hover { background: var(--color-pink-light); }



/* Social icon */

.header-social { display: flex; gap: 12px; }

.social-icon-link {

  color: rgba(255,255,255,.7);

  transition: color var(--transition);

}

.social-icon-link:hover { color: var(--color-pink-light); }



/* Dropdown Navigation */

.has-dropdown {

  position: relative;

}



.dropdown-trigger {

  display: flex !important;

  align-items: center;

  gap: 8px;

}



.chevron-icon {

  transition: transform 0.3s ease;

  flex-shrink: 0;

}



.has-dropdown:hover .chevron-icon {

  transform: rotate(180deg);

}



.dropdown-menu {

  position: absolute;

  top: calc(100% + 12px);

  left: 50%;

  transform: translateX(-50%) translateY(10px);

  background: var(--color-white);

  min-width: 160px;

  border-radius: 12px;

  box-shadow: 0 6px 25px rgba(0,0,0,0.07);

  padding: 6px 0;

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

  list-style: none !important;

  z-index: 1100;

  border: 1px solid rgba(0,0,0,0.02);

  display: flex;

  flex-direction: column;

}



/* Ponte invisível para o hover não falhar ao descer o rato */

.has-dropdown::after {

  content: '';

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  height: 25px;

}



.has-dropdown:hover .dropdown-menu {

  opacity: 1;

  visibility: visible;

  transform: translateX(-50%) translateY(0);

}



.dropdown-menu li {

  margin: 0 !important;

  gap: 0 !important;

}



.dropdown-menu a {

  display: block;

  padding: 8px 18px !important;

  font-size: 0.72rem !important;

  text-transform: uppercase !important;

  color: var(--color-text-dark) !important;

  border-radius: 0 !important;

  transition: all 0.3s ease !important;

  text-decoration: none !important;

  text-align: left;

  letter-spacing: 0.8px;

  font-weight: 500;

  line-height: 1.3;

}



.dropdown-menu a:hover {

  background: rgba(212, 96, 138, 0.08);

  color: var(--color-pink-light) !important;

  text-decoration: none !important;

}



/* Mobile Nav Ajuste */

.mobile-nav ul {

  display: flex;

  flex-direction: column;

}



/* Mobile Nav Dropdown */

.mobile-nav {

  position: fixed; /* fixed para acompanhar o header fixed no mobile */

  top: 70px; /* altura do header mobile */

  left: 0; 

  right: 0;

  background: var(--color-white);

  box-shadow: 0 15px 30px rgba(0,0,0,0.1);

  display: block;

  opacity: 0;

  visibility: hidden;

  transform: translateY(-20px);

  transition: all 0.3s ease;

  z-index: 9998; /* abaixo do header (9999) mas acima de tudo */

  max-height: calc(100vh - 70px); /* fallback */

  max-height: calc(100svh - 70px);

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

}



.mobile-nav.open {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.mobile-nav ul {

  text-align: left;

  list-style: none;

  padding: 20px 40px;

}



.mobile-nav li {

  margin: 15px 0;

}



.mobile-nav .nav-link {

  font-size: 1.2rem;

  font-weight: 600;

  font-weight: 700;

  color: var(--color-text);

  text-transform: uppercase;

  font-family: var(--font-serif);

}

.mobile-nav .nav-link.active {

  color: var(--color-pink);

  text-decoration: underline;

  text-decoration-color: var(--color-pink);

  text-underline-offset: 7px;

}



.mobile-nav .nav-link:hover {

  color: var(--color-pink);

}



.mobile-has-submenu {

  display: block;

  margin-top: 10px;

}



.mobile-menu-item-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid rgba(235, 143, 177, 0.1);

  margin-bottom: 12px;

  padding-bottom: 5px;

}



.mobile-menu-item-row .nav-link {

  font-size: 1.15rem !important; /* Ligeiramente maior e mais elegante */

  color: var(--color-text) !important;

  letter-spacing: 2px;

  margin-bottom: 0;

  border-bottom: none;

  padding-bottom: 0;

}

.mobile-menu-item-row .nav-link.active {

  color: var(--color-pink) !important;

}



.mobile-submenu-trigger svg {

  transform: rotate(0deg); /* Volta a apontar para BAIXO quando fechado */

}



.mobile-has-submenu.open .mobile-submenu-trigger svg {

  transform: rotate(180deg); /* Aponta para CIMA quando aberto */

}



.mobile-submenu {

  list-style: none;

  padding-left: 15px;

  margin-bottom: 10px;

  display: none !important; /* Escondido por padrão, garantido */

}



.mobile-has-submenu.open .mobile-submenu {

  display: block !important; /* Mostra apenas quando aberto */

}



.mobile-submenu li {

  margin: 8px 0 !important;

}



.mobile-submenu .nav-link {

  font-size: 1rem !important;

  text-transform: capitalize !important;

  font-weight: 500 !important;

  opacity: 1;

  font-family: var(--font-sans) !important;

}



/* =============================================

   PREMIUM HERO SECTION (COMPACT & ANIMATED)

   ============================================= */

.premium-hero {

  position: relative;

  background-color: var(--color-pink); /* Rosa sólido de referência */

  min-height: 750px; /* Equilíbrio Ultralarge */

  display: flex;

  flex-direction: column; /* Para empilhar o conteúdo e a barra */

  justify-content: center;

  padding-top: 80px;

  overflow: visible; 

  z-index: 10; /* Baixado para permitir que o Menu (9999) fique por cima */

  margin-bottom: 150px; 

}



.hero-wrapper {

  position: relative;

  width: 100%;

  min-height: 600px; /* Altura fixa para manter o layout estável */

  overflow: hidden; /* Corta as animações que saem às margens */

  z-index: 200 !important; 

}



.hero-slide {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  opacity: 0;

  pointer-events: none;

  z-index: 1;

}



.hero-slide.active {

  opacity: 1;

  pointer-events: auto;

  z-index: 2;

}



.hero-slide.exiting {

  opacity: 1;

  pointer-events: none;

  z-index: 3; /* Slide a sair fica por cima durante a saída */

}



/* ---- Entrada: Tudo calmo com os mesmos tempos (1.5s), sem interrupções bruscas ---- */

.hero-slide.active .hero-text-area {

  animation: textEnterLeft 1.5s cubic-bezier(0.25,0.46,0.45,0.94) both;

  animation-delay: 0s;

}



.hero-slide.active .hero-image-area {

  animation: imageEnterRight 1.5s cubic-bezier(0.25,0.46,0.45,0.94) both;

  animation-delay: 0.5s; /* Entra tranquilamente de seguida */

}



/* ---- Saída: mais lenta e misteriosa (1.5s) ---- */

.hero-slide.exiting .hero-text-area {

  animation: textExitLeft 1.5s cubic-bezier(0.25,0.46,0.45,0.94) both;

  animation-delay: 0s;

}



.hero-slide.exiting .hero-image-area {

  animation: imageExitRight 1.5s cubic-bezier(0.25,0.46,0.45,0.94) both;

  animation-delay: 0.5s; /* Sai muito suavemente a seguir ao texto */

}





@keyframes textEnterLeft {

  from { opacity: 0; transform: translateX(-200px); }

  to   { opacity: 1; transform: translateX(0); }

}



@keyframes textFloatUp {

  from {

    opacity: 0;

    transform: translateX(-150px); /* Entrada lateral dramática */

  }

  to {

    opacity: 1;

    transform: translateX(0); /* Acaba exactamente na sua posição neutra para não cortar layout no lado esquerdo */

  }

}



@keyframes textExitLeft {

  from { opacity: 1; transform: translateX(0); }

  to   { opacity: 0; transform: translateX(-500px); } /* Saída radical à esquerda */

}



.hero-text-area {

  flex: 1;

  max-width: 550px;

  position: relative;

  z-index: 10;

  padding-right: 20px;

}



.hero-badge {

  display: inline-block;

  background: rgba(255,255,255,0.22);

  padding: 6px 14px;

  border-radius: 30px;

  font-size: 0.72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  margin-bottom: 20px;

  backdrop-filter: blur(4px);

}



.hero-main-title {

  margin-bottom: 20px;

}



.hero-main-title .script-font {

  font-family: 'Dancing Script', cursive;

  font-size: 3.8rem;

  line-height: 1;

}



.hero-main-title .bold-font {

  font-family: var(--font-sans);

  font-size: 2.6rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: -0.5px;

  line-height: 1.1;

}



.hero-description {

  font-size: 1.4rem; /* Texto mais legível e imponente */

  color: rgba(255, 255, 255, 0.95);

  max-width: 650px;

  line-height: 1.6;

  margin-bottom: 40px;

  animation: textFloatUp 1.2s ease forwards;

}



.hero-btn-primary {

  display: inline-block;

  background: var(--color-white);

  color: var(--color-pink); /* Texto rosa no botão branco */

  padding: 11px 26px;

  border-radius: 50px;

  font-weight: 700;

  text-transform: uppercase;

  font-size: 0.85rem;

  letter-spacing: 0.5px;

  transition: all var(--transition);

  box-shadow: 0 8px 15px rgba(0,0,0,0.08);

}



.hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
  background: #fff;
}

.hero-btn-primary span {
  letter-spacing: inherit;
}


.hero-image-area {

  flex: 1;

  max-width: 50%;

  display: flex;

  justify-content: flex-end;

  align-items: flex-end; /* Alinha o bolo à base da secção */

  position: relative;

  overflow: visible; /* Garante que nada corte a imagem base */

  transform: translateX(120px); /* Empurra a imagem para a extremidade direita */

}



/* Animações Direcionais Imagem */

.hero-slide.active .hero-image-area {

  animation: imageEnterRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

  animation-delay: 0.4s; /* Bolo entra depois do texto */

}



.hero-slide.exiting .hero-image-area {

  animation: imageExitRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

  animation-delay: 0s; /* Bolo sai primeiro */

}



@keyframes imageEnterRight {

  from { opacity: 0; transform: translateX(250px); }

  to   { opacity: 1; transform: translateX(0); }

}



@keyframes imageExitRight {

  from { opacity: 1; transform: translateX(0); }

  to   { opacity: 0; transform: translateX(300px); }

}



/* Escala Ultralarge (Ambos os Slides) */

#slide-1 .hero-main-image-wrapper,

#slide-2 .hero-main-image-wrapper {

  position: relative;

  max-width: 750px; 

  width: 100%;

  height: 640px; 

  margin-bottom: -150px; /* Profundidade na onda */

  z-index: 50; /* Super Prioridade */

  display: flex;

  justify-content: flex-end;

  align-items: flex-end;

  overflow: visible; /* Garante que a sombra e a base preta fiquem visíveis */

}



.floating-hero-img {

  max-height: 720px; /* Redução subtil para equilíbrio sugerido */

  width: auto;

  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.15));

  animation: imageRevealRight 1.2s cubic-bezier(0.2, 0, 0.2, 1) forwards;

  position: relative;

  z-index: 9999; /* Garante que o bolo passa à frente de tudo */

}



.price-tag {

  position: absolute;

  top: 5%; right: -10px;

  background: #fbc531;

  width: 70px; height: 70px;

  border-radius: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #c23616;

  font-weight: 800;

  transform: rotate(15deg);

  z-index: 5;

  box-shadow: 0 5px 15px rgba(0,0,0,0.1);

}



.price-label { font-size: 0.55rem; }

.price-value { font-size: 0.9rem; }



@media (max-width: 768px) {

  .premium-hero {

    min-height: auto;

    padding: 100px 0 40px;

  }

  .hero-slide {

    flex-direction: column;

    text-align: left;

    position: relative;

    top: 0;

    transform: none;

    height: auto;

  }

  .hero-slide.active { display: flex; }

  .hero-text-area {

    max-width: 100%;

    padding-right: 0;

    margin-bottom: 30px;

    text-align: left;

  }

  .hero-image-area {

    max-width: 100%;

    justify-content: center;

    align-items: center;

    height: auto;

  }

  .hero-main-image-wrapper {

    max-width: 280px; 

    margin-bottom: 0;

  }

  .hero-main-title .script-font { font-size: 2.8rem; }

  .hero-main-title .bold-font { font-size: 1.8rem; }

}



.hero-wave {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  line-height: 0;

  z-index: 5; /* Fica abaixo da wrapper do bolo (z-index 10) */

}



.hero-wave svg {

  position: relative;

  display: block;

  width: calc(100% + 1.3px);

  height: 60px;

}



.hero-eyebrow {

  display: inline-block;

  font-size: .78rem;

  font-weight: 700;

  letter-spacing: .2em;

  text-transform: uppercase;

  color: var(--color-pink-light);

  margin-bottom: 20px;

  padding: 6px 18px;

  border: 1px solid rgba(240, 174, 200, .4);

  border-radius: 50px;

}



.hero-title {

  font-family: var(--font-serif);

  font-size: 5.8rem; /* Aumento subordinado ao impacto */

  line-height: 1.1;

  color: var(--color-white);

  margin-bottom: 24px;

  animation: textFloatUp 1s ease forwards;

}



.hero-subtitle {

  font-size: 1.1rem;

  color: rgba(255,255,255,.75);

  max-width: 540px;

  margin: 0 auto 40px;

  line-height: 1.8;

}



.hero-actions {

  display: flex;

  gap: 16px;

  justify-content: center;

  flex-wrap: wrap;

}



/* =============================================

   BUTTONS

   ============================================= */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 14px 32px;

  border-radius: 50px;

  font-size: .88rem;

  font-weight: 700;

  letter-spacing: .06em;

  text-transform: uppercase;

  transition: all var(--transition);

  cursor: pointer;

  border: 2px solid transparent;

  white-space: nowrap;

}

.btn-primary {

  background: var(--color-pink);

  color: var(--color-white);

  border-color: var(--color-pink);

}

.btn-primary:hover {

  background: var(--color-pink-dark);

  border-color: var(--color-pink-dark);

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(212, 96, 138, .4);

}

.btn-outline {

  background: transparent;

  color: var(--color-white);

  border-color: rgba(255,255,255,.5);

}

.btn-outline:hover {

  background: rgba(255,255,255,.1);

  border-color: var(--color-white);

  transform: translateY(-2px);

}

.btn-full { width: 100%; }



/* =============================================

   PAGE TITLE BAR

   ============================================= */

.page-title-bar {

  background: var(--color-bg-alt);

  padding: 60px 0 20px;

  text-align: center;

}

.page-title-text {

  font-family: var(--font-serif);

  font-size: 2.5rem;

  color: var(--color-dark);

  margin-bottom: 12px;

  font-weight: 700;

}

.breadcrumb {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  font-size: .82rem;

  color: rgba(0,0,0,.5);

  letter-spacing: .06em;

  text-transform: uppercase;

}

.breadcrumb a { color: var(--color-pink); transition: color var(--transition); }

.breadcrumb a:hover { color: var(--color-dark); }

.breadcrumb .sep { opacity: .4; }



/* =============================================

   CATEGORY FILTER

   ============================================= */

.category-filter-section {

  background: var(--color-bg-alt);

  padding: 28px 0;

  border-bottom: 1px solid rgba(0,0,0,.08);

}

.category-tabs {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  justify-content: center;

}

.cat-btn {

  padding: 9px 22px;

  border-radius: 50px;

  font-size: .8rem;

  font-weight: 700;

  letter-spacing: .07em;

  text-transform: uppercase;

  color: var(--color-muted);

  background: var(--color-white);

  border: 1px solid rgba(0,0,0,.12);

  transition: all var(--transition);

}

.cat-btn:hover, .cat-btn.active {

  background: var(--color-pink);

  color: var(--color-white);

  border-color: var(--color-pink);

  box-shadow: 0 4px 12px rgba(212,96,138,.3);

}



/* =============================================

   PRODUCTS GRID

   ============================================= */

.products-section { padding: 60px 0 80px; }



.products-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  gap: 32px;

}



/* Product Card */

.product-card {

  background: var(--color-white);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  transition: transform var(--transition), box-shadow var(--transition);

}

.product-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

}

.product-card.hidden { display: none; }



.card-img-wrap {

  position: relative;

  overflow: hidden;

  aspect-ratio: 1 / 1;

}

.card-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .5s ease;

  background: linear-gradient(135deg, var(--color-pink-light) 0%, var(--color-pink) 50%, #2d1020 100%);

}

.product-card:hover .card-img { transform: scale(1.06); }



/* Fallback elegante quando imagem não carrega */

.card-img-wrap {

  background: linear-gradient(135deg, var(--color-pink-pale) 0%, var(--color-pink-light) 50%, var(--color-pink) 100%);

}

.card-img[src=""], .card-img:not([src]) {

  opacity: 0;

}



.card-overlay {

  position: absolute;

  inset: 0;

  background: rgba(26,10,16,.55);

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transition: opacity var(--transition);

}

.product-card:hover .card-overlay { opacity: 1; }

.card-overlay-btn {

  padding: 10px 28px;

  border: 2px solid var(--color-white);

  border-radius: 50px;

  color: var(--color-white);

  font-size: .8rem;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;

  transition: all var(--transition);

}

.card-overlay-btn:hover {

  background: var(--color-pink);

  border-color: var(--color-pink);

}



.card-body { padding: 20px 22px 24px; }

.card-category {

  font-size: .72rem;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--color-pink);

  display: block;

  margin-bottom: 6px;

}

.card-title {

  font-family: var(--font-serif);

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--color-dark);

  margin-bottom: 8px;

  line-height: 1.3;

}

.card-desc {

  font-size: .85rem;

  color: var(--color-muted);

  line-height: 1.65;

}



/* =============================================

   ABOUT SECTION

   ============================================= */

.about-section {

  background: var(--color-bg-alt);

  padding: 100px 0;

}

.about-inner {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 72px;

  align-items: center;

}

.about-image {

  display: flex;

  justify-content: center;

}

.about-text {

  transform: translateX(-40px);

}

.about-logo-img {

  width: 300px;

  height: 300px;

  border-radius: 50%;

  object-fit: cover;

  object-position: center 30%;

  border: 6px solid var(--color-white);

  padding: 0;

  background: var(--color-white);

  box-shadow: var(--shadow-lg);

}



.section-eyebrow {

  display: inline-block;

  font-size: .75rem;

  font-weight: 700;

  letter-spacing: .2em;

  text-transform: uppercase;

  color: var(--color-pink);

  margin-bottom: 12px;

}

.section-eyebrow.center { display: block; text-align: center; }

.section-title {

  font-family: var(--font-serif);

  font-size: clamp(1.8rem, 4vw, 2.6rem);

  font-weight: 700;

  color: var(--color-dark);

  line-height: 1.2;

  margin-bottom: 24px;

}

.section-title.center { text-align: center; }



.about-text p {

  color: var(--color-muted);

  margin-bottom: 16px;

  font-size: .95rem;

}

.about-text strong { color: var(--color-dark); }

.about-text em { color: var(--color-pink); font-style: italic; }

.about-text .btn { margin-top: 12px; }



/* =============================================

   STATS STRIP

   ============================================= */

.stats-strip {

  background: var(--color-pink);

  padding: 56px 0;

}

.stats-inner {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

  text-align: center;

}

.stat-item { padding: 10px; }

.stat-number {

  display: block;

  font-family: var(--font-serif);

  font-size: 3rem;

  font-weight: 700;

  color: var(--color-dark);

  line-height: 1;

  margin-bottom: 8px;

}

.stat-label {

  font-size: .78rem;

  font-weight: 600;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--color-dark);

  opacity: 0.8;

}



/* =============================================

   FAQ SECTION

   ============================================= */

.faq-section {

  padding: 100px 0;

  background: var(--color-bg);

}

.faq-section .section-title { margin-bottom: 48px; }



.faq-list { max-width: 760px; margin: 0 auto; }



.faq-item {

  border-bottom: 1px solid rgba(0,0,0,.1);

}

.faq-question {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 22px 0;

  font-size: 1rem;

  font-weight: 600;

  color: var(--color-dark);

  text-align: left;

  transition: color var(--transition);

  gap: 16px;

}

.faq-question:hover { color: var(--color-pink); }

.faq-icon {

  flex-shrink: 0;

  width: 28px; height: 28px;

  border-radius: 50%;

  background: var(--color-bg-alt);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  font-weight: 400;

  color: var(--color-pink);

  transition: all var(--transition);

}

.faq-question[aria-expanded="true"] .faq-icon {

  background: var(--color-pink);

  color: var(--color-white);

  transform: rotate(45deg);

}

.faq-answer {

  max-height: 0;

  overflow: hidden;

  transition: max-height .4s ease, padding .4s ease;

}

.faq-answer.open {

  max-height: 400px;

  padding-bottom: 22px;

}

.faq-answer p {

  color: var(--color-muted);

  font-size: .94rem;

  line-height: 1.75;

}

.faq-answer a { color: var(--color-pink); text-decoration: underline; }



/* =============================================

   CONTACT SECTION

   ============================================= */

.contact-section {

  background: var(--color-dark);

  padding: 100px 0;

}

.contact-inner {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 72px;

  align-items: start;

}

.contact-text .section-eyebrow { color: var(--color-pink-light); }

.contact-text .section-title { color: var(--color-white); }

.contact-text p {

  color: rgba(255,255,255,.65);

  margin-bottom: 32px;

  font-size: .95rem;

}

.contact-methods { display: flex; flex-direction: column; gap: 16px; }

.contact-method {

  display: flex;

  align-items: center;

  gap: 16px;

  background: rgba(255,255,255,.07);

  border: 1px solid rgba(255,255,255,.1);

  border-radius: var(--radius-lg);

  padding: 16px 20px;

  transition: background var(--transition), border-color var(--transition);

  color: var(--color-white);

}

.contact-method:hover {

  background: rgba(212,96,138,.15);

  border-color: var(--color-pink);

}

.contact-method-icon {

  width: 44px; height: 44px;

  border-radius: 50%;

  background: var(--color-pink);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.contact-method strong { display: block; font-size: .88rem; margin-bottom: 2px; }

.contact-method span  { font-size: .82rem; color: rgba(255,255,255,.55); }



/* Contact Form */

.contact-form { display: flex; flex-direction: column; gap: 20px; }

.form-group { display: flex; flex-direction: column; gap: 8px; }

.form-group label {

  font-size: .8rem;

  font-weight: 700;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: rgba(255,255,255,.6);

}

.form-group input,

.form-group select,

.form-group textarea {

  background: rgba(255,255,255,.07);

  border: 1px solid rgba(255,255,255,.14);

  border-radius: var(--radius);

  padding: 13px 16px;

  font-family: var(--font-sans);

  font-size: .92rem;

  color: var(--color-white);

  transition: border-color var(--transition), background var(--transition);

  outline: none;

}

.form-group input::placeholder,

.form-group textarea::placeholder { color: rgba(255,255,255,.3); }

.form-group select option { background: var(--color-dark-2); color: var(--color-white); }

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  border-color: var(--color-pink);

  background: rgba(212,96,138,.08);

}

.form-group textarea { resize: vertical; }

.form-note {

  font-size: .78rem;

  color: rgba(255,255,255,.35);

  text-align: center;

  margin-top: -8px;

}



/* =============================================

   PAGE TESTIMONIALS (partilhado entre páginas)

   ============================================= */

.page-testimonials {

  padding: 80px 0 70px;

  background: var(--color-bg);

}

.page-test-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

  margin-top: 48px;

}

@media (max-width: 860px) { .page-test-grid { grid-template-columns: 1fr; gap: 16px; } }



.page-test-card {

  background: #fff;

  border-radius: 18px;

  padding: 30px 26px;

  border: 1px solid rgba(212,96,138,0.08);

}

.page-test-stars {

  color: var(--color-gold);

  font-size: 0.95rem;

  letter-spacing: 3px;

  margin-bottom: 16px;

}

.page-test-card blockquote {

  font-size: 0.9rem;

  color: var(--color-text);

  line-height: 1.75;

  font-style: italic;

  margin: 0 0 18px;

}

.page-test-card cite {

  font-size: 0.82rem;

  font-weight: 600;

  color: var(--color-pink);

  font-style: normal;

}



/* =============================================

   FOOTER

   ============================================= */

.site-footer { background: #111; }

.footer-top { padding: 72px 0 56px; border-bottom: 1px solid rgba(255,255,255,.07); }

.footer-top-inner {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1fr;

  gap: 48px;

}

.footer-brand { flex: 1; }

.footer-logo {

  width: 72px; height: 72px;

  border-radius: 50%;

  object-fit: cover;

  margin-bottom: 16px;

  border: 3px solid var(--color-pink);

}

.footer-tagline {

  font-size: .9rem;

  color: rgba(255,255,255,.5);

  line-height: 1.7;

  margin-bottom: 20px;

  max-width: 280px;

}

.footer-social {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: rgba(255,255,255,.6);

  font-size: .84rem;

  font-weight: 600;

  transition: color var(--transition);

}

.footer-contact-links {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 12px;

}

.footer-social svg { flex-shrink: 0; }

.footer-social:hover { color: var(--color-pink-light); }

.footer-social--whatsapp { color: rgba(255,255,255,.8); }



.footer-nav h3,

.footer-produtos h3,

.footer-legal h3 {

  font-size: .78rem;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: rgba(255,255,255,.4);

  margin-bottom: 20px;

}

.footer-nav li,

.footer-produtos li,

.footer-legal li { margin-bottom: 12px; }

.footer-nav a,

.footer-produtos a,

.footer-legal a {

  color: rgba(255,255,255,.65);

  font-size: .88rem;

  transition: color var(--transition);

}

.footer-nav a:hover,

.footer-produtos a:hover,

.footer-legal a:hover { color: var(--color-pink-light); }



.footer-bottom {

  padding: 24px 0;

  text-align: center;

}

.footer-bottom p {

  font-size: .8rem;

  color: rgba(255,255,255,.3);

}



/* =============================================

   SCROLL TO TOP

   ============================================= */

.scroll-top {

  position: fixed;

  bottom: 32px;

  right: 32px;

  width: 44px; height: 44px;

  background: var(--color-pink);

  color: var(--color-white);

  border-radius: 50%;

  font-size: .8rem;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 16px rgba(212,96,138,.5);

  opacity: 0;

  transform: translateY(16px);

  transition: all var(--transition);

  pointer-events: none;

  z-index: 9999;

}

.scroll-top.visible {

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

}

.scroll-top:hover {

  background: var(--color-pink-dark);

  transform: translateY(-3px);

}



/* =============================================

   RESPONSIVE (Mobile Optimized)

   ============================================= */

@media (min-width: 1025px) {

  .hamburger { display: none; }

  .desktop-nav { display: flex; }

  .mobile-nav  { display: none !important; }

  .products-grid { grid-template-columns: repeat(3, 1fr); }

}



@media (max-width: 1024px) {

  /* Hide desktop menu on smaller screens, enable hamburger */

  .desktop-nav    { display: none; }

  .hamburger      { display: flex; }



  .about-inner    { grid-template-columns: 1fr; text-align: center; }

  .about-image    { justify-content: center; }

  .about-text     { transform: none; }

  .contact-inner  { grid-template-columns: 1fr; }

  .footer-top-inner { grid-template-columns: 1fr 1fr; gap: 40px; }

}



@media (max-width: 767px) {

  /* Header Adjustments Mobile */

  :root { --header-h: 70px; }

  .site-header { padding: 0; }

  .header-inner { padding: 0 16px; }

  .header-right { flex-direction: row; align-items: center; gap: 16px; }

  .logo-img { width: 44px; height: 44px; border-width: 2px; }

  .header-social { display: none; } /* hide instagram icon on top header in mobile to save space */

  

  /* Hero section typography */

  .hero-title { font-size: 2.2rem; }

  .hero-subtitle { font-size: 1rem; padding: 0 15px; }



  /* Grid layouts */

  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  

  /* Category Tabs Horizontal Scroll Native UI */

  .category-tabs { 

    flex-wrap: nowrap; 

    overflow-x: auto; 

    -webkit-overflow-scrolling: touch; 

    justify-content: flex-start;

    padding-bottom: 8px; /* space for scroll */

    scrollbar-width: none; /* Firefox */

  }

  .category-tabs::-webkit-scrollbar { display: none; /* Safari and Chrome */ }

  .cat-btn { white-space: nowrap; padding: 8px 18px; font-size: 0.8rem; }



  /* Sections Spacing */

  .about-logo-img { width: 250px; height: 250px; padding: 0; }

  .section-title { font-size: 2rem; }

  

  /* Stats Grid */

  .stats-inner   { grid-template-columns: repeat(2, 1fr); gap: 30px; }

  .stat-number { font-size: 2.8rem; }

  

  /* FAQ Adjustments */

  .faq-question { font-size: 0.95rem; }

  

  /* Footer Re-align */

  .footer-top-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }

  .footer-brand { align-items: center; display: flex; flex-direction: column; }

  .footer-tagline { margin: 15px auto; }

  .footer-contact-links { align-items: center; }

}



@media (max-width: 480px) {

  /* Tight mobile layouts (iPhone Mini, SE, etc) */

  .products-grid { grid-template-columns: 1fr; }

  .hero-actions  { flex-direction: column; align-items: stretch; width: 100%; padding: 0 20px; }

  .hero-actions .btn { width: 100%; justify-content: center; }

  

  .stats-inner { grid-template-columns: 1fr; gap: 20px; }

  .card-img-wrap { aspect-ratio: 4 / 3; } /* slightly wider on single column */

  

  .contact-methods { flex-direction: column; gap: 16px; }

  .contact-method { width: 100%; padding: 12px; }

  

  .form-group { width: 100%; }

}



/* =============================================

   CATEGORY ICONS

   ============================================= */



.cat-icon-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  padding: 16px 32px;

  border-radius: 14px;

  background: none;

  border: none;

  cursor: pointer;

  transition: background var(--transition), transform var(--transition);

  color: var(--color-pink);

  position: relative;

}



/* Separador vertical entre itens */

.cat-icon-item + .cat-icon-item::before {

  content: '';

  position: absolute;

  left: 0; top: 20%; bottom: 20%;

  width: 1px;

  background: rgba(0,0,0,.08);

}



.cat-icon-item:hover {

  background: var(--color-pink-pale);

  transform: translateY(-2px);

  color: var(--color-pink);

}



.cat-icon-item.active {

  background: var(--color-pink-pale);

  color: var(--color-pink);

}



.cat-icon-svg {

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.cat-icon-svg svg {

  width: 100%;

  height: 100%;

  color: inherit;

}



.cat-icon-label {

  font-size: .78rem;

  font-weight: 700;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: var(--color-text);

  white-space: nowrap;

}



.cat-icon-item.active .cat-icon-label,

.cat-icon-item:hover .cat-icon-label {

  color: var(--color-pink);

}



/* Responsive */

@media (max-width: 600px) {

  .cat-icon-item {

    padding: 12px 16px;

  }

}



/* Barra de Categorias Removida conforme solicitado */



/* =============================================

   SERVICES STACKING CARDS

   ============================================= */



.premium-hero {

  z-index: 999;

}



.hero-wrapper, .hero-slide {

  overflow: visible;

}



.services-stacking-section {

  position: relative; 

  z-index: 1; /* Fica abaixo do transbordo do Hero */

  padding: 120px 0; /* Aumentado o espaço entre secções */

  background-color: var(--color-bg); /* Sincronizado com #F8F3F0 */

}



.stacking-cards-container {

  display: flex;

  flex-direction: column;

  position: relative;

  max-width: 1100px;

  margin: 0 auto;

}



.stack-card {

  position: sticky;

  top: 250px;

  background: var(--color-white);

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 -15px 30px rgba(0,0,0,0.08), 0 10px 30px rgba(0,0,0,0.04);

  display: flex;

  flex-direction: row;

  margin-bottom: 120px;

  border: 1px solid rgba(0,0,0,0.02);

  will-change: transform, opacity;

  transform-origin: center top;

  padding: 0; /* Sem padding para a imagem encostar à borda */

}



.stack-card:last-child {

  margin-bottom: 0;

}



.stack-card.card-flip {

  flex-direction: row-reverse;

}



.stack-card-image {

  flex: 0 0 52%;

  max-width: 52%;

  aspect-ratio: 1 / 1;

  margin: 0;

  padding: 0;

  overflow: hidden; /* Garante que a imagem não ultrapasse os limites do contentor */

  position: relative;

}



.stack-card-image img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: 50% 50%;

  display: block;

  border-radius: 0;

  background: #f8f3f0; /* Fundo neutro para object-fit:contain não mostrar buracos */

}



.stack-card-content {

  flex: 1;

  max-width: 50%;

  padding: 32px 40px; /* Redução para não apertar as margens interiores limitadas */

  display: flex;

  flex-direction: column;

  justify-content: center;

  background: var(--color-white);

}



.stack-card-title {

  font-size: 1.6rem; /* Mais reduzido para caber bem na altura menor */

  color: var(--color-heading);

  margin-bottom: 12px;

  line-height: 1.25;

  font-family: var(--font-heading);

}



.stack-card-desc {

  font-size: 0.95rem; /* Letras mais práticas e reduzidas */

  line-height: 1.5;

  margin-bottom: 20px;

  color: var(--color-text);

}



.stack-card-link {

  display: inline-flex;

  align-items: center;

  font-weight: 700;

  color: var(--color-heading);

  text-decoration: none;

  font-size: 0.85rem;

  letter-spacing: 0.08em;

  margin-bottom: 32px;

  transition: color var(--transition);

}



.stack-card-link:hover {

  color: var(--color-pink);

}



.stack-card-tags {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: auto;

}



.stack-card-tags .tag {

  background: var(--color-bg-alt);

  border: 1px solid rgba(0,0,0,0.05);

  padding: 8px 16px;

  border-radius: 40px;

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  color: var(--color-text);

  letter-spacing: 0.05em;

}



@media (max-width: 950px) {

  .services-stacking-section {

    padding: 40px 15px 0 !important;

    background: #fafafa !important;

  }



  .stacking-cards-container {

    display: flex !important;

    flex-direction: column !important;

    gap: 30px !important;

  }



  .stack-card {

    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    height: auto !important;

    min-height: auto !important;

    top: 0 !important;

    margin-bottom: 0 !important;

    background: #ffffff !important;

    border-radius: 24px !important;

    overflow: hidden !important;

    box-shadow: 0 12px 35px rgba(0,0,0,0.07) !important;

    border: 1px solid rgba(0,0,0,0.03) !important;

  }



  .stack-card .stack-card-image {

    order: 1 !important;

    width: 100% !important;

    height: 340px !important;

    flex: none !important;

    position: relative !important;

  }



  .stack-card .stack-card-image img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;

  }



  .stack-card .stack-card-content {

    order: 2 !important;

    width: 100% !important;

    padding: 20px 18px !important;

    background: #ffffff !important;

  }



  .stack-card-title {

    font-size: 1.6rem !important;

    margin-bottom: 12px !important;

    color: var(--color-dark) !important;

  }



  .stack-card-desc {

    font-size: 0.95rem !important;

    line-height: 1.6 !important;

    margin-bottom: 15px !important;

    color: #555 !important;

  }



  .stack-card-tags {

    margin-top: 15px !important;

    justify-content: flex-start !important;

    gap: 8px !important;

  }



  /* Ajuste para Samsung/Android height issues */

  .stack-card-image::before, .stack-card-image::after {

    display: none !important;

  }

}



@media (max-width: 480px) {

  .stack-card .stack-card-image { height: 300px !important; }

  .stack-card-title { font-size: 1.4rem !important; }

}



/* =============================================

   DUAL SLIDER INFINITO – Secção de Produtos



   Fila superior: desliza para a ESQUERDA

   Fila inferior: desliza para a DIREITA

   ============================================= */



@keyframes scroll-left {

  0%   { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}



@keyframes scroll-right {

  0%   { transform: translateX(-50%); }

  100% { transform: translateX(0); }

}



.dual-slider-section {

  background: var(--color-bg-alt);

  padding: 64px 0 64px;

  overflow: hidden;

}



.dual-slider-header {

  text-align: center;

  margin-bottom: 48px;

  padding: 0 24px;

}



.dual-slider-header .section-eyebrow {

  display: block;

  margin-bottom: 12px;

}



.dual-slider-header h2 {

  font-family: var(--font-serif);

  font-size: clamp(2.2rem, 5vw, 3.5rem);

  font-weight: 700;

  color: var(--color-text-dark);

  margin-bottom: 12px;

  line-height: 1.1;

}



.dual-slider-header .slider-subtitle {

  font-family: var(--font-secondary);

  font-size: 1rem;

  color: var(--color-text-light, #888);

  letter-spacing: 0.5px;

}



.slider-track-wrap {

  overflow: hidden;

  width: 100%;

  position: relative;

  /* Fade nas bordas para efeito premium */

  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);

  mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);

}



.slider-track-wrap + .slider-track-wrap {

  margin-top: 20px;

}



.slider-track {

  display: flex;

  flex-wrap: nowrap;

  width: max-content;

  will-change: transform;

}



/* Fila superior → desliza para a ESQUERDA */

.slider-left {

  animation: scroll-left 145s linear infinite;

}



/* Fila inferior → desliza para a DIREITA */

.slider-right {

  animation: scroll-right 145s linear infinite;

}



/* Carroséis andam sempre — sem pausa ao hover */



/* Item individual (card de imagem) */

.slide-item {

  flex-shrink: 0;

  width: 260px;

  height: 260px;

  margin-right: 16px;

  border-radius: var(--radius-lg);

  overflow: hidden;

  display: block;

  position: relative;

  box-shadow: var(--shadow-sm);

  transition: transform .3s ease, box-shadow .3s ease;

}



.slide-item:hover {

  transform: scale(1.04);

  box-shadow: var(--shadow-md);

  z-index: 2;

}



.slide-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform .4s ease;

}



.slide-item:hover img {

  transform: scale(1.08);

}



/* Responsive: ajustar tamanho dos cards em mobile */

@media (max-width: 768px) {

  .slide-item {

    width: 180px;

    height: 180px;

    margin-right: 12px;

  }

  .dual-slider-section {

    padding: 36px 0 48px;

  }

  .slider-left  { animation-duration: 110s; }

  .slider-right { animation-duration: 110s; }

}



@media (max-width: 480px) {

  .slide-item {

    width: 140px;

    height: 140px;

    margin-right: 10px;

  }

  .slider-left  { animation-duration: 85s; }

  .slider-right { animation-duration: 85s; }

}



/* =============================================

   CONTACTS DEDICATED PAGE

   ============================================= */

.contact-hero-banner {

  background: url('images/contactos-hero.webp') center/cover no-repeat;

  color: #fff;

  text-align: center;

  position: relative;

  padding: 160px 0 100px 0;

}



/* Mobile: compensar header fixed */

@media (max-width: 768px) {
  .contact-hero-banner {
    padding: 110px 20px 60px;
    min-height: 60svh;
    display: flex;
    align-items: center;
  }
  .contact-hero-banner h1 {
    font-size: 1.7rem;
    line-height: 1.14;
    max-width: 9ch;
    margin: 0 auto 10px;
    text-wrap: balance;
  }
  .contact-split-section {
    padding: 50px 0;
  }
}
.contact-hero-banner::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0,0,0, 0.4);

}

.contact-hero-banner .banner-content {

  position: relative;

  z-index: 1;

}

.contact-hero-banner h1 {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  margin-bottom: 10px;
  line-height: 1.08;
}
.contact-hero-banner .breadcrumbs {

  font-size: 0.9rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

}



.contact-split-section {

  padding: 80px 0;

  background: #f9f9f9;

}

.contact-split-inner {

  display: flex;

  gap: 60px;

  align-items: flex-start;

  justify-content: space-between;

}



.contact-info-block {

  flex: 1;

  max-width: 500px;

}

.contact-info-block h2 {

  font-family: var(--font-serif);

  font-size: 2.2rem;

  color: var(--color-dark);

  margin-bottom: 20px;

}

.contact-info-block .contact-desc {

  color: var(--color-muted);

  font-size: 0.95rem;

  line-height: 1.6;

  margin-bottom: 40px;

}

.contact-list {

  list-style: none;

  padding: 0;

}

.contact-list li {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 30px;

}

.contact-list .icon-circle {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  border: 1px solid var(--color-pink-light);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  background: #fff;

}

.contact-list-text p {

  color: var(--color-muted);

  font-size: 0.95rem;

  line-height: 1.5;

  margin: 0;

}

.contact-disclaimer {

  display: inline-block;

  margin-top: 8px;

  font-size: 0.82rem;

  line-height: 1.45;

  color: #8b7280;

}

.contact-list-text strong {

  display: block;

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--color-dark);

  margin-bottom: 4px;

}



.contact-card-form {

  flex: 1;

  max-width: 550px;

  background: #fff;

  padding: 40px;

  border-radius: 4px;

  box-shadow: 0px 4px 15px rgba(0,0,0,0.05);

}

.contact-card-form h3 {

  font-family: var(--font-serif);

  font-size: 1.5rem;

  color: var(--color-dark);

  margin-bottom: 30px;

}

.contact-form-inner .form-row {

  display: flex;

  gap: 20px;

  align-items: flex-end; /* Garante que os inputs começam na mesma linha de base, mesmo que uma label tenha mais altura */

}

.contact-form-inner .form-group.half {

  flex: 1;

}

.contact-form-inner .form-group {

  margin-bottom: 20px;

}

.contact-form-inner label {

  display: block;

  font-size: 0.8rem;

  color: var(--color-muted);

  margin-bottom: 8px;

}

.contact-form-inner input,

.contact-form-inner textarea {

  width: 100%;

  padding: 12px;

  border: 1px solid #ddd;

  border-radius: 4px;

  font-family: var(--font-sans);

  font-size: 0.9rem;

  background: #fafafa;

  color: var(--color-dark);

  caret-color: var(--color-dark);

}

.contact-form-inner input:focus,

.contact-form-inner textarea:focus {

  outline: none;

  border-color: var(--color-pink);

  background: #fff;

}

.contact-submit-btn {

  background: var(--color-dark);

  color: #fff;

  border: none;

  border-radius: 30px;

  padding: 14px 28px;

  font-size: 0.8rem;

  font-weight: 600;

  cursor: pointer;

  letter-spacing: 0.05em;

  transition: opacity 0.3s ease;

  margin-top: 10px;

}

.contact-submit-btn:hover {

  opacity: 0.8;

}

.contact-form-note {

  margin-top: 18px;

  font-size: 0.88rem;

  line-height: 1.6;

  color: var(--color-muted);

}

.contact-form-inner input::placeholder,

.contact-form-inner textarea::placeholder {

  color: rgba(95, 79, 79, 0.7);

}



@media (max-width: 900px) {

  .contact-split-inner {

    flex-direction: column;

  }

  .contact-card-form {

    width: 100%;

    max-width: none;

  }

  .contact-hero-banner {

    padding: 120px 0 80px 0;

  }

}



/* =============================================

   CROSS-BROWSER FIXES & MOBILE OPTIMIZATIONS

   (Brave, Safari, Firefox, Chrome)

   ============================================= */



/* --- backdrop-filter: prefixo -webkit- para Safari e Brave --- */

.site-header.scrolled {

  -webkit-backdrop-filter: blur(10px);

  backdrop-filter: blur(10px);

}



/* --- aspect-ratio fallback para browsers antigos --- */

@supports not (aspect-ratio: 1 / 1) {

  .card-img-wrap::before {

    float: left;

    padding-top: 100%;

    content: '';

  }

  .card-img-wrap::after {

    display: block;

    content: '';

    clear: both;

  }

  .stack-card-image::before {

    float: left;

    padding-top: 100%;

    content: '';

  }

  .stack-card-image::after {

    display: block;

    content: '';

    clear: both;

  }

}



/* --- inset fallback para Safari < 14 --- */

@supports not (inset: 0) {

  .card-overlay {

    top: 0; left: 0; right: 0; bottom: 0;

  }

  .contact-hero-banner::before {

    top: 0; left: 0; right: 0; bottom: 0;

  }

}



/* --- Fixes para animações em Brave/Safari --- */

.hero-slide.active .hero-text-area,

.hero-slide.active .hero-image-area,

.hero-slide.exiting .hero-text-area,

.hero-slide.exiting .hero-image-area {

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}



/* --- Touch & UX Mobile Improvements --- */

a, button, .btn, .hero-btn-primary, .cat-btn, .pill-nav a, .hamburger {

  -webkit-tap-highlight-color: rgba(212,96,138,0.15);

  touch-action: manipulation;

}



/* Impede seleção de texto acidental no scroll mobile */

.dual-slider-section, .services-stacking-section {

  -webkit-user-select: none;

  -moz-user-select: none;

  user-select: none;

}



/* --- Overflow X global provisório comentado para não partir o STICKY --- */

html, body {

  max-width: 100%;

}



/* --- Mobile hero: corrige empilhamento no Brave mobile --- */

@media (max-width: 768px) {

  .premium-hero {

    margin-bottom: 0;

    overflow: hidden;

  }



  .hero-wrapper {

    min-height: auto;

    height: auto;

    overflow: visible;

  }



  .hero-slide {

    display: none; /* Método mais robusto para garantir troca em telemóveis Samsung/Android */

    position: relative !important;

    width: 100%;

    pointer-events: none;

  }



  .hero-slide.active {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    text-align: center;

    padding: 20px 20px 0 20px;

    gap: 15px;

    opacity: 1;

    pointer-events: auto;

  }



  .hero-slide.exiting {

    display: none;

  }



  .hero-text-area {

    max-width: 100%;

    padding-right: 0;

    width: 100%;

  }



  .hero-image-area {

    max-width: 100%;

    width: 100%;

    justify-content: center;

    align-items: center;

    margin-bottom: -5px; 

    margin-top: auto;

    opacity: 0; /* Começa invisível para a animação de entrada */

  }



  /* Animação de entrada para as imagens no mobile */

  .hero-slide.active .hero-image-area {

    animation: imageEnterRightMobile 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

    animation-delay: 0.3s;

  }



  /* Slide 2 tem o seu final deslocado para a esquerda */

  .hero-slide.active#slide-2 .hero-image-area {

    animation: imageEnterRightMobileSlide2 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

    animation-delay: 0.3s;

  }



  @keyframes imageEnterRightMobile {

    from { opacity: 0; transform: translateX(80px); }

    to   { opacity: 1; transform: translateX(0); }

  }



  @keyframes imageEnterRightMobileSlide2 {

    from { opacity: 0; transform: translateX(80px); }

    to   { opacity: 1; transform: translateX(-40px); }

  }



  #slide-1 .hero-main-image-wrapper,

  #slide-2 .hero-main-image-wrapper {

    max-width: 280px;

    height: auto;

    margin-bottom: 0;

    width: 100%;

  }



  .floating-hero-img {

    max-height: 320px;

    width: auto;

    max-width: 100%;

  }



  /* O transform agora é gerido pela animação imageEnterRightMobileSlide2 */



  /* Reduzir espaços especificamente no Slide 2 */

  #slide-2.active {

    gap: 8px;

  }



  .hero-main-title .script-font { font-size: 2rem; }

  .hero-main-title .bold-font   { font-size: 1.4rem; }

  .hero-description { 

    font-size: 0.95rem; 

    margin: 0 auto 15px auto; 

    width: 100%; 

    max-width: 100%;

    padding: 0 16px;

    text-align: center;

    box-sizing: border-box;

    line-height: 1.5;

  }



  .hero-badge {

    display: none !important; /* Esconde o "Gender Reveal" como pedido */

  }

}



/* --- Mobile nav pill: fix para telemóvel --- */



/* Limpeza: Lógica mobile movida para o bloco definitivo no final do ficheiro */





/* --- Tablet (768px – 1024px) --- */

@media (min-width: 769px) and (max-width: 1024px) {

  .pill-nav { padding: 8px 20px; }

  .pill-nav ul { gap: 16px; }

  .pill-nav a { font-size: 0.8rem; padding: 6px 10px; }



  .about-inner { gap: 40px; }

  .about-logo-img { width: 240px; height: 240px; }

}



/* --- Fixes gerais Brave/Chromium --- */

.mobile-nav {

  -webkit-overflow-scrolling: touch;

}



/* Garante que a pill-nav só aparece em desktop */

@media (min-width: 769px) {

  .pill-nav { display: flex; }

  .hamburger { display: none !important; }

}



/* --- FAQ Accordion - fix para Safari --- */

.faq-answer {

  -webkit-transition: max-height 0.4s ease, padding 0.3s ease;

  transition: max-height 0.4s ease, padding 0.3s ease;

}



/* --- Performance: reduz repaints em hover --- */

/* NOTA: .stack-card NÃO pode ter transform: translateZ(0) porque quebra o position: sticky */

.product-card,

.slide-item {

  will-change: transform;

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

}



/* --- Contact form: fix iOS zoom no focus --- */

.contact-form-inner input,

.contact-form-inner textarea {

  font-size: 1rem; /* iOS não faz zoom com font-size >= 16px */

}



/* --- Footer: fix text-align em mobile --- */

@media (max-width: 767px) {

  .footer-top-inner {

    grid-template-columns: 1fr;

    text-align: center;

  }

  .footer-nav ul,

  .footer-produtos ul {

    padding-left: 0;

  }

  .footer-brand { 

    align-items: center; 

  }

}



/* --- About section mobile --- */

@media (max-width: 767px) {

  .about-section { padding: 60px 0; }

  .about-inner { gap: 30px; }

  .about-logo-img { 

    width: 250px; 

    height: 250px; 

    object-position: center 30%;

  }

}





/* =============================================

   SERVICE PAGES (CASAMENTOS, ETC)

   ============================================= */



.service-hero {

  min-height: 85vh;

  width: 100%;

  margin: 0;

  border-radius: 0;

  position: relative;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: var(--color-bg);

  padding-top: var(--header-h); /* desktop: compensação header sticky */

}



/* Mobile: compensação do header fixed */

@media (max-width: 768px) {

  .service-hero {

    padding-top: 70px;

    min-height: 55vh;

  }

}



.service-hero-bg {

  position: absolute;

  top: 0; left: 0; width: 100%; height: 100%;

  z-index: 1;

}



.service-hero-bg::after {

  content: '';

  position: absolute;

  top: 0; left: 0; width: 100%; height: 100%;

  background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);

  z-index: 2;

}



@media (max-width: 768px) {

  .service-hero-bg::after {

    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.85) 100%) !important;

  }

}



.service-hero-bg img {

  width: 100%; height: 100%;

  object-fit: cover;

  filter: brightness(0.85);

}



.service-hero-content {

  position: relative;

  z-index: 10;

  color: var(--color-white);

  padding: 100px 0;

  display: flex;

  align-items: flex-start;

}



.hero-text-box {

  max-width: 700px;

  background: none;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;

  padding: 0;

  border-radius: 0;

  border: none;

  text-align: left;

}



.hero-text-box h1 {

  font-family: var(--font-serif);

  font-size: clamp(2rem, 8vw, 4.5rem); /* Reduced min-size from 2.5rem */

  line-height: 1.1;

  margin-bottom: 20px;

  color: #fff;

}



.hero-text-box p {

  font-size: 1.25rem;

  margin-bottom: 35px;

  color: #fff;

  font-weight: 400;

  line-height: 1.6;

}



@media (max-width: 768px) {

  .hero-text-box {

    padding: 0;

    text-align: left;

  }

  .hero-text-box h1,

  .hero-text-box p {

    text-align: left;

  }

}



.service-intro {

  padding: 100px 0;

  background: var(--color-bg);

}



.serif-title {

  font-family: var(--font-serif);

  font-size: clamp(1.4rem, 3vw, 2.4rem);

  color: var(--color-pink);

  margin-bottom: 20px;

  line-height: 1.1;

  width: 100%;

}



.intro-text {

  text-align: center;

  max-width: 900px;

  margin: 0 auto;

}



.intro-text p {

  font-size: 1.15rem;

  color: var(--color-text);

  line-height: 1.8;

}



.style-gallery {

  padding: 80px 0 120px;

  background: #fff;

}



.style-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 40px;

  margin-top: 60px;

}



.style-card {

  background: var(--color-bg-alt);

  border-radius: 30px;

  overflow: hidden;

  box-shadow: 0 15px 45px rgba(0,0,0,0.04);

  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  border: 1px solid rgba(0,0,0,0.02);

  /* Posicionamento para camadas de sobreposição */

  position: relative;

  will-change: transform, opacity;

}



/* Camadas Z-index: Filas de cima ficam por cima das de baixo */

.style-card:nth-child(-n+3) { z-index: 10; }

.style-card:nth-child(n+4):nth-child(-n+6) { z-index: 9; }

.style-card:nth-child(n+7):nth-child(-n+9) { z-index: 8; }

.style-card:nth-child(n+10) { z-index: 7; }



.scroll-reveal {

  opacity: 0;

  transform: translateY(-50px); /* Começa ligeiramente "dentro" da fila de cima */

  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), 

              transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);

}



.scroll-reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



/* Removed leftover scroll-reveal delays */

.style-card:hover {

  box-shadow: 0 30px 70px rgba(212, 96, 138, 0.12);

}



.style-card-image {

  height: 400px;

  overflow: hidden;

}



.style-card-image img {

  width: 100%; height: 100%;

  object-fit: cover;

  transition: transform 0.8s ease;

}



/* Zoom removido a pedido do utilizador */



.style-card-info {

  padding: 35px 25px;

  text-align: center;

}



.style-card-info h4 {

  font-family: var(--font-serif);

  font-size: 1.6rem;

  color: var(--color-dark);

  margin-bottom: 12px;

}



.style-card-info p {

  font-size: 1rem;

  color: var(--color-muted);

  line-height: 1.5;

}



.cta-banner {

  padding: 0 0 60px;

  background: transparent;

}



.cta-banner--white {

  background: #fff;

}



.cta-inner {

  background: linear-gradient(135deg, var(--color-pink), #e082a5);

  border-radius: 40px;

  padding: 65px 40px;

  text-align: center;

  color: var(--color-white);

  box-shadow: none;

}



.cta-inner .serif-title {

  color: var(--color-white);

  margin-bottom: 25px;

}



.cta-inner p {

  font-size: 1.25rem;

  margin-bottom: 45px;

  max-width: 700px;

  margin-left: auto;

  margin-right: auto;

  opacity: 0.95;

}



.btn-white {

  background: #fff;

  color: var(--color-pink);

  padding: 16px 45px;

  border-radius: 60px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  display: inline-block;

  transition: all 0.3s ease;

  font-size: 0.9rem;

}



.btn-white:hover {

  transform: scale(1.05) translateY(-3px);

  box-shadow: 0 15px 35px rgba(0,0,0,0.1);

  background: var(--color-bg);

}



.fade-in-up {

  opacity: 0;

  transform: translateY(40px);

  animation: fadeInUpSlight 1s forwards cubic-bezier(0.2, 0.8, 0.2, 1);

}



@media (min-width: 769px) {

  .delay-1 { animation-delay: 0.2s; transition-delay: 0.2s; }

  .delay-2 { animation-delay: 0.4s; transition-delay: 0.4s; }

}

@media (max-width: 768px) {

  .delay-1, .delay-2 { animation-delay: 0s !important; transition-delay: 0s !important; }

}



@keyframes fadeInUpSlight {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@media (max-width: 768px) {

  .service-hero {

    min-height: 100vh !important; /* fallback */

    min-height: 100svh !important; /* Above the fold perfeito, estável ao scroll mobile */

    max-height: none !important; /* Remove o cap do inline style */

    margin: 0 !important; 

    padding-top: 80px !important; /* Espaço para o header */

    display: flex;

    align-items: flex-end !important; 

    padding-bottom: 60px !important;

    width: 100% !important;

    border-radius: 0 !important;

    overflow: hidden;

  }

  body[data-seo-page="wedding"] .service-hero-bg img {

    object-position: 85% center !important;

  }

  .service-hero-content { padding-top: 40px; padding-bottom: 40px; width: 100% !important; align-items: flex-start; }

  .hero-text-box {

    padding: 0;

    border-radius: 0;

    width: 100% !important;

    margin: 0;

    text-align: left;

    background: none;

  }

  .hero-text-box h1 {

    font-size: 2.1rem !important; /* Igualado à Home */

    margin-bottom: 15px !important;

  }

  body[data-seo-page="baptism"] .hero-text-box h1 {
    font-size: 1.95rem !important;
    line-height: 1.12 !important;
    max-width: 11ch;
    text-wrap: balance;
  }
  body[data-seo-page="wedding"] .hero-text-box h1,
  body[data-seo-page="baptism"] .hero-text-box h1 {
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  }
  .hero-text-box p {

    font-size: 0.88rem !important; /* Igualado à Home */

    line-height: 1.5 !important;

    margin-bottom: 25px !important;

  }

  .service-intro { padding: 60px 0; }

  .style-card-image { height: 380px; }

  .style-card-info { padding: 25px 15px; }

  .style-grid {

    grid-template-columns: 1fr !important;

    gap: 25px;

  }

  .cta-inner { padding: 40px 20px; border-radius: 24px; }

  .cta-inner .serif-title { font-size: 1.35rem; line-height: 1.3; margin-bottom: 16px; }

  .cta-inner p { font-size: 0.92rem; margin-bottom: 28px; }

  .cta-inner .btn-white { padding: 12px 28px; font-size: 0.78rem; border-radius: 30px; }

}





/* =============================================

   BAKERY STYLE REDESIGN (REF: Pinterest-style)

   ============================================= */

:root {

  --color-bakery-pink:   #feeaf1;

  --color-bakery-yellow: #fef8dd;

  --color-bakery-purple: #f3e9ff;

  --color-bakery-peach:  #fff0e6;

  --color-bakery-green:  #e7f5e1;

  --radius-bakery:       40px;

}



.bakery-section {

  padding: 60px 0;

  background: transparent;

}



/* =============================================

   DYNAMIC HERO BUTTONS

   ============================================= */

.btn-hero-pill {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 11px 26px;

  border-radius: 50px;

  font-weight: 700;

  text-transform: uppercase;

  font-size: 0.85rem;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: 0 10px 25px rgba(0,0,0,0.1);

}



.btn-hero-pill:hover {

  transform: translateY(-3px);

  box-shadow: 0 15px 30px rgba(0,0,0,0.15);

}



.btn-hero-pill.white-pink {

  background: #ffffff;

  color: var(--color-pink);

}



.btn-hero-pill.pink-white {

  background: var(--color-pink);

  color: #ffffff;

}



.btn-hero-pill.white-black {

  background: #ffffff;

  color: #000000;

}



.btn-hero-pill .arrow-icon {

  width: 18px;

  height: 18px;

  transition: transform 0.3s ease;

}



.btn-hero-pill:hover .arrow-icon {

  transform: translateX(5px);

}



/* Pinterest Card Adjustments (Matching Anniversary Hero) */

.bakery-card.wide[style*="background: var(--color-pink-pale)"],

.bakery-card.tall[style*="background: var(--color-pink-pale)"],

.bakery-card[style*="background: var(--color-pink-pale)"] {

  background: var(--color-pink-pale) !important;

}



.bakery-card .card-text h3 {

  color: var(--color-pink);

  font-size: 1.4rem;

  margin-bottom: 15px;

}



.bakery-card .card-text p {

  color: var(--color-dark);

  font-size: 0.95rem;

  line-height: 1.6;

}



.bakery-header-card {

  background: linear-gradient(to right, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.12) 40%, rgba(0,0,0,0) 100%), 

              linear-gradient(135deg, var(--color-pink) 0%, #e082a5 100%);

  border-radius: 0;

  width: 100%;

  margin: 0 0 50px 0;

  padding: 100px 80px 100px 120px; 

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 60px;

  min-height: 100vh;

  overflow: hidden;

  box-shadow: 0 20px 40px rgba(212, 96, 138, 0.15);

}



.bakery-header-content {

  flex: 1;

  z-index: 2;

  color: var(--color-dark); /* Contrast on light pink */

  animation: textFloatUpVertical 1.2s ease forwards; /* Animação estilo Home */

}



.bakery-header-content h1 {

  margin-bottom: 20px;

  line-height: 1.1;

}



.bakery-header-content h1 .script-font {

  font-family: 'Dancing Script', cursive !important;

  font-size: 3.8rem !important; /* Igualado à Home */

  margin-bottom: -5px;

}



.bakery-header-content h1 .bold-font {

  font-family: var(--font-sans) !important;

  text-transform: uppercase;

  font-weight: 800;

  font-size: 2.6rem !important; /* Igualado à Home */

}

@media (max-width: 768px) {

  .bakery-header-content h1 .script-font { font-size: 2.2rem !important; }

  .bakery-header-content h1 .bold-font { font-size: 1.5rem !important; }

}



.bakery-header-content p {

  font-size: 1rem; /* Reduced size */

  max-width: 450px;

  margin-bottom: 30px;

  color: #fff; /* White as requested */

  text-shadow: 0 4px 15px rgba(0,0,0,0.8); /* Sombra extrema estilo Home */

}



.bakery-header-img {

  position: absolute;

  top: 0;

  right: 0;

  width: 55%;

  height: 100%;

  object-fit: contain;

  object-position: center 95%;

  padding: 20px;

  z-index: 1;

}



.card-text {

  max-width: 90%;

}



.card-text .serif-title {

  font-size: 2.5rem;

  line-height: 1.1;

  margin-bottom: 15px;

  font-family: 'Playfair Display', serif;

}



.card-text p {

  font-size: 1.2rem;

  line-height: 1.5;

  font-family: 'Montserrat', sans-serif;

}



.bakery-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}



.bakery-card {

  border-radius: var(--radius-bakery);

  overflow: hidden;

  position: relative;

  background: #f9f9f9;

  transition: transform 0.4s ease;

}



.bakery-card:hover {

  transform: translateY(-10px);

}



.bakery-card.tall { grid-row: span 2; }

.bakery-card.wide { grid-column: span 2; }



@media (min-width: 992px) {

  .bakery-card.push-right {

    grid-column: 2 / -1 !important;

  }

}



/* Scroll Reveal Animation (Global) */

.reveal-on-scroll {

  opacity: 0;

  transform: translateY(-40px);

  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  will-change: transform, opacity;

}



.reveal-on-scroll.visible {

  opacity: 1;

  transform: translateY(0);

}



.bakery-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.bakery-card-overlay {

  position: absolute;

  top: 20px;

  left: 20px;

  right: 20px;

  background: rgba(255,255,255,0.9);

  padding: 20px;

  border-radius: 25px;

  backdrop-filter: blur(5px);

}



.bakery-card-overlay h3 {

  font-size: 1.2rem;

  margin-bottom: 5px;

}



.bakery-card-overlay .price {

  font-weight: 700;

  color: var(--color-pink);

}



/* SEO Description Section */

.seo-description-section {

  padding: 80px 0;

  background: var(--color-bg);

}



.seo-content {

  max-width: 800px;

  margin: 0 auto;

  text-align: center;

}



.seo-content h2 {

  font-family: var(--font-serif);

  font-size: 2.5rem;

  margin-bottom: 30px;

}



.seo-content p {

  font-size: 1.1rem;

  line-height: 1.8;

  margin-bottom: 20px;

}



/* FAQ Layout */

.bakery-faq {

  padding: 80px 0;

}



.birthday-insight-layout {

  display: grid;

  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

  gap: 34px;

  align-items: start;

  padding: 26px 0 90px;

}



.birthday-insight-copy {

  background: transparent;

  padding: 0;

}



.birthday-insight-copy .seo-content {

  max-width: none;

  padding: 24px 10px 0 0;

  text-align: left;

}



.birthday-insight-copy .seo-content h2 {

  margin-bottom: 22px;

  line-height: 1.08;

}



.birthday-insight-copy .seo-content p {

  margin-bottom: 0;

}



.birthday-insight-faq {

  padding: 0;

}



.birthday-insight-faq .section-title {

  text-align: left;

  margin-bottom: 22px;

}



.birthday-insight-faq .faq-bakery-list {

  max-width: none;

  margin: 0;

}



.service-faq-layout {

  display: grid;

  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

  gap: 34px;

  align-items: start;

  padding: 26px 0 90px;

}



.service-faq-copy.service-intro {

  background: transparent;

  padding: 0;

}



.service-faq-copy .intro-text {

  max-width: none;

  padding: 24px 10px 0 0;

  text-align: left;

}



.service-faq-copy .serif-title {

  margin-bottom: 22px;

}



.service-faq-panel.faq-section,

.service-faq-panel.bakery-faq {

  background: transparent;

  padding: 0;

}



.service-faq-panel .section-eyebrow,

.service-faq-panel .section-title {

  text-align: left;

}



.service-faq-panel .section-title {

  margin-bottom: 22px;

}



.service-faq-panel .faq-list,

.service-faq-panel .faq-bakery-list {

  max-width: none;

  margin: 0;

}



.faq-bakery-list {

  max-width: 900px;

  margin: 40px auto;

}



.faq-bakery-item {

  background: #fff;

  border-radius: 20px;

  margin-bottom: 15px;

  box-shadow: var(--shadow-sm);

  overflow: hidden;

}



.faq-bakery-question {

  width: 100%;

  padding: 25px 30px;

  text-align: left;

  font-weight: 600;

  font-size: 1.1rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.faq-bakery-answer {

  padding: 0 30px 25px;

  display: none;

  font-size: 1rem;

  opacity: 0.8;

}



.faq-bakery-item.active .faq-bakery-answer {

  display: block;

}



.faq-bakery-item.active .faq-bakery-question {

  color: var(--color-pink);

}



@media (max-width: 991px) {

  .bakery-header-card { padding: 40px; }

  .bakery-header-content h1 { font-size: 3rem; }

  .bakery-grid { grid-template-columns: 1fr 1fr; }

}



@media (max-width: 767px) {

  .bakery-grid { grid-template-columns: 1fr; }

  .bakery-card.wide { grid-column: span 1; }

  .birthday-insight-layout {

    grid-template-columns: 1fr;

    gap: 18px;

    padding: 10px 0 64px;

  }

  .birthday-insight-copy .seo-content {

    padding: 0;

    text-align: center;

  }

  .birthday-insight-faq .section-title {

    text-align: center;

  }

  .service-faq-layout {

    grid-template-columns: 1fr;

    gap: 18px;

    padding: 10px 0 64px;

  }

  .service-faq-copy .intro-text {

    padding: 0;

    text-align: center;

  }

  .service-faq-panel .section-eyebrow,

  .service-faq-panel .section-title {

    text-align: center;

  }

  .bakery-header-img { 

    width: 100%; 

    height: 380px !important; /* Aumentado ligeiramente para maior impacto */

    margin-top: -20px !important; /* Subir o bolo muito pouco */

    margin-bottom: 0;

    position: relative; 

    right: auto; 

    top: auto; 

    object-position: center;

    object-fit: contain !important;

  }

  .bakery-header-card {

    flex-direction: column-reverse; /* Imagem em cima, texto em baixo */

    text-align: center; 

    gap: 0;

    padding: 30px 20px 60px; /* Texto subido conforme pedido */    margin: 0 !important; 

    width: 100% !important;

    min-height: 100vh !important; /* fallback */

    min-height: 100svh !important; /* Above the fold perfeito, estável ao scroll mobile */

    padding-top: 80px !important;

    border-radius: 0 !important;

    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0) 100%), 

                linear-gradient(135deg, var(--color-pink) 0%, #e082a5 100%) !important;

    display: flex;

    justify-content: space-evenly;

    align-items: center;

  }

  .bakery-header-content {

    padding-top: 0 !important;

    align-self: center !important;

    display: flex;

    flex-direction: column;

    align-items: center; /* Garante que o botão e textos alinham ao centro */

  }

  .bakery-header-content h1 .script-font { font-size: 1.25rem !important; margin-bottom: 5px !important; }

  .bakery-header-content h1 .bold-font { font-size: 2.1rem !important; line-height: 1.2 !important; }

  .bakery-header-content p { 

    font-size: 0.88rem !important; 

    line-height: 1.5 !important;

    margin-left: auto; 

    margin-right: auto; 

    margin-bottom: 25px !important;

  }

}



/* ═══ CARD 5: ESPECIAIS ═══ */

/* Same layout as card-1 (image left, text right) */

.stack-card.card-5 {

  flex-direction: row;

}



.stack-card.card-5 .stack-card-image {

  order: 0;

}



.stack-card.card-5 .stack-card-content {

  order: 1;

}



/* SEO Anti-bot aria label - invisible to users, readable by search engines */

.seo-aria-label {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

  opacity: 0;

  pointer-events: none;

}



/* ═══ CARD 3: ANIVERSÁRIOS — preencher o quadrado com a foto do scorpion ═══ */

.stack-card.card-3 .stack-card-image img {

  object-fit: cover;

  object-position: center 60%; /* Mostra a parte central-superior do bolo */

  background: #1a1a1a;

  transform: none; /* Removido o scale que causava o overflow */

}









.site-header {

  height: 90px;

}

.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 100%;

  padding: 0 40px;

  position: relative;

}

.left-nav, .right-nav {

  flex: 1;

}

.left-nav ul {

  display: flex;

  justify-content: flex-end;

  padding-right: 80px; /* space from center logo */

}

.right-nav ul {

  display: flex;

  justify-content: flex-start;

  padding-left: 80px; /* space from center logo */

}

.desktop-nav .nav-link {

  color: var(--color-white);

  font-family: var(--font-secondary);

  font-size: 0.95rem;

  letter-spacing: 1px;

}



/* =============================================

   DEFINITIVE MOBILE OPTIMIZATION (v3 - Fixed Positioning)

   ============================================= */

@media (max-width: 768px) {

  /* BARRA FIXA BRANCA */

  .site-header {

    background: #ffffff !important;

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 70px !important;

    display: flex !important;

    align-items: center !important;

    z-index: 9999 !important;

    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;

  }



  .site-header::after {

    display: none !important; /* Remove o bico/bico pontiagudo no telemóvel */

  }



  .header-inner {

    width: 100% !important;

    max-width: 100% !important;

    height: 100% !important;

    padding: 0 15px !important;

    display: flex !important;

    position: relative !important;

    align-items: center !important;

    justify-content: center !important;

  }



  /* QUEBRAR O AGRUPAMENTO PARA POSICIONAR INDEPENDENTE */

  .right-cluster, .header-actions {

    display: contents !important; /* Faz com que os filhos ignorem estes containers para posicionamento */

  }



  /* HAMBURGER À ESQUERDA */

  .hamburger {

    display: flex !important;

    position: absolute !important;

    left: 20px !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    z-index: 10002 !important;

    margin: 0 !important;

    padding: 10px !important; /* Área de toque maior */

  }

  .hamburger span {

    background: var(--color-pink) !important;

    width: 25px !important;

    height: 2px !important;

  }



  /* LOGO AO CENTRO */

  .logo-area {

    position: absolute !important;

    left: 50% !important;

    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: 100px !important;

    margin: 0 !important;

    z-index: 10000 !important;

    display: flex !important;

    justify-content: center !important;

  }

  .logo-circle { display: none !important; }

  .logo-horiz { 

    display: block !important; 

    opacity: 1 !important; 

    width: 110px !important;

    height: auto !important;

  }



  /* IDIOMAS À DIREITA */

  .lang-switcher-dropdown {

    position: absolute !important;

    right: 20px !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    z-index: 10002 !important;

    display: flex !important;

    margin: 0 !important;

    align-items: center !important;

  }

  .lang-switcher-dropdown .globe-btn { 

    font-size: 0.85rem !important; 

    color: var(--color-pink) !important; 

    padding: 0 !important;

    background: transparent !important;

  }

  .lang-switcher-dropdown .globe-icon {

    width: 22px !important;

    height: 22px !important;

  }



  /* COMPENSAÇÃO DO HERO */

  .premium-hero {

    padding-top: 100px !important;

    height: 100vh !important; /* fallback */

    height: 100svh !important; /* stable viewport height: não reage ao show/hide da barra do browser */

  }



  .hero-text-area { padding: 20px 15px !important; text-align: left !important; }
  body[data-seo-page="home"] #inicio .hero-text-area {
    margin-top: 140px !important;
    max-width: min(100%, 320px);
  }


  /* REDUÇÃO DE TEXTO HERO */

  .hero-main-title .script-font { font-size: 1.25rem !important; margin-bottom: 5px !important; text-align: left !important; }

  .hero-main-title .bold-font   { font-size: 2.1rem !important; line-height: 1.2 !important; text-align: left !important; }

  .hero-description { font-size: 0.88rem !important; line-height: 1.5 !important; max-width: 100% !important; margin-bottom: 25px !important; text-align: left !important; padding: 0 !important; }

  .hero-text-box { text-align: left !important; }

  .hero-text-box h1, .hero-text-box p { text-align: left !important; }

  .service-hero-content { align-items: flex-start !important; }



  /* LEFT ALIGN: premium-hero pages (home + aniversarios) */

  .premium-hero .container { text-align: left !important; }

  .premium-hero .hero-text-area,

  .premium-hero .hero-text-area * { text-align: left !important; }

  .premium-hero .hero-main-title { text-align: left !important; }

  .premium-hero .hero-description { text-align: left !important; margin-left: 0 !important; }
  .premium-hero .hero-badge { display: block !important; text-align: left !important; }
  .hero-btn-primary {
    padding: 10px 18px !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.02em !important;
    max-width: 100%;
    white-space: normal !important;
  }
  .btn-hero-pill {

    padding: 10px 22px !important;

    font-size: 0.8rem !important;

  }

  

  /* REDUÇÃO AGRESSIVA DA IMAGEM */

  .hero-main-image-wrapper {

    height: 300px !important;

    max-width: 100% !important;

    margin-bottom: 0 !important;

    justify-content: center !important;

    align-items: center !important;

  }

  .floating-hero-img {

    max-height: 280px !important;

    width: auto !important;

    margin: 0 auto !important;

  }

}





/* INTERACTIVE SUBMENU MOBILE */

.mobile-menu-item-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

}



.mobile-submenu-trigger {

  background: none;

  border: none;

  color: var(--color-pink);

  padding: 10px;

  cursor: pointer;

  transition: transform 0.3s ease;

  display: flex;

  align-items: center;

  z-index: 10;

}



.mobile-submenu {

  display: none !important; 

  padding-left: 20px;

  list-style: none;

  margin-top: 5px;

  border-left: 1px dotted var(--color-pink-light);

  margin-left: 10px;

}



.mobile-has-submenu.open .mobile-submenu {

  display: block !important; 

}



.mobile-submenu-trigger svg {

  transform: rotate(0deg); /* Volta a apontar para BAIXO */

}



.mobile-has-submenu.open .mobile-submenu-trigger svg {

  transform: rotate(180deg); /* Aponta para CIMA */

}



.mobile-submenu .nav-link {

    font-size: 1rem !important;

    padding: 10px 0 !important;

    opacity: 1 !important;

}



/* FINAL FORCE MOBILE SERVICES (v5 - RESOLUÇÃO DE LARGURA) */

@media (max-width: 950px) {

  .services-stacking-section {

    padding: 20px 0 !important;

    background: #ffffff !important;

    width: 100% !important;

    overflow: visible !important; /* CORREÇÃO: Overflow visible é obrigatório para o sticky funcionar! */

  }



  .stacking-cards-container {

    display: flex !important;

    flex-direction: column !important;

    gap: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    padding: 0 15px !important;

    overflow: visible !important;

  }



  .stack-card {

    position: sticky !important; 

    top: 71px !important;

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    background: #ffffff !important;

    border-radius: 20px !important;

    box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;

    overflow: hidden !important;

    margin-bottom: 0 !important;

    transform: translateZ(0); /* Melhora performance no Samsung/Android */

  }



  .stack-card-image {

    order: 1 !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    aspect-ratio: 1 / 1 !important;

    max-height: 350px !important;

    flex: none !important;

  }



  .stack-card-image img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

  }



  .stack-card-content {

    order: 2 !important;

    width: 100% !important;

    max-width: 100% !important; /* CORREÇÃO CRÍTICA: ANULA O 50% DO DESKTOP */

    padding: 25px 20px !important;

    background: #ffffff !important;

    display: block !important; /* Mais estável para texto */

  }



  .stack-card-title {

    font-size: 1.6rem !important;

    max-width: 100% !important;

    margin-bottom: 12px !important;

    line-height: 1.2 !important;

  }



  .stack-card-desc {

    font-size: 1rem !important;

    max-width: 100% !important; /* CORREÇÃO CRÍTICA */

    width: 100% !important;

    line-height: 1.5 !important;

    margin-bottom: 20px !important;

  }



  .stack-card-tags {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 8px !important;

    width: 100% !important;

    margin-top: auto !important;

    padding-top: 15px !important;

    border-top: 1px dotted #eee !important;

  }



  .tag {

    font-size: 0.72rem !important;

    padding: 6px 15px !important;

    background: #fdf2f7 !important; /* Cor suave alinhada com o rosa da marca */

    color: var(--color-pink) !important;

    border-radius: 20px !important;

    font-weight: 600 !important;

    border: 1px solid rgba(212, 96, 138, 0.1) !important;

  }

}



/* =============================================

   BABY SHOWER REDESIGN (Pink & Blue Theme)

   ============================================= */

.babyshower-page {

  background-color: #faf5f2; /* Creamy off-white as base */

}

.bs-hero {

  position: relative;

  width: 100%;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  padding-top: 80px;

  overflow: hidden;

  background: var(--color-bg);

}

.bs-hero-img-bg {

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  z-index: 0;

}

.bs-hero-img-bg img {

  width: 100%; height: 100%;

  object-fit: cover;

  object-position: bottom center;

}

.bs-hero-overlay {

  position: relative;

  z-index: 10;

  display: flex;

  width: 100%;

  justify-content: center;

  margin-top: 20px;

}

.bs-circle-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(25px);
  width: 390px;
  height: 390px;
  border-radius: 50%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  padding: 18px 22px;
}
.bs-circle-card h1 {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--color-dark);
  margin-bottom: 12px;
  line-height: 1.06;
}
.bs-circle-card p {
  font-size: 0.76rem;
  text-transform: none;
  letter-spacing: 0.2px;
  margin-bottom: 18px;
  color: #333;
  line-height: 1.45;
}
.bs-heart {

  color: var(--color-pink);

  font-size: 1.5rem;

  margin-bottom: 10px;

}

.bs-btn {

  display: inline-block;

  padding: 10px 30px;

  border-radius: 30px;

  font-weight: 700;

  font-size: 0.85rem;

  text-transform: uppercase;

  text-decoration: none;

  transition: all 0.3s ease;

}

.bs-pink-btn {

  background: #e6a7b3;

  color: #fff;

  box-shadow: 0 8px 20px rgba(230,167,179,0.3);

}

.bs-pink-btn:hover { background: #d4919e; transform: translateY(-2px); }



.bs-hero-btn {

  background: #e6a7b3;

  color: #fff !important;

  box-shadow: 0 8px 20px rgba(230,167,179,0.3);

}

.bs-hero-btn:hover {

  background: #d4919e;

  color: #fff !important;

  transform: translateY(-2px); 

  box-shadow: 0 8px 20px rgba(230,167,179,0.3);

}



.bs-blue-btn {

  background: #b1d4e0; /* Baby blue */

  color: #fff;

  box-shadow: 0 8px 20px rgba(177,212,224,0.3);

}

.bs-blue-btn:hover { background: #9bc0cd; transform: translateY(-2px); }



.bs-highlights {

  margin-top: -60px;

  position: relative;

  z-index: 20;

  padding-bottom: 60px;

}

.bs-highlights-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

  align-items: start;

}

.bs-hl-card {

  text-align: center;

  padding: 40px 20px;

}

.bs-hl-card.pink {

  background: #eabbc1; /* Match the banner color */

  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);

  padding-bottom: 80px;

  border-radius: 5px;

}

.bs-hl-card.blue {

  background: #b1d4e0; /* Blue variant */

  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);

  padding-bottom: 80px;

  border-radius: 5px;

}

.bs-hl-card.white {

  background: transparent;

}

.bs-circle-img {

  width: 120px; height: 120px;

  border-radius: 50%;

  overflow: hidden;

  margin: 0 auto 20px;

  border: 4px solid #fff;

  box-shadow: 0 10px 20px rgba(0,0,0,0.1);

}

.bs-arch-img {

  width: 160px; height: 180px;

  border-radius: 80px 80px 0 0;

  overflow: hidden;

  margin: 0 auto 20px;

}

.bs-hl-card .bs-circle-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }

.bs-hl-card .bs-arch-img img { width: 100%; height: 100%; object-fit: cover; }



.bs-hl-card h3 {

  font-family: var(--font-sans);

  font-size: 1.1rem;

  margin-bottom: 10px;

}

.bs-hl-card.white h3.cursive {

  font-family: 'Dancing Script', cursive;

  font-size: 1.8rem;

}

.bs-hl-card p {

  font-size: 0.85rem;

  margin-bottom: 20px;

}

.bs-btn-outline {

  display: inline-block;

  padding: 8px 25px;

  background: #fff;

  color: #333;

  border-radius: 30px;

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

}



.bs-featured { padding: 40px 0 80px; }

.bs-section-title {

  text-align: center;

  margin-bottom: 50px;

}

.bs-section-title h2 {

  font-family: var(--font-serif);

  font-size: 2.2rem;

  color: var(--color-dark);

}

.bs-divider {

  width: 40px; height: 2px;

  background: #333;

  margin: 15px auto 0;

}

.bs-featured-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}

.bs-card {

  background: #fff;

  border-radius: 0 0 10px 10px;

  overflow: hidden;

  box-shadow: 0 5px 25px rgba(0,0,0,0.05);

}

.bs-card img {

  width: 100%; height: 280px;

  object-fit: cover;

}

.bs-card-body {

  padding: 25px;

  text-align: center;

}

.bs-card-body h4 { margin-bottom: 15px; font-size: 1.1rem; }

.bs-card-body p { font-size: 0.85rem; color: #666; margin-bottom: 20px; line-height: 1.5; }

.bs-btn-solid {

  background: #e6a7b3;

  color: #fff;

  padding: 10px 25px;

  border-radius: 30px;

  font-size: 0.8rem;

  font-weight: 700;

  display: inline-block;

}



.bs-promo { padding: 0 0 80px; }

.bs-promo-inner {

  display: flex;

  background: transparent;

  align-items: center;

  gap: 40px;

}

.bs-promo-content { flex: 1; }

.bs-promo-content h2 {

  font-family: var(--font-serif);

  font-size: 2rem;

  margin-bottom: 20px;

}

.bs-promo-content p {

  color: #555;

  line-height: 1.6;

  margin-bottom: 30px;

}

.bs-promo-img {

  flex: 1;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 10px 30px rgba(0,0,0,0.1);

}

.bs-promo-img img { width: 100%; display: block; }



@media (max-width: 768px) {

  .bs-hero {

    padding-top: 80px !important;

    min-height: 100vh !important; /* fallback */

    min-height: 100svh !important; /* estável ao scroll mobile */

    max-height: none !important;

    align-items: center;

  }

  .bs-circle-card { width: min(88vw, 330px); height: min(88vw, 330px); text-align: center !important; padding: 20px 24px; }
  .bs-circle-card h1 { font-size: 1.72rem !important; line-height: 1.08 !important; text-align: center !important; margin-bottom: 10px !important; }
  .bs-circle-card p { font-size: 0.68rem !important; line-height: 1.38 !important; letter-spacing: 0.01em !important; text-align: center !important; margin-bottom: 14px !important; }
  .bs-circle-card .bs-btn { font-size: 0.68rem !important; padding: 9px 16px !important; letter-spacing: 0.01em !important; }
  .bs-highlights-grid, .bs-featured-grid { grid-template-columns: 1fr; }

  .bs-highlights { margin-top: 40px; }

  .bs-hl-card.pink, .bs-hl-card.blue { clip-path: none; padding-bottom: 40px; border-radius: 20px; }

  .bs-promo-inner { flex-direction: column; text-align: center; }

  .bs-promo-content { order: 2; padding: 20px; }

  .bs-promo-img { order: 1; }

}



@keyframes textFloatUpVertical {

  from { opacity: 0; transform: translateY(30px); }

  to { opacity: 1; transform: translateY(0); }

}



/* End of file */











/* ---- Smoke animation ---- */

.gender-btn { 

  position: relative; 

  overflow: visible !important; 

  cursor: pointer;

  background: rgba(255, 255, 255, 0.3) !important;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, 0.4) !important;

  color: #333 !important;

  box-shadow: 0 4px 15px rgba(0,0,0,0.05);

  transition: all 0.3s ease;

}

.gender-btn:hover {

  background: rgba(255, 255, 255, 0.5) !important;

  color: #000 !important;

}

.smoke-particle {

  position: absolute;

  top: 50%; left: 50%;

  width: 30px; height: 30px;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(12px);

  opacity: 0;

  z-index: 50;

  animation: smokeBurst 1s ease-out forwards;

}

.smoke-pink { background: rgba(230, 167, 179, 0.9); }

.smoke-blue { background: rgba(177, 212, 224, 0.9); }



@keyframes smokeBurst {

  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }

  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(3); opacity: 0; }

}



/* ---- Answer-first SEO / GEO blocks ---- */

.answer-strip {

  padding: 60px 0 40px;

  background: transparent;

}



.answer-strip--white {

  margin-top: 40px;

  background: #fff;

}

.answer-strip .answer-shell {

  background: linear-gradient(135deg, #fff8fb 0%, #fff 55%, #fff6f8 100%);

  border: 1px solid rgba(212, 96, 138, 0.12);

  border-radius: 26px;

  padding: 34px;

  box-shadow: 0 14px 40px rgba(112, 46, 69, 0.08);

}

.answer-strip .answer-kicker {

  display: inline-block;

  margin-bottom: 12px;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #b55678;

}

.answer-strip h2 {

  margin-bottom: 14px;

  font-size: clamp(1.7rem, 2.8vw, 2.35rem);

}

.answer-strip .answer-lead {

  max-width: 860px;

  margin-bottom: 22px;

  color: #55414a;

  line-height: 1.7;

  font-size: 1rem;

}

.answer-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;

}

.answer-card {

  background: rgba(255,255,255,0.85);

  border: 1px solid rgba(212, 96, 138, 0.1);

  border-radius: 18px;

  padding: 20px 18px;

}

.answer-card h3 {

  margin-bottom: 10px;

  font-size: 1rem;

  color: #2c2227;

}

.answer-card p {

  margin: 0;

  font-size: 0.92rem;

  line-height: 1.65;

  color: #5f4b54;

}



@media (max-width: 900px) {

  .answer-grid {

    grid-template-columns: 1fr;

  }

  .answer-strip .answer-shell {

    padding: 24px;

  }

}