/* ═══════════════════════════════════════════════════════════════════
   ART ACADEMY / LARI NAMASTE — base do design system
   Tokens + reset + componentes universais.

   NAO EDITE ESTE ARQUIVO dentro de um site. Ele e copia literal de
   _core/base.css e precisa ser identico nos 7 sites. O que muda por
   site vai em assets/site.css, que carrega depois deste.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* cor */
  --ink:        #050505;
  --ink-2:      #0C0B09;
  --ink-3:      #141210;
  --paper:      #F4F1EA;
  /* paper-dim e muted subiram de #C9C4B8/#8A857A: em fundo preto o texto claro
     parece mais fino do que e, e os micro-labels (10-12px, uppercase, tracking
     largo) sumiam em monitor com gama alta. Agora 12.9:1 e 8.0:1 de contraste. */
  --paper-dim:  #D2CDC1;
  --muted:      #A8A294;

  --gold:       #C9A84C;
  --gold-lt:    #E5C877;
  --gold-dk:    #8E7430;
  --rose:       #E0567F;
  --green:      #4FBF7B;
  --red:        #E5484D;

  --line:       rgba(201,168,76,.16);
  --line-soft:  rgba(244,241,234,.09);

  /* tipo */
  --display: "Cormorant Garamond", Georgia, serif;
  --body:    "Montserrat", -apple-system, system-ui, sans-serif;

  /* espaco */
  --wrap: 1200px;
  --pad:  clamp(20px, 5vw, 40px);
  /* O vazio entre duas secoes e 2x --sec: com 150px dava ~300px, que o
     cliente achou solto demais ("de 300 bota cem"). Em 56px o encontro
     fica em ~112px — compacto, mas ainda com respiro entre blocos. */
  --sec:  clamp(40px, 5vw, 56px);

  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
html.lenis{ scroll-behavior:auto }
/* weight 400 e nao 300: em fundo escuro o traco claro "afina" opticamente e o
   Montserrat Light ficava frageil na leitura corrida. 400 mantem a elegancia
   e o texto para de desaparecer. */
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--body); font-weight:400; line-height:1.7;
  font-size:clamp(15px,1.05vw,16.5px);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--gold); color:var(--ink) }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }
.wrap--narrow{ max-width:800px }

/* ── TIPOGRAFIA ───────────────────────────── */
/* line-height 1.1 (e nao 1.06) porque o circunflexo do Cormorant Italic e
   desenhado bem alto: em "você" ou "têm" o acento invadia a linha de cima e
   parecia solto do glifo. 1.1 da a folga sem afrouxar o display. */
.h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,5.4vw,66px); line-height:1.1;
  letter-spacing:-.015em;
}
.h2 em{ font-style:italic; color:var(--gold-lt) }
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.lead{
  font-size:clamp(15.5px,1.35vw,18.5px); color:var(--paper-dim);
  max-width:56ch; margin-top:24px; font-weight:400;
}
.lead--center{ margin-inline:auto; text-align:center }
.lead b, .lead strong{ color:var(--paper); font-weight:500 }

.section{ padding-block:var(--sec); position:relative }
.section--dark{ background:var(--ink-2) }
.section__head{ text-align:center; margin-bottom:clamp(48px,6vw,84px) }

.subhead{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(22px,2.4vw,32px); text-align:center; color:var(--paper);
  margin:clamp(48px,6vw,80px) 0 clamp(24px,3vw,36px);
}

/* ── QUEBRA DE LINHA EQUILIBRADA ────────────────────────────────────
   Regra do cliente: nenhuma palavra sozinha numa linha. Quebra na mao so
   vale na largura em que foi testada; `text-wrap:balance` distribui as
   linhas em qualquer viewport e mata a orfa sozinho. Aplicado no display
   e nos textos curtos — nao no corpo longo, onde o navegador limita o
   numero de linhas que consegue equilibrar. */
.h2, .subhead, .lead, .hero__sub,
.hero__title .line > span,
.card h3, .course h3, .acc summary h3, .mod__head h3,
.offer__list li, .testi p, .print--quote blockquote, .quote,
.stat span, .guarantee p{
  text-wrap:balance;
}

