/* =========================================================================
   BEM VIA — Landing Page Premium 2026
   -------------------------------------------------------------------------
   Escrito mobile-first: regras base valem para telas pequenas, e breakpoints
   (min-width) vão "ligando" o layout de tablet/desktop conforme a tela
   cresce. Isso evita ter que desfazer regras de desktop no celular.

   Índice:
   1. Variáveis e reset
   2. Utilitários (glass, gradiente de texto, container respirando)
   3. Preloader / scroll progress / skip link
   4. Header
   5. Botões (CTA, ripple, pulse, glow)
   6. Hero
   7. Barra de jornada
   8. Seções genéricas (títulos, eyebrow)
   9. Timeline "Como funciona"
   10. Serviços
   11. Quebra emocional
   12. Planos (cards, ribbon, promo, comparativo)
   13. Diferenciais
   14. Números / contadores
   15. Depoimentos (Swiper)
   16. FAQ (accordion)
   17. CTA final
   18. Footer
   19. Botões flutuantes (topo, WhatsApp, sticky CTA)
   20. Responsividade fina + prefers-reduced-motion
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VARIÁVEIS E RESET
   ------------------------------------------------------------------------- */
:root {
  /* Paleta — remete a saúde e bem-estar: azul petróleo, azul claro, verde suave */
  --color-primary: #1E6E8C;        /* azul petróleo */
  --color-primary-dark: #124A5F;
  --color-primary-light: #6FBEDE;  /* azul claro */
  --color-accent: #45B58C;         /* verde suave */
  --color-accent-light: #8FDCC0;
  --color-white: #FFFFFF;
  --color-gray-50: #F6FAFB;        /* cinza muito claro */
  --color-gray-100: #EEF3F5;
  --color-gray-300: #D8E2E6;
  --color-text: #1C2B33;
  --color-text-muted: #5D7480;
  --color-warn: #E5A445;

  --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-soft: linear-gradient(160deg, #EAF6FB 0%, #F2FBF7 100%);

  --shadow-sm: 0 4px 14px rgba(18, 74, 95, 0.08);
  --shadow-md: 0 12px 32px rgba(18, 74, 95, 0.12);
  --shadow-lg: 0 24px 60px rgba(18, 74, 95, 0.18);

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --header-h: 84px;
  --transition-base: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  font-size: 17px;             /* confortável, acessível para público 50+ */
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4, .brand-name {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  font-weight: 700;
  line-height: 1.2;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* Foco visível para navegação por teclado — nunca remover outline sem substituto */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  z-index: 3000;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   2. UTILITÁRIOS
   ------------------------------------------------------------------------- */
.container { max-width: 1220px; }

.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(30, 110, 140, 0.08);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.eyebrow-center { justify-content: center; }

.section { padding: 88px 0; }
.section-alt { background: var(--color-gray-50); }
.section-head { max-width: 640px; margin: 0 auto 52px; }
.section-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 14px; }
.section-lead { color: var(--color-text-muted); font-size: 1.05rem; }

/* -------------------------------------------------------------------------
   3. PRELOADER / SCROLL PROGRESS / HEADER
   ------------------------------------------------------------------------- */
#preloader {
  position: fixed; inset: 0;
  background: var(--gradient-soft);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader-mark {
  width: 84px; height: 84px;
  filter: drop-shadow(0 12px 22px rgba(18, 74, 95, 0.25));
  animation: preloaderPulse 1.1s ease-in-out infinite;
}

@keyframes preloaderPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

#scrollProgress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: var(--gradient-brand);
  z-index: 2001;
  transition: width 0.1s linear;
}

.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1500;
  padding: 14px 0;
  transition: background var(--transition-base), box-shadow var(--transition-base), padding var(--transition-base);
}
.site-header .navbar { padding: 0; }

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
  padding: 8px 0;
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { height: 52px; width: auto; transition: height var(--transition-base); }
.site-header.is-scrolled .brand-logo { height: 42px; }
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: var(--shadow-sm);
}
.brand-name { font-size: 1.25rem; color: var(--color-primary-dark); }
.brand-name strong { color: var(--color-accent); }

.nav-link {
  font-weight: 600;
  color: var(--color-text);
  padding: 10px 14px !important;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 2px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }

