/* ================================================
   ADVANCED ENGLISH: Global Stylesheet
   ================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* === Brand palette derived from the logo (navy ink + steel-blue orbit) === */
  --navy:        #0B1533;   /* deep ink navy (logo text)           */
  --navy-mid:    #122247;   /* raised navy surface                 */
  --navy-light:  #1B3160;   /* lighter navy / borders on dark      */
  --ink:         #070E20;   /* darkest section background          */
  --blue:        #3E6FB0;   /* structural steel blue (orbit)       */
  --blue-light:  #6E8CB6;   /* light steel blue                    */
  /* Accent kept under the name --teal so every existing var(--teal)
     reference re-themes at once: now the brand's electric azure.   */
  --teal:        #2E8BFF;   /* electric azure for CTAs and the "pulse" */
  --teal-dark:   #1E6FE0;   /* deeper azure for hover and gradients    */
  --azure:       #2E8BFF;   /* explicit alias                      */
  --azure-soft:  #5EA8FF;   /* azure highlight                     */
  --silver:      #8FA3BC;
  --mist:        #CFDCEC;
  --off-white:   #F3F6FB;
  --white:       #FFFFFF;
  --text:        #0E1A30;
  --text-muted:  #54678A;
  --border:      #DBE5F2;
  --gold:        #F0A500;
  --success:     #22C55E;

  /* Fonts */
  --font-display: 'Bricolage Grotesque', 'Sora', sans-serif;
  --font-body:    'Instrument Sans', 'Inter', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* Shadows tuned to the navy base */
  --shadow-sm:   0 2px 12px rgba(7,14,32,0.08);
  --shadow-md:   0 8px 32px rgba(7,14,32,0.14);
  --shadow-lg:   0 20px 60px rgba(7,14,32,0.22);

  /* Radius */
  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;

  /* Transitions */
  --t-fast:   0.18s ease;
  --t-normal: 0.3s ease;
  --t-slow:   0.5s ease;
}

html { scroll-behavior: smooth; scroll-padding-top: 100px; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* --- Container --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ================================================
   HEADER / NAVIGATION
   ================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t-normal);
}

.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(7,14,32,0.10);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.logo img {
  height: 54px;
  width: auto;
}

@media (max-width: 480px) {
  .logo img { height: 42px; }
}

/* Nav Desktop */
.nav-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .nav-desktop { display: flex; align-items: center; gap: 4px; }
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--t-fast);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--navy);
  background: var(--off-white);
}

.nav-link.active {
  color: var(--teal-dark);
  background: rgba(46,139,255,0.10);
}

.nav-link i { font-size: 13px; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 50px;
  background: var(--teal);
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  transition: all var(--t-normal);
  margin-left: 8px;
}

.nav-cta:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(46,139,255,0.35);
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 1001;
}

@media (min-width: 1024px) {
  .hamburger { display: none; }
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all var(--t-normal);
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Drawer */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

.nav-mobile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity var(--t-normal);
}

.nav-mobile-drawer {
  position: absolute;
  top: 0; right: 0;
  width: 300px;
  height: 100%;
  background: var(--white);
  transform: translateX(100%);
  transition: transform var(--t-slow);
  overflow-y: auto;
  padding: 90px 24px 32px;
  border-left: 1px solid var(--border);
}

.nav-mobile.open { pointer-events: auto; }
.nav-mobile.open .nav-mobile-overlay { opacity: 1; }
.nav-mobile.open .nav-mobile-drawer { transform: translateX(0); }

.nav-mobile-section {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 24px 0 10px;
}

.nav-mobile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  transition: all var(--t-fast);
  margin-bottom: 2px;
}

.nav-mobile-link:hover,
.nav-mobile-link.active {
  background: var(--off-white);
  color: var(--navy);
}

.nav-mobile-link.active { color: var(--teal-dark); }

.nav-mobile-link i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--teal);
}

.nav-mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  margin-top: 24px;
  transition: all var(--t-normal);
}

.nav-mobile-cta:hover { background: var(--teal-dark); }

/* ================================================
   SECTION HELPERS
   ================================================ */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 120px 0; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}

/* Sem a barrinha antes do rotulo: lida como travessao, e travessao nao entra
   em nada deste site. O rotulo se sustenta pela cor e pelo espacamento. */

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--navy);
  margin-bottom: 16px;
}