/* ── BOTOES ───────────────────────────────── */
.btn{
  --h:56px;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  height:var(--h); padding:0 30px; border:0; cursor:pointer;
  font-family:var(--body); font-size:13.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:2px; position:relative; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), color .35s;
}
.btn svg{ width:19px; height:19px; transition:transform .45s var(--ease); flex:0 0 19px }
.btn:hover svg{ transform:translateX(5px) }

.btn--gold{
  color:var(--ink);
  background:linear-gradient(105deg,var(--gold-dk),var(--gold) 28%,var(--gold-lt) 50%,var(--gold) 72%,var(--gold-dk));
  background-size:220% 100%; background-position:0% 0;
  box-shadow:0 10px 34px -14px rgba(201,168,76,.75);
  transition:background-position 1.1s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn--gold:hover{ background-position:100% 0; transform:translateY(-2px);
  box-shadow:0 18px 46px -14px rgba(201,168,76,.85) }

.btn--ghost{
  color:var(--gold-lt); border:1px solid var(--line);
  background:rgba(201,168,76,.03); margin-top:34px;
}
.btn--ghost:hover{ background:rgba(201,168,76,.1); border-color:var(--gold); transform:translateY(-2px) }

/* 44px e o minimo de alvo de toque — nao baixar */
.btn--sm{ --h:44px; padding:0 20px; font-size:11.5px;
  color:var(--gold-lt); border:1px solid var(--line) }
.btn--sm:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold) }
.btn--lg{ --h:66px; padding:0 42px; font-size:14.5px }

/* ── PROGRESS BAR ─────────────────────────── */
.scroll-progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:200; background:transparent }
.scroll-progress span{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt)) }

/* ── NAV ──────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:150;
  transition:background .5s var(--ease), backdrop-filter .5s, border-color .5s, transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(5,5,5,.82); backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav.is-hidden{ transform:translateY(-102%) }
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:16px var(--pad);
  display:flex; align-items:center; gap:32px;
}
/* min-height 44px: a logo em si tem 38px de alto, e o link ficava abaixo do
   alvo de toque minimo. A caixa cresce sem mexer no desenho da logo. */
.nav__brand{ display:flex; align-items:center; margin-right:auto; min-height:44px }
.nav__brand img{ height:clamp(38px,4.2vw,52px); width:auto; opacity:.95 }
.nav__links{ display:flex; gap:30px; font-size:12.5px; letter-spacing:.05em; color:var(--paper-dim) }
.nav__links a{ position:relative; padding-block:4px; transition:color .3s }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--paper) }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }

/* ── HERO ─────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding-top:clamp(120px,12vw,168px); overflow:hidden;
  background:var(--ink);
}
.hero__media{ position:absolute; inset:-11% 0 -11% 0; z-index:0 }
/* object-position e filter da foto do hero sao especificos de cada foto:
   defina em site.css, nao aqui. */
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:saturate(.86) contrast(1.03) brightness(1.04);
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(94deg,
      rgba(4,4,4,.94) 0%, rgba(4,4,4,.9) 26%, rgba(4,4,4,.66) 44%,
      rgba(4,4,4,.24) 62%, rgba(4,4,4,0) 78%),
    linear-gradient(180deg,
      rgba(4,4,4,.8) 0%, rgba(4,4,4,.12) 22%, rgba(4,4,4,.1) 52%,
      rgba(4,4,4,.86) 88%, var(--ink) 100%);
}
.hero__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,.78fr) 1fr;
  padding-bottom:clamp(40px,5vw,66px);
}
.hero__content{ position:relative; z-index:2 }
.hero__title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(38px,4.7vw,72px); line-height:1.06; letter-spacing:-.02em;
  max-width:100%;
}
.hero__title em{ font-style:italic; color:var(--gold-lt) }
/* padding + margin negativa: da folga pro acento sem o overflow cortar
   nem alterar o ritmo vertical do titulo */
