/* =========================================================
   MOEC — My Online English Course
   Paleta e tipografia derivadas do guia da marca.
   Para trocar as cores do site inteiro, mexa só no bloco :root.
   ========================================================= */

:root{
  /* --- Cores da marca --- */
  --navy:        #011F45;
  --navy-2:      #06294F;
  --navy-3:      #0A3562;
  --gold:        #CEA248;
  --gold-light:  #E8C878;
  --gold-deep:   #9B8756;
  --cream:       #EDE6D8;
  --cream-dim:   rgba(237,230,216,.80);
  --cream-faint: rgba(237,230,216,.64); /* legendas pequenas: 5.7:1 sobre o navy */
  --line:        rgba(206,162,72,.22);

  --gold-grad: linear-gradient(135deg,#E8C878 0%,#CEA248 35%,#9B8756 68%,#CEA248 100%);

  /* --- Tipografia --- */
  --display: "Prata", Georgia, "Times New Roman", serif;
  --body:    "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* --- Ritmo --- */
  --wrap: 1180px;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; }

body{
  margin:0;
  background:var(--navy);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  font-weight:300;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--gold-light); }

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 .6em;
  text-wrap:balance;
}

h1{ font-size:clamp(2.6rem,1.4rem + 5.6vw,5.6rem); }
h2{ font-size:clamp(1.95rem,1.25rem + 2.9vw,3.35rem); }
/* Prata tem um peso só; em tamanho pequeno ela some.
   Os subtítulos menores ficam na Manrope, mais firme. */
h3{
  font-family:var(--body); font-weight:600;
  font-size:clamp(1.08rem,1rem + .45vw,1.28rem);
  letter-spacing:-.005em; line-height:1.3;
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.center{ text-align:center; }

::selection{ background:var(--gold); color:var(--navy); }

:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--navy);
  padding:.75rem 1.25rem; font-weight:500;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* Etiqueta de seção — pequena, caixa alta, com traço */
.eyebrow{
  font-family:var(--body);
  font-size:.735rem;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.35rem;
  display:flex; align-items:center; gap:.7rem;
  flex-wrap:wrap; row-gap:.3rem;
}
.center .eyebrow, .section-head.center .eyebrow{ justify-content:center; }

.lede{
  font-size:clamp(1.06rem,1rem + .35vw,1.25rem);
  color:var(--cream-dim);
  max-width:60ch;
  line-height:1.68;
}
.center .lede{ margin-inline:auto; }

/* ---------------------------------------------------------
   Botões
   --------------------------------------------------------- */
.btn{
  --btn-py:1rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:var(--btn-py) 1.9rem;
  font-family:var(--body);
  font-size:.85rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease),
             box-shadow .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-sm{ --btn-py:.62rem; padding-inline:1.15rem; font-size:.72rem; }
.btn-block{ display:flex; width:100%; min-height:3.55rem; }
/* min-height garante altura igual mesmo se um rotulo quebrar em duas linhas */

.btn-gold{
  background:var(--gold-grad);
  color:var(--navy);
  box-shadow:0 10px 30px -14px rgba(206,162,72,.85);
}
.btn-gold:hover{ color:var(--navy); box-shadow:0 16px 38px -14px rgba(206,162,72,.95); }

.btn-outline{ border-color:var(--line); color:var(--gold); background:transparent; }
.btn-outline:hover{ border-color:var(--gold); background:rgba(206,162,72,.08); color:var(--gold-light); }

.btn-ghost{ color:var(--cream); border-color:rgba(237,230,216,.26); }
.btn-ghost:hover{ color:var(--cream); border-color:var(--cream); background:rgba(237,230,216,.06); }

/* ---------------------------------------------------------
   Cabeçalho
   --------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(1,31,69,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.1rem 0; }

.brand{ display:flex; align-items:center; }
.brand img{
  height:3.9rem; width:auto;
  transition:opacity .3s var(--ease), height .35s var(--ease);
}
.brand:hover img{ opacity:.82; }
/* encolhe um pouco quando a barra gruda no topo */
.site-header.is-stuck .brand img{ height:3.1rem; }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{
  font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--cream-dim); position:relative; padding-block:.3rem;
}
.nav a:hover{ color:var(--cream); }
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .3s var(--ease);
}
.nav a:not(.btn):hover::after{ width:100%; }
.nav .btn{ color:var(--navy); }
.nav .btn:hover{ color:var(--navy); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:2.75rem; height:2.75rem; padding:0;
  background:none; border:1px solid var(--line); border-radius:2px; cursor:pointer;
}
.nav-toggle span{ display:block; height:1px; width:1.15rem; margin-inline:auto; background:var(--gold); transition:.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------
   Capa
   --------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:8rem 0 5rem;
  overflow:hidden;
  isolation:isolate;
}
.hero-contours{ position:absolute; inset:0; z-index:-2; }
.hero-contours svg{ width:100%; height:100%; display:block; }

