/* =====================================================================
   VIO FUTURO — Landing Page · Estilos
   Curso: Profissional 5.0 — IA na Prática
   ---------------------------------------------------------------------
   Sumário:
   0. Variáveis (paleta + tipografia)
   1. Reset e base
   2. Tipografia utilitária (títulos, leads, citações)
   3. Componentes de marca (barra vertical, órbita, brand)
   4. Botões (CTA)
   5. Placeholders de imagem
   6. Seções específicas (hero, cards, professora, depoimentos, oferta)
   7. Rodapé
   8. Animações de scroll (reveal)
   9. Responsivo (mobile-first: ajustes para telas maiores)
   ===================================================================== */

/* ---------- 0. VARIÁVEIS ---------- */
:root {
  /* Paleta VIO FUTURO */
  --violeta: #4B0082;        /* primária */
  --violeta-escuro: #300053; /* títulos/texto */
  --lavanda: #C8A8E9;        /* suporte sobre fundo escuro */
  --teal: #007A74;           /* ação — SÓ em fundo claro */
  --cobre: #A0522D;          /* acento humano — SÓ em fundo claro */
  --off-white: #F7F3EE;      /* fundo claro */
  --branco: #FBFAF8;

  /* Tipografia */
  --f-titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-corpo: 'Roboto', system-ui, sans-serif;
  --f-quote: Georgia, 'Times New Roman', serif;

  /* Espaçamento */
  --secao-y: clamp(4rem, 9vw, 8rem);
  --container: 1120px;
  --radio: 16px;
}

/* ---------- 1. RESET E BASE ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-corpo);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--violeta-escuro);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ---------- 2. TIPOGRAFIA UTILITÁRIA ---------- */

/* Faixa/seção */
.section {
  position: relative;
  padding: var(--secao-y) 0;
  overflow: hidden;
}
.section--light { background: var(--off-white); color: var(--violeta-escuro); }
.section--dark  { background: var(--violeta); color: var(--off-white); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 2.5rem);
  position: relative;
  z-index: 2;
}
.container--narrow { max-width: 760px; }
.container--offer { max-width: 920px; }

/* Títulos de seção */
.section__title {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.8vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0.4em 0 0.6em;
  color: var(--violeta-escuro);
}
.section__title--light { color: var(--off-white); }
.section__title em { font-style: italic; color: var(--teal); font-weight: 500; }
.section__title--light em { color: var(--lavanda); }

.section__intro { margin-bottom: 2.5rem; }

/* Texto de apoio */
.lead {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: var(--violeta-escuro);
}
.lead--light { color: var(--lavanda); font-size: clamp(1.1rem, 2vw, 1.28rem); line-height: 1.65; }
.section--dark p:not(.lead--light):not(.hero__date):not(.hero__sub):not(.teacher__role) { color: var(--lavanda); }

/* Eyebrow (rótulo pequeno) */
.eyebrow {
  display: inline-block;
  font-family: var(--f-titulo);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--lavanda);
  margin-bottom: 1rem;
}

/* Citações / frases de impacto (Georgia itálico) */
.quote {
  font-family: var(--f-quote);
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  line-height: 1.35;
  color: var(--off-white);
  margin: 2.5rem 0;
  padding-left: 1.5rem;
  border-left: 4px solid var(--lavanda);
}
.quote--light {
  color: var(--violeta);
  border-left-color: var(--teal);
}

/* ---------- 3. COMPONENTES DE MARCA ---------- */

/* Barra vertical fina violeta + rótulo de destaque */
.bar-title {
  display: inline-block;
  font-family: var(--f-titulo);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--teal);
  padding-left: 0.9rem;
  border-left: 3px solid var(--violeta);
  line-height: 1.1;
}
.bar-title--light {
  color: var(--lavanda);
  border-left-color: var(--lavanda);
}

/* Símbolo da marca (texto) */
.brand {
  font-family: var(--f-titulo);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 1.4rem;
  color: var(--off-white);
}
.brand__accent { color: var(--lavanda); margin-left: 0.15em; }
.brand--footer { font-size: 1.8rem; }

/* Marca d'água: órbita VIO (4 elipses) */
.orbit-watermark {
  position: absolute;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  pointer-events: none;
  z-index: 1;
}
.orbit-watermark ellipse { vector-effect: non-scaling-stroke; }
.section--dark .orbit-watermark { color: var(--lavanda); opacity: 0.12; }
.section--light .orbit-watermark { color: var(--violeta); opacity: 0.06; }

.orbit-watermark--hero  { width: 520px; height: 520px; top: -120px; right: -140px; }
.orbit-watermark--right { width: 460px; height: 460px; bottom: -160px; right: -160px; }
.orbit-watermark--left  { width: 460px; height: 460px; top: -140px; left: -160px; }
.orbit-watermark--about { width: 360px; height: 360px; top: -60px; right: -120px; opacity: 0.05; }
.orbit-watermark--offer { width: 300px; height: 300px; top: -60px; right: -80px; }