.hero__title .line{ display:block; overflow:hidden; padding-top:.12em; margin-top:-.12em }
.hero__title .line > span{ display:block; transform:translateY(105%) }
.hero__sub{
  margin-top:30px; max-width:56ch; color:var(--paper-dim);
  font-size:clamp(15px,1.3vw,17.5px);
}
.hero__sub strong{ color:var(--paper); font-weight:500 }
.hero__cta{ margin-top:34px; display:flex; align-items:center; gap:22px; flex-wrap:wrap }

.hero__coupon{
  margin-top:22px; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:clamp(15px,1.35vw,18px); color:var(--paper);
  padding:13px 20px; border:1px dashed var(--gold-dk); border-radius:3px;
  background:rgba(201,168,76,.07);
}
.hero__coupon b{ color:var(--gold-lt); font-weight:600; letter-spacing:.04em }
.hero__coupon span{ font-size:13px; color:var(--paper-dim) }

.hero__stats{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  border-top:1px solid var(--line-soft); background:var(--line-soft);
  margin-bottom:0;
}
.hero__stats--3{ grid-template-columns:repeat(3,1fr) }
.stat{ background:var(--ink); padding:26px 8px 30px; text-align:center }
/* lining-nums: o Cormorant usa numeral old-style por padrao, em que o "1" tem
   altura de x e o "0" e baixo — "2018" lia como "2OI8" e "12" como "I2". Em
   numero que precisa ser LIDO como numero (faixa de dados, preco, indice) o
   old-style atrapalha. O "7" do selo de garantia fica old-style de proposito:
   ali e ornamento, nao dado. */
.stat b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(30px,3.6vw,46px); color:var(--gold-lt); line-height:1;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}
.stat span{ display:block; margin-top:8px; font-size:11px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--paper-dim) }

/* ── GRID ─────────────────────────────────── */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center }
.grid-2--tight{ gap:clamp(36px,5vw,70px) }

/* ── GALERIA ──────────────────────────────── */
.gallery{
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(170px,19vw,260px); gap:clamp(10px,1.1vw,16px);
}
.gal{ position:relative; overflow:hidden; border-radius:3px; background:var(--ink-3) }
.gal img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease), filter .8s var(--ease);
  filter:saturate(.55) contrast(1.04) brightness(.94);
}
.gal:hover img{ transform:scale(1.05); filter:saturate(.9) contrast(1.05) brightness(1) }
.gal::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
.gal--tall{ grid-row:span 2 }
.gallery__note{
  margin-top:34px; text-align:center; margin-inline:auto; max-width:56ch;
  font-size:clamp(15px,1.3vw,17.5px); color:var(--paper-dim);
}

/* ── ANTES E DEPOIS ───────────────────────── */
.beforeafter{
  max-width:820px; margin-inline:auto; border-radius:3px; overflow:hidden;
  box-shadow:0 34px 90px -46px rgba(0,0,0,.9), inset 0 0 0 1px var(--line);
}
.beforeafter img{ width:100%; display:block }

/* ── PRINTS DE ALUNOS ─────────────────────── */
/* cards de altura identica: a imagem se ajusta dentro do card (contain),
   sobre papel branco — nada de buraco preto entre um print e outro.
   flex + wrap: a ultima linha centraliza sozinha, sem coluna orfa. */
.prints{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(14px,1.5vw,22px); max-width:1080px; margin-inline:auto;
}
.print{
  flex:0 0 calc((100% - 2 * clamp(14px,1.5vw,22px)) / 3);
  aspect-ratio:4/5; padding:14px; border-radius:4px; background:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 24px 56px -32px rgba(0,0,0,.95), inset 0 0 0 1px var(--line-soft);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.print img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block; border-radius:2px;
}
.print:hover{ transform:translateY(-5px); box-shadow:0 30px 64px -30px rgba(201,168,76,.4) }

/* card de citacao: fecha a grade sem deixar coluna orfa, e e a saida
   correta quando a foto do depoimento e pequena demais pra usar */
