/* ===== RESET & BASE (HYPER-COMPACT MOBILE FIRST) ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@400;600;800;900&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 14px; /* Mais compacto ainda */ }

body {
  font-family: 'Inter', sans-serif;
  color: #F8FAFC; 
  background-image: linear-gradient(rgba(0, 10, 25, 0.9), rgba(0, 10, 25, 0.97)), url('FUNDO/1753733574.png');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  line-height: 1.4;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img, video { max-width: 100%; height: auto; display: block; border-radius: 8px; }

/* ===== VARIABLES ===== */
:root {
  --color-primary: #0088FF; 
  --color-primary-dark: #0055AA;
  --color-primary-light: rgba(0, 136, 255, 0.15);
  --color-accent: #33A1FF;
  --color-premium: #F59E0B; 
  --glass-bg: rgba(15, 23, 42, 0.7);
  --glass-border: rgba(255, 255, 255, 0.15);
}

/* ===== UTILITIES (MOBILE DENSE) ===== */
.container { width: 100%; padding: 0 10px; margin: 0 auto; }
.highlight { color: var(--color-primary); }
.highlight-gold { color: var(--color-premium); text-shadow: 0 0 10px rgba(245, 158, 11, 0.3); }

/* Paddings extremamente enxutos */
.section { padding: 25px 0; }
.section-dark { background: transparent; } 
.section-alt { background: rgba(0,0,0,0.3); } 

.section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 15px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

/* LADO A LADO PARA O MOBILE (FLEX ROW FORÇADO) */
.mobile-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: stretch;
}
.mobile-row > * {
  flex: 1; /* Divide o espaço igualmente */
  min-width: 0; /* Evita estouro de container no flex */
}

/* GRID 2x2 PARA O PASSO A PASSO */
.grid-2x2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ===== TOP ALERT BAR ===== */
.top-alert-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 6px 10px;
  background: linear-gradient(90deg, #E11D48, #BE123C);
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0px;
  z-index: 1001;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.5);
  line-height: 1.2;
}

/* ===== HEADER ===== */
.header {
  position: absolute; top: 35px; left: 0; right: 0;
  background: transparent; z-index: 1000; padding: 10px 0;
}
.header .container { display: flex; justify-content: space-between; align-items: center; padding: 0 15px; }
.header-logo { max-height: 30px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.2)); }
.header-cta {
  background: var(--color-primary); color: #fff; padding: 5px 10px;
  border-radius: 6px; font-weight: 700; font-size: 0.75rem;
  box-shadow: 0 2px 10px rgba(0, 136, 255, 0.3);
}

/* ===== HERO (EXTREME MOBILE) ===== */
.hero { padding: 85px 0 15px; }
.hero-content { display: flex; flex-direction: column; gap: 15px; text-align: center; }

/* 1. Gancho e Vídeo */
.hero-media { width: 100%; display: flex; flex-direction: column; align-items: center; }