/* a melodia correndo pela linha */
@keyframes fluir{ to{ stroke-dashoffset:-1; } }

/* Véu que escurece as bordas para o texto respirar */
.hero-veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 85% at 15% 40%, rgba(1,31,69,.94) 0%, rgba(1,31,69,.55) 45%, transparent 78%),
    linear-gradient(to bottom, rgba(1,31,69,.6) 0%, transparent 25%, transparent 65%, var(--navy) 100%);
}

.hero-inner{ position:relative; }
.hero-title{
  max-width:19ch; margin-bottom:1.6rem;
  font-size:clamp(2.3rem,1.2rem + 4.4vw,4.6rem);
}
.hero-sub{ max-width:52ch; color:var(--cream-dim); font-size:clamp(1.06rem,1rem + .4vw,1.28rem); }

.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.hero-actions.center{ justify-content:center; }

.hero-stats{
  display:flex; flex-wrap:wrap; gap:clamp(2rem,6vw,4.5rem);
  margin:4rem 0 0; padding-top:2.2rem;
  border-top:1px solid var(--line);
  max-width:44rem;
}
.hero-stats div{ min-width:6rem; }
.hero-stats dt{
  font-family:var(--display); font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
  color:var(--gold); line-height:1;
}
.hero-stats dd{
  margin:.5rem 0 0; font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream-faint);
}

.scroll-cue{
  position:absolute; left:50%; bottom:2rem; translate:-50% 0;
  width:1px; height:3.5rem; background:var(--line); overflow:hidden;
}
.scroll-cue span{
  position:absolute; inset:0; display:block; background:var(--gold);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-100%); }
  55%,100%{ transform:translateY(100%); }
}

/* Título com revelação letra a letra */
.hero-title .char{
  display:inline-block;
  opacity:0;
  transform:translateY(.55em);
  animation:charIn .9s var(--ease) forwards;
  animation-delay:var(--d,0s);
}
.hero-title .word{ display:inline-block; white-space:nowrap; }
@keyframes charIn{ to{ opacity:1; transform:none; } }

/* ---------------------------------------------------------
   Seções
   --------------------------------------------------------- */
.section{ padding-block:var(--section-y); position:relative; }
.section-alt{ background:var(--navy-2); }
.section-alt::before,
.section-alt::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 22%,var(--line) 78%,transparent);
}
.section-alt::before{ top:0; }
.section-alt::after{ bottom:0; }

.section-head{ max-width:52rem; margin-bottom:clamp(2.75rem,6vw,4.5rem); }
.section-head.center{ margin-inline:auto; }

.grid-2{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  align-items:center;
}
.grid-2-photo{ grid-template-columns:minmax(min(100%,20rem),.85fr) 1fr; }

/* ---------------------------------------------------------
   A jornada — o meridiano dourado
   --------------------------------------------------------- */
.journey{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(2rem,4vw,2.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  position:relative;
}
.journey-step{ position:relative; padding-top:3.9rem; }

/* a linha que costura os três níveis */
.journey-step::before{
  content:""; position:absolute; left:0; right:0; top:1.25rem; height:1px;
  background:var(--line);
}
.journey-step:first-child::before{ left:2.2rem; }
.journey-step:last-child::before{ right:calc(100% - 2.2rem); }

/* pastilha: acomoda tanto "C1" quanto "A1 · A2" */
.journey-mark{
  position:absolute; top:0; left:0;
  min-width:2.6rem; height:2.6rem; padding-inline:.9rem;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--gold); border-radius:999px;
  background:var(--navy); white-space:nowrap;
  font-family:var(--display); font-size:.88rem; letter-spacing:.04em;
  color:var(--gold);
}
.journey-step h3{ color:var(--cream); margin-bottom:.55rem; }
.journey-step p{ color:var(--cream-dim); font-size:.985rem; }