/* -------------------------------------------------------------------------
   5. BOTÕES
   ------------------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-pill);
  font-weight: 700;
  padding: 12px 26px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.btn-cta {
  background: var(--gradient-brand);
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.btn-cta:hover { transform: translateY(-3px); color: #fff; box-shadow: var(--shadow-lg); }

.btn-outline-cta {
  background: #fff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary-light);
}
.btn-outline-cta:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateY(-3px);
}

.btn-block { display: block; width: 100%; text-align: center; }

/* brilho contínuo passando pelo botão (shine) */
.btn-glow::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  animation: shineSweep 3.2s ease-in-out infinite;
}
@keyframes shineSweep {
  0% { left: -60%; }
  50% { left: 130%; }
  100% { left: 130%; }
}

/* pulso discreto e contínuo — usado nos CTAs principais */
.btn-pulse { animation: ctaPulse 2.6s ease-in-out infinite; }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 110, 140, 0.35), var(--shadow-md); }
  50% { box-shadow: 0 0 0 12px rgba(30, 110, 140, 0), var(--shadow-md); }
}

/* efeito ripple ao clicar (aplicado via JS, que injeta o <span class="ripple">) */
.btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(2.6); opacity: 0; }
}

/* -------------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  padding: calc(var(--header-h) + 56px) 0 90px;
  overflow: hidden;
  background: var(--gradient-soft);
}

.hero-bg-video {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; /* some visível só se o vídeo carregar de verdade (ver JS) */
  transition: opacity 1.2s ease;
}
.hero-bg-video video.is-ready { opacity: 0.35; }
.hero-bg-video-overlay {
  position: absolute; inset: 0;
  background: var(--gradient-soft);
  opacity: 0.55;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  animation: blobFloat 14s ease-in-out infinite;
}
.blob-1 { width: 340px; height: 340px; background: var(--color-primary-light); top: -80px; right: 8%; }
.blob-2 { width: 260px; height: 260px; background: var(--color-accent-light); bottom: -60px; left: 4%; animation-delay: -4s; }
.blob-3 { width: 180px; height: 180px; background: var(--color-warn); opacity: 0.18; top: 40%; left: 44%; animation-delay: -8s; }

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, -30px) scale(1.08); }
}

.hero-wave {
  position: absolute; left: 0; right: 0; bottom: -2px;
  width: 100%; height: 120px;
  fill: var(--color-white);
}

.hero-section .container { position: relative; z-index: 1; }

.hero-title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  margin-bottom: 20px;
}
.hero-lead {
  color: var(--color-text-muted);
  font-size: 1.12rem;
  max-width: 540px;
  margin-bottom: 8px;
}

.hero-typing {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  font-size: 1.05rem;
  min-height: 1.6em;
  margin-bottom: 22px;
}
.hero-typing-word { border-bottom: 2px solid var(--color-accent); padding-bottom: 1px; }
.hero-typing-cursor { animation: blinkCursor 1s step-end infinite; color: var(--color-accent); font-weight: 400; }
@keyframes blinkCursor { 50% { opacity: 0; } }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero-trust li { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-text-muted); font-size: 0.95rem; }
.hero-trust i { color: var(--color-accent); }

.hero-visual { position: relative; max-width: 460px; margin: 0 auto; padding: 20px; }

.hero-photo-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-photo {
  width: 100%; height: 100%;
  background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.92);
  font-size: 92px;
}
.hero-photo-img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.floating-card {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-width: 240px;
  animation: cardHover 5s ease-in-out infinite;
}
.floating-card i { font-size: 22px; color: var(--color-accent); }
.floating-card strong { display: block; font-size: 0.88rem; color: var(--color-primary-dark); }
.floating-card span { font-size: 0.78rem; color: var(--color-text-muted); }

.card-a { top: 6%; left: -8%; animation-delay: 0s; }
.card-b { bottom: 22%; right: -10%; animation-delay: -1.6s; }
.card-c { bottom: -6%; left: 6%; animation-delay: -3.2s; }
.card-ai { top: 40%; right: -14%; animation-delay: -2.4s; }

@keyframes cardHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.ai-badge {
  position: absolute;
  top: -12px; left: 16px;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: var(--shadow-sm);
}
.card-ai { padding-top: 20px; }

/* -------------------------------------------------------------------------
   7. BARRA DE JORNADA
   ------------------------------------------------------------------------- */
.journey-bar { padding: 44px 0; background: var(--color-white); }