.section-title span { color: var(--blue); }

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 600px;
}

.section-header {
  margin-bottom: 56px;
}

.section-header.centered {
  text-align: center;
}

.section-header.centered .section-eyebrow {
  justify-content: center;
}

.section-header.centered .section-subtitle {
  margin: 0 auto;
}

/* ================================================
   BUTTONS
   ================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: all var(--t-normal);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 24px rgba(37,99,168,0.3);
}

.btn-primary:hover {
  background: var(--blue-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37,99,168,0.4);
}

.btn-teal {
  background: var(--teal);
  color: var(--navy);
  box-shadow: 0 8px 24px rgba(46,139,255,0.3);
}

.btn-teal:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(46,139,255,0.35);
}

.btn-navy {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-navy:hover {
  background: var(--navy-mid);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
}

.btn-outline:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
}

.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
}

.btn-outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}

.btn-lg { padding: 16px 36px; font-size: 16px; }

.btn-sm { padding: 9px 20px; font-size: 13px; }

/* ================================================
   CARDS
   ================================================ */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 32px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-normal);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-light);
}

/* ================================================
   BADGE
   ================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
}

.badge-teal {
  background: rgba(46,139,255,0.12);
  color: var(--teal-dark);
  border: 1px solid rgba(46,139,255,0.3);
}

.badge-blue {
  background: rgba(37,99,168,0.1);
  color: var(--blue);
  border: 1px solid rgba(37,99,168,0.2);
}

.badge-white {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ================================================
   CHECK LIST
   ================================================ */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--text-muted);
}

.check-list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(46,139,255,0.15);
  border: 1.5px solid var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%232E8BFF' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  margin-top: 2px;
}

.check-list.light li { color: rgba(255,255,255,0.8); }

/* ================================================
   FEATURE GRID
   ================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.feature-item {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 28px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-normal);
}

.feature-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-light);
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: rgba(37,99,168,0.08);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 18px;
}

.feature-icon.teal {
  background: rgba(46,139,255,0.1);
  color: var(--teal-dark);
}

.feature-item h4 {
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 8px;
}

.feature-item p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
}

/* ================================================
   STATS BAR
   ================================================ */
.stats-bar {
  background: var(--navy);
  padding: 28px 0;
}

.stats-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.07);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (min-width: 768px) {
  .stats-inner { grid-template-columns: repeat(4, 1fr); }
}

.stat-cell {
  background: var(--navy);
  padding: 20px 16px;
  text-align: center;
}

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--silver);
  letter-spacing: 0.3px;
}

/* ================================================
   CTA BAND
   ================================================ */
.cta-band {
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy-mid) 100%);
  border-radius: var(--r-xl);
  padding: 56px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(46,139,255,0.18) 0%, transparent 60%);
  pointer-events: none;
}

.cta-band h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #fff;
  margin-bottom: 12px;
}

.cta-band p {
  color: rgba(255,255,255,0.78);
  font-size: 1.05rem;
  margin-bottom: 28px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ================================================
   FORM
   ================================================ */
.form-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}

.form-label i { color: var(--blue); font-size: 12px; }

.form-control {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  transition: all var(--t-fast);
  outline: none;
}

.form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,168,0.1);
}

.form-control::placeholder { color: #B0BFCE; }

.form-submit {
  width: 100%;
  padding: 15px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all var(--t-normal);
}

.form-submit:hover {
  background: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,168,0.3);
}

.form-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.form-note {
  text-align: center;
  margin-top: 14px;
  padding: 11px;
  background: var(--off-white);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--text-muted);
}

.form-success {
  display: none;
  text-align: center;
  padding: 48px 24px;
}

.form-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(34,197,94,0.12);
  border: 2px solid var(--success);
  color: var(--success);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.form-success h3 {
  color: var(--navy);
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.form-success p { color: var(--text-muted); }

/* ================================================
   WHATSAPP FLOAT
   ================================================ */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 990;
}

.wa-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(37,211,102,0.45);
  transition: all var(--t-normal);
  animation: waPulse 3s ease infinite;
}

@keyframes waPulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(37,211,102,0.45); }
  50% { box-shadow: 0 8px 36px rgba(37,211,102,0.65); transform: scale(1.04); }
}