/* ---------------------------------------------------------
   Pilares do método
   --------------------------------------------------------- */
.pillars{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.pillars li{ background:var(--navy-2); padding:1.7rem 1.6rem; }
.pillars h3{ color:var(--gold); margin-bottom:.35rem; font-size:1.08rem; }
.pillars p{ color:var(--cream-dim); font-size:.94rem; line-height:1.6; }
@media (min-width:32rem){ .pillars{ grid-template-columns:1fr 1fr; } }

/* ---------------------------------------------------------
   Material didático
   --------------------------------------------------------- */
.books{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.25rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.books li{
  position:relative; padding:2rem 1.75rem;
  border:1px solid var(--line); border-radius:3px;
  background:rgba(6,41,79,.45);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.books li:hover{ border-color:rgba(206,162,72,.45); transform:translateY(-3px); }
/* filete dourado no topo, como a lombada de um livro */
.books li::before{
  content:""; position:absolute; left:1.75rem; right:1.75rem; top:0; height:2px;
  background:var(--gold-grad);
}
.book-level{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .6rem;
}
.books h3{ font-family:var(--display); font-weight:400; font-size:1.5rem; color:var(--cream); margin-bottom:.6rem; }
.books p:last-child{ color:var(--cream-dim); font-size:.93rem; line-height:1.6; }


/* --- Esteira de capas, rolando sozinha --- */
.esteira{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  overflow:hidden;
  /* as pontas desaparecem em vez de cortar seco */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.esteira-trilho{
  list-style:none; margin:0; padding:.5rem 0;
  display:flex; gap:1.35rem; width:max-content;
  animation:esteira 42s linear infinite;
}
.esteira:hover .esteira-trilho{ animation-play-state:paused; }
@keyframes esteira{ to{ transform:translateX(-50%); } }

.volume{ flex:none; width:9.5rem; text-align:center; }
/* altura fixa alinha as capas pela base, respeitando a proporção de cada uma */
.capa{
  display:block; height:12.5rem; width:auto; margin:0 auto;
  border-radius:2px;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.85);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.volume:hover .capa{
  transform:translateY(-5px);
  box-shadow:0 20px 38px -16px rgba(0,0,0,.95);
}
.volume-nivel{
  display:block; margin-top:.9rem;
  font-family:var(--display); font-size:1.05rem; color:var(--gold);
}
.volume-onde{
  display:block; margin-top:.2rem;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-faint); line-height:1.4;
}

@media (prefers-reduced-motion:reduce){
  .esteira-trilho{ animation:none; }
  .esteira{ overflow-x:auto; }
}

/* ---------------------------------------------------------
   Tira-dúvidas
   --------------------------------------------------------- */
.faq{ max-width:52rem; margin-inline:auto; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }

.faq summary{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.4rem .25rem; cursor:pointer;
  font-size:1.02rem; font-weight:500; color:var(--cream);
  list-style:none; transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold); }

/* sinal de + que vira − quando abre */
.faq summary::after{
  content:""; flex:none; margin-left:auto; position:relative;
  width:.85rem; height:.85rem; margin-top:.35rem;
  background:
    linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center/1px 100% no-repeat;
  transition:transform .3s var(--ease);
}
/* aberto: some o traço vertical e sobra o "−" */
.faq details[open] summary::after{
  background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat;
}
.faq details[open] summary{ color:var(--gold); }

.faq-corpo{ padding:0 2rem 1.5rem .25rem; }
.faq-corpo p{ color:var(--cream-dim); font-size:.96rem; line-height:1.7; margin-bottom:.9rem; }
.faq-corpo p:last-child{ margin-bottom:0; }
.faq-corpo strong{ color:var(--cream); font-weight:600; }

@media (prefers-reduced-motion:no-preference){
  .faq details[open] .faq-corpo{ animation:abrir .4s var(--ease); }
}
@keyframes abrir{ from{ opacity:0; transform:translateY(-.4rem); } }

/* ---------------------------------------------------------
   Professor
   --------------------------------------------------------- */
.portrait{ margin:0; position:relative; padding:.9rem; }
.portrait img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 25%;
  filter:saturate(.94) contrast(1.03);
  /* filete dourado equidistante ao redor da foto */
  outline:1px solid rgba(206,162,72,.5);
  outline-offset:.85rem;
}
.portrait figcaption{
  margin-top:1.1rem; font-size:.73rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream-faint);
}

