/* ==========================================================================
   VINUM WINE - SOMMELIER PREMIUM PALETTE & STYLES
   Cores Oficiais:
   - Vermelho principal / vinho: #8E0F2A
   - Vermelho destaque / botão: #B3123B
   - Vermelho escuro profundo: #5A0818
   - Bordô avermelhado de apoio: #6F0D22
   Fontes:
   - Títulos: Cormorant Garamond (Editorial / Luxo)
   - Subtítulos e Texto: Inter (Clean / Moderno)
   ========================================================================== */

:root {
  --wine-primary: #8E0F2A;
  --wine-accent: #B3123B;
  --wine-deep: #5A0818;
  --wine-bordeaux: #6F0D22;
  --wine-dark: #1A0307;
  --wine-darker: #0D0204;
  --wine-gold: #D4AF37;
  --wine-gold-light: #F3E5D8;
  --wine-text-muted: #D9B3BD;

  /* ========================================================================
     TIPOGRAFIA OFICIAL ESPECIFICADA
     - Título principal: Cormorant Garamond
     - Subtítulo: Montserrat
     - Menu / Header: Manrope
     - Texto descritivo: Inter
     - Botões: Montserrat SemiBold (600)
     ======================================================================== */
  --font-title: 'Cormorant Garamond', Georgia, serif;
  --font-subtitle: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-menu: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-desc: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-btn: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Caveat', 'Alex Brush', cursive;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #8E0F2A #0D0204;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

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

img, svg {
  max-width: 100%;
}

/* Scrollbar Customizado de Luxo (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: #0D0204;
  border-left: 1px solid rgba(212, 175, 55, 0.12);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8E0F2A 0%, #5A0818 100%);
  border-radius: 9999px;
  border: 2px solid #0D0204;
  box-shadow: inset 0 0 4px rgba(212, 175, 55, 0.35);
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #B3123B 0%, #8E0F2A 100%);
  border-color: #1A0307;
  box-shadow: inset 0 0 6px rgba(212, 175, 55, 0.6);
}

::-webkit-scrollbar-corner {
  background: #0D0204;
}

/* Global Reset & Base (Texto descritivo padrão: Inter) */
body {
  font-family: var(--font-desc);
  background-color: var(--wine-darker);
  color: #F8F5F2;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Utilitários Tipográficos */
.font-title {
  font-family: var(--font-title) !important;
}

.font-subtitle {
  font-family: var(--font-subtitle) !important;
}

.font-menu {
  font-family: var(--font-menu) !important;
}

.font-desc {
  font-family: var(--font-desc) !important;
}

.font-btn {
  font-family: var(--font-btn) !important;
  font-weight: 600 !important;
}

/* Custom Scrollbar for Sidebar */
.sidebar-scroll::-webkit-scrollbar {
  width: 5px;
}
.sidebar-scroll::-webkit-scrollbar-track {
  background: rgba(10, 2, 4, 0.4);
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(179, 18, 59, 0.35);
  border-radius: 9999px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(179, 18, 59, 0.7);
}

/* Glassmorphism Sidebar Container */
.sidebar-glass {
  background: linear-gradient(
    180deg,
    rgba(26, 4, 9, 0.88) 0%,
    rgba(38, 5, 12, 0.92) 40%,
    rgba(18, 3, 6, 0.96) 100%
  );
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-right: 1px solid rgba(179, 18, 59, 0.22);
  box-shadow: 12px 0 50px rgba(10, 2, 4, 0.75), inset -1px 0 0 rgba(212, 175, 55, 0.1);
}

/* Sommelier Ambient Glows */
.ambient-glow-wine {
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(142, 15, 42, 0.35) 0%, rgba(90, 8, 24, 0.1) 60%, transparent 80%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.ambient-glow-gold {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, rgba(179, 18, 59, 0.08) 60%, transparent 80%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

/* Logo Container Limpo (Sem borda externa) */
.logo-clean {
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fine Divider with Gold & Ruby */
.divider-luxury {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(142, 15, 42, 0.2) 15%,
    rgba(179, 18, 59, 0.6) 45%,
    rgba(212, 175, 55, 0.6) 55%,
    rgba(142, 15, 42, 0.2) 85%,
    transparent 100%
  );
}

/* Menu Item Styles */
.menu-item-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.62rem 0.85rem;
  border-radius: 12px;
  text-decoration: none;
  color: #EDE4E7;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}

/* Hover State */
.menu-item-link:hover {
  color: #FFFFFF;
  background: linear-gradient(
    90deg,
    rgba(142, 15, 42, 0.28) 0%,
    rgba(111, 13, 34, 0.18) 60%,
    rgba(90, 8, 24, 0.1) 100%
  );
  border-color: rgba(212, 175, 55, 0.35);
  transform: translateX(3px);
  box-shadow: 0 4px 15px rgba(90, 8, 24, 0.3), inset 0 0 10px rgba(212, 175, 55, 0.05);
}

/* Active State: Borda Dourada Moderna (#D4AF37) com Brilho Refinado */
.menu-item-link.active {
  color: #FFFFFF;
  background: linear-gradient(
    90deg,
    rgba(179, 18, 59, 0.38) 0%,
    rgba(142, 15, 42, 0.26) 55%,
    rgba(212, 175, 55, 0.12) 100%
  );
  border: 1px solid #D4AF37 !important;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.25), 0 4px 18px rgba(179, 18, 59, 0.35), inset 0 0 12px rgba(212, 175, 55, 0.1);
}

/* Left Indicator Bar on Active/Hover */
.menu-item-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  height: 64%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #F3E5D8 0%, #D4AF37 50%, #B3123B 100%);
  opacity: 0;
  transform: scaleY(0.2);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 8px #D4AF37;
}

.menu-item-link:hover::before {
  opacity: 0.85;
  transform: scaleY(0.85);
}

.menu-item-link.active::before {
  opacity: 1;
  transform: scaleY(1);
}

/* Icon Box Menor e Mais Compacto (32x32) */
.menu-icon-box {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(90, 8, 24, 0.6) 0%, rgba(26, 4, 9, 0.8) 100%);
  border: 1px solid rgba(179, 18, 59, 0.28);
  color: #F3E5D8;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.menu-item-link:hover .menu-icon-box {
  border-color: #D4AF37;
  background: linear-gradient(135deg, #8E0F2A 0%, #5A0818 100%);
  color: #FFFFFF;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  transform: scale(1.05);
}

.menu-item-link.active .menu-icon-box {
  border-color: #D4AF37;
  background: linear-gradient(135deg, #B3123B 0%, #8E0F2A 100%);
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

/* Title & Subtitle Styling (Mais Suave, Menor e Compacto) */
.menu-title {
  font-family: var(--font-menu);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.2;
  color: #FFFFFF;
  transition: color 0.25s ease;
}

.menu-item-link:hover .menu-title {
  color: #FFFFFF;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.35);
}

.menu-item-link.active .menu-title {
  color: #FFFFFF;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.menu-subtitle {
  font-family: var(--font-subtitle);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(217, 179, 189, 0.72);
  line-height: 1.25;
  transition: color 0.25s ease;
  margin-top: 1px;
}

.menu-item-link:hover .menu-subtitle {
  color: #F8E1E6;
}

.menu-item-link.active .menu-subtitle {
  color: #FFF0F4;
}

/* Badge Tag */
.menu-badge {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: rgba(179, 18, 59, 0.22);
  border: 1px solid rgba(179, 18, 59, 0.4);
  color: #FFCAD4;
  transition: all 0.3s ease;
}

.menu-item-link:hover .menu-badge {
  background: rgba(179, 18, 59, 0.45);
  border-color: #B3123B;
  color: #FFFFFF;
}

.menu-item-link.active .menu-badge {
  background: #B3123B;
  border-color: #D4AF37;
  color: #FFFFFF;
  box-shadow: 0 0 10px rgba(179, 18, 59, 0.6);
}

/* Sommelier Concierge Card */
.concierge-card {
  background: linear-gradient(
    145deg,
    rgba(90, 8, 24, 0.65) 0%,
    rgba(42, 4, 11, 0.85) 60%,
    rgba(20, 2, 5, 0.95) 100%
  );
  border: 1px solid rgba(179, 18, 59, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(179, 18, 59, 0.15);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}

.concierge-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Pulse animation for live sommelier status */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10B981;
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background-color: rgba(16, 185, 129, 0.4);
  animation: pulse-ring 1.8s infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.8);
    opacity: 0.2;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Premium Button in #B3123B (Botões: Montserrat SemiBold 600) */
.btn-wine-primary {
  font-family: var(--font-btn);
  font-weight: 600;
  background: linear-gradient(135deg, #B3123B 0%, #8E0F2A 100%);
  color: #FFFFFF;
  border: 1px solid rgba(212, 175, 55, 0.3);
  letter-spacing: 0.04em;
  box-shadow: 0 4px 18px rgba(179, 18, 59, 0.45);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-wine-primary:hover {
  background: linear-gradient(135deg, #D41748 0%, #B3123B 100%);
  color: #FFFFFF;
  border-color: #D4AF37;
  box-shadow: 0 6px 24px rgba(179, 18, 59, 0.7);
  transform: translateY(-2px);
}

/* ==========================================================================
   HERO TYPOGRAPHY & LUMINOUS GRADIENTS
   ========================================================================== */
.hero-title-white {
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 4px 20px rgba(0, 0, 0, 0.45);
  letter-spacing: -0.01em;
}

.hero-gradient-title {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF4DF 25%, #F7D488 65%, #E5A84B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

.hero-desc-text {
  font-size: 1.18rem;
  line-height: 1.65;
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   4 PILARES HERO MODERNOS (CONFORME IMAGEM 1)
   ========================================================================== */
.hero-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.25rem;
  width: 100%;
}

@media (min-width: 640px) {
  .hero-pillars-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }
}

.hero-pillar-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  cursor: default;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-pillar-item:hover {
  transform: translateY(-2px);
}

.pillar-svg {
  width: 22px;
  height: 22px;
  color: #D4AF37;
  stroke: #D4AF37;
  flex-shrink: 0;
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.hero-pillar-item:hover .pillar-svg {
  transform: scale(1.12);
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.7));
}

.pillar-text-group {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
}

.pillar-title-top,
.pillar-title-bottom {
  font-family: var(--font-menu);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  color: #E8D5C4;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s ease, text-shadow 0.25s ease;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.hero-pillar-item:hover .pillar-title-top,
.hero-pillar-item:hover .pillar-title-bottom {
  color: #FFFFFF;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 2px 5px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   BOTÕES DE AÇÃO HERO (CONFORME IMAGEM 2)
   ========================================================================== */
.hero-right-content-mobile {
  width: 100%;
}

.hero-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

/* Botão 1: VER CATÁLOGO (Vinho Tinto Nobre / Pill) */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.75rem 1.85rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #8E0F2A 0%, #680A1E 100%);
  color: #FFFFFF;
  font-family: var(--font-btn);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 
    0 8px 24px rgba(110, 13, 34, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  white-space: nowrap;
}

.btn-hero-primary:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, #A81235 0%, #7D0C25 100%);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 
    0 12px 28px rgba(168, 19, 57, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.btn-hero-primary .btn-arrow-icon {
  transition: transform 0.3s ease;
}

.btn-hero-primary:hover .btn-arrow-icon {
  transform: translateX(4px);
}

/* Botão 2: FALAR COM A VINUM (Dark Glass Outlined / Pill) */
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.75rem 1.85rem;
  border-radius: 9999px;
  background: rgba(13, 2, 5, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #FFFFFF;
  font-family: var(--font-btn);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: 
    0 8px 22px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  white-space: nowrap;
}

.btn-hero-secondary:hover {
  transform: translateY(-2px) scale(1.02);
  background: rgba(26, 4, 10, 0.75);
  border-color: #D4AF37;
  color: #FFFFFF;
  box-shadow: 
    0 12px 28px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(212, 175, 55, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.btn-hero-secondary .btn-whatsapp-icon {
  transition: transform 0.3s ease, color 0.3s ease;
}

.btn-hero-secondary:hover .btn-whatsapp-icon {
  transform: scale(1.12);
  color: #25D366;
}

/* ==========================================================================
   ESPAÇAMENTO VERTICAL DA SEÇÃO HERO (RESPIRO ELEGANTE SOB O HEADER)
   ========================================================================== */
.hero-content-section {
  padding-top: 8.75rem; /* ~140px no mobile: afasta o texto para não ficar grudado no header */
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .hero-content-section {
    padding-top: 6.5rem;
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .hero-content-section {
    padding-top: 7.5rem;
    padding-bottom: 4rem;
  }
}

@media (max-width: 640px) {
  .hero-content-section {
    padding-top: 8.75rem !important; /* 140px garantido em qualquer smartphone */
  }
  .hero-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.95rem;
    margin-bottom: 0.2rem;
    width: 100%;
  }

  .hero-pillar-item {
    background: rgba(18, 3, 6, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 11px;
    padding: 0.45rem 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    min-height: 44px;
    box-sizing: border-box;
  }

  .pillar-svg {
    width: 20px;
    height: 20px;
    stroke: #F6D688;
    color: #F6D688;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  }

  .pillar-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.14;
    min-width: 0;
  }

  .pillar-title-top,
  .pillar-title-bottom {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 1rem;
    gap: 0.6rem;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    flex: none;
    padding: 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    height: 42px;
    border-radius: 9999px;
    box-sizing: border-box;
    white-space: nowrap;
    justify-content: center;
    text-align: center;
    gap: 0.45rem;
  }
}

/* Background Sommelier Ambient Container com Imagem Responsiva (100% Espaço) */
.sommelier-hero-bg {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: #1a0508;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .sommelier-hero-bg::before {
    display: none !important;
  }
}

/* Wrapper da Imagem de Fundo (header2.png no desktop / headermobile.png no mobile) */
.sommelier-bg-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.sommelier-bg-wrapper picture,
.newsletter-bg-wrapper picture {
  display: block;
  width: 100%;
  height: 100%;
}

.sommelier-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none !important;
}

@media (min-width: 1400px) {
  .sommelier-bg-img {
    object-position: 70% center;
  }
}

@media (max-width: 768px) {
  .sommelier-bg-img {
    object-position: left center;
  }
}

/* ==========================================================================
   BARRA FIXA INFERIOR / LUXURY BOTTOM NAVIGATION DOCK
   ========================================================================== */
.bottom-dock-container {
  position: fixed;
  top: 1.25rem;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: calc(100vw - 1.5rem);
  pointer-events: auto;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-dock-glass {
  background: linear-gradient(135deg, rgba(38, 5, 14, 0.95) 0%, rgba(18, 2, 6, 0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(212, 175, 55, 0.50);
  border-radius: 9999px;
  padding: 0.55rem 1.15rem;
  box-shadow: 
    0 12px 36px -4px rgba(0, 0, 0, 0.75),
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(212, 175, 55, 0.22),
    0 0 24px rgba(142, 15, 42, 0.25),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.18),
    inset 0 -1px 1px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-dock-glass:hover {
  border-color: rgba(212, 175, 55, 0.75);
  box-shadow: 
    0 16px 45px -4px rgba(0, 0, 0, 0.85),
    0 6px 18px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(212, 175, 55, 0.35),
    0 0 30px rgba(179, 18, 59, 0.35),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.25);
}

@media (max-width: 768px) {
  .bottom-dock-glass {
    background: linear-gradient(135deg, rgba(38, 5, 14, 0.95) 0%, rgba(18, 2, 6, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(212, 175, 55, 0.55);
    box-shadow: 
      0 12px 32px -4px rgba(0, 0, 0, 0.7),
      0 4px 12px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(212, 175, 55, 0.25),
      0 0 20px rgba(142, 15, 42, 0.22),
      inset 0 1px 1.5px rgba(255, 255, 255, 0.18);
  }
}

/* Divisor Fino Dourado */
.dock-divider {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent 0%, rgba(212, 175, 55, 0.4) 50%, transparent 100%);
}

/* Botões de Ícones do Dock Modernos */
.dock-item-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Quando passa o mouse no item, ele SOBE no empilhamento acima da logo */
.dock-item-wrapper:hover {
  z-index: 200;
}

.dock-icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.22);
  color: #E8D5C4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-icon-btn:hover {
  background: linear-gradient(135deg, rgba(179, 18, 59, 0.65) 0%, rgba(111, 13, 34, 0.8) 100%);
  border-color: rgba(212, 175, 55, 0.7);
  color: #FFFFFF;
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.dock-icon-btn:active {
  transform: translateY(-1px) scale(0.92);
  transition-duration: 0.1s;
}

.dock-icon-btn.active {
  border-color: #D4AF37;
  background: linear-gradient(135deg, #8E0F2A 0%, #5A0818 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(179, 18, 59, 0.35);
}

.dock-icon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.dock-icon-inner svg {
  display: block;
}

.dock-click-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.6) 0%, rgba(179, 18, 59, 0.35) 60%, transparent 80%);
  transform: translate(-50%, -50%) scale(0);
  animation: dockRippleExpand 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 25;
}

@keyframes dockRippleExpand {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    width: 140px;
    height: 140px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

.dock-active-dot {
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #D4AF37;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dock-icon-btn.active .dock-active-dot {
  opacity: 1;
  box-shadow: 0 0 4px #D4AF37;
}

/* Botão Central SOBRESSAÍDO EM CIMA E EM BAIXO (MAIOR E BEM VISÍVEL, SEM NEON) */
.dock-logo-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.dock-logo-wrapper:hover {
  z-index: 200;
}

.dock-logo-btn {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #35050F 0%, #160206 100%);
  border: 2.5px solid #D4AF37;
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.88),
    inset 0 1px 2px rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -22px 0; /* Sobressai de forma marcante e simétrica em cima e em baixo */
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-logo-btn:hover {
  transform: scale(1.04);
  border-color: #F3E5D8;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.95);
}

.dock-logo-btn:active {
  transform: scale(0.94);
  transition-duration: 0.1s;
}

.dock-logo-img {
  height: 78px;
  width: auto;
  max-width: 88px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7)) contrast(1.06) brightness(1.05);
  transition: transform 0.3s ease;
}

.dock-logo-btn:hover .dock-logo-img {
  transform: scale(1.04);
}

/* ==========================================================================
   POPUP MODERNO SUSPENSO (Sem badge, na frente da logo e alinhado)
   ========================================================================== */
.dock-popup {
  position: absolute;
  top: calc(100% + 14px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 210;
}

/* Espaço extra para o popup da logo que sobressai no topo */
.dock-popup.dock-popup-logo {
  top: calc(100% + 24px);
  bottom: auto;
}

.dock-item-wrapper:hover .dock-popup,
.dock-logo-wrapper:hover .dock-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dock-popup-card {
  background: rgba(18, 3, 7, 0.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  width: max-content;
  min-width: 250px;
  max-width: 360px;
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.9),
    0 4px 14px rgba(0, 0, 0, 0.6);
}

.dock-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.2rem;
  width: 100%;
}

.dock-popup-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  line-height: 1.25;
}

.dock-popup-subtitle {
  font-family: var(--font-desc);
  font-size: 0.72rem;
  color: #D9B3BD;
  line-height: 1.4;
  margin-bottom: 0;
  margin-top: 0.25rem;
  font-weight: 400;
}

.dock-popup-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  width: 100%;
}

.dock-popup-action {
  font-family: var(--font-btn);
  font-size: 0.72rem;
  color: #D4AF37;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap !important;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.dock-popup-arrow {
  position: absolute;
  top: -6px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(18, 3, 7, 0.98);
  border-left: 1px solid rgba(212, 175, 55, 0.45);
  border-top: 1px solid rgba(212, 175, 55, 0.45);
  border-right: none;
  border-bottom: none;
}

/* ==========================================================================
   MODO ADAPTATIVO: DOCK EM ÁREAS CLARAS / BRANCAS
   ========================================================================== */
.bottom-dock-container.dock-light-mode .bottom-dock-glass {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(142, 15, 42, 0.25);
  box-shadow: 
    0 16px 40px rgba(142, 15, 42, 0.15),
    0 4px 14px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.bottom-dock-container.dock-light-mode .bottom-dock-glass:hover {
  border-color: rgba(142, 15, 42, 0.45);
  box-shadow: 
    0 20px 48px rgba(142, 15, 42, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.bottom-dock-container.dock-light-mode .dock-divider {
  background: linear-gradient(180deg, transparent 0%, rgba(142, 15, 42, 0.35) 50%, transparent 100%);
}

.bottom-dock-container.dock-light-mode .dock-icon-btn {
  background: rgba(142, 15, 42, 0.06);
  border-color: rgba(142, 15, 42, 0.18);
  color: #7A0A22;
  box-shadow: 0 2px 8px rgba(142, 15, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.bottom-dock-container.dock-light-mode .dock-icon-btn:hover {
  background: linear-gradient(135deg, #8E0F2A 0%, #5E0518 100%);
  border-color: #D4AF37;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(142, 15, 42, 0.35);
}

.bottom-dock-container.dock-light-mode .dock-icon-btn.active {
  background: linear-gradient(135deg, #8E0F2A 0%, #5E0518 100%);
  border-color: #D4AF37;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(142, 15, 42, 0.4);
}

.bottom-dock-container.dock-light-mode .dock-active-dot {
  background: #D4AF37;
  box-shadow: 0 0 6px #D4AF37;
}

.bottom-dock-container.dock-light-mode .dock-logo-btn {
  background: radial-gradient(circle at 35% 30%, #520516 0%, #1A0307 100%);
  border-color: #8E0F2A;
  box-shadow: 
    0 10px 28px rgba(142, 15, 42, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.bottom-dock-container.dock-light-mode .dock-logo-btn:hover {
  border-color: #D4AF37;
  box-shadow: 0 14px 34px rgba(142, 15, 42, 0.55);
}

.bottom-dock-container.dock-light-mode .dock-popup-card {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(142, 15, 42, 0.25);
  box-shadow: 0 16px 40px rgba(142, 15, 42, 0.18), 0 4px 14px rgba(0, 0, 0, 0.08);
}

.bottom-dock-container.dock-light-mode .dock-popup-title {
  color: #1A0307;
}

.bottom-dock-container.dock-light-mode .dock-popup-subtitle {
  color: #5C4A3E;
}

.bottom-dock-container.dock-light-mode .dock-popup-arrow {
  background: rgba(255, 255, 255, 0.98);
  border-left: 1px solid rgba(142, 15, 42, 0.25);
  border-top: 1px solid rgba(142, 15, 42, 0.25);
}

/* Responsividade Fluida & Adaptativa para o Dock de Navegação Superior */
@media (max-width: 768px) {
  .bottom-dock-container {
    top: max(1.15rem, calc(env(safe-area-inset-top, 0px) + 0.65rem));
    bottom: auto;
    max-width: calc(100vw - 1.5rem);
  }

  .dock-popup,
  .social-popup {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .bottom-dock-container {
    top: max(1.15rem, calc(env(safe-area-inset-top, 0px) + 0.65rem));
    max-width: calc(100vw - 1rem);
  }

  .bottom-dock-glass {
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    gap: 0;
    justify-content: center;
  }

  .dock-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .dock-icon-btn svg {
    width: 16px;
    height: 16px;
  }

  .dock-logo-btn {
    width: 62px;
    height: 62px;
    margin: -10px 0;
    border-width: 2px;
    border-color: #D4AF37;
    background: radial-gradient(circle at 35% 30%, #35050F 0%, #160206 100%);
    box-shadow: 
      0 8px 22px rgba(0, 0, 0, 0.8),
      0 0 14px rgba(212, 175, 55, 0.25),
      inset 0 1px 2px rgba(255, 255, 255, 0.25);
  }

  .dock-logo-img {
    height: 42px;
    max-width: 48px;
  }

  .dock-divider {
    height: 22px;
  }
}

@media (max-width: 440px) {
  .bottom-dock-container {
    top: max(1.05rem, calc(env(safe-area-inset-top, 0px) + 0.55rem));
    max-width: calc(100vw - 0.75rem);
  }

  .bottom-dock-glass {
    padding: 0.3rem 0.75rem;
    gap: 0;
    justify-content: center;
  }

  .dock-icon-btn {
    width: 33px;
    height: 33px;
    border-radius: 9px;
    flex-shrink: 0;
  }

  .dock-icon-btn svg {
    width: 15px;
    height: 15px;
  }

  .dock-logo-btn {
    width: 52px;
    height: 52px;
    margin: -8px 0;
    border-width: 2px;
    border-color: #D4AF37;
    background: radial-gradient(circle at 35% 30%, #35050F 0%, #160206 100%);
    box-shadow: 
      0 8px 20px rgba(0, 0, 0, 0.8),
      0 0 12px rgba(212, 175, 55, 0.25),
      inset 0 1px 2px rgba(255, 255, 255, 0.25);
  }

  .dock-logo-img {
    height: 34px;
    max-width: 38px;
  }

  .dock-divider {
    height: 18px;
    margin: 0 0.25rem !important;
  }
}

@media (max-width: 360px) {
  .bottom-dock-container {
    top: max(0.95rem, calc(env(safe-area-inset-top, 0px) + 0.45rem));
    max-width: calc(100vw - 0.5rem);
  }

  .bottom-dock-glass {
    padding: 0.25rem 0.65rem;
    gap: 0;
    justify-content: center;
  }

  .dock-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .dock-icon-btn svg {
    width: 13px;
    height: 13px;
  }

  .dock-logo-btn {
    width: 44px;
    height: 44px;
    margin: -6px 0;
    border-width: 1.5px;
    border-color: #D4AF37;
    background: radial-gradient(circle at 35% 30%, #35050F 0%, #160206 100%);
    box-shadow: 
      0 6px 16px rgba(0, 0, 0, 0.8),
      0 0 10px rgba(212, 175, 55, 0.25),
      inset 0 1px 2px rgba(255, 255, 255, 0.25);
  }

  .dock-logo-img {
    height: 28px;
    max-width: 32px;
  }

  .dock-divider {
    height: 16px;
    margin: 0 0.15rem !important;
  }
}

/* Telas Ultra-Wide / 4K (> 1600px) */
@media (min-width: 1600px) {
  .bottom-dock-glass {
    padding: 0.65rem 1.4rem;
  }

  .dock-icon-btn {
    width: 52px;
    height: 52px;
  }

  .dock-icon-btn svg {
    width: 22px;
    height: 22px;
  }

  .dock-logo-btn {
    width: 120px;
    height: 120px;
    margin: -26px 0;
  }

  .dock-logo-img {
    height: 88px;
    max-width: 98px;
  }
}

/* ==========================================================================
   WIDGET SOCIAL FIXO INFERIOR (WHATSAPP & INSTAGRAM)
   Posicionado na base com estilo idêntico ao dock superior: horizontal, moderno,
   compacto, adaptando a cor conforme as seções/grid (dock-light-mode)
   ========================================================================== */
.right-social-dock {
  position: fixed;
  right: 1.5rem;
  bottom: 1.25rem;
  top: auto;
  left: auto;
  transform: none;
  z-index: 9999;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  display: block;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-dock-glass {
  background: rgba(13, 2, 5, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 18px;
  padding: 0.45rem 0.65rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 
    0 16px 45px rgba(0, 0, 0, 0.8),
    0 4px 15px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-dock-glass:hover {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.85),
    0 4px 20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.social-divider {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(212, 175, 55, 0.45) 50%, transparent 100%);
  transition: background 0.3s ease;
}

.social-item-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.social-item-wrapper:hover {
  z-index: 200;
}

.social-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* WhatsApp Styling */
.social-btn-whatsapp {
  color: #25D366;
}

.social-btn-whatsapp:hover {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.88) 0%, rgba(18, 140, 126, 0.95) 100%);
  border-color: #25D366;
  color: #FFFFFF;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.4);
}

/* Instagram Styling */
.social-btn-instagram {
  color: #E1306C;
}

.social-btn-instagram:hover {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: #E1306C;
  color: #FFFFFF;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 22px rgba(225, 48, 108, 0.4);
}

/* Popups posicionados para cima alinhados à direita */
.social-popup {
  position: absolute;
  bottom: calc(100% + 14px);
  top: auto;
  right: 0;
  left: auto;
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 210;
}

.social-item-wrapper:hover .social-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.social-popup-card {
  background: rgba(18, 3, 7, 0.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  padding: 0.9rem 1.15rem;
  width: max-content;
  min-width: 280px;
  max-width: 350px;
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.9),
    0 4px 14px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}

.social-popup-arrow {
  position: absolute;
  bottom: -6px;
  top: auto;
  right: 18px;
  left: auto;
  transform: rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(18, 3, 7, 0.98);
  border-bottom: 1px solid rgba(212, 175, 55, 0.45);
  border-right: 1px solid rgba(212, 175, 55, 0.45);
  border-top: none;
  border-left: none;
  transition: all 0.3s ease;
}

/* ==========================================================================
   MODO ADAPTATIVO: SOCIAL DOCK EM ÁREAS CLARAS / BRANCAS (IGUAL AO DOCK PRINCIPAL)
   ========================================================================== */
.right-social-dock.dock-light-mode .social-dock-glass {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(142, 15, 42, 0.25);
  box-shadow: 
    0 16px 40px rgba(142, 15, 42, 0.15),
    0 4px 14px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.right-social-dock.dock-light-mode .social-dock-glass:hover {
  border-color: rgba(142, 15, 42, 0.45);
  box-shadow: 
    0 20px 48px rgba(142, 15, 42, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.right-social-dock.dock-light-mode .social-divider {
  background: linear-gradient(180deg, transparent 0%, rgba(142, 15, 42, 0.35) 50%, transparent 100%);
}

.right-social-dock.dock-light-mode .social-icon-btn {
  background: rgba(142, 15, 42, 0.06);
  border-color: rgba(142, 15, 42, 0.18);
  box-shadow: 0 2px 8px rgba(142, 15, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.right-social-dock.dock-light-mode .social-btn-whatsapp {
  color: #128C7E;
}

.right-social-dock.dock-light-mode .social-btn-whatsapp:hover {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border-color: #25D366;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

.right-social-dock.dock-light-mode .social-btn-instagram {
  color: #C13584;
}

.right-social-dock.dock-light-mode .social-btn-instagram:hover {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: #E1306C;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(225, 48, 108, 0.35);
}

.right-social-dock.dock-light-mode .social-popup-card {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(142, 15, 42, 0.3);
  box-shadow: 
    0 16px 40px rgba(142, 15, 42, 0.2),
    0 4px 14px rgba(0, 0, 0, 0.08);
}

.right-social-dock.dock-light-mode .social-popup-card .dock-popup-title {
  color: #1A0307;
}

.right-social-dock.dock-light-mode .social-popup-card .dock-popup-subtitle {
  color: #5C4A3E;
}

.right-social-dock.dock-light-mode .social-popup-arrow {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid rgba(142, 15, 42, 0.3);
  border-right: 1px solid rgba(142, 15, 42, 0.3);
  border-top: none;
  border-left: none;
}

/* Responsividade Mobile e Ultra-Wide para o Widget Social */
@media (max-width: 768px) {
  .right-social-dock {
    right: max(1rem, calc(env(safe-area-inset-right, 0px) + 0.85rem)) !important;
    left: auto !important;
    bottom: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1.25rem)) !important;
    top: auto !important;
    transform: none !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  .social-dock-glass {
    padding: 0.4rem 0.55rem;
    gap: 0.4rem;
    border-radius: 16px;
    background: rgba(15, 2, 6, 0.92) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1.2px solid rgba(212, 175, 55, 0.45) !important;
    box-shadow: 
      0 12px 32px rgba(0, 0, 0, 0.75),
      0 4px 12px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(212, 175, 55, 0.2),
      inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  }

  .social-icon-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .social-icon-btn svg,
  .social-icon-btn i {
    width: 20px !important;
    height: 20px !important;
  }

  .social-divider {
    height: 22px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 175, 55, 0.45) 50%, transparent 100%) !important;
  }

  .social-popup {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .right-social-dock {
    right: max(0.65rem, calc(env(safe-area-inset-right, 0px) + 0.5rem)) !important;
    bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important;
  }

  .social-icon-btn {
    width: 38px !important;
    height: 38px !important;
  }

  .social-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (min-width: 1600px) {
  .right-social-dock {
    right: 2.2rem;
    left: auto;
    bottom: 1.8rem;
    transform: none;
  }

  .social-icon-btn {
    width: 48px;
    height: 48px;
  }
}

/* ==========================================================================
   SEÇÃO CATÁLOGO DE VINHOS NOBRES (COM BACKGROUND FVINHO.PNG)
   Mostrando sutilmente apenas a parte inferior do background na base
   ========================================================================== */
.wine-catalog-section {
  background-color: #FEFBF8;
  background-image: url('../img/fvinho.webp');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left 0 bottom -220px;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1600px) {
  .wine-catalog-section {
    background-position: left 0 bottom -280px;
  }
}

@media (max-width: 1024px) {
  .wine-catalog-section {
    background-size: cover;
    background-position: left 0 bottom -180px;
  }
}

@media (max-width: 640px) {
  .wine-catalog-section {
    background-size: cover;
    background-position: left 0 bottom -130px;
  }
}

/* Botão Primário do Catálogo (Vinho Nobre / Pill) */
.btn-catalog-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 2.1rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #8E0F2A 0%, #680A1E 100%);
  color: #FFFFFF !important;
  font-family: var(--font-btn);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  box-shadow: 
    0 10px 28px rgba(142, 15, 42, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-catalog-primary:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, #A81235 0%, #7D0C25 100%);
  box-shadow: 
    0 14px 34px rgba(142, 15, 42, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  border-color: rgba(212, 175, 55, 0.5);
}

/* Botões de Controle de Navegação do Carrossel */
.carousel-control-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(142, 15, 42, 0.25);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1A0307;
  box-shadow: 0 4px 12px rgba(26, 3, 7, 0.08);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-control-btn:hover {
  background: #8E0F2A;
  border-color: #8E0F2A;
  color: #FFFFFF !important;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(142, 15, 42, 0.32);
}

.carousel-control-btn:hover svg {
  stroke: #FFFFFF !important;
}

/* ==========================================================================
   PALCO & CARDS 3D DO CARROSSEL
   ========================================================================== */
.catalog-3d-stage {
  position: relative;
  width: 100%;
  height: 490px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: pan-y;
}

.catalog-3d-card {
  position: absolute;
  width: 290px;
  height: 440px;
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(26, 3, 7, 0.12), 0 2px 8px rgba(26, 3, 7, 0.04);
  border: 1px solid rgba(142, 15, 42, 0.08);
  transition: 
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.85s ease,
    box-shadow 0.45s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.catalog-3d-card.active-card {
  box-shadow: 
    0 26px 54px rgba(26, 3, 7, 0.18),
    0 0 32px rgba(212, 175, 55, 0.28);
  border-color: rgba(212, 175, 55, 0.5);
}

.catalog-3d-card:hover {
  border-color: #D4AF37;
}

/* Área da Foto do Vinho */
.card-image-wrap {
  width: 100%;
  height: 220px;
  position: relative;
  overflow: hidden;
  background: #1A0307;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 4.2s cubic-bezier(0.25, 1, 0.5, 1);
  display: block;
}

.catalog-3d-card.active-card .card-img {
  transform: scale(1.05);
}

.catalog-3d-card:hover .card-img {
  transform: scale(1.10);
}

.card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(18, 2, 6, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #D4AF37;
  font-family: var(--font-menu);
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.28rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.card-count-badge {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #1A0307;
  font-family: var(--font-menu);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Corpo Editorial do Card */
.card-body-wrap {
  padding: 1.2rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 1;
  background: #FFFFFF;
}

.card-tag {
  font-family: var(--font-menu);
  font-size: 0.64rem;
  font-weight: 700;
  color: #8E0F2A;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.2rem;
}

.card-title {
  font-family: var(--font-title);
  font-size: 1.55rem;
  font-weight: 700;
  color: #1A0307;
  line-height: 1.15;
  margin-bottom: 0.25rem;
}

.card-desc {
  font-family: var(--font-desc);
  font-size: 0.75rem;
  color: #5C4A3E;
  line-height: 1.35;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.card-sommelier-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.67rem;
  color: #8E0F2A;
  font-weight: 600;
  font-family: var(--font-menu);
}

/* Botão Circular com Seta no Canto do Card (Conforme Imagem) */
.card-action-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #8E0F2A;
  color: #8E0F2A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.catalog-3d-card:hover .card-action-circle {
  background: #8E0F2A;
  color: #FFFFFF;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(142, 15, 42, 0.4);
}

/* Paginação em Pontos Modernos com Barra de Progresso Autoplay */
.catalog-dots-container {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 20;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 9999px;
  border: 1px solid rgba(142, 15, 42, 0.08);
  box-shadow: 0 4px 16px rgba(26, 3, 7, 0.06);
}

.catalog-dot {
  position: relative;
  width: 8px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(142, 15, 42, 0.22);
  border: none;
  cursor: pointer;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
  padding: 0;
  overflow: hidden;
  outline: none;
}

.catalog-dot:hover {
  background: rgba(142, 15, 42, 0.45);
}

.catalog-dot.active {
  width: 36px;
  background: rgba(142, 15, 42, 0.15);
  box-shadow: 0 2px 8px rgba(142, 15, 42, 0.22);
}

.catalog-dot-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #8E0F2A, #D4AF37);
  border-radius: 9999px;
  transform: scaleX(0);
  transform-origin: left center;
}

.catalog-dot.active.animating .catalog-dot-fill {
  animation: dotFillProgress 4s linear forwards;
}

.catalog-dot.active:not(.animating) .catalog-dot-fill {
  transform: scaleX(1);
}

@keyframes dotFillProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

/* Barra de Progresso Autoplay no Indicador Numérico */
.carousel-progress-bar {
  width: 0%;
  transform-origin: left center;
}

.carousel-progress-bar.animating {
  animation: linearProgressBar 4s linear forwards;
}

@keyframes linearProgressBar {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

/* Pausa Suave quando Mouse estiver sobre o Palco ou Controles */
.catalog-stage-paused .catalog-dot.active.animating .catalog-dot-fill,
.catalog-stage-paused .carousel-progress-bar.animating {
  animation-play-state: paused !important;
}

/* Responsividade Fluida do Catálogo 3D */
@media (max-width: 1024px) {
  .catalog-3d-stage {
    height: 460px;
    margin-top: 0.5rem;
  }
}

@media (max-width: 640px) {
  .catalog-3d-card {
    width: 250px;
    height: 385px;
    border-radius: 16px;
  }

  .card-image-wrap {
    height: 180px;
  }

  .card-title {
    font-size: 1.25rem;
  }

  .card-desc {
    font-size: 0.72rem;
    margin-bottom: 0.35rem;
  }

  .card-body-wrap {
    padding: 0.85rem 0.95rem;
  }

  .catalog-3d-stage {
    height: 410px;
  }

  .catalog-dots-container {
    bottom: 0.6rem;
    padding: 4px 10px;
  }

  .btn-catalog-primary {
    padding: 0.75rem 1.6rem;
    font-size: 0.76rem;
  }
}

@media (max-width: 380px) {
  .catalog-3d-card {
    width: 220px;
    height: 355px;
    border-radius: 14px;
  }

  .card-image-wrap {
    height: 160px;
  }

  .card-title {
    font-size: 1.15rem;
  }

  .card-desc {
    font-size: 0.68rem;
    margin-bottom: 0.2rem;
  }

  .card-action-circle {
    width: 32px;
    height: 32px;
  }

  .catalog-3d-stage {
    height: 375px;
  }
}

@media (min-width: 1600px) {
  .catalog-3d-card {
    width: 320px;
    height: 470px;
  }

  .card-image-wrap {
    height: 240px;
  }

  .card-title {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   SEÇÃO QUEM SOU / MICHELLE MEIRA (COM BACKGROUND QUEMSOU.PNG)
   ========================================================================== */
.quemsou-section {
  position: relative;
  width: 100%;
  background-color: #240103;
  overflow: hidden;
}

.quemsou-desktop-stage {
  width: 100%;
  aspect-ratio: 2172 / 724;
  min-height: 520px;
  background-color: #240103;
  background-image: url('../img/quemsou.webp?v=20261021b');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
}

@media (min-width: 1440px) {
  .quemsou-desktop-stage {
    min-height: 580px;
  }
}

@media (min-width: 1920px) {
  .quemsou-desktop-stage {
    min-height: 640px;
  }
}

.quemsou-mobile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.quemsou-mobile-desc {
  font-family: var(--font-desc);
  font-size: 0.92rem;
  line-height: 1.65;
  color: #EDE4DC;
}

.quemsou-eyebrow {
  font-family: var(--font-menu);
  font-size: clamp(0.68rem, 0.72vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #C59B58;
  text-transform: uppercase;
}

.quemsou-title {
  font-family: var(--font-title);
  font-size: clamp(1.75rem, 2.35vw, 3.1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #E8CA91;
  line-height: 1.08;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.quemsou-subtitle {
  font-family: var(--font-subtitle);
  font-size: clamp(0.72rem, 0.82vw, 0.95rem);
  font-weight: 600;
  color: #F8F4F0;
  line-height: 1.35;
}

.quemsou-bullet {
  color: #C59B58;
  margin: 0 0.2rem;
}

.quemsou-text {
  font-family: var(--font-desc);
  font-size: clamp(0.68rem, 0.75vw, 0.88rem);
  line-height: 1.58;
  color: #DFD5CE;
  font-weight: 400;
}

.quemsou-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: clamp(0.55rem, 0.68vw, 0.82rem) clamp(1.2rem, 1.4vw, 1.85rem);
  border-radius: 9999px;
  background: linear-gradient(135deg, #7A0A22 0%, #4D0312 100%);
  border: 1px solid rgba(212, 175, 55, 0.38);
  color: #FFFFFF !important;
  font-family: var(--font-btn);
  font-size: clamp(0.65rem, 0.72vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.quemsou-btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, #8E0F2A 0%, #5E0518 100%);
  border-color: #D4AF37;
  box-shadow: 0 8px 25px rgba(142, 15, 42, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   BLOCO DE AVALIAÇÕES DOS CLIENTES (COM BACKGROUND AVALIACAO.PNG)
   ========================================================================== */
.avaliacoes-stage {
  position: relative;
  width: 100%;
  background-color: #120305;
  background-image: url('../img/avaliacao.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

.avaliacoes-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg, 
    rgba(18, 3, 6, 0.94) 0%, 
    rgba(18, 3, 6, 0.82) 38%, 
    rgba(18, 3, 6, 0.62) 75%, 
    rgba(18, 3, 6, 0.48) 100%
  );
  pointer-events: none;
}

@media (max-width: 1024px) {
  .avaliacoes-overlay {
    background: linear-gradient(
      180deg, 
      rgba(18, 3, 6, 0.95) 0%, 
      rgba(18, 3, 6, 0.86) 50%, 
      rgba(18, 3, 6, 0.92) 100%
    );
  }
}

.avaliacao-card {
  background: rgba(22, 5, 8, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 16px;
  padding: 0.95rem 1.05rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.avaliacao-card:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(32, 7, 12, 0.85);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 18px rgba(212, 175, 55, 0.16);
}

.avaliacao-quote {
  font-family: var(--font-desc);
  font-size: clamp(0.7rem, 0.76vw, 0.82rem);
  line-height: 1.48;
  color: #DFD5CE;
  font-weight: 400;
}

/* CARROSSEL DE AVALIAÇÕES REAIS DO GOOGLE */
.reviews-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.reviews-carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.review-slide {
  flex: 0 0 100%;
  padding: 0 0.4rem;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .review-slide {
    flex: 0 0 50%;
  }
}

@media (min-width: 1024px) {
  .review-slide {
    flex: 0 0 33.333333%;
  }
}

.review-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: #F8F5F2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.review-nav-btn:hover {
  background: rgba(142, 15, 42, 0.6);
  border-color: #D4AF37;
  color: #D4AF37;
  transform: scale(1.05);
}

.review-nav-btn:active {
  transform: scale(0.95);
}

.review-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.22);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: none;
  padding: 0;
}

.review-dot.active {
  width: 22px;
  background: linear-gradient(90deg, #D4AF37, #F3E5D8);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* ==========================================================================
   SEÇÃO EVENTOS E EXPERIÊNCIAS (BACKGROUND: BACK3.PNG)
   ========================================================================== */
.eventos-unified-section {
  position: relative;
  width: 100%;
  background-color: #FAF7F2;
  overflow: hidden;
}

.eventos-stage {
  position: relative;
  width: 100%;
  background-color: #FDFBF8;
  background-image: url('../img/back3.webp');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  overflow: hidden;
}

.eventos-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg, 
    rgba(253, 251, 248, 0.98) 0%, 
    rgba(253, 251, 248, 0.95) 35%, 
    rgba(253, 251, 248, 0.90) 65%, 
    rgba(253, 251, 248, 0.84) 100%
  );
  pointer-events: none;
}

@media (max-width: 1024px) {
  .eventos-overlay {
    background: linear-gradient(
      180deg, 
      rgba(253, 251, 248, 0.98) 0%, 
      rgba(253, 251, 248, 0.95) 50%, 
      rgba(253, 251, 248, 0.92) 100%
    );
  }
}

.event-pillar-card {
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 16px;
  padding: 0.95rem 0.75rem;
  box-shadow: 0 4px 18px rgba(26, 3, 7, 0.06);
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 640px) {
  .event-pillar-card {
    padding: 0.7rem 0.55rem;
    border-radius: 14px;
  }
}

.event-pillar-card:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(212, 175, 55, 0.60);
  box-shadow: 0 10px 28px rgba(142, 15, 42, 0.12);
  transform: translateY(-2px);
}

.event-pillar-card h3 {
  color: #1A0307;
}

.event-pillar-card p {
  color: #382418;
  font-weight: 500;
}

.pillar-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #7A0A22;
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(122, 10, 34, 0.22);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar-icon-circle svg {
  width: 20px;
  height: 20px;
}

.event-pillar-card:hover .pillar-icon-circle {
  transform: scale(1.06);
  border-color: #D4AF37;
  box-shadow: 0 6px 18px rgba(122, 10, 34, 0.35);
}

.btn-evento-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.8rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #7A0A22 0%, #4D0312 100%);
  color: #FFFFFF !important;
  font-family: var(--font-btn);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(122, 10, 34, 0.35);
  border: 1px solid rgba(212, 175, 55, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-evento-primary:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, #8E0F2A 0%, #5E0518 100%);
  border-color: #D4AF37;
  box-shadow: 0 8px 25px rgba(142, 15, 42, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   SEÇÃO BLOG — NOTÍCIAS E INDICAÇÕES (SEM BACK3.PNG)
   ========================================================================== */
.blog-stage {
  position: relative;
  width: 100%;
  background-color: #FAF7F2;
}

.btn-blog-header {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.6rem;
  border-radius: 9999px;
  background: #8E0F2A;
  color: #FFFFFF !important;
  font-family: var(--font-btn);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(142, 15, 42, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-blog-header:hover {
  transform: translateY(-2px) scale(1.02);
  background: #B3123B;
  border-color: #D4AF37;
  box-shadow: 0 6px 20px rgba(142, 15, 42, 0.4);
}

.blog-card {
  background: #FFFFFF;
  border: 1px solid rgba(142, 15, 42, 0.08);
  border-radius: 16px;
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 3px 12px rgba(26, 3, 7, 0.04);
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(142, 15, 42, 0.1);
  border-color: rgba(212, 175, 55, 0.45);
}

.blog-img-wrap {
  width: 82px;
  height: 82px;
  border-radius: 11px;
  overflow: hidden;
  flex-shrink: 0;
  background: #1A0307;
}

@media (min-width: 640px) {
  .blog-img-wrap {
    width: 88px;
    height: 88px;
  }
}

.blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.blog-card:hover .blog-img {
  transform: scale(1.08);
}

.blog-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.blog-badge {
  display: inline-block;
  align-self: flex-start;
  background: rgba(142, 15, 42, 0.08);
  color: #8E0F2A;
  font-family: var(--font-menu);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.45rem;
  border-radius: 5px;
  margin-bottom: 0.2rem;
}

.blog-title {
  font-family: var(--font-title);
  font-size: 0.98rem;
  font-weight: 700;
  color: #1A0307;
  line-height: 1.2;
  margin-bottom: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s ease;
}

@media (min-width: 1280px) {
  .blog-title {
    font-size: 1.05rem;
  }
}

.blog-card:hover .blog-title {
  color: #8E0F2A;
}

.blog-desc {
  font-family: var(--font-desc);
  font-size: 0.68rem;
  color: #6E5A4D;
  line-height: 1.35;
  margin-bottom: 0.32rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-family: var(--font-btn);
  font-size: 0.64rem;
  font-weight: 700;
  color: #8E0F2A;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.25s ease;
  align-self: flex-start;
}

.blog-read-more:hover {
  color: #B3123B;
}

/* ==========================================================================
   SEÇÃO NEWSLETTER & CONTATO (BACKGROUND: IMG/NEW.PNG)
   ========================================================================== */
.newsletter-section {
  position: relative;
  width: 100%;
  background-color: #1A0307;
  overflow: hidden;
}

.newsletter-bg-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.newsletter-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
  filter: none !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .newsletter-section {
    min-height: 480px;
    padding-bottom: max(4.5rem, calc(env(safe-area-inset-bottom, 0px) + 4rem));
  }

  .newsletter-bg-img {
    object-position: center bottom;
  }

  .newsletter-input-pill {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
    border: 1.5px solid rgba(212, 175, 55, 0.45);
    position: relative;
    z-index: 25;
  }
}

.newsletter-overlay {
  display: none !important;
}

/* Campo Pill do Formulário Centralizado (Grande, Alto e Imponente) */
.newsletter-input-pill {
  position: relative;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 9999px;
  padding: 0.35rem 0.45rem 0.35rem 1.15rem;
  min-height: 58px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.95);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  .newsletter-input-pill {
    min-height: 72px;
    padding: 0.6rem 0.75rem 0.6rem 2.1rem;
  }
}

.newsletter-input-pill:focus-within {
  box-shadow: 0 10px 42px rgba(212, 175, 55, 0.5), 0 0 0 2px #D4AF37;
  border-color: #D4AF37;
}

.newsletter-input-icon {
  margin-right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8E0F2A;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .newsletter-input-icon {
    margin-right: 1rem;
  }
}

.newsletter-input-field {
  width: 0;
  min-width: 0;
  flex: 1 1 0%;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-desc);
  font-size: 0.95rem;
  color: #1A0307;
  padding: 0.45rem 0.35rem;
}

@media (min-width: 640px) {
  .newsletter-input-field {
    font-size: 1.14rem;
    padding: 0.6rem 0.45rem;
  }
}

.newsletter-input-field::placeholder {
  color: #8C7B75;
}

.newsletter-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #8E0F2A 0%, #B3123B 100%);
  color: #FFFFFF;
  font-family: var(--font-btn);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(142, 15, 42, 0.48);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  .newsletter-submit-btn {
    gap: 0.55rem;
    letter-spacing: 0.09em;
    padding: 1.05rem 2.25rem;
    font-size: 0.88rem;
  }
}

.newsletter-submit-btn:hover {
  transform: translateY(-1px) scale(1.02);
  background: linear-gradient(135deg, #B3123B 0%, #D4AF37 100%);
  box-shadow: 0 8px 28px rgba(179, 18, 59, 0.65);
}

/* Botões Circulares ao Lado (Só com Ícone, Rigorosamente Alinhados com a Mesma Altura de 68px) */
.newsletter-icon-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 4, 9, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .newsletter-icon-btn {
    width: 68px;
    height: 68px;
  }
}

.newsletter-icon-btn:hover {
  transform: translateY(-2px) scale(1.08);
  border-color: #D4AF37;
  background: rgba(142, 15, 42, 0.55);
  box-shadow: 0 8px 26px rgba(212, 175, 55, 0.45);
}

.newsletter-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.15);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  vertical-align: middle;
}

.newsletter-checkbox:checked {
  background-color: #8E0F2A;
  border-color: #D4AF37;
}

.newsletter-checkbox:checked::before {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(-45deg) translate(1px, -1px);
}

.newsletter-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(26, 3, 7, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  padding: 0.55rem 0.95rem;
  font-family: var(--font-btn);
  font-size: 0.68rem;
  font-weight: 700;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex: 1;
  text-align: center;
}

.newsletter-btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(212, 175, 55, 0.7);
  transform: translateY(-2px);
  color: #D4AF37;
}

/* ==========================================================================
   SEÇÃO FOOTER / RODAPÉ (BACKGROUND: IMG/FOOTER.PNG)
   ========================================================================== */
.footer-section {
  position: relative;
  width: 100%;
  background-color: #1A0307;
  overflow: hidden;
}

.footer-bg-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.footer-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.footer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 3, 7, 0.25);
  z-index: 1;
  pointer-events: none;
}

.font-script {
  font-family: var(--font-script);
}

.footer-social-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-social-icon:hover {
  background: #8E0F2A;
  border-color: #D4AF37;
  color: #D4AF37;
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 4px 12px rgba(142, 15, 42, 0.4);
}

/* ==========================================================================
   OTIMIZAÇÕES DE GPU PARA SCROLLTRIGGER & EFEITOS 3D
   ========================================================================== */
.hero-pillars-grid {
  perspective: 1000px;
}

.hero-pillar-item,
.wine-card-3d,
.avaliacao-card,
.event-pillar-card,
.blog-card,
.newsletter-input-pill,
.pillar-icon-circle {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.blog-img-wrap {
  overflow: hidden;
}

/* ==========================================================================
   SISTEMA DE RESPONSIVIDADE UNIVERSAL (MOBILE 320PX ATÉ TELAS 4K)
   ========================================================================== */

/* Estilos do Título Hero com Degradê Dourado Luminoso */
.hero-title-white {
  color: #FFFFFF;
}

.hero-gradient-title {
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
}

/* Dispositivos Móveis e Tablets (<= 768px) */
@media (max-width: 768px) {
  .sommelier-bg-img {
    object-position: center top !important;
  }

  .sommelier-hero-bg h1 {
    text-shadow: none !important;
  }

  /* Layout Hero Mobile: coluna única à direita da taça (igual à referência) */
  .hero-content-section {
    padding-top: 7.5rem !important;
    padding-bottom: 2rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.85rem !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .hero-content-box {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
  }

  /* Título em 2 linhas (largura total, acima da taça): Grandes Vinhos, / Experiências Inesquecíveis */
  .hero-main-heading {
    width: calc(100% - 12vw) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    font-size: clamp(1.68rem, 8.2vw, 2.3rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
  }

  .hero-title-br {
    display: block !important;
  }

  .hero-title-white {
    color: #390403 !important;
    text-shadow: none !important;
    filter: none !important;
    display: inline-block !important;
    font-weight: 700 !important;
  }

  .hero-gradient-title {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF275 25%, #FFD000 60%, #FFA800 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-style: italic !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    filter: none !important;
    display: inline-block !important;
  }

  .hero-title-indent {
    display: inline !important;
    margin-left: 0 !important;
  }

  /* Coluna (divisor, texto, botões) mantém a posição à direita da taça, independente do título */
  .hero-right-content-mobile {
    width: 52% !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: max(0.5rem, calc(49.3vw - 142px)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* --------------------------------------------------------------------------
     ADAPTAÇÃO RESPONSIVA INTELIGENTE (SEM ALTERAR CELULARES ALTOS)
     Evita que o título sobreponha a taça em celulares com telas menores ou 
     com barra de navegação ativa do navegador
     -------------------------------------------------------------------------- */
  @media (max-width: 385px) {
    .hero-main-heading {
      width: calc(100% - 6vw) !important;
      font-size: clamp(1.4rem, 7.4vw, 1.85rem) !important;
    }
  }

  @media (max-height: 780px) {
    .hero-content-section {
      padding-top: max(4.65rem, calc(env(safe-area-inset-top, 0px) + 3.45rem)) !important;
      padding-bottom: 1.25rem !important;
    }

    .hero-main-heading {
      font-size: clamp(1.3rem, 6.4vw, 1.8rem) !important;
      line-height: 1.12 !important;
      width: calc(100% - 6vw) !important;
    }

    .hero-right-content-mobile {
      margin-top: clamp(0.55rem, 2.8vh, 1.35rem) !important;
    }
  }

  @media (max-height: 680px) {
    .hero-content-section {
      padding-top: max(4.35rem, calc(env(safe-area-inset-top, 0px) + 3.15rem)) !important;
      padding-bottom: 0.85rem !important;
    }

    .hero-main-heading {
      font-size: clamp(1.2rem, 6.0vw, 1.55rem) !important;
      line-height: 1.1 !important;
      width: calc(100% - 6vw) !important;
    }

    .hero-right-content-mobile {
      margin-top: 0.5rem !important;
    }

    .hero-cta-buttons {
      margin-top: 1rem !important;
      gap: 0.45rem !important;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
      height: 38px !important;
      font-size: 0.69rem !important;
    }
  }

  @media (max-height: 580px) {
    .hero-content-section {
      padding-top: max(3.85rem, calc(env(safe-area-inset-top, 0px) + 2.65rem)) !important;
      padding-bottom: 0.5rem !important;
    }

    .hero-main-heading {
      font-size: clamp(1.1rem, 5.2vw, 1.35rem) !important;
      line-height: 1.08 !important;
    }

    .hero-right-content-mobile {
      margin-top: 0.35rem !important;
    }
  }

  /* Divisor removido a pedido */
  .hero-mobile-divider {
    display: none !important;
  }

  /* Texto 'Rótulos...' 100% limpo, sem sombras ou efeitos atrás */
  .hero-desc-text {
    color: #390403 !important;
    font-size: clamp(0.85rem, 3.6vw, 1.05rem) !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    filter: none !important;
    background: none !important;
    backdrop-filter: none !important;
    margin-bottom: 0 !important;
    text-align: left !important;
  }

  /* Padronização de tamanho dos textos descritivos das seções no mobile (idêntico ao Hero) */
  .section-desc-mobile,
  .quemsou-mobile-desc {
    font-size: clamp(0.85rem, 3.6vw, 1.05rem) !important;
  }

  /* Frase caligráfica institucional do rodapé ampliada no mobile */
  .footer-quote-script {
    font-size: clamp(1.25rem, 5.2vw, 1.65rem) !important;
    line-height: 1.25 !important;
  }

  /* Botões empilhados na coluna direita, sem cobrir a imagem de fundo */
  .hero-cta-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-top: 1.65rem !important;
    gap: 0.65rem !important;
  }

  /* Botão 1: VER CATÁLOGO (Vinho Tinto Nobre Pill conforme imagem) */
  .btn-hero-primary {
    width: 100% !important;
    flex: none !important;
    height: 42px !important;
    padding: 0 0.75rem !important;
    background: linear-gradient(180deg, #960315 0%, #680010 100%) !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(251, 230, 213, 0.45) !important;
    border-radius: 9999px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 4px 14px rgba(100, 0, 16, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .btn-hero-primary .btn-arrow-icon {
    stroke: #FFFFFF !important;
    width: 15px !important;
    height: 15px !important;
  }

  /* Botão 2: FALAR COM A VINUM (Bronze / Âmbar Nobre com borda dourada conforme imagem) */
  .btn-hero-secondary {
    width: 100% !important;
    flex: none !important;
    height: 42px !important;
    padding: 0 0.75rem !important;
    background: linear-gradient(180deg, #643806 0%, #462503 100%) !important;
    color: #FFFFFF !important;
    border: 1.5px solid #d4af37 !important;
    border-radius: 9999px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 4px 14px rgba(60, 30, 5, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .btn-hero-secondary .btn-whatsapp-icon {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    width: 15px !important;
    height: 15px !important;
  }

  .sommelier-hero-bg p {
    text-shadow: none !important;
    filter: none !important;
  }

  .pillar-title-top,
  .pillar-title-bottom {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9);
  }

  .pillar-svg {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9));
  }
}

/* Telas Pequenas e Smartphones (<= 480px) */
@media (max-width: 480px) {
  /* Pilares */
  .hero-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.85rem;
  }

  .hero-pillar-item {
    background: rgba(18, 3, 6, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 11px;
    padding: 0.45rem 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    min-height: 44px;
    box-sizing: border-box;
  }

  .pillar-svg {
    width: 19px;
    height: 19px;
    stroke: #F6D688;
    color: #F6D688;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  }

  .pillar-title-top,
  .pillar-title-bottom {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ajustes finos para telas menores que 380px */
  @media (max-width: 380px) {
    .hero-right-content-mobile {
      width: 54% !important;
    }
    .hero-cta-buttons {
      margin-top: 2rem !important;
    }
    .btn-hero-primary,
    .btn-hero-secondary {
      font-size: 0.68rem !important;
      height: 38px !important;
      padding: 0 0.45rem !important;
    }
  }

  /* Newsletter Pill */
  .newsletter-input-pill {
    min-height: 52px;
    padding: 0.28rem 0.35rem 0.28rem 0.95rem;
  }

  .newsletter-input-field {
    font-size: 0.88rem;
    padding: 0.3rem 0.25rem;
  }

  .newsletter-submit-btn {
    padding: 0.65rem 1.15rem;
    font-size: 0.74rem;
  }

  /* Eventos Pilares */
  .pillar-icon-circle {
    width: 46px;
    height: 46px;
  }

  .pillar-icon-circle svg {
    width: 22px;
    height: 22px;
  }

  /* Blog Card */
  .blog-card {
    padding: 0.6rem 0.75rem;
    gap: 0.7rem;
  }

  .blog-img-wrap {
    width: 74px;
    height: 74px;
  }

  .blog-title {
    font-size: 0.88rem;
  }

  .blog-desc {
    font-size: 0.68rem;
  }

  /* Footer */
  .footer-social-icon {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }
}

/* Telas Ultra-Pequenas (<= 360px - Ex: iPhone SE 1st gen, Galaxy Fold) */
@media (max-width: 360px) {
  .hero-pillars-grid {
    gap: 0.5rem 0.35rem;
  }

  .pillar-svg {
    width: 15px;
    height: 15px;
  }

  .pillar-title-top,
  .pillar-title-bottom {
    font-size: 0.58rem;
    letter-spacing: 0.02em;
  }

  .newsletter-input-pill {
    min-height: 46px;
    padding: 0.22rem 0.25rem 0.22rem 0.75rem;
  }

  .newsletter-input-field {
    font-size: 0.8rem;
  }

  .newsletter-submit-btn {
    padding: 0.55rem 0.85rem;
    font-size: 0.68rem;
  }

  .blog-img-wrap {
    width: 64px;
    height: 64px;
  }
}

/* Telas Ultra-Wide e Monitores 4K (>= 1600px) */
@media (min-width: 1600px) {
  .hero-pillar-item {
    gap: 0.85rem;
  }

  .pillar-svg {
    width: 26px;
    height: 26px;
  }

  .pillar-title-top,
  .pillar-title-bottom {
    font-size: 0.82rem;
  }

  .blog-title {
    font-size: 1.12rem;
  }

  .blog-desc {
    font-size: 0.76rem;
  }
}

/* ==============================================================================
   MODAL SOMMELIER DE VINHOS POR CATEGORIA (ULTRA PREMIUM)
   ============================================================================== */
.wine-modal-dialog {
  transform: scale(0.95) translateY(12px);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

#wineCategoryModal.modal-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#wineCategoryModal.modal-open .wine-modal-dialog {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

.custom-wine-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-wine-scrollbar::-webkit-scrollbar-track {
  background: rgba(20, 5, 8, 0.6);
  border-radius: 8px;
}
.custom-wine-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.35);
  border-radius: 8px;
}
.custom-wine-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.6);
}

/* Abas do Modal de Vinhos 100% sem bordas */
.wine-modal-cat-tab {
  border: none !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #C5B3B8 !important;
  box-shadow: none !important;
}
.wine-modal-cat-tab:hover {
  background: rgba(142, 15, 42, 0.35) !important;
  border: none !important;
  outline: none !important;
  color: #FFFFFF !important;
}

.wine-modal-cat-tab.active-tab {
  background: linear-gradient(135deg, #8E0F2A 0%, #B3123B 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 4px 15px rgba(179, 18, 59, 0.45) !important;
}

/* Modal do Catálogo: ELIMINAÇÃO TOTAL DE QUALQUER BORDA EM TODOS OS ELEMENTOS */
#wineCategoryModal,
#wineCategoryModal *,
#wineCategoryModal .wine-modal-dialog,
#wineCategoryModal .wine-modal-dialog div,
#wineCategoryModal .wine-modal-dialog button,
#wineCategoryModal .wine-modal-dialog a,
#wineCategoryModal .wine-modal-dialog span,
#wineCategoryModal .wine-modal-dialog img,
#wineCategoryModal .wine-grid-card,
#wineCategoryModal .group\/wine {
  border-color: transparent !important;
}

#wineCategoryModal .wine-modal-dialog {
  border: none !important;
  outline: none !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95) !important;
}

#wineCategoryModal .wine-grid-card,
#wineCategoryModal .group\/wine,
#wineCategoryModal #wineModalBodyList .grid > div {
  border: none !important;
  outline: none !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
}

#wineCategoryModal .wine-grid-card:hover,
#wineCategoryModal .group\/wine:hover,
#wineCategoryModal #wineModalBodyList .grid > div:hover {
  border: none !important;
  outline: none !important;
  box-shadow: 0 12px 35px rgba(179, 18, 59, 0.35) !important;
}

#wineCategoryModal button,
#wineCategoryModal span,
#wineCategoryModal .rounded-xl,
#wineCategoryModal .rounded-2xl,
#wineCategoryModal .rounded-full {
  border: none !important;
}

/* ==========================================================================
   MODAL DO BLOG: ESTILOS, TRANSIÇÕES E ELIMINAÇÃO TOTAL DE BORDAS BRANCAS
   ========================================================================== */
#blogArticleModal.modal-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#blogArticleModal.modal-open .wine-modal-dialog {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

#blogArticleModal,
#blogArticleModal *,
#blogArticleModal .wine-modal-dialog,
#blogArticleModal .wine-modal-dialog div,
#blogArticleModal .wine-modal-dialog button,
#blogArticleModal .wine-modal-dialog a,
#blogArticleModal .wine-modal-dialog span,
#blogArticleModal .wine-modal-dialog img {
  border-color: transparent !important;
}

#blogArticleModal .wine-modal-dialog {
  border: none !important;
  outline: none !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95) !important;
}

/* ==========================================================================
   REMOÇÃO DE BORDAS BRANCAS: BARRA DE CONSENTIMENTO E AVISO LEGAL (+18)
   ========================================================================== */
#vinumAgeConsentBar,
#vinumAgeConsentBar > div {
  border: none !important;
  outline: none !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85) !important;
}

#vinumAgeConsentBar button,
#vinumAgeConsentBar a {
  outline: none !important;
}

/* ==========================================================================
   MODAL DE TODOS OS ARTIGOS DO BLOG (ESTILO CATÁLOGO ABERTO)
   ========================================================================== */
#allBlogArticlesModal {
  transition: opacity 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease !important;
}

#allBlogArticlesModal.modal-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

#allBlogArticlesModal .wine-modal-dialog {
  transform: translateY(28px) scale(0.96);
  opacity: 0;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease !important;
}

#allBlogArticlesModal.modal-open .wine-modal-dialog {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

#allBlogArticlesModal,
#allBlogArticlesModal *,
#allBlogArticlesModal .wine-modal-dialog {
  border-color: transparent !important;
}

.all-blog-card {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
}

.all-blog-card:hover {
  background: linear-gradient(145deg, rgba(32, 8, 14, 0.95) 0%, rgba(20, 4, 9, 0.98) 100%) !important;
  box-shadow: 0 12px 32px rgba(142, 15, 42, 0.25), 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.blog-modal-tab {
  border: none !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #C5B3B8 !important;
  box-shadow: none !important;
}

.blog-modal-tab:hover {
  background: rgba(142, 15, 42, 0.35) !important;
  color: #FFFFFF !important;
}

.blog-modal-tab.active-tab {
  background: linear-gradient(135deg, #8E0F2A 0%, #B3123B 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(179, 18, 59, 0.45) !important;
}

/* ==========================================================================
   AJUSTES EXCLUSIVOS MOBILE (HERO & PILARES - DESKTOP 100% PRESERVADO)
   ========================================================================== */
@media (max-width: 768px) {
  /* Fundo 100% limpo e nítido: remove qualquer blur ou efeito nebuloso */
  .sommelier-hero-bg,
  .sommelier-bg-wrapper,
  .sommelier-bg-img {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .sommelier-hero-bg::before {
    display: none !important;
  }

  /* Oculta os 4 pilares no mobile */
  .hero-pillars-grid {
    display: none !important;
  }

  /* Título Hero com maior destaque, tamanho e legibilidade - sem borda preta */
  .hero-main-heading {
    letter-spacing: -0.01em !important;
    filter: none !important;
    text-shadow: none !important;
  }

  .hero-title-white {
    text-shadow: none !important;
    filter: none !important;
  }

  /* (hero-gradient-title mobile definido no bloco principal com dourado vivo e relevo de contraste) */

  /* Texto Descritivo 100% limpo, sem contorno ou borda preta */
  .hero-desc-text {
    color: #390403 !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-text-stroke: 0 !important;
    max-width: 100% !important;
  }

}

/* (tamanhos do título/texto mobile agora controlados no bloco principal <= 768px) */

/* ==============================================================================
   MODAL DE CATÁLOGO MOBILE: COMPACTO, MODERNO, SEM CORTE E COM EFEITO DE ABERTURA
   ============================================================================== */
@media (max-width: 768px) {
  /* Overlay do modal no mobile com backdrop blur suave */
  #wineCategoryModal {
    padding: 0.5rem 0.35rem !important;
    overflow-x: hidden !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: opacity 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease !important;
  }

  #wineCategoryModal.modal-open {
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  /* Efeito de abertura no mobile: Slide-Up suave + Escala fluida (Padrão iOS/Luxury App) */
  #wineCategoryModal .wine-modal-dialog {
    transform: translateY(35px) scale(0.95) !important;
    opacity: 0 !important;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
    max-height: 94vh !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(179, 18, 59, 0.3) !important;
  }

  #wineCategoryModal.modal-open .wine-modal-dialog {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
  }

  /* Prevenção total de scroll horizontal */
  #wineModalBodyList {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #wineModalBodyList .grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 0.65rem !important;
  }

  /* Cards de Vinho Compactos, Modernos e sem corte */
  .wine-grid-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.6rem !important;
    gap: 0.6rem !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, rgba(28, 8, 16, 0.96) 0%, rgba(16, 4, 8, 0.98) 100%) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55) !important;
  }

  .wine-card-img-wrap {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    min-height: 150px !important;
    border-radius: 10px !important;
  }

  .wine-card-title {
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.15rem !important;
  }

  .wine-card-chips {
    gap: 0.25rem !important;
    margin-bottom: 0.35rem !important;
  }

  .wine-card-chip {
    font-size: 0.62rem !important;
    padding: 0.15rem 0.4rem !important;
  }

  .wine-card-action-row {
    padding-top: 0.4rem !important;
    gap: 0.35rem !important;
  }

  .wine-card-price-value {
    font-size: 0.88rem !important;
  }

  .wine-card-cta-btn {
    padding: 0.38rem 0.65rem !important;
    font-size: 0.66rem !important;
    border-radius: 9px !important;
    letter-spacing: 0.02em !important;
  }

  /* Modal de Todos os Artigos - Versão Mobile Compacta & Fluida */
  #allBlogArticlesModal .wine-modal-dialog {
    max-height: 94vh !important;
    border-radius: 18px !important;
    transform: translateY(30px) scale(0.95) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(179, 18, 59, 0.25) !important;
  }

  #allBlogArticlesModal.modal-open .wine-modal-dialog {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
  }

  #allBlogGridContainer {
    gap: 0.65rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .all-blog-card {
    padding: 0.55rem !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, rgba(28, 8, 14, 0.96) 0%, rgba(16, 4, 8, 0.98) 100%) !important;
  }

  .all-blog-card img {
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ==============================================================================
   LIGHTBOX MODERNO DE AMPLIAÇÃO DA FOTO DO VINHO (DESKTOP & MOBILE - ZERO BORDAS)
   ============================================================================== */
#winePhotoLightboxModal,
#winePhotoLightboxModal *,
#winePhotoLightboxModal div,
#winePhotoLightboxModal button,
#winePhotoLightboxModal span,
#winePhotoLightboxModal img,
.wine-zoom-btn {
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
}

.wine-lightbox-dialog {
  transform: scale(0.92) translateY(20px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
}

#winePhotoLightboxModal.lightbox-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#winePhotoLightboxModal.lightbox-open .wine-lightbox-dialog {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

/* Botão Olho / Zoom de Alta Definição (Sem bordas) */
.wine-zoom-btn {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, box-shadow 0.25s ease;
}

.wine-zoom-btn:hover {
  transform: scale(1.14) !important;
  background-color: #8E0F2A !important;
  box-shadow: 0 4px 18px rgba(179, 18, 59, 0.65) !important;
  color: #FFFFFF !important;
}

.wine-zoom-btn:active {
  transform: scale(0.92) !important;
}

/* Cursor de zoom na foto do vinho */
.wine-card-img-wrap {
  cursor: pointer;
}