.print--quote{
  background:linear-gradient(165deg,#171512,#0D0C0A);
  box-shadow:inset 0 0 0 1px var(--line);
  padding:clamp(22px,2.4vw,34px);
}
.print--quote blockquote{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(17px,1.65vw,22px); line-height:1.4; color:var(--paper);
}
.print--quote cite{
  display:block; margin-top:20px; font-family:var(--body); font-style:normal;
  font-size:12px; font-weight:500; letter-spacing:.06em; color:var(--gold-lt);
}
.print--quote cite span{
  display:block; margin-top:5px; font-weight:500; font-size:11px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--paper-dim);
}

/* ── CARDS ────────────────────────────────── */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.6vw,24px) }
.cards-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,1.6vw,24px) }
.card{
  position:relative; padding:clamp(28px,2.6vw,40px);
  border:1px solid var(--line-soft); border-radius:3px;
  background:linear-gradient(170deg, rgba(201,168,76,.045), rgba(255,255,255,0) 55%);
  transition:border-color .5s var(--ease), transform .6s var(--ease), background .6s;
  overflow:hidden;
}
/* glow radial que segue o cursor — as coordenadas vem do motion.js */
.card::after{
  content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%), rgba(201,168,76,.13), transparent 62%);
  transition:opacity .5s;
}
.card:hover{ border-color:var(--line); transform:translateY(-6px) }
.card:hover::after{ opacity:1 }
.card__num{
  font-family:var(--display); font-size:13px; letter-spacing:.3em;
  color:var(--gold); display:block; margin-bottom:16px;
}
.card h3{
  font-family:var(--display); font-weight:400; font-size:clamp(28px,2.7vw,36px);
  line-height:1.1; margin-bottom:14px;
}
.card > p{ color:var(--paper-dim); font-size:14.5px }
.card ul{ list-style:none; margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft) }
.card li{
  font-size:13.5px; color:var(--paper-dim); padding-left:18px; position:relative; margin-bottom:8px;
}
.card li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:1px; background:var(--gold) }

/* ── MODULOS (conteudo fixo, sem toggle) ──── */
.modules{ display:flex; flex-direction:column; border-top:1px solid var(--line-soft) }
.mod{ border-bottom:1px solid var(--line-soft); padding-bottom:4px }
.mod__head{ display:flex; align-items:center; gap:20px; padding:26px 0 4px }
.mod__head h3{
  font-family:var(--display); font-weight:400; font-size:clamp(21px,2.3vw,31px);
  line-height:1.2;
}

/* ── ACCORDION ────────────────────────────── */
.accordion{ display:flex; flex-direction:column; border-top:1px solid var(--line-soft) }
.acc{ border-bottom:1px solid var(--line-soft) }
.acc summary{
  display:flex; align-items:center; gap:20px; padding:26px 0; cursor:pointer;
  list-style:none; transition:padding-left .45s var(--ease);
}
.acc summary::-webkit-details-marker{ display:none }
.acc:hover summary{ padding-left:8px }
.acc__tag{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); min-width:90px;
}
.acc summary h3{
  font-family:var(--display); font-weight:400; font-size:clamp(21px,2.3vw,31px);
  line-height:1.2; margin-right:auto;
}
.acc__hot{
  color:var(--green); font-weight:600; font-family:var(--body);
  font-size:.52em; letter-spacing:.14em; vertical-align:.18em; margin-left:6px;
}
.acc__tag--hot{ color:var(--green) }
.acc summary i{ position:relative; width:16px; height:16px; flex:0 0 16px }
.acc summary i::before,.acc summary i::after{
  content:''; position:absolute; background:var(--gold); transition:transform .45s var(--ease);
}
.acc summary i::before{ left:0; top:7.5px; width:16px; height:1px }
.acc summary i::after{ left:7.5px; top:0; width:1px; height:16px }
.acc[open] summary i::after{ transform:scaleY(0) }
.acc__body{ padding:0 0 30px }
.acc__body ul{ list-style:none; columns:2; column-gap:40px }
.acc__body li{
  font-size:14.5px; color:var(--paper-dim); padding-left:20px; position:relative;
  margin-bottom:11px; break-inside:avoid;
}
.acc__body li::before{ content:''; position:absolute; left:0; top:11px; width:9px; height:1px; background:var(--gold-dk) }
.acc__body p{ color:var(--paper-dim); font-size:15px; max-width:62ch }
.accordion--faq .acc summary h3{ font-size:clamp(17px,1.6vw,22px); font-family:var(--body); font-weight:400 }