/* Enquanto a foto não estiver na pasta img/, mostra um espaço
   digno em vez de um ícone de imagem quebrada. */
.portrait.sem-foto img{ display:none; }
.portrait.sem-foto .foto-aviso{
  display:grid; place-content:center; gap:.6rem; text-align:center;
  aspect-ratio:4/5; padding:2rem;
  border:1px dashed var(--line); background:var(--navy-2);
}
.foto-aviso{ display:none; }
.foto-aviso strong{
  font-family:var(--display); font-size:1.1rem; font-weight:400; color:var(--gold);
}
.foto-aviso span{ font-size:.8rem; line-height:1.5; color:var(--cream-faint); }

.credentials{ list-style:none; margin:2rem 0 0; padding:1.6rem 0 0; border-top:1px solid var(--line); display:grid; gap:.75rem; }
.credentials li{
  position:relative; padding-left:1.6rem;
  font-size:.93rem; color:var(--cream-dim);
}
.credentials li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.55rem; height:1px; background:var(--gold);
}

/* ---------------------------------------------------------
   Cursos — cards com brilho de folha de ouro
   --------------------------------------------------------- */
.courses{
  display:grid; gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));
  align-items:stretch; /* alturas iguais para os botões alinharem embaixo */
}

.course{
  position:relative;
  display:flex; flex-direction:column;
  padding:2.2rem 1.9rem 2rem;
  background:rgba(1,31,69,.55);
  border:1px solid var(--line);
  border-radius:3px;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.course:hover{ border-color:rgba(206,162,72,.42); transform:translateY(-3px); }

.course-feature{
  border-color:rgba(206,162,72,.5);
  background:rgba(6,41,79,.75);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.9);
}

.course-badge{
  position:absolute; top:0; left:1.9rem; translate:0 -50%;
  background:var(--gold-grad); color:var(--navy);
  font-size:.63rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:.42rem .85rem; border-radius:2px;
}

.course-level{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .7rem;
}
.course-name{
  font-size:clamp(1.35rem,1.2rem + .5vw,1.65rem);
  color:var(--cream); margin-bottom:.75rem;
  line-height:1.12; hyphens:none;
}
.course-desc{ color:var(--cream-dim); font-size:.95rem; line-height:1.62; }

.course-list{ list-style:none; margin:1.5rem 0 0; padding:1.4rem 0 0; border-top:1px solid var(--line); display:grid; gap:.7rem; }
.course-list li{
  position:relative; padding-left:1.5rem;
  font-size:.9rem; line-height:1.5; color:var(--cream-dim);
}
.course-list li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:.45rem; height:.45rem; border-radius:50%;
  background:var(--gold); opacity:.8;
}

.price{ margin-top:auto; padding-top:1.9rem; }
.price-old{ margin:0 0 .15rem; font-size:.85rem; color:var(--cream-faint); }
.price-old s{ text-decoration-color:var(--gold); text-decoration-thickness:1px; }
.price-now{
  font-family:var(--display); font-size:clamp(2.6rem,2.2rem + 1.4vw,3.4rem);
  line-height:1; color:var(--gold); margin:0;
  display:flex; align-items:baseline; gap:.18em;
}
.price-cur{ font-size:.38em; letter-spacing:.04em; }
.price-per{ font-family:var(--body); font-size:.26em; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-faint); }
.price-note{ margin:.55rem 0 0; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-faint); }

.price + .btn{ margin-top:1.6rem; }

/* Consultoria: no lugar do preço vão os planos de horas */
.course-premium{ border-color:rgba(206,162,72,.34); }
.plans-label{
  margin:0 0 .7rem; font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cream-faint);
}
.plans{ list-style:none; margin:0; padding:0; display:flex; gap:.55rem; flex-wrap:wrap; }
.plans li{
  font-family:var(--display); font-size:1.35rem; color:var(--gold);
  border:1px solid var(--line); border-radius:2px; padding:.35rem .85rem;
}
.plans + .price-note{ margin-top:.85rem; }

