/* ==========================================================================
   IZING.PT — Modernization CSS (2026)
   ========================================================================== */

/* Esconder conteúdo dos slides antes do Slick inicializar (FOUC prevention) */
.slider-active:not(.slick-initialized) .single-slider:not(:first-child) {
  display: none;
}
/* Quando Slick inicializa com fade, os slides sobrepõem-se via left negativo.
   Nunca sobrescrever o opacity do Slick — ele controla via inline styles. */

/* --- Slider area positioning --- */
.slider-area { position: relative; }

/* --- Override paddings --- */
.create-padding {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.we-padding {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

.mt-80 {
  margin-top: 40px !important;
}

/* --- Scroll Progress Bar --- */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #2196F3, #00BCD4, #3e72af);
  z-index: 99999;
  transition: width 0.1s ease;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

/* --- Scroll-triggered base state --- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll.slide-left {
  transform: translateX(-60px);
}
.animate-on-scroll.slide-right {
  transform: translateX(60px);
}
.animate-on-scroll.scale-up {
  transform: scale(0.9);
}
.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* --- Staggered children --- */
.animate-child {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-child.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* --- Smooth scroll global --- */
html {
  scroll-behavior: smooth;
}

/* --- Navbar transition on scroll --- */
.main-header.navbar-scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 0;
}

/* --- Cards hover elevação moderna --- */
.single-do {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.single-do:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(62, 114, 175, 0.15);
}

/* --- Pricing cards hover --- */
.single-choose {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.single-choose:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 60px rgba(62, 114, 175, 0.2);
}

/* --- Destacar plano do meio (Profissional) como recomendado --- */
.choose-best .row > .col-lg-4:nth-child(2) .single-choose {
  border: 2px solid #3e72af;
  position: relative;
}
.choose-best .row > .col-lg-4:nth-child(2) .single-choose::before {
  content: "Popular";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #3e72af, #2196F3);
  color: #fff;
  padding: 4px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

/* --- Botões micro-interações --- */
.boxed-btn,
.genric-btn,
.hero-btn,
a.boxed-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.boxed-btn:hover,
.genric-btn:hover,
.hero-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(62, 114, 175, 0.35);
}
.boxed-btn:active,
.genric-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(62, 114, 175, 0.2);
}

/* --- Back to Top button --- */
#backToTop {
  position: fixed;
  bottom: 110px;
  right: 40px;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3e72af, #2196F3);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  line-height: 48px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
  z-index: 98;
  box-shadow: 0 4px 20px rgba(62, 114, 175, 0.3);
  pointer-events: none;
}
#backToTop.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#backToTop:hover {
  background: linear-gradient(135deg, #2b4b80, #1976D2);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(62, 114, 175, 0.4);
}

/* --- WhatsApp float button melhorado --- */
.float {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.4);
}

/* --- Galeria imagens efeito hover melhorado --- */
.hover-shadow {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border-radius: 8px;
  overflow: hidden;
}
.hover-shadow:hover {
  transform: scale(1.03);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* --- Secção de estatísticas/números --- */
#numeros .counter-value {
  font-size: 2.5rem;
  background: linear-gradient(135deg, #3e72af, #2196F3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* --- Links do navbar com underline animado --- */
.main-header .main-menu ul li a {
  position: relative;
}
.main-header .main-menu ul li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #3e72af;
  transition: width 0.3s ease, left 0.3s ease;
  border-radius: 1px;
}
.main-header .main-menu ul li a:hover::after,
.main-header .main-menu ul li a.active::after {
  width: 100%;
  left: 0;
}

/* --- Footer moderno --- */
footer.modern-footer {
  background: #1a2332;
  padding: 25px 0;
  color: rgba(255, 255, 255, 0.6);
}
footer.modern-footer .footer-text {
  margin: 0;
  font-size: 14px;
}
footer.modern-footer .footer-link {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  transition: color 0.3s ease;
  text-decoration: none;
}
footer.modern-footer img {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
footer.modern-footer .footer-link:hover {
  color: #fff;
  text-decoration: none;
}

/* --- Slick dots --- */
.slider-area .slick-dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.slider-area .slick-dots li {
  width: auto;
  height: auto;
}
.slider-area .slick-dots li button {
  font-size: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(42, 75, 128, 0.4);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.slider-area .slick-dots li.slick-active button {
  background: #2a4b80;
  border-color: #2a4b80;
}

/* --- Scroll indicator --- */
.scroll-indicator {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.scroll-indicator a {
  display: block;
  width: 28px;
  height: 46px;
  border: 2px solid rgba(42, 75, 128, 0.4);
  border-radius: 25px;
  position: relative;
}
.scroll-indicator a span {
  display: block;
  width: 5px;
  height: 5px;
  background: #2a4b80;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  animation: scrollBounce 2s infinite;
}
@keyframes scrollBounce {
  0%   { opacity: 1; top: 8px; }
  100% { opacity: 0; top: 30px; }
}

/* --- Hero H1 styling (match H2) — especificidade igual a style.css --- */
.slider-area .hero__caption h1 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
}

/* --- Reduzir motion para acessibilidade --- */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-child {
    opacity: 1;
    transform: none;
    transition: none;
  }
  #scroll-progress { display: none; }
  html { scroll-behavior: auto; }
}