/**
 * CUBOS GAS - Rebranding Visual Ultragaz
 * Desenvolvido por Roka Digital - https://rokadigital.com.br/
 * Versao: 5.0 | Tema de Cores Oficial Ultragaz + Header Branco
 */

/* === VARIAVEIS DE SISTEMA (PALETA OFICIAL ULTRAGAZ) === */
:root {
  --blue: #000FFF;         /* Azul Ultragaz */
  --cyan: #00FFFF;         /* Ciano Ultragaz */
  --green: #00FF00;        /* Verde Ultragaz */
  --white: #FFFFFF;        /* Branco */
  --black: #000000;        /* Preto */
  --gray: #BBBCBC;         /* Cinza Suave */
  --light: #F6F8FB;        /* Cinza Claro */
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* === AJUSTES GLOBAIS === */
body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: var(--black);
}

/* Scrollbar Personalizado */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--light);
}
::-webkit-scrollbar-thumb {
  background: var(--gray);
  border-radius: 5px;
  border: 2px solid var(--light);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--blue);
}

/* === GRADIENTES OFICIAIS === */
.bg-gradient-principal {
  background: linear-gradient(90deg, #000FFF, #00FFFF) !important;
}

.bg-gradient-cta {
  background: linear-gradient(90deg, #00FF00, #00FFFF) !important;
}

.bg-gradient-hero {
  background: linear-gradient(135deg, #000FFF, #00FFFF) !important;
}

/* === HEADER BRANCO (MÁXIMO CONTRASTE PARA LOGO COLORIDO) === */
header {
  background: var(--white) !important;
  box-shadow: 0 4px 20px -10px rgba(2, 27, 92, 0.08);
  border-color: rgba(0, 0, 0, 0.05) !important;
}

header.scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(12px);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  box-shadow: 0 10px 30px -15px rgba(2, 27, 92, 0.12) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Links do menu (Azuis na paleta oficial, com hover em preto) */
header .nav-link {
  color: var(--blue) !important;
  opacity: 0.9;
  transition: var(--transition);
}

header .nav-link:hover {
  color: var(--black) !important;
  opacity: 1;
}

header .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--black);
  transition: var(--transition);
}

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

/* Botao Menu Mobile no Header Branco */
#menuButton {
  color: var(--blue) !important;
  background-color: rgba(0, 15, 255, 0.05) !important;
  border-color: rgba(0, 15, 255, 0.1) !important;
}
#menuButton:hover {
  background-color: rgba(0, 15, 255, 0.1) !important;
}

/* === BOTOES PRINCIPAIS === */
.btn-primary-ultragaz {
  background: linear-gradient(90deg, #000FFF, #00FFFF);
  color: var(--white) !important;
  border: none !important;
  transition: var(--transition);
}

.btn-primary-ultragaz:hover {
  background: linear-gradient(90deg, #00FFFF, #000FFF) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 15, 255, 0.35) !important;
  transform: translateY(-2px);
}

/* === BOTOES CTA === */
.btn-cta-ultragaz {
  background: linear-gradient(90deg, #00FF00, #00FFFF);
  color: var(--black) !important;
  font-weight: 800;
  border: none !important;
  transition: var(--transition);
}

.btn-cta-ultragaz:hover {
  background: linear-gradient(90deg, #00FFFF, #00FF00) !important;
  box-shadow: 0 12px 30px -8px rgba(0, 255, 0, 0.45) !important;
  transform: translateY(-2px);
}

/* === ACORDEAO FAQ === */
details.faq-accordion-item[open] {
  border-color: var(--blue);
  box-shadow: 0 10px 25px -10px rgba(0, 15, 255, 0.15);
  background-color: var(--white);
}
details.faq-accordion-item[open] .chevron-icon {
  transform: rotate(180deg);
  background-color: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
details.faq-accordion-item .chevron-icon {
  transition: var(--transition);
}
details.faq-accordion-item summary::-webkit-details-marker {
  display: none;
}
details.faq-accordion-item summary {
  list-style: none;
}

/* === SCROLL REVEAL ANIMATIONS === */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Delays das animacoes sequenciais */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* === EFEITOS ESPECIAIS PREMIUM === */
.text-gradient-principal {
  background: linear-gradient(90deg, #000FFF, #00FFFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-cta {
  background: linear-gradient(90deg, #00FF00, #00FFFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.bg-glass-white {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.shadow-premium {
  box-shadow: 0 15px 40px -15px rgba(0, 15, 255, 0.08);
}
.shadow-premium-hover {
  box-shadow: 0 25px 60px -15px rgba(0, 15, 255, 0.18);
}

/* === BOTOES EXTRAS E CORRECOES === */
.btn-wpp-vantagens {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  min-height: 3.5rem !important;
  border-radius: 9999px !important;
  background-color: var(--white) !important;
  color: var(--blue) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
  transition: var(--transition) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 15, 255, 0.3) !important;
  border: none !important;
}

.btn-wpp-vantagens:hover {
  background-color: var(--green) !important;
  color: var(--black) !important;
  box-shadow: 0 12px 30px -8px rgba(0, 255, 0, 0.45) !important;
  transform: translateY(-2px) !important;
}

.btn-wpp-vantagens:active {
  transform: scale(0.97) !important;
}

.btn-premium-grande {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 2.25rem !important;
  padding-right: 2.25rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  min-height: 3.5rem !important;
  border-radius: 9999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
  transition: var(--transition) !important;
}

.btn-outline-branco-grande {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 2.25rem !important;
  padding-right: 2.25rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  min-height: 3.5rem !important;
  border-radius: 9999px !important;
  border: 2px solid var(--white) !important;
  background-color: transparent !important;
  color: var(--white) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
  transition: var(--transition) !important;
}

.btn-outline-branco-grande:hover {
  background-color: var(--white) !important;
  color: var(--blue) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px -5px rgba(255, 255, 255, 0.2) !important;
}

.btn-outline-branco-grande:active {
  transform: scale(0.97) !important;
}