/* ── BIO / PROFESSORA ─────────────────────── */
.prof{ background:var(--ink) }
.prof__img{ position:relative; overflow:hidden; border-radius:3px; aspect-ratio:4/5 }
.prof__img img{
  width:100%; height:114%; object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.92);
  transition:filter 1s var(--ease);
}
.prof__img:hover img{ filter:grayscale(.15) contrast(1.05) brightness(1) }
.prof__img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line), inset 0 -120px 120px -80px rgba(201,168,76,.22);
}
.quote{
  margin-top:34px; padding:26px 0 26px 28px; border-left:1px solid var(--line);
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(19px,1.9vw,25px); line-height:1.4; color:var(--paper);
}
.quote cite{
  display:block; margin-top:16px; font-family:var(--body); font-style:normal;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}

/* ── DEPOIMENTOS EM TEXTO ─────────────────── */
.testis{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.6vw,24px) }
.testis--2{ grid-template-columns:repeat(2,1fr) }
.testi{
  padding:clamp(26px,2.4vw,36px); border:1px solid var(--line-soft); border-radius:3px;
  background:rgba(244,241,234,.015); display:flex; flex-direction:column;
  transition:border-color .5s, transform .6s var(--ease);
}
.testi:hover{ border-color:var(--line); transform:translateY(-4px) }
.testi p{
  font-family:var(--display); font-size:clamp(18px,1.7vw,22px); font-style:italic;
  font-weight:300; line-height:1.42; color:var(--paper); margin-bottom:auto;
}
.testi figcaption{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:12.5px; font-weight:500; letter-spacing:.06em; color:var(--gold-lt);
}
.testi figcaption span{ display:block; font-weight:500; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); margin-top:5px }
.testis__note{ margin-top:26px; font-size:12.5px; color:var(--paper-dim); text-align:center }

/* ── VIDEO ────────────────────────────────── */
.video{
  position:relative; width:100%; max-width:920px; margin-inline:auto;
  aspect-ratio:16/9; border-radius:3px; overflow:hidden; background:var(--ink-3);
  box-shadow:0 34px 90px -46px rgba(0,0,0,.9), inset 0 0 0 1px var(--line);
}
.video--vertical{ max-width:420px; aspect-ratio:9/16 }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* ── OFERTA ───────────────────────────────── */
.offer{
  background:
    radial-gradient(900px 460px at 50% -10%, rgba(201,168,76,.13), transparent 68%),
    var(--ink);
}
.offer__box{
  max-width:800px; margin-inline:auto; text-align:center;
  padding:clamp(36px,4.4vw,66px) clamp(24px,3.4vw,58px);
  border:1px solid var(--line); border-radius:4px;
  background:linear-gradient(180deg, rgba(201,168,76,.05), rgba(5,5,5,.6));
  box-shadow:0 40px 100px -50px rgba(201,168,76,.35);
}
.offer__list{
  list-style:none; margin:38px 0; text-align:left;
  display:grid; grid-template-columns:1fr 1fr; gap:12px 30px;
}
.offer__list li{
  font-size:14px; color:var(--paper-dim); padding-left:26px; position:relative;
}
.offer__list li::before{
  content:''; position:absolute; left:0; top:8px; width:11px; height:6px;
  border-left:1.4px solid var(--gold); border-bottom:1.4px solid var(--gold);
  transform:rotate(-45deg);
}
.offer__list b{ color:var(--paper); font-weight:600 }

.price{ padding:32px 0 8px; border-top:1px solid var(--line-soft) }
.price__from{
  display:block; font-size:clamp(17px,1.7vw,22px); color:var(--paper-dim);
  letter-spacing:.02em;
}
.price__from s{
  color:var(--red); font-weight:600; font-size:1.28em;
  text-decoration:line-through; text-decoration-color:var(--red);
  text-decoration-thickness:2.5px;
}
/* 12px/600 (era 11px/herdado): "ACESSO POR 12 MESES" e o rotulo do preco —
   com tracking .24em o traco fino se dissolvia */