.journey-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
}
.journey-track::before {
  content: '';
  position: absolute;
  top: 19px; left: 19px; right: 19px;
  height: 3px;
  background: var(--color-gray-300);
  border-radius: var(--radius-pill);
  z-index: 0;
}
.journey-fill {
  position: absolute;
  top: 19px; left: 19px;
  height: 3px;
  width: 0%;
  background: var(--gradient-brand);
  border-radius: var(--radius-pill);
  z-index: 1;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-fill.is-filled { width: calc(100% - 38px); }

.journey-step {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  flex: 1;
  text-align: center;
}
.journey-dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-gray-300);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  transition: all var(--transition-base);
}
.journey-fill.is-filled ~ .journey-step .journey-dot {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 0 0 5px rgba(69, 181, 140, 0.14);
}
.journey-label { font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); max-width: 100px; }

/* -------------------------------------------------------------------------
   9. TIMELINE "COMO FUNCIONA"
   ------------------------------------------------------------------------- */
.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  position: relative;
}
.timeline-track { display: none; }

.timeline-step {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.timeline-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.timeline-step i { font-size: 30px; color: var(--color-accent); margin: 10px 0 12px; display: block; }
.timeline-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.timeline-step p { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; }

.timeline-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-weight: 700;
  font-family: var(--font-heading);
}

/* -------------------------------------------------------------------------
   10. SERVIÇOS
   ------------------------------------------------------------------------- */
.service-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 26px 18px;
  text-align: center;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, #ffffff 0%, #F6FCFA 100%);
}
.service-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(30, 110, 140, 0.08);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
  transition: all var(--transition-base);
}
.service-card:hover .service-icon {
  background: var(--gradient-brand);
  color: #fff;
  transform: rotate(-8deg) scale(1.08);
}
.service-card h3 { font-size: 0.98rem; margin-bottom: 6px; }
.service-card p { color: var(--color-text-muted); font-size: 0.84rem; margin: 0; }
.service-card-more { background: var(--color-gray-50); border: 1.5px dashed var(--color-gray-300); box-shadow: none; }

/* -------------------------------------------------------------------------
   11. QUEBRA EMOCIONAL
   ------------------------------------------------------------------------- */