.courses-help{
  margin:clamp(2.25rem,5vw,3.25rem) 0 0; text-align:center;
  color:var(--cream-dim); font-size:.97rem;
}
.courses-help a{ border-bottom:1px solid var(--line); }
.courses-help a:hover{ border-bottom-color:var(--gold); }

/* --- O brilho que segue o cursor (folha de ouro sob a luz) --------
   Portado do componente React: o matiz fica travado no dourado da
   marca; o cursor muda só a posição e a intensidade do reflexo.     */
.glow{
  background-image:radial-gradient(
    var(--spot,360px) var(--spot,360px) at
    calc(var(--gx,-9999) * 1px) calc(var(--gy,-9999) * 1px),
    rgba(206,162,72,.22), transparent 66%
  );
  background-attachment:fixed;
  background-repeat:no-repeat;
}
.glow::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  padding:1px; pointer-events:none;
  background:radial-gradient(
    calc(var(--spot,300px) * .8) calc(var(--spot,300px) * .8) at
    calc(var(--gx,-9999) * 1px) calc(var(--gy,-9999) * 1px),
    var(--gold-light), transparent 62%
  );
  background-attachment:fixed;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s var(--ease);
}
.glow.is-lit::before{ opacity:.9; }

/* o efeito depende de cursor; em toque ele sai de cena */
@media (hover:none){
  .glow{ background-image:none; }
  .glow::before{ display:none; }
}

/* ---------------------------------------------------------
   Depoimentos
   --------------------------------------------------------- */
/* Os quadros vêm do YouTube a 264px de largura. Os cards ficam
   nessa medida para a imagem não precisar ser ampliada. */
.videos{
  display:grid; gap:clamp(1.1rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),16.5rem));
  justify-content:center;
  /* trava em 3 por linha: com seis depoimentos fica 3 + 3 */
  max-width:53rem; margin-inline:auto;
}
.video-card{
  display:flex; flex-direction:column; gap:.9rem;
  padding:0; background:none; border:0; cursor:pointer;
  font-family:inherit; color:inherit; text-align:left;
}
.video-thumb{
  position:relative; display:block; aspect-ratio:3/4;
  background:linear-gradient(165deg, var(--navy-3), var(--navy) 70%);
  border:1px solid var(--line); border-radius:3px;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
  overflow:hidden;
}
.video-card:hover .video-thumb{ border-color:var(--gold); transform:translateY(-3px); }
.video-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) brightness(.86);
  transition:filter .35s var(--ease), transform .6s var(--ease);
}
.video-card:hover .video-thumb img{ filter:saturate(1) brightness(1); transform:scale(1.03); }
/* escurece a base para o nome e o play se destacarem */
.video-thumb::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(to top, rgba(1,31,69,.85), transparent);
  pointer-events:none;
}
.play{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2;
  width:3.4rem; height:3.4rem; border-radius:50%;
  border:1px solid var(--gold); background:rgba(1,31,69,.62);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:grid; place-items:center;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.video-card:hover .play{ transform:translate(-50%,-50%) scale(1.08); }
.play::before{
  content:""; width:0; height:0;
  border-left:.72rem solid var(--gold);
  border-block:.46rem solid transparent;
  margin-left:.18rem;
}
.video-card:hover .play{ background:rgba(206,162,72,.2); }
.video-name{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim); }
.video-card.is-empty .video-thumb{ border-style:dashed; }
.video-card.is-empty .video-name{ color:var(--cream-faint); }

/* ---------------------------------------------------------
   Chamada final
   --------------------------------------------------------- */
.cta-final{ background:var(--navy-2); border-top:1px solid var(--line); }
.cta-final h2{ max-width:18ch; margin-inline:auto; }

/* ---------------------------------------------------------
   Rodapé
   --------------------------------------------------------- */
.site-footer{ padding-block:3.5rem; border-top:1px solid var(--line); }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.75rem; }
.footer-logo{ height:8.5rem; width:auto; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:1.6rem; }
.footer-nav a{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim); }
.footer-nav a:hover{ color:var(--gold); }
.footer-legal{ width:100%; margin:0; padding-top:1.75rem; border-top:1px solid rgba(206,162,72,.12); font-size:.74rem; color:var(--cream-faint); }