.price__by{
  display:block; margin-top:10px; font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--paper-dim);
}
/* lining-nums em todo numero de preco: com o old-style do Cormorant,
   "R$ 19,00" lia como "R$ I9,00" e "12x" como "I2x" — inaceitavel em preco. */
.price, .price__from, .price__main, .price__cash, .price__inst{
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}
.price__main{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin-top:6px }
.price__cur{ font-family:var(--display); font-size:26px; color:var(--gold-lt) }
.price__val{
  font-family:var(--display); font-weight:400; font-size:clamp(56px,7.4vw,92px);
  line-height:1; letter-spacing:-.02em; color:var(--paper);
}
.price__tag{ font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-dim) }

/* ── ANCORAGEM NA PARCELA ──────────────────────────────────────────
   O numero grande e a PARCELA, nao o valor cheio: e nela que o leitor
   ancora a percepcao de preco. O a vista vira linha de apoio embaixo.
   Preco aparece so aqui — no hero entra prova (aulas, acesso, garantia),
   nunca valor, para nao repetir e nao ancorar no numero cheio.

     <div class="price">
       <span class="price__from">De <s>R$ 299,00</s></span>
       <span class="price__by">12x sem juros</span>
       <div class="price__main">
         <span class="price__times">12x</span>
         <span class="price__cur">R$</span>
         <span class="price__val">30,72</span>
       </div>
       <span class="price__cash">ou <b>R$ 297,00</b> à vista</span>
     </div>

   Produto sem parcelamento (e-book de R$ 19, consultoria) nao tem o que
   inverter: usa .price__main sem .price__times e dispensa .price__cash. */
.price__times{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,3.6vw,46px); line-height:1;
  color:var(--gold-lt); letter-spacing:-.01em;
}
.price__cash{
  display:block; margin-top:14px; font-size:14px; color:var(--paper-dim);
}
.price__cash b{ color:var(--paper); font-weight:600 }

/* mantido para os casos de mensalidade/parcela unica ja escritos */
.price__inst{ display:block; margin-top:10px; font-size:15px; color:var(--paper-dim) }
.price__inst b{ color:var(--gold-lt); font-weight:600 }

.coupon{ margin-top:22px; font-size:13px; color:var(--paper-dim) }
.coupon__code{
  font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.14em;
  color:var(--gold-lt); background:rgba(201,168,76,.1);
  border:1px dashed var(--gold-dk); border-radius:2px; padding:7px 14px; margin:0 4px;
  cursor:pointer; position:relative; transition:background .3s, color .3s;
}
.coupon__code i{
  font-style:normal; font-size:10px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--paper-dim); margin-left:9px; opacity:.9;
}
.coupon__code:hover{ background:var(--gold); color:var(--ink) }
.coupon__code:hover i{ color:var(--ink) }
.coupon__code.is-copied{ background:var(--gold); color:var(--ink) }

.offer .btn--lg{ margin-top:32px }

.guarantee{
  margin-top:40px; padding-top:32px; border-top:1px solid var(--line-soft);
  display:flex; gap:24px; align-items:center; text-align:left;
}
/* largura E altura fixas + aspect-ratio: em coluna (mobile) o flex-basis
   sozinho virava altura e a largura esticava — dai o oval. */
.guarantee__seal{
  flex:0 0 auto; width:96px; height:96px; aspect-ratio:1; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1; text-align:center;
  border:1px solid var(--gold-dk);
  box-shadow:inset 0 0 0 5px rgba(201,168,76,.07);
  background:radial-gradient(circle at 50% 42%, rgba(201,168,76,.16), transparent 68%);
}
/* o "7" do Cormorant e numeral old-style: desce abaixo da linha de base.
   Centralizar a caixa de texto deixa o desenho do numero visivelmente baixo.
   O deslocamento abaixo alinha a TINTA do glifo ao centro do circulo — o
   motion.js refina o valor exato depois que a fonte carrega. */
