/* ═══════════════════════════════════════════════════════════
   ENGLISH VIP COURSE v2 — Base
   Reset + tipografia + container + helpers
═══════════════════════════════════════════════════════════ */

/* Esconde APENAS a marca/promoção "Free Instagram Feed Widget" do Elfsight.
   O seletor `[class*="elfsight-app"] a` foi REMOVIDO porque escondia links legítimos
   do widget (Follow, username, posts). Usamos só o seletor exato do badge de branding. */
.eapps-instagram-feed-footer,
.eapps-instagram-feed-watermark,
.eapps-instagram-feed-promo,
.eapps-instagram-feed-footer-container,
.eui-widget-branding,
.eui-widget-powered-by,
.eapps-link,
.es-widget-branding {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  clip: rect(0 0 0 0) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--brand-mid);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  font-weight: 700;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  background: var(--brand-deep);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* Container */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--space-8); }
}

/* Sections base */
section { padding: var(--space-24) 0; position: relative; }
@media (max-width: 768px) { section { padding: var(--space-20) 0; } }

/* Backgrounds */
.bg-surface { background: var(--surface); }
.bg-soft { background: var(--surface-2); }
.bg-deep { background: var(--gradient-deep); color: #fff; }
.bg-hero { background: var(--gradient-hero); color: #fff; }

/* Text helpers */
.text-center { text-align: center; }
.text-gradient-accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Eyebrow padrão GeraCloud */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.eyebrow-light {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--brand-teal);
}
.eyebrow-teal {
  background: rgba(109, 214, 197, 0.12);
  border: 1px solid rgba(109, 214, 197, 0.4);
  color: var(--brand-teal);
}
.eyebrow-blue {
  background: rgba(61, 95, 191, 0.08);
  border: 1px solid rgba(61, 95, 191, 0.2);
  color: var(--brand-mid);
}

/* Section title padrão */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-top: var(--space-5);
  margin-bottom: var(--space-4);
}
.section-title-light { color: #fff; }
.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 640px;
  line-height: 1.65;
}
.section-subtitle-light { color: rgba(255, 255, 255, 0.82); }

/* Reveal on scroll */
.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js-reveal.is-visible { opacity: 1; transform: none; }
.js-reveal-fade { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.js-reveal-fade.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal, .js-reveal-fade { opacity: 1 !important; transform: none !important; }
}