.wa-btn:hover { transform: scale(1.08) !important; }

.wa-menu {
  position: absolute;
  bottom: 74px;
  right: 0;
  width: 340px;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.95);
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid var(--border);
}

.wa-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.wa-menu-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.wa-menu-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.wa-menu-header h4 { font-size: 14px; color: var(--navy); margin-bottom: 2px; }
.wa-menu-header p  { font-size: 12px; color: var(--text-muted); }

.wa-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: all var(--t-fast);
  margin-bottom: 6px;
}

.wa-option:hover { background: var(--off-white); transform: translateX(4px); }

.wa-option-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.wa-option:nth-child(1) .wa-option-icon { color: var(--blue); }
.wa-option:nth-child(2) .wa-option-icon { color: var(--teal-dark); }
.wa-option:nth-child(3) .wa-option-icon { color: var(--navy); }
.wa-option:nth-child(4) .wa-option-icon { color: #25D366; }

.wa-option-text strong { display: block; font-size: 13px; color: var(--navy); margin-bottom: 2px; }
.wa-option-text span   { display: block; font-size: 11px; color: var(--text-muted); }

@media (max-width: 768px) {
  .wa-float { right: 16px; bottom: 20px; }
  .wa-menu {
    position: fixed;
    right: 12px;
    bottom: 88px;
    width: calc(100vw - 24px);
    max-width: 360px;
  }
}

/* ================================================
   BACK TO TOP
   ================================================ */
.back-top {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--t-normal);
  z-index: 989;
}

.back-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-top:hover { background: var(--navy); transform: translateY(-2px); }

/* ================================================
   FOOTER
   ================================================ */
.site-footer {
  background: var(--off-white);
  color: var(--text);
  border-top: 1px solid var(--border);
  padding: 80px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
}

.footer-brand p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-top: 16px;
  margin-bottom: 4px;
}

.footer-brand strong { color: var(--teal-dark); }

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all var(--t-fast);
}

.footer-social a:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  transform: scale(1.1);
}

.footer-col h5 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 20px;
}

.footer-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-muted);
  font-size: 14px;
  padding: 5px 0;
  transition: all var(--t-fast);
}

.footer-links a:hover { color: var(--teal-dark); padding-left: 6px; }

.footer-links a i { font-size: 10px; color: var(--teal-dark); }

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.footer-contact-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(46,139,255,0.12);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact-item p { font-size: 13px; color: var(--text-muted); }
.footer-contact-item a { color: var(--text-muted); font-size: 13px; }
.footer-contact-item a:hover { color: var(--teal-dark); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

.footer-bottom p {
  font-size: 13px;
  color: var(--text-muted);
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a {
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t-fast);
}

.footer-legal a:hover { color: var(--teal-dark); }

/* ================================================
   MODAL
   ================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--t-normal);
}

.modal-overlay.show { opacity: 1; visibility: visible; }

.modal-box {
  background: var(--white);
  border-radius: var(--r-xl);
  max-width: 680px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 44px 36px;
  position: relative;
  box-shadow: var(--shadow-lg);
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--off-white);
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}

.modal-close:hover { background: var(--navy); color: #fff; }

.modal-box h2 {
  font-size: 1.7rem;
  color: var(--navy);
  margin-bottom: 20px;
  padding-right: 48px;
}

.modal-box h3 { font-size: 1.05rem; color: var(--navy); margin: 22px 0 8px; }
.modal-box p  { font-size: 14px; color: var(--text-muted); line-height: 1.8; margin-bottom: 10px; }
.modal-box ul { padding-left: 20px; margin-bottom: 12px; }
.modal-box ul li { font-size: 14px; color: var(--text-muted); line-height: 1.8; margin-bottom: 4px; }

/* ================================================
   PAGE HERO (shared pattern)
   ================================================ */
.page-hero {
  padding: 140px 0 90px;
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-mid) 60%, #1E3A5F 100%);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(46,139,255,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(37,99,168,0.18) 0%, transparent 60%);
}

.page-hero-inner {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: #fff;
  margin-bottom: 18px;
}

.page-hero h1 span { color: var(--teal); }

.page-hero p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.75);
  max-width: 600px;
  line-height: 1.75;
  margin-bottom: 32px;
}