.seal__in{
  display:flex; flex-direction:column; align-items:center;
  font-size:38px; line-height:1;
  transform:translateY(var(--seal-shift, -.18em));
}
.guarantee__seal b{
  font-family:var(--display); font-weight:400; font-size:1em; line-height:1;
  color:var(--gold-lt);
}
/* 10px/600 em paper-dim (era 8.5px/500 em muted): "DIAS" dentro do selo era o
   texto mais apagado da pagina inteira */
.guarantee__seal i{
  font-family:var(--body); font-style:normal; font-size:10px; font-weight:600;
  line-height:1; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-dim);
  margin-top:7px; padding-left:.2em; /* compensa o tracking sobrando a direita */
}
.guarantee p{ font-size:14.5px; color:var(--paper-dim) }
.guarantee b{ color:var(--paper); font-weight:600 }


/* ── SELO DE GARANTIA (CSS + SVG, sem imagem) ──────────────────────
   Nasceu no ebookabstrate-se e o cliente pediu para replicar no lote
   (03/08/2026). Substitui os selos "BEST QUALITY" / "100% SATISFACTION"
   que vinham dos originais — clipart de banco de imagem, em ingles.

   Anel duplo + filete interno, texto curvo na tipografia da marca e o
   "7" no centro. Mantem a classe .guarantee__seal de proposito: e nela
   que o motion.js centraliza opticamente a tinta do glifo depois que a
   fonte carrega (o "7" do Cormorant e numeral old-style e desce abaixo
   da linha de base).

   Markup:
     <div class="guarantee__seal seal" role="img"
          aria-label="Selo de garantia incondicional de 7 dias">
       <svg class="seal__svg" viewBox="0 0 240 240" aria-hidden="true" focusable="false">
         <defs>
           <path id="selo-arco-topo" d="M 20,120 A 100,100 0 0 1 220,120" />
           <path id="selo-arco-base" d="M 17,120 A 103,103 0 0 0 223,120" />
         </defs>
         <circle class="seal__ring seal__ring--out"  cx="120" cy="120" r="118" />
         <circle class="seal__ring seal__ring--mid"  cx="120" cy="120" r="94" />
         <circle class="seal__ring seal__ring--hair" cx="120" cy="120" r="88" />
         <text class="seal__arc"><textPath href="#selo-arco-topo" startOffset="50%">GARANTIA INCONDICIONAL</textPath></text>
         <text class="seal__arc seal__arc--bot"><textPath href="#selo-arco-base" startOffset="50%">SEM PERGUNTA · SEM BUROCRACIA</textPath></text>
         <g class="seal__dot"><circle cx="14" cy="120" r="1.7" /><circle cx="226" cy="120" r="1.7" /></g>
       </svg>
       <span class="seal__in"><b>7</b><i>dias</i></span>
     </div>

   Nao usar abaixo de ~140px: o texto curvo fica ilegivel.
   O arco de baixo usa sweep 0 (percorrido da esquerda para a direita) —
   com sweep 1 o texto sai de cabeca para baixo. */
.seal{
  position:relative; width:clamp(150px,19vw,220px); height:auto; aspect-ratio:1;
  margin:0 auto; border:0; flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 38%, rgba(201,168,76,.16), transparent 64%),
    radial-gradient(circle at 50% 52%, rgba(5,5,5,.92), rgba(5,5,5,0) 74%);
  box-shadow:none;
}
.seal__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.seal__ring{ fill:none }
.seal__ring--out{ stroke:var(--gold-dk); stroke-width:1 }
.seal__ring--mid{ stroke:rgba(201,168,76,.5); stroke-width:1 }
.seal__ring--hair{ stroke:rgba(201,168,76,.18); stroke-width:.7 }
.seal__arc{
  font-family:var(--body); font-size:10px; font-weight:600; letter-spacing:2.3px;
  fill:var(--gold); text-anchor:middle;
}
.seal__arc--bot{ font-size:8.6px; letter-spacing:1.9px; fill:var(--gold-dk) }
.seal__dot{ fill:var(--gold) }
.seal .seal__in{ font-size:clamp(40px,5.4vw,62px) }
.seal .seal__in i{ font-size:10.5px; letter-spacing:.24em; margin-top:9px }