/* ---------- 4. BOTÕES (CTA) ---------- */
.btn {
  --btn-bg: var(--teal);
  display: inline-block;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--btn-bg);
  padding: 0.95rem 2rem;
  border-radius: 999px;
  border: 2px solid var(--btn-bg);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 8px 24px -10px rgba(0, 122, 116, 0.6);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0, 122, 116, 0.7); }
.btn:focus-visible { outline: 3px solid var(--cobre); outline-offset: 3px; }

.btn--primary { --btn-bg: var(--teal); }
.btn--lg { font-size: 1.15rem; padding: 1.1rem 2.4rem; }
.btn--block { display: block; width: 100%; text-align: center; }

/* CTA sobre fundo escuro: teal não pode ser o único elemento tech em
   fundo escuro conforme regra da marca. Aqui usamos lavanda com texto
   violeta escuro para manter contraste e acolhimento. */
.btn--onDark {
  --btn-bg: var(--lavanda);
  color: var(--violeta-escuro);
  box-shadow: 0 10px 28px -12px rgba(200, 168, 233, 0.7);
}
.btn--onDark:hover { box-shadow: 0 16px 34px -12px rgba(200, 168, 233, 0.85); }

/* ---------- 5. PLACEHOLDERS DE IMAGEM ---------- */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(200,168,233,0.14) 0 12px, transparent 12px 24px),
    rgba(255,255,255,0.06);
  border: 2px dashed var(--lavanda);
  border-radius: var(--radio);
  color: var(--lavanda);
  font-family: var(--f-titulo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.95rem;
  min-height: 240px;
}
.img-placeholder--hero { aspect-ratio: 4 / 5; width: 100%; }
.img-placeholder--teacher { aspect-ratio: 4 / 5; width: 100%; }

/* Foto da professora */
.teacher__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio);
  background: rgba(200,168,233,0.12); /* segura o espaço se a imagem faltar */
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}

/* ---------- 6. SEÇÕES ESPECÍFICAS ---------- */

/* --- HERO --- */
.hero {
  position: relative;
  background:
    radial-gradient(120% 80% at 80% 0%, #5a1a9e 0%, var(--violeta) 45%, var(--violeta-escuro) 100%);
  color: var(--off-white);
  padding: 0 0 var(--secao-y);
  overflow: hidden;
}
.hero__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.6rem clamp(1.25rem, 5vw, 2.5rem);
  position: relative;
  z-index: 3;
}
.nav__link {
  font-family: var(--f-titulo);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--lavanda);
  text-decoration: none;
}
.nav__link:hover { color: #fff; }

.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 2.5rem) 0;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero__copy { max-width: 780px; }
.hero__headline {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  color: #fff;
}
.hero__sub {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  line-height: 1.55;
  color: var(--lavanda);
  max-width: 32ch;
  margin: 0 0 2rem;
}
.hero__date {
  margin-top: 1rem;
  font-family: var(--f-titulo);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-size: 0.98rem;
  color: var(--lavanda);
}

/* --- AUDIÊNCIA (para quem é) --- */
.audience-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}
.audience-card {
  background: #fff;
  border-radius: var(--radio);
  padding: 2rem 1.75rem;
  border: 1px solid rgba(75,0,130,0.08);
  box-shadow: 0 20px 40px -30px rgba(48,0,83,0.4);
  transition: transform 0.2s ease;
}
.audience-card:hover { transform: translateY(-4px); }
.audience-card__icon {
  font-size: 1.5rem;
  color: var(--cobre);
  line-height: 1;
  margin-bottom: 0.8rem;
}
.audience-card h3 {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
  color: var(--violeta);
}
.audience-card p { margin: 0; font-size: 1rem; color: #4a3a55; }

/* --- O QUE VAI APRENDER (lista) --- */
.learn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.75rem;
}
.learn-list li {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(200,168,233,0.2);
}
.learn-list li:last-child { border-bottom: none; }
.learn-list__icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: var(--lavanda);
  line-height: 1.2;
}
.learn-list strong {
  display: block;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: 0.25rem;
}
.learn-list p { margin: 0; color: var(--lavanda); }

/* --- METODOLOGIA (cards) --- */
.method-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}
.method-card {
  background: #fff;
  border-radius: var(--radio);
  padding: 2rem 1.75rem;
  border-top: 4px solid var(--teal);
  box-shadow: 0 20px 40px -30px rgba(48,0,83,0.4);
}
.method-card__num {
  display: inline-block;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--teal);
  margin-bottom: 0.4rem;
}
.method-card h3 {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 0.4rem;
  color: var(--violeta);
}
.method-card p { margin: 0; font-size: 0.98rem; color: #4a3a55; }

/* --- PROFESSORA --- */
.teacher {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.teacher__role {
  font-family: var(--f-titulo);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  color: var(--lavanda) !important;
  margin: 0 0 1.5rem;
}
.teacher__copy .btn { margin-top: 1rem; }

/* --- DEPOIMENTOS --- */
.testimonial-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}
.testimonial {
  position: relative;
  background: var(--off-white);
  color: var(--violeta-escuro);
  border-radius: var(--radio);
  padding: 2.5rem 1.75rem 1.75rem;
  margin: 0;
  box-shadow: 0 24px 50px -30px rgba(0,0,0,0.5);
}
.testimonial__mark {
  position: absolute;
  top: 0.4rem;
  left: 1.2rem;
  font-family: var(--f-quote);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--teal);
  opacity: 0.85;
}
.testimonial blockquote {
  margin: 0.5rem 0 1.25rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #3a2b45;
}
/* Espaço discreto reservado para futura assinatura (sem texto visível):
   apenas um pequeno traço na cor de acento. */