/* ================================================
   TESTIMONIAL
   ================================================ */
.testimonial-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 32px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.testimonial-stars {
  color: var(--gold);
  font-size: 14px;
  margin-bottom: 14px;
  letter-spacing: 2px;
}

.testimonial-text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 20px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue) 0%, var(--teal) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
}

.testimonial-name { font-weight: 700; font-size: 14px; color: var(--navy); }
.testimonial-role { font-size: 12px; color: var(--text-muted); }

/* ================================================
   SVG ART CONTAINERS
   ================================================ */
.art-box {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
}

.art-box svg { display: block; width: 100%; height: auto; }

/* ================================================
   UTILITIES
   ================================================ */
.bg-navy      { background: var(--navy); }
.bg-off-white { background: var(--off-white); }
.text-white   { color: #fff; }
.text-teal    { color: var(--teal); }
.text-muted   { color: var(--text-muted); }

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }

.gap-2-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .gap-2-col { grid-template-columns: 1fr 1fr; }
  .gap-2-col.reverse > :first-child { order: 2; }
  .gap-2-col.reverse > :last-child  { order: 1; }
}

@media (min-width: 900px) {
  .gap-2-col.wide { grid-template-columns: 1.1fr 0.9fr; }
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

.animate-float { animation: float 5s ease-in-out infinite; }

/* ================================================
   ACCESSIBILITY & QUALITY FLOOR
   ================================================ */

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal);
  color: var(--navy);
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
  font-size: 14px;
  z-index: 2000;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* Logo sizing harmonised with new artwork */
.logo img { height: 46px; }
@media (min-width: 1024px) { .logo img { height: 56px; } }

/* Respect reduced motion preferences */
@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;
  }
  .animate-float,
  .wa-btn,
  .live-badge::before { animation: none !important; }
}

/* Print: keep it clean */
@media print {
  .site-header, .nav-mobile, .wa-float, .back-top, .cta-band { display: none !important; }
  body { color: #000; }
}

/* ================================================
   PREMIUM LAYER (redesign 2026)
   Additive only. All brand variables, class names and
   JS state hooks above are preserved untouched. These
   rules refine hierarchy, depth and motion on top of
   the existing structure.
   ================================================ */

/* --- Typography: more presence, better wrapping --- */
h1, h2, h3, h4 { letter-spacing: -0.021em; }
.section-title, .page-hero h1, .hero h1 { letter-spacing: -0.03em; text-wrap: balance; }
.section-subtitle, .hero-lead, .page-hero p, p { text-wrap: pretty; }
.section-title { font-size: clamp(2.15rem, 4.3vw, 3.2rem); line-height: 1.12; }
.section-eyebrow { position: relative; }
.section-header { margin-bottom: 64px; }

/* Accent word as a brand gradient (on light sections only) */
.section-title span {
  background: linear-gradient(100deg, var(--blue) 8%, var(--teal) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- Header: settle and shrink on scroll --- */
.header-inner { transition: height var(--t-normal); }
.logo img { transition: height var(--t-normal); }
.site-header.scrolled { background: rgba(255,255,255,0.97); box-shadow: 0 6px 28px rgba(7,14,32,0.10); }
.site-header.scrolled .header-inner { height: 74px; }
.site-header.scrolled .logo img { height: 40px; }
@media (min-width: 1024px) {
  .site-header.scrolled .header-inner { height: 76px; }
  .site-header.scrolled .logo img { height: 48px; }
}

/* Desktop nav: intentional underline sweep */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--azure-soft));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-normal);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.nav-cta::after { display: none; }