/* ── FINAL ────────────────────────────────── */
.final{
  padding-block:clamp(90px,12vw,170px); text-align:center;
  background:
    radial-gradient(700px 380px at 50% 120%, rgba(201,168,76,.16), transparent 70%),
    var(--ink-2);
  border-top:1px solid var(--line-soft);
}
.final .btn{ margin-top:40px }

/* ── FOOTER ───────────────────────────────── */
.foot{ padding-block:38px; background:var(--ink); border-top:1px solid var(--line-soft) }
.foot__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
.foot__logo{ height:clamp(42px,4.4vw,56px); width:auto; opacity:.9 }
.foot p{ font-size:11.5px; font-weight:500; letter-spacing:.06em; color:var(--paper-dim) }

/* ── STICKY CTA (mobile) ──────────────────── */
.sticky-cta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:140;
  height:54px; display:none; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); border-radius:3px; text-align:center;
  background:linear-gradient(100deg,var(--gold-dk),var(--gold-lt) 50%,var(--gold-dk));
  box-shadow:0 12px 34px -12px rgba(201,168,76,.8);
  transform:translateY(140%); transition:transform .55s var(--ease);
}
.sticky-cta b{ margin-left:5px }
.sticky-cta.is-on{ transform:translateY(0) }

/* ── REVEAL ───────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); filter:blur(6px) }

/* ═══ RESPONSIVO ═══════════════════════════ */
@media (max-width:980px){
  .nav__links{ display:none }
  .grid-2{ grid-template-columns:1fr }
  .cards-3, .cards-2, .testis, .testis--2{ grid-template-columns:1fr }
  .hero__grid{ grid-template-columns:1fr }
  /* sem coluna livre pra foto: o veu passa a ser vertical e mais denso,
     senao o texto branco cai em cima da parte clara da imagem. */
  .hero__media img{ filter:saturate(.8) contrast(1.02) brightness(.72) }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(4,4,4,.9) 0%, rgba(4,4,4,.66) 26%, rgba(4,4,4,.74) 58%,
      rgba(4,4,4,.94) 88%, var(--ink) 100%);
  }
  .hero__stats{ grid-template-columns:repeat(2,1fr) }
  .acc__body ul{ columns:1 }
  .offer__list{ grid-template-columns:1fr }
  .prof__img{ aspect-ratio:3/4; max-height:70vh }
  .print{ flex:0 0 calc((100% - clamp(14px,1.5vw,22px)) / 2) }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:30vw }
  .gal--tall{ grid-row:span 1 }
}
@media (max-width:620px){
  .hero{ padding-top:104px; min-height:auto }
  .hero__media{ inset:-6% 0 -6% 0 }
  .hero__title{ max-width:100% }
  .hero__cta{ flex-direction:column; align-items:stretch; gap:16px }
  .hero__cta .btn{ width:100% }
  .hero__coupon{ justify-content:center; text-align:center; width:100% }
  .stat b{ font-size:30px }
  .prints{ max-width:330px }
  .print{ flex:0 0 100% }
  .gallery{ grid-auto-rows:42vw }
  .acc summary, .mod__head{ flex-wrap:wrap; gap:10px }
  .acc__tag{ min-width:auto; width:100% }
  .acc summary h3{ font-size:19px; width:calc(100% - 36px) }
  .mod__head h3{ font-size:19px; width:100% }
  .guarantee{ flex-direction:column; text-align:center }
  .btn--lg{ --h:58px; padding:0 24px; font-size:12.5px; width:100% }
  .sticky-cta{ display:flex }
  .foot__inner{ flex-direction:column; text-align:center }
  /* o CTA fixo cobria o copyright — reserva a faixa dele */
  .foot{ padding-bottom:96px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important }
  .reveal{ opacity:1; transform:none; filter:none }
  .hero__title .line > span{ transform:none }
}