.emotional-break {
  padding: 90px 0;
  background: var(--gradient-brand);
  position: relative;
  overflow: hidden;
}
.emotional-break::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.14), transparent 55%);
}
.emotional-quote-icon { font-size: 40px; color: rgba(255,255,255,0.55); }
.emotional-statement {
  color: #fff;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  max-width: 780px;
  margin: 10px auto 14px;
}
.emotional-sub { color: rgba(255,255,255,0.85); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

/* -------------------------------------------------------------------------
   12. PLANOS
   ------------------------------------------------------------------------- */
.promo-banner {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #FFF6E9, #FFEFD9);
  border: 1px solid #F3D9A6;
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 40px;
}
.promo-icon {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: var(--color-warn);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.promo-banner strong { display: block; color: #8A5A1D; font-size: 0.98rem; }
.promo-banner span { color: #96703A; font-size: 0.88rem; }

.plan-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  height: 100%;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-100);
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
}
.plan-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }

.plan-card-highlight {
  background: var(--gradient-brand);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-lg);
  transform: scale(1.03);
}
.plan-card-highlight .plan-name,
.plan-card-highlight .plan-price { color: #fff; }
.plan-card-highlight .plan-desc { color: rgba(255,255,255,0.85); }
.plan-card-highlight .plan-features li { color: rgba(255,255,255,0.95); }
.plan-card-highlight .plan-features i { color: #fff; }

.plan-ribbon {
  position: absolute; top: 18px; right: -34px;
  background: var(--color-warn);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 6px 40px;
  transform: rotate(40deg);
  box-shadow: var(--shadow-sm);
}

.plan-name { font-size: 1.3rem; margin-bottom: 6px; }
.plan-desc { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 18px; }
.plan-price { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; margin-bottom: 22px; }
.plan-price .currency { font-size: 1.1rem; vertical-align: top; margin-right: 2px; }
.plan-price .cents { font-size: 1.3rem; }
.plan-price .period { font-size: 0.9rem; font-weight: 500; color: inherit; opacity: 0.75; }

.plan-features { margin-bottom: 26px; flex: 1; }
.plan-features li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.92rem; }
.plan-features i { color: var(--color-accent); }

.btn-ver-todos-servicos {
  background: none;
  border: none;
  padding: 0;
  margin: -14px 0 18px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: flex-start;
}
.plan-card-highlight .btn-ver-todos-servicos { color: #fff; }
.btn-ver-todos-servicos:hover { color: var(--color-accent); }
.plan-card-highlight .btn-ver-todos-servicos:hover { color: rgba(255,255,255,0.8); }

.plans-disclaimer {
  max-width: 820px;
  margin: 44px auto 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.plans-disclaimer i { color: var(--color-primary); margin-top: 3px; flex: none; }

.plans-compare { margin-top: 60px; }
.plans-compare-title { text-align: center; font-size: 1.3rem; margin-bottom: 22px; }
.plans-compare-table {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0;
}
.plans-compare-table th, .plans-compare-table td {
  text-align: center;
  vertical-align: middle;
  padding: 14px 12px;
  font-size: 0.9rem;
}
.plans-compare-table thead th { background: var(--color-gray-50); color: var(--color-primary-dark); font-family: var(--font-heading); }
.plans-compare-table tbody th { text-align: left; font-weight: 600; color: var(--color-text); }
.plans-compare-table .is-highlight { background: rgba(30, 110, 140, 0.06); font-weight: 700; color: var(--color-primary-dark); }
.plans-compare-table i.bi-check-lg { color: var(--color-accent); font-size: 1.1rem; }

/* -------------------------------------------------------------------------
   13. DIFERENCIAIS
   ------------------------------------------------------------------------- */
.diff-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.diff-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.diff-icon {
  width: 54px; height: 54px;
  border-radius: var(--radius-sm);
  background: var(--gradient-brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.diff-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.diff-card p { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; }

/* -------------------------------------------------------------------------
   14. NÚMEROS
   ------------------------------------------------------------------------- */
.stats-section { background: var(--gradient-soft); padding: 64px 0; }
.stat-item { display: flex; flex-direction: column; gap: 4px; }
.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--color-primary);
}
.stat-label { color: var(--color-text-muted); font-weight: 600; font-size: 0.9rem; }

/* -------------------------------------------------------------------------
   15. DEPOIMENTOS
   ------------------------------------------------------------------------- */
.testimonial-swiper { padding-bottom: 50px; }
.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  height: 100%;
  min-height: 240px;
  display: flex;
  flex-direction: column;
}
.testimonial-stars { color: var(--color-warn); letter-spacing: 3px; margin-bottom: 14px; }
.testimonial-card p { color: var(--color-text); font-size: 0.98rem; flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testimonial-author .avatar { font-size: 40px; color: var(--color-primary-light); }
.testimonial-author strong { display: block; font-size: 0.92rem; }
.testimonial-author span { font-size: 0.8rem; color: var(--color-text-muted); }

.swiper-pagination-bullet { background: var(--color-gray-300); opacity: 1; }
.swiper-pagination-bullet-active { background: var(--color-primary); }

/* -------------------------------------------------------------------------
   16. FAQ
   ------------------------------------------------------------------------- */
.faq-accordion .accordion-item {
  border: none;
  margin-bottom: 14px;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.faq-accordion .accordion-button {
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  padding: 20px 24px;
}
.faq-accordion .accordion-button:not(.collapsed) {
  background: rgba(30, 110, 140, 0.06);
  color: var(--color-primary);
  box-shadow: none;
}
.faq-accordion .accordion-button:focus { box-shadow: none; }
.faq-accordion .accordion-body { color: var(--color-text-muted); padding: 6px 24px 22px; }

/* -------------------------------------------------------------------------
   17. CTA FINAL
   ------------------------------------------------------------------------- */
.cta-final {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  text-align: center;
}
.cta-final-bg {
  position: absolute; inset: 0;
  background: var(--gradient-brand);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.cta-final .container { position: relative; z-index: 1; }
.cta-final h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: 14px; }
.cta-final p { color: rgba(255,255,255,0.88); margin-bottom: 32px; font-size: 1.05rem; }

.btn-cta-final {
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 1.15rem;
  padding: 18px 42px;
  border-radius: var(--radius-pill);
  box-shadow: 0 20px 44px rgba(0,0,0,0.22);
  animation: ctaFinalBlink 2.4s ease-in-out infinite, ctaPulse 2.6s ease-in-out infinite;
}
@keyframes ctaFinalBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}

/* -------------------------------------------------------------------------
   18. FOOTER
   ------------------------------------------------------------------------- */
.site-footer { background: var(--color-primary-dark); color: rgba(255,255,255,0.82); padding: 70px 0 30px; }
.footer-brand { margin-bottom: 16px; }
.footer-about { font-size: 0.9rem; color: rgba(255,255,255,0.7); max-width: 320px; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-base), transform var(--transition-base);
}
.footer-social a:hover { background: var(--color-accent); transform: translateY(-3px); }

.site-footer h4 { color: #fff; font-size: 0.95rem; margin-bottom: 16px; }
.footer-links li { margin-bottom: 10px; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.footer-links a { color: rgba(255,255,255,0.75); transition: color var(--transition-base); }
.footer-links a:hover { color: #fff; }
.footer-whatsapp { color: var(--color-accent-light) !important; font-weight: 700; }

.site-footer hr { border-color: rgba(255,255,255,0.15); margin: 40px 0 20px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: rgba(255,255,255,0.6); }

/* -------------------------------------------------------------------------
   19. BOTÕES FLUTUANTES
   ------------------------------------------------------------------------- */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all var(--transition-base);
  z-index: 1400;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-4px); }

.whatsapp-float {
  position: fixed; left: 22px; bottom: 22px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  box-shadow: var(--shadow-md);
  z-index: 1400;
}
.whatsapp-float::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: whatsappPing 2.6s ease-out infinite;
}
@keyframes whatsappPing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1300;
  background: var(--color-white);
  box-shadow: 0 -10px 30px rgba(18, 74, 95, 0.12);
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  transform: translateY(120%);
  transition: transform var(--transition-base);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta-info strong { display: block; font-size: 0.92rem; color: var(--color-primary-dark); }
.sticky-cta-info span { font-size: 0.78rem; color: var(--color-text-muted); }
.sticky-cta .btn { padding: 10px 22px; font-size: 0.9rem; white-space: nowrap; }

/* -------------------------------------------------------------------------
   20. RESPONSIVIDADE (mobile-first: base já é mobile, aqui "ligamos" telas maiores)
   ------------------------------------------------------------------------- */

/* Tablet (>=768px) */
@media (min-width: 768px) {
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .journey-label { max-width: none; }
}

/* Notebook/desktop pequeno (>=992px) */
@media (min-width: 992px) {
  .timeline { grid-template-columns: repeat(5, 1fr); }
  .nav-link { padding: 10px 12px !important; font-size: 0.94rem; }
  .sticky-cta { left: 50%; right: auto; bottom: 24px; transform: translate(-50%, 140%); border-radius: var(--radius-pill); max-width: 480px; }
  .sticky-cta.is-visible { transform: translate(-50%, 0); }

  /* 4 planos lado a lado (col-lg-3) — cards mais estreitos, então
     compacta um pouco o espaçamento interno e o tamanho do preço. */
  .plan-card { padding: 30px 20px; }
  .plan-price { font-size: 2rem; }
  .plan-price .cents { font-size: 1.1rem; }
  .plan-features li { font-size: 0.86rem; }
}

/* Desktop grande (>=1200px) */
@media (min-width: 1200px) {
  .hero-visual { max-width: 520px; }
}

/* Celular em geral (não só telas muito estreitas) — os botões do Hero
   ficam centralizados, não mais de ponta a ponta, pra nunca ficarem
   colados na borda esquerda onde o botão flutuante do WhatsApp fica
   por cima. */
@media (max-width: 767.98px) {
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: auto; min-width: 220px; max-width: 100%; text-align: center; }
}

/* Telas bem pequenas (celulares estreitos) — reduz alguns espaçamentos */
@media (max-width: 420px) {
  .section { padding: 64px 0; }
  .floating-card { max-width: 190px; padding: 10px 14px; }
  .card-a { left: -4%; }
  .card-b { right: -6%; }
  .card-ai { right: -8%; }
}

/* Esconde os cartões flutuantes mais extremos em telas médias pra não vazar do container */
@media (max-width: 991.98px) {
  .card-ai { display: none; }

  /* Nessas telas o CTA inteligente vira uma barra inteira colada no rodapé
     (ver .sticky-cta acima) — sobe o WhatsApp e o "voltar ao topo" pra não
     ficarem por cima dela quando ela aparece. */
  .whatsapp-float,
  .back-to-top {
    bottom: 96px;
  }

  /* Menu aberto no celular: o cabeçalho só ganha fundo sólido depois de
     rolar a página (.is-scrolled) — sem isso, o menu abria com fundo
     transparente por cima do conteúdo. Aqui o próprio painel do menu
     já vem com fundo e sombra, independente do scroll. */
  .navbar-collapse {
    background: var(--color-white);
    margin-top: 14px;
    padding: 16px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }

  /* A barra fixa do CTA (.sticky-cta, ~108px de altura) cobre o final da
     página — sem essa folga extra, a última linha do rodapé ("Feito
     com... Info Hard.") nunca aparece, mesmo rolando até o fim. Folga de
     ~150px deixa 1-2 linhas visíveis abaixo da barra, que continua fixa
     e visível normalmente. */
  .site-footer {
    padding-bottom: 150px;
  }
}

/* prefers-reduced-motion: desliga animações contínuas para quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}