.mobile-hook {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.1;
  text-shadow: 0 4px 10px rgba(0,0,0,0.9);
  opacity: 0;
  animation: softFadeIn 2s ease-in-out forwards 0.3s;
}
.mobile-hook span { color: #EF4444; }

.hero-video-container { width: 100%; position: relative; border-radius: 12px; }
.hero-video-wrapper {
  width: 100%; border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #000; line-height: 0;
}
.hero-video-wrapper video { width: 100%; height: auto; object-fit: cover; }

/* 2. Texto Principal */
.hero-text { width: 100%; }
.hero-title {
  font-family: 'Outfit', sans-serif; font-size: 1.8rem;
  font-weight: 900; line-height: 1.1; color: #FFFFFF; margin-bottom: 8px; letter-spacing: -1px;
}
.hero-sub { font-size: 0.9rem; color: #CBD5E1; margin-bottom: 15px; }

/* ===== BUTTONS (MOBILE THUMB TARGET) ===== */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--color-primary); color: #fff; font-size: 1rem; font-weight: 800;
  padding: 12px; border-radius: 10px; border: none; cursor: pointer;
  width: 100%; box-shadow: 0 6px 20px rgba(0, 136, 255, 0.4);
}
.btn-premium { background: linear-gradient(135deg, #F59E0B, #B45309); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); }
.btn-pulse { animation: pulse 2s infinite; }
.cta-microcopy { font-size: 0.75rem; color: #94A3B8; margin-top: 10px; display: flex; flex-direction: row; justify-content: center; gap: 10px; }

/* ===== SWIPER CAROUSELS ===== */
.swiper { width: 100%; height: 100%; padding: 10px 0; }
.swiper-slide { 
  background-position: center; 
  background-size: cover; 
  width: 200px;
  height: auto;
  transition: transform 0.3s;
}
/* Efeito de destaque no slide central */
.swiper-slide-active { transform: scale(1.03); z-index: 10; }
.swiper-slide img { width: 100%; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.5); object-fit: contain; }

.swiper-logos .swiper-slide { width: 150px; }
.swiper-logos .swiper-slide img { background: rgba(255,255,255,0.05); padding: 10px; border: 1px solid rgba(255,255,255,0.1); }
.swiper-depoimentos .swiper-slide { width: 250px; }


/* ===== BANNERS & CARDS (HIPER COMPACTOS) ===== */
.promo-banner {
  background: linear-gradient(135deg, rgba(0, 76, 153, 0.9), rgba(0, 136, 255, 0.7));
  padding: 12px 10px; text-align: center; border-radius: 0; margin: 10px 0;
}
.promo-banner h3 { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 900; margin-bottom: 2px; }
.promo-banner p { font-size: 0.8rem; }

.stats-grid, .steps-grid, .gallery-grid, .pricing-grid { display: flex; flex-direction: column; gap: 10px; }

.stat-card, .step-card, .gallery-card, .pricing-card {
  background: var(--glass-bg); backdrop-filter: blur(15px); border-radius: 12px; padding: 15px 10px;
  border: 1px solid var(--glass-border); text-align: center;
}
.stat-card.stat-premium { border-color: var(--color-premium); }
.stat-number { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 900; line-height: 1; margin-bottom: 5px; }
.stat-card.stat-premium .stat-number { color: var(--color-premium); }
.stat-card h3 { font-size: 0.9rem; margin-bottom: 5px; }
.stat-card p { font-size: 0.7rem; line-height: 1.2; color: #CBD5E1; }

.gallery-card h3 { font-size: 0.9rem; margin-bottom: 10px; }
.gallery-card img { border-radius: 8px; }

.step-card { padding: 15px 10px; border: 1px solid var(--color-primary); box-shadow: 0 5px 20px rgba(0,136,255,0.2); display: flex; flex-direction: column; justify-content: center; align-items: center;}
.step-number { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 900; color: var(--color-primary); margin-bottom: 5px; line-height: 1; }
.step-card h3 { font-size: 0.9rem; }

/* PRICING ULTRA COMPACT (PARA LADO A LADO) */
.pricing-card { padding: 20px 10px; }
.pricing-card.premium { border: 2px solid var(--color-premium); background: rgba(15, 23, 40, 0.9); position: relative; }
.pricing-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--color-premium); color: #fff;
  padding: 2px 8px; border-radius: 10px; font-weight: 900; font-size: 0.65rem; white-space: nowrap;
}
.pricing-title { font-size: 0.95rem; font-weight: 800; }
.pricing-price { font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 900; margin: 2px 0; }
.pricing-price span { font-size: 0.8rem; vertical-align: super; }
.pricing-unit { font-size: 0.7rem; margin-bottom: 10px; color: #94A3B8; }
.pricing-list { list-style: none; margin-bottom: 15px; text-align: left; }
.pricing-list li { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 6px; font-size: 0.7rem; line-height: 1.2; }
.pricing-card .btn-primary { padding: 8px; font-size: 0.85rem; border-radius: 8px; }

/* FAQ */
.faq-container { width: 100%; }
.faq-item { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 10px; margin-bottom: 8px; }
.faq-item summary { padding: 12px; font-size: 0.85rem; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.2rem; color: var(--color-primary); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 12px 12px; font-size: 0.8rem; color: #94A3B8; }

/* FOOTER */
.footer { background: rgba(0,0,0,0.9); text-align: center; padding: 20px 10px 80px; font-size: 0.8rem; }
.whatsapp-float { position: fixed; bottom: 15px; right: 15px; width: 50px; height: 50px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(37,211,102,0.5); z-index: 1000; }
.whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }

/* ===== ANIMATIONS ===== */
@keyframes softFadeIn { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 136, 255, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(0, 136, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 136, 255, 0); } }

.reveal { opacity: 0; transform: translateY(10px); transition: all 0.5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* =========================================
   DESKTOP FALLBACK
========================================= */
@media (min-width: 768px) {
  .top-alert-bar { position: fixed; }
  .header { position: fixed; top: 32px; background: rgba(2, 6, 23, 0.8); backdrop-filter: blur(15px); padding: 15px 0;}
  .container { max-width: 500px; } /* Mantém a tela muito estreita no meio do monitor */
}