.testimonial__sign {
  height: 3px;
  width: 40px;
  border-radius: 999px;
  background: var(--teal);
  opacity: 0.5;
  margin-top: 0.25rem;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border-top: 1px solid rgba(75,0,130,0.12);
  padding-top: 1.1rem;
}
.testimonial__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, rgba(75,0,130,0.12) 0 6px, transparent 6px 12px), #ece3f5;
  border: 1px dashed var(--violeta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-titulo);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--violeta);
}
.testimonial__name {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--violeta);
  display: flex;
  flex-direction: column;
}
.testimonial__name small {
  font-family: var(--f-corpo);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--cobre);
  letter-spacing: 0;
  text-transform: none;
}

/* --- OFERTA --- */
.offer-card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  margin-top: 2.5rem;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(48,0,83,0.45);
  border: 1px solid rgba(75,0,130,0.1);
}
.offer-card__free {
  background: linear-gradient(120deg, var(--violeta) 0%, var(--violeta-escuro) 100%);
  color: var(--off-white);
  padding: 2.5rem 2rem;
  position: relative;
  z-index: 2;
}
.offer-card__free h3 {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0.6rem 0 0.5rem;
  color: #fff;
}
.offer-card__free p { margin: 0; color: var(--lavanda); }
.offer-tag {
  display: inline-block;
  font-family: var(--f-titulo);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--violeta-escuro);
  background: var(--lavanda);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
}
.offer-card__paid { padding: 2.5rem 2rem 2.75rem; }
.offer-card__paid h3 {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0;
  color: var(--violeta);
}
.offer-price {
  display: flex;
  flex-direction: column;
  margin: 0.8rem 0 1.5rem;
  line-height: 1.05;
}
.offer-price small {
  font-family: var(--f-corpo);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cobre);
  margin-bottom: 0.3rem;
}
/* Valor parcelado — destaque principal (12x R$ 49,64) */
.offer-price__main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0;
  line-height: 1;
}
.offer-price__x {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--violeta-escuro);
}
.offer-price__value {
  font-family: var(--f-titulo);
  font-weight: 700;
  /* Cresce bem no desktop; base robusta no mobile. Não quebra o número. */
  font-size: clamp(3.2rem, 6.5vw, 5rem);
  color: var(--violeta);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
/* Valor à vista — informação secundária, com menor destaque */
.offer-price__cash {
  font-family: var(--f-corpo);
  font-weight: 400;
  font-size: 0.92rem;
  color: #9488a0;
  margin: 0.7rem 0 0;
}
.offer-price__cash strong { font-weight: 600; color: #6a5a75; }
.offer-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 0.85rem;
}
.offer-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 1.02rem;
  color: #3a2b45;
}
.offer-list li span {
  color: var(--teal);
  font-weight: 700;
  flex: 0 0 auto;
}
.offer-note {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: #6a5a75;
  text-align: center;
}

/* --- CTA FINAL --- */
.cta-final { text-align: center; }
.cta-final__inner { display: flex; flex-direction: column; align-items: center; }
.cta-final .lead--light { max-width: 60ch; }

/* ---------- 7. RODAPÉ ---------- */
.footer {
  background: var(--violeta-escuro);
  color: var(--lavanda);
  padding: 3.5rem 0 0;
}
.footer__inner {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.footer__tagline {
  font-family: var(--f-quote);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--lavanda);
  margin: 0.6rem 0 0;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
.footer__links a {
  font-family: var(--f-titulo);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--lavanda);
  text-decoration: none;
}
.footer__links a:hover { color: #fff; }
.footer__base {
  border-top: 1px solid rgba(200,168,233,0.15);
  padding: 1.5rem clamp(1.25rem, 5vw, 2.5rem);
  font-size: 0.82rem;
  color: rgba(200,168,233,0.7);
  text-align: center;
}

/* ---------- 8. ANIMAÇÕES DE SCROLL (reveal) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Respeita preferências de acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ---------- 9. RESPONSIVO (mobile-first → ampliações) ---------- */

/* Tablets */
@media (min-width: 640px) {
  .audience-grid { grid-template-columns: repeat(3, 1fr); }
  .method-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr auto; align-items: center; }
}

/* Desktop */
@media (min-width: 900px) {
  .method-grid { grid-template-columns: repeat(4, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
  .teacher { grid-template-columns: 0.85fr 1.15fr; }
  .teacher__media { max-width: 380px; }
  .learn-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }
  .offer-card { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: stretch; }
  .offer-card__free { display: flex; flex-direction: column; justify-content: center; }
  .offer-card__paid { padding: 3rem 2.75rem 3rem; }
}