/* --- Buttons: sheen sweep + richer depth --- */
.btn, .nav-cta, .nav-mobile-cta, .form-submit, .course-link { position: relative; overflow: hidden; }
.btn::after, .nav-cta::after, .form-submit::after {
  content: '';
  position: absolute; top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn:hover::after, .nav-cta:hover::after, .form-submit:hover::after { left: 135%; }
.btn-teal { color: var(--navy); font-weight: 700; }
.btn-teal:hover { background: #fff; }

/* Arrow nudges */
.course-link i, .btn i.fa-arrow-right, .footer-links a i { transition: transform var(--t-fast); }
.footer-links a:hover i { transform: translateX(3px); }

/* --- Cards & panels: deeper, warmer elevation --- */
.card, .feature-item, .course-card, .level-card, .mod-card, .why-item,
.testimonial-card, .info-card, .schedule-item {
  position: relative;
  transition: transform var(--t-normal), box-shadow var(--t-normal), border-color var(--t-normal);
}
.card:hover, .feature-item:hover, .course-card:hover, .level-card:hover,
.why-item:hover, .testimonial-card:hover, .info-card:hover {
  box-shadow: 0 26px 60px -22px rgba(11,21,51,0.32), 0 10px 26px -16px rgba(46,139,255,0.28);
  border-color: var(--blue-light);
}

/* Feature icons: gradient chip + pop on hover */
.feature-icon {
  background: linear-gradient(140deg, rgba(46,139,255,0.14), rgba(37,99,168,0.08));
  transition: transform var(--t-normal);
}
.feature-item:hover .feature-icon { transform: translateY(-3px) scale(1.06); }

/* Course icons lift */
.course-icon { transition: transform var(--t-normal), box-shadow var(--t-normal); }
.course-card:hover .course-icon { transform: translateY(-3px) rotate(-3deg); box-shadow: 0 14px 30px -12px rgba(11,21,51,0.4); }

/* Level number becomes a bold confident marker on hover */
.level-card .level-num { transition: opacity var(--t-normal), transform var(--t-normal); }
.level-card:hover .level-num { opacity: 0.65; transform: translateX(2px); }

/* --- Stats bar: deep gradient + luminous numbers --- */
.stats-bar { background: linear-gradient(135deg, var(--ink) 0%, var(--navy) 55%, var(--navy-mid) 100%); position: relative; overflow: hidden; }
.stats-bar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 120% at 85% 50%, rgba(46,139,255,0.16), transparent 70%);
}
.stat-cell { transition: background var(--t-normal); }
.stat-cell:hover { background: var(--navy-mid); }
.stat-num {
  background: linear-gradient(120deg, var(--azure-soft), var(--teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- Forms: focus that feels alive --- */
.form-control { border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.form-control:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(46,139,255,0.14); }
.form-group { position: relative; }
.form-label { transition: color var(--t-fast); }
.form-label i { transition: transform var(--t-fast), color var(--t-fast); }
.form-group:focus-within .form-label { color: var(--teal-dark); }
.form-group:focus-within .form-label i { color: var(--teal); transform: scale(1.18); }
.form-card { position: relative; }

/* --- WhatsApp options: tactile --- */
.wa-option, .wa-card { transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.wa-option-icon { transition: transform var(--t-fast); }
.wa-option:hover .wa-option-icon { transform: scale(1.12); }

/* --- CTA band: subtle living glow --- */
.cta-band::after {
  content: ''; position: absolute; left: -12%; bottom: -60%;
  width: 360px; height: 360px; pointer-events: none;
  background: radial-gradient(circle, rgba(94,168,255,0.18) 0%, transparent 62%);
}

/* ================================================
   MOTION LAYER  (activated only when animacoes.js
   adds .ae-anim to <html>; if the script or JS fails,
   or reduced-motion is on, every element stays fully
   visible in its final state. Nothing here gates the
   existence of content on an animation frame.)
   ================================================ */

@keyframes aeRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes aeFade { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes aeSheen { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }

/* Staggered scroll reveal for grid items */
.ae-anim .ae-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--ae-i, 0) * 75ms);
  will-change: opacity, transform;
}
.ae-anim .ae-item.ae-in { opacity: 1; transform: none; }

/* Hero entrance (delays set inline by the script) */
.ae-anim .ae-rise { animation: aeRise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ae-anim .ae-fade { animation: aeFade 0.9s ease both; }

/* Elements the script parallaxes (transform driven in JS) */
.ae-anim [data-ae-parallax] { will-change: transform; }

/* Interactive card tilt */
.ae-anim .ae-tilt { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow var(--t-normal); transform-style: preserve-3d; }

/* A quieter, single ambient sweep across the primary hero CTA */
/* O brilho e absolute e anda ate translateX(320%). Sem estes dois,
   ele se ancora num ancestral la em cima, escapa do botao e empurra a
   pagina para o lado, criando rolagem horizontal. */
.ae-anim .hero-cta .btn-teal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ae-anim .hero-cta .btn-teal::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: aeSheen 5.5s ease-in-out 1.2s infinite;
  pointer-events: none;
  z-index: -1;
}

/* Reinforce reduced-motion for everything the motion layer adds */
@media (prefers-reduced-motion: reduce) {
  .ae-anim .ae-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ae-anim .ae-rise, .ae-anim .ae-fade, .ae-anim .hero-cta .btn-teal::before { animation: none !important; }
  .ae-anim .ae-tilt { transform: none !important; }
}

/* ================================================
   CELULAR E TABLET: nada de tela inquieta
   ------------------------------------------------
   Em tela pequena o movimento continuo cansa e atrapalha
   a leitura. Aqui morre tudo que balanca sozinho, sem fim:
   flutuacao de card, brilho em loop no botao e a inclinacao
   por ponteiro. O que sobra e a revelacao ao rolar, uma vez
   por elemento, mais rapida e com menos espera em cascata.

   O parallax ja e desligado no proprio animacoes.js, porque
   no toque a rolagem e assincrona e o elemento treme.
   ================================================ */
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  /* Flutuacao infinita de cards e enfeites */
  .animate-float,
  .hero-badge,
  .float-card,
  .orbit-float { animation: none !important; transform: none !important; }

  /* Brilho que atravessa o botao principal a cada poucos segundos */
  .ae-anim .hero-cta .btn-teal::before { animation: none !important; opacity: 0 !important; }

  /* Inclinacao 3D nunca deve valer no toque */
  .ae-anim .ae-tilt { transform: none !important; }

  /* Revelacao ao rolar: mais curta e com cascata quase nula.
     Em coluna unica, o stagger longo faz o ultimo card demorar. */
  .ae-anim .ae-item {
    transform: translateY(14px);
    transition-duration: 0.42s;
    transition-delay: calc(var(--ae-i, 0) * 28ms);
  }

  /* Entrada do hero mais direta */
  .ae-anim .ae-rise { animation-duration: 0.5s; }
  .ae-anim .ae-fade { animation-duration: 0.55s; }

  /* will-change permanente em muitos nos pesa em aparelho fraco */
  .ae-anim .ae-item { will-change: auto; }
}

/* A esfera orbital do hero e assinatura da marca: continua girando,
   mas devagar o bastante para nao competir com a leitura no celular. */
@media (max-width: 1023px) {
  .orbit-rings { animation-duration: 70s !important; }
  .n1 { animation-duration: 30s !important; }
  .n2 { animation-duration: 22s !important; }
  .n3 { animation-duration: 40s !important; }
  .orbit-glow { animation: none !important; }
}

/* ================================================
   NADA ESCAPA PARA OS LADOS
   ------------------------------------------------
   Duas causas reais de rolagem horizontal em celular:

   1. Item de grid e de flex tem min-width automatico, entao
      nao encolhe abaixo do conteudo minimo. Um e-mail longo
      dentro de um card empurra a coluna inteira para fora.
   2. Botao com white-space: nowrap e texto comprido nao cabe
      em tela estreita.
   ================================================ */
/* Raiz do problema: item de grid tem min-width auto, entao a coluna nunca
   encolhe abaixo do conteudo minimo dela. Em telas estreitas um card com
   padding largo dentro da coluna empurra a pagina inteira para o lado. */
.gap-2-col > *,
.contact-layout > *,
.contact-info-list,
.info-card,
.info-content,
.wa-card,
.wa-card-text,
.form-card,
.module-list,
.module-item,
.module-info,
.footer-contact-item,
.footer-contact-item > * { min-width: 0; }

.info-content a,
.info-content p,
.footer-contact-item a,
.wa-card-text strong,
.wa-card-text span { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  /* Em tela estreita o rotulo do botao quebra em vez de estourar */
  .btn { white-space: normal; text-align: center; }
  .btn-lg { padding-left: 20px; padding-right: 20px; }
}

/* Trava final: nenhuma pagina rola para o lado, aconteca o que acontecer.
   O body ja tem overflow-x hidden; o html precisa do mesmo, senao o
   iOS ainda permite arrastar a pagina. */
html, body { max-width: 100%; overflow-x: clip; }