/* ========================================================================= */
/* THIAGO PESSOA - CSS GLOBAL DAS PÁGINAS CUSTOMIZADAS (VERSÃO 2 AJUSTADA)   */
/* ========================================================================= */

/* 1. Reset apenas para o corpo das páginas customizadas */
body[class*="primeiro"],
body[class*="sim"],
body.page--primeiro_sim,
body.page--primeiro_sim1,
body[class*="ressignifica"],
body.page--ressignificacao,
body[class*="monograma"],
body.page--monograma,
body.page--monograma_de_casamento,
body[class*="ourives"],
body[class*="alianca"],
body[class*="aliança"],
body.page--experiencia_seja_ourives_de_suas_aliancas,
body.page--experiência_seja_ourives_de_suas_alianças,
body[class*="joias"],
body.page--joias_exclusivas_e_personalizadas {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* 2. Zerar a distância entre o Menu e o Banner */
/* Oculta título padrão da página e migalhas de pão da Nuvemshop */
body[class*="primeiro"] .page-header,
body[class*="sim"] .page-header,
body[class*="ressignifica"] .page-header,
body[class*="monograma"] .page-header,
body[class*="ourives"] .page-header,
body[class*="alianca"] .page-header,
body[class*="aliança"] .page-header,
body[class*="joias"] .page-header,
body[class*="primeiro"] [data-store="page-title"],
body[class*="sim"] [data-store="page-title"],
body[class*="ressignifica"] [data-store="page-title"],
body[class*="monograma"] [data-store="page-title"],
body[class*="ourives"] [data-store="page-title"],
body[class*="alianca"] [data-store="page-title"],
body[class*="aliança"] [data-store="page-title"],
body[class*="joias"] [data-store="page-title"],
body[class*="primeiro"] .breadcrumbs,
body[class*="sim"] .breadcrumbs,
body[class*="ressignifica"] .breadcrumbs,
body[class*="monograma"] .breadcrumbs,
body[class*="ourives"] .breadcrumbs,
body[class*="alianca"] .breadcrumbs,
body[class*="aliança"] .breadcrumbs,
body[class*="joias"] .breadcrumbs {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* Oculta parágrafos vazios gerados no topo do editor (<p>&nbsp;</p>) */
.user-content .col-md-12 > p {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
}

/* Zera as margens e paddings da área de conteúdo (SEM mexer no header/menu) */
body[class*="primeiro"] .user-content,
body[class*="sim"] .user-content,
body[class*="ressignifica"] .user-content,
body[class*="monograma"] .user-content,
body[class*="ourives"] .user-content,
body[class*="alianca"] .user-content,
body[class*="aliança"] .user-content,
body[class*="joias"] .user-content {
  margin: 0 !important;
  padding: 0 !important;
}

/* Libera 100% de largura apenas DENTRO do conteúdo, preservando o menu */
.user-content > .container,
.user-content .row,
.user-content .col-md-12 {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* 3. Estrutura dos Wrappers e Banners (Zero Gap) */
.elementor-tp-page-wrapper,
.elementor-tp-ressignificacao-wrapper,
.elementor-tp-monogramas-wrapper,
.elementor-tp-joias-wrapper,
.elementor-tp-ourives-wrapper {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  box-sizing: border-box !important;
  padding-bottom: 60px !important;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  overflow-x: hidden !important;
  background-color: #ffffff !important;
  color: #222222 !important;
}

/* Mantém visíveis os parágrafos que estão DENTRO do nosso conteúdo */
.elementor-tp-page-wrapper p,
.elementor-tp-ressignificacao-wrapper p,
.elementor-tp-monogramas-wrapper p,
.elementor-tp-joias-wrapper p,
.elementor-tp-ourives-wrapper p {
  display: block !important;
}

/* Banner de Topo encostado no menu */
.tp-hero-banner,
.elementor-tp-hero-banner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 50px 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  display: block !important;
}

.tp-hero-banner img,
.elementor-tp-hero-banner img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  border: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
}

.tp-banner-desktop { display: block !important; }
.tp-banner-mobile { display: none !important; }

/* 4. Seções de Passos (Compatível com Elementor e Nuvemshop) */
.howworks,
.tp-step-section {
  width: 100% !important;
  max-width: 1250px !important;
  margin: 60px auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.howworks .e-con-inner,
.tp-step-section {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 40px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Inversão alternada de colunas */
.howworks.howworks-reverse .e-con-inner,
.howworks.tp-reverse .e-con-inner,
.tp-step-section.tp-reverse {
  flex-flow: row-reverse wrap !important;
}

/* Coluna de Texto */
.tp-text-col,
.howworks .col-md-5.tp-text-col {
  flex: 1 1 420px !important;
  max-width: 500px !important;
  min-width: 280px !important;
  width: 100% !important;
  display: flex !important;
  flex-flow: column !important;
  gap: 16px !important;
  border-bottom: 1px solid #dec995 !important;
  padding-bottom: 24px !important;
  box-sizing: border-box !important;
}

.tp-step-number,
.tp-step-num {
  font-family: Roboto, Montserrat, sans-serif !important;
  color: #dfc995 !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.tp-step-title {
  font-family: Montserrat, sans-serif !important;
  color: #111111 !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.tp-step-desc {
  font-family: Montserrat, sans-serif !important;
  color: #444444 !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* 5. Coluna dos Carrosséis */
.tp-slider-col,
.tp-visual-col,
.howworks .col-md-7.tp-slider-col {
  flex: 1 1 520px !important;
  max-width: 680px !important;
  min-width: 280px !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.tp-center-carousel,
.tp-carousel-3d {
  position: relative !important;
  width: 100% !important;
  height: 350px !important;
  overflow: hidden !important;
  user-select: none !important;
  margin: 10px auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

.tp-center-carousel .tp-track,
.tp-carousel-3d .tp-track {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

.tp-slide,
.tp-card {
  position: absolute !important;
  top: 50% !important;
  width: 220px !important;
  height: 270px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08) !important;
  transition: transform 0.6s cubic-bezier(0.25,1,0.5,1), opacity 0.6s ease !important;
}

.tp-slide img,
.tp-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Ocultar elementos auxiliares antigos */
.tp-carousel-prev,
.tp-carousel-next,
.tp-carousel-dots {
  display: none !important;
}

/* Animações dos Carrosséis (3, 4 e 5 fotos) */
@keyframes tp3SlidesRot {
  0%, 28% { left: 50%; transform: translate(-50%, -50%) scale(1.15); z-index: 10; opacity: 1; box-shadow: 0 18px 36px rgba(0,0,0,0.2); border: 2px solid #dfc995; }
  33%, 61% { left: 85%; transform: translate(-50%, -50%) scale(0.85); z-index: 5; opacity: 0.65; border: none; }
  66%, 94% { left: 15%; transform: translate(-50%, -50%) scale(0.85); z-index: 5; opacity: 0.65; border: none; }
  100% { left: 50%; transform: translate(-50%, -50%) scale(1.15); z-index: 10; opacity: 1; box-shadow: 0 18px 36px rgba(0,0,0,0.2); border: 2px solid #dfc995; }
}
.tp-carousel-3 .tp-slide:nth-child(1), .tp-cards-3 .tp-card:nth-child(1) { animation: tp3SlidesRot 11s cubic-bezier(0.4,0,0.2,1) infinite !important; }
.tp-carousel-3 .tp-slide:nth-child(2), .tp-cards-3 .tp-card:nth-child(2) { animation: tp3SlidesRot 11s cubic-bezier(0.4,0,0.2,1) infinite !important; animation-delay: -7.33s !important; }
.tp-carousel-3 .tp-slide:nth-child(3), .tp-cards-3 .tp-card:nth-child(3) { animation: tp3SlidesRot 11s cubic-bezier(0.4,0,0.2,1) infinite !important; animation-delay: -3.66s !important; }

@keyframes tp4SlidesRot {
  0%, 20% { left: 50%; transform: translate(-50%, -50%) scale(1.15); z-index: 10; opacity: 1; box-shadow: 0 18px 36px rgba(0,0,0,0.2); border: 2px solid #dfc995; }
  25%, 45% { left: 85%; transform: translate(-50%, -50%) scale(0.85); z-index: 5; opacity: 0.65; border: none; }
  50%, 70% { left: 120%; transform: translate(-50%, -50%) scale(0.6); z-index: 1; opacity: 0; pointer-events: none; }
  75%, 95% { left: 15%; transform: translate(-50%, -50%) scale(0.85); z-index: 5; opacity: 0.65; border: none; }
  100% { left: 50%; transform: translate(-50%, -50%) scale(1.15); z-index: 10; opacity: 1; box-shadow: 0 18px 36px rgba(0,0,0,0.2); border: 2px solid #dfc995; }
}
.tp-carousel-4 .tp-slide:nth-child(1), .tp-cards-4 .tp-card:nth-child(1) { animation: tp4SlidesRot 14s cubic-bezier(0.4,0,0.2,1) infinite !important; }
.tp-carousel-4 .tp-slide:nth-child(2), .tp-cards-4 .tp-card:nth-child(2) { animation: tp4SlidesRot 14s cubic-bezier(0.4,0,0.2,1) infinite !important; animation-delay: -10.5s !important; }
.tp-carousel-4 .tp-slide:nth-child(3), .tp-cards-4 .tp-card:nth-child(3) { animation: tp4SlidesRot 14s cubic-bezier(0.4,0,0.2,1) infinite !important; animation-delay: -7s !important; }
.tp-carousel-4 .tp-slide:nth-child(4), .tp-cards-4 .tp-card:nth-child(4) { animation: tp4SlidesRot 14s cubic-bezier(0.4,0,0.2,1) infinite !important; animation-delay: -3.5s !important; }

@keyframes tp5SlidesRot {
  0%, 16% { left: 50%; transform: translate(-50%, -50%) scale(1.15); z-index: 10; opacity: 1; box-shadow: 0 18px 36px rgba(0,0,0,0.2); border: 2px solid #dfc995; }
  20%, 36% { left: 82%; transform: translate(-50%, -50%) scale(0.85); z-index: 5; opacity: 0.65; border: none; }
  40%, 56% { left: 125%; transform: translate(-50%, -50%) scale(0.6); z-index: 1; opacity: 0; pointer-events: none; }
  60%, 76% { left: -25%; transform: translate(-50%, -50%) scale(0.6); z-index: 1; opacity: 0; pointer-events: none; }
  80%, 96% { left: 18%; transform: translate(-50%, -50%) scale(0.85); z-index: 5; opacity: 0.65; border: none; }
  100% { left: 50%; transform: translate(-50%, -50%) scale(1.15); z-index: 10; opacity: 1; box-shadow: 0 18px 36px rgba(0,0,0,0.2); border: 2px solid #dfc995; }
}
.tp-carousel-5 .tp-slide:nth-child(1) { animation: tp5SlidesRot 16s cubic-bezier(0.4,0,0.2,1) infinite !important; }
.tp-carousel-5 .tp-slide:nth-child(2) { animation: tp5SlidesRot 16s cubic-bezier(0.4,0,0.2,1) infinite !important; animation-delay: -12.8s !important; }
.tp-carousel-5 .tp-slide:nth-child(3) { animation: tp5SlidesRot 16s cubic-bezier(0.4,0,0.2,1) infinite !important; animation-delay: -9.6s !important; }
.tp-carousel-5 .tp-slide:nth-child(4) { animation: tp5SlidesRot 16s cubic-bezier(0.4,0,0.2,1) infinite !important; animation-delay: -6.4s !important; }
.tp-carousel-5 .tp-slide:nth-child(5) { animation: tp5SlidesRot 16s cubic-bezier(0.4,0,0.2,1) infinite !important; animation-delay: -3.2s !important; }

/* 6. Botões Dourados */
.tp-cta-btn,
.tp-cta-container a,
.tp-cta-section a,
.elementor-tp-page-wrapper a[href*="wa.me"],
.elementor-tp-ressignificacao-wrapper a[href*="wa.me"],
.elementor-tp-monogramas-wrapper a[href*="wa.me"],
.elementor-tp-joias-wrapper a[href*="wa.me"],
.elementor-tp-ourives-wrapper a[href*="wa.me"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #cfad76 !important;
  color: #0a0a0a !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  padding: 16px 36px !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09) !important;
  transition: all 0.3s ease !important;
  border: none !important;
  cursor: pointer !important;
  margin: 10px auto !important;
}

.tp-cta-btn:hover,
.tp-cta-container a:hover,
.tp-cta-section a:hover,
.elementor-tp-page-wrapper a[href*="wa.me"]:hover,
.elementor-tp-ressignificacao-wrapper a[href*="wa.me"]:hover,
.elementor-tp-monogramas-wrapper a[href*="wa.me"]:hover,
.elementor-tp-joias-wrapper a[href*="wa.me"]:hover,
.elementor-tp-ourives-wrapper a[href*="wa.me"]:hover {
  background-color: #bd9a62 !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14) !important;
}

/* 7. Grades e Avaliações */
.tp-gallery-grid,
.tp-inspire-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1250px !important;
  margin: 0 auto !important;
}

.tp-gallery-item,
.tp-inspire-card {
  background: #ffffff !important;
  border: 1px solid #f0e6d2 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  aspect-ratio: 1/1 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  transition: transform 0.35s ease !important;
}

.tp-inspire-card { aspect-ratio: 3/4 !important; }

.tp-gallery-item:hover,
.tp-inspire-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 28px rgba(222,201,149,0.3) !important;
}

.tp-gallery-item img,
.tp-inspire-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.tp-reviews-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1250px !important;
  margin: 0 auto !important;
}

.tp-review-card {
  background: #ffffff !important;
  border: 1px solid #f0e6d2 !important;
  border-radius: 14px !important;
  padding: 24px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* 8. Responsividade Mobile */
@media (max-width: 768px) {
  .tp-banner-desktop { display: none !important; }
  .tp-banner-mobile { display: block !important; }

  .howworks .e-con-inner,
  .tp-step-section {
    flex-direction: column !important;
    gap: 26px !important;
  }

  .howworks.howworks-reverse .e-con-inner,
  .howworks.tp-reverse .e-con-inner,
  .tp-step-section.tp-reverse {
    flex-direction: column !important;
  }

  .tp-text-col,
  .tp-slider-col,
  .tp-visual-col,
  .howworks .col-md-5.tp-text-col,
  .howworks .col-md-7.tp-slider-col {
    max-width: 100% !important;
    width: 100% !important;
  }

  .tp-center-carousel,
  .tp-carousel-3d {
    height: 300px !important;
  }

  .tp-slide,
  .tp-card {
    width: 190px !important;
    height: 240px !important;
  }

  .tp-gallery-grid,
  .tp-inspire-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .tp-cta-btn,
  .tp-cta-container a,
  .tp-cta-section a {
    width: 100% !important;
    padding: 16px 20px !important;
    text-align: center !important;
  }
}