/* ---------------------------------------------------------
   Lightbox do vídeo
   --------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:1.5rem;
  background:rgba(1,15,33,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.lightbox[hidden]{ display:none; }
.lightbox-frame{ width:min(100%,26rem); aspect-ratio:9/16; background:#000; border:1px solid var(--line); }
.lightbox-frame iframe{ width:100%; height:100%; border:0; display:block; }
.lightbox-close{
  position:absolute; top:1.25rem; right:1.5rem;
  width:2.9rem; height:2.9rem; font-size:1.9rem; line-height:1;
  color:var(--gold); background:transparent;
  border:1px solid var(--line); border-radius:50%; cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.lightbox-close:hover{ border-color:var(--gold); background:rgba(206,162,72,.12); }

/* ---------------------------------------------------------
   Formulário antes do checkout
   --------------------------------------------------------- */
.modal{
  position:fixed; inset:0; z-index:210;
  display:grid; place-items:center; padding:1.25rem;
  background:rgba(1,15,33,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  overflow-y:auto;
}
.modal[hidden]{ display:none; }

.modal-caixa{
  position:relative;
  width:min(100%,26rem);
  background:var(--navy-2);
  border:1px solid var(--line); border-radius:3px;
  padding:clamp(1.75rem,4vw,2.5rem);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
/* filete dourado no topo, mesma marca dos cards de livro */
.modal-caixa::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--gold-grad); border-radius:3px 3px 0 0;
}

.modal-fechar{
  position:absolute; top:.6rem; right:.6rem;
  width:2.4rem; height:2.4rem; font-size:1.6rem; line-height:1;
  color:var(--gold); background:transparent;
  border:1px solid transparent; border-radius:50%; cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.modal-fechar:hover{ border-color:var(--line); background:rgba(206,162,72,.1); }

.modal-titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,1.3rem + .8vw,1.9rem);
  line-height:1.15; margin:0 0 .6rem; color:var(--cream);
}
.modal-texto{
  color:var(--cream-dim); font-size:.94rem; line-height:1.6;
  margin:0 0 1.75rem;
}

.campo{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.campo label{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-faint);
}
.campo input{
  font-family:var(--body); font-size:1rem; font-weight:300;
  color:var(--cream);
  background:var(--navy);
  border:1px solid var(--line); border-radius:2px;
  padding:.85rem 1rem;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.campo input::placeholder{ color:rgba(237,230,216,.32); }
.campo input:hover{ border-color:rgba(206,162,72,.4); }
.campo input:focus{
  outline:none;
  border-color:var(--gold);
  background:var(--navy-3);
}
/* só marca erro depois que a pessoa tentou enviar, nunca enquanto digita */
.formDados-validando .campo input:invalid{ border-color:#D98B7A; }

#formDados .btn{ margin-top:.9rem; }

@media (max-width:34rem){
  .modal{ padding:.75rem; align-items:start; }
  .modal-caixa{ padding:1.6rem 1.25rem; }
}

/* ---------------------------------------------------------
   Revelação ao rolar
   --------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(1.4rem); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:calc(var(--rd,0) * .11s);
}

/* ---------------------------------------------------------
   Telas pequenas
   --------------------------------------------------------- */
@media (max-width:60rem){
  .grid-2-photo{ grid-template-columns:1fr; }
  .portrait{ max-width:26rem; }

  .nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,20rem);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.75rem; padding:2rem 2.25rem;
    background:var(--navy-2); border-left:1px solid var(--line);
    translate:100% 0; transition:translate .38s var(--ease);
  }
  .nav.is-open{ translate:0 0; }
  .nav a{ font-size:.95rem; }
  .nav-toggle{ display:flex; position:relative; z-index:1; }

  /* o meridiano fica vertical quando os passos empilham */
  .journey-step{ padding-top:0; padding-left:6.4rem; }
  .journey-step::before{
    left:1.3rem; right:auto; top:2.6rem; bottom:-2.75rem; width:1px; height:auto;
  }
  .journey-step:last-child::before{ display:none; }
}

@media (max-width:34rem){
  .hero{ padding-top:7rem; }
  .hero-stats{ gap:1.75rem 2.5rem; }
  .course{ padding:2rem 1.4rem 1.75rem; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------------------------------------
   Preferência por menos movimento
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero-title .char{ opacity:1; transform:none; animation:none; }
  .glow{ background-image:none; }
  .glow::before{ display:none; }
  .scroll-cue{ display:none; }
}