@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Cormorant+Garamond:wght@500;600;700&family=Caveat:wght@600;700&display=swap");

:root{
  --ink:#1f3552;
  --muted:#5e6f86;
  --line:rgba(53,78,112,.20);
  --paper:#f4ecdf;
  --card:rgba(255,255,255,.78);
  --blue:#385b8e;
  --gold:#ddb562;
  --gold-2:#f2d89d;
  --sage:#8fa98f;
  --shadow:0 14px 34px rgba(45,65,95,.19),0 3px 12px rgba(45,65,95,.10);
  --max:1160px;
  --radius:22px;
  --parallax-x:0px;
  --parallax-y:0px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100dvh;
  font-family:Inter,system-ui,sans-serif;
  color:var(--ink);
  overflow-x:hidden;
  background:
    radial-gradient(1400px 720px at 50% -18%, rgba(119,147,191,.36), transparent 68%),
    radial-gradient(860px 470px at 8% 16%, rgba(236,208,150,.42), transparent 73%),
    radial-gradient(860px 470px at 92% 26%, rgba(149,179,151,.25), transparent 73%),
    radial-gradient(900px 520px at 48% 42%, rgba(255,244,221,.56), transparent 78%),
    linear-gradient(180deg,#fcf8ef 0%,#f5ead8 57%,#ebdeca 100%);
}

.fx-layer{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  transform:translate3d(var(--parallax-x),var(--parallax-y),0);
  transition:transform .12s linear;
}
.fx-grain{
  opacity:.38;mix-blend-mode:soft-light;
  background:
    radial-gradient(circle at 20% 26%, rgba(255,255,255,.40) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 58%, rgba(35,53,80,.10) 0 1px, transparent 1px),
    repeating-linear-gradient(35deg, rgba(255,255,255,.03) 0 2px, rgba(20,30,50,.03) 2px 4px);
  background-size:22px 22px, 30px 30px, 8px 8px;
}
.fx-grid{
  opacity:.16;
  background:
    linear-gradient(rgba(68,96,131,.19) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68,96,131,.19) 1px, transparent 1px);
  background-size:110px 110px;
  mask-image:radial-gradient(circle at 50% 42%, #000 24%, transparent 82%);
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 24%, transparent 82%);
}
.fx-doodles{
  font-family:Caveat,cursive;
  color:rgba(54,79,112,.21);
  font-weight:700;
  text-shadow:0 .4px 0 rgba(255,255,255,.28), .5px 0 0 rgba(54,79,112,.12);
}
.d{position:absolute;white-space:nowrap;transform:rotate(var(--r,0deg))}
.d1{top:4%;left:4%;font-size:34px;--r:-7deg}
.d2{top:7%;right:5%;font-size:28px;--r:8deg}
.d3{top:16%;left:42%;font-size:26px;--r:-5deg}
.d4{top:24%;left:4%;font-size:31px;--r:-4deg}
.d5{top:30%;right:6%;font-size:32px;--r:7deg}
.d6{top:40%;left:8%;font-size:29px;--r:-6deg}
.d7{top:46%;right:10%;font-size:29px;--r:6deg}
.d8{top:58%;left:6%;font-size:30px;--r:-5deg}
.d9{top:64%;right:7%;font-size:30px;--r:5deg}
.d10{top:72%;left:11%;font-size:34px;--r:-8deg}
.d11{top:79%;right:11%;font-size:34px;--r:7deg}
.d12{top:88%;left:26%;font-size:44px;--r:-10deg}

.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg, rgba(236,225,204,.14) 0%, rgba(236,225,204,.14) 100%);
  opacity:1;
}
.vignette::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 38%, rgba(0,0,0,0) 56%, rgba(24,38,60,.10) 100%);
  opacity:.72;
}

.wrap{width:min(var(--max),calc(100% - 34px));margin:0 auto;position:relative;z-index:4}

.topbar{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid rgba(255,226,157,.25);
  background:linear-gradient(130deg, rgba(31,58,105,.95), rgba(18,36,71,.96));
  box-shadow:0 10px 24px rgba(16,30,58,.34);
  overflow:visible; /* mudou de hidden pra visible — senão dropdown do kebab é clipado */
}
.topbar::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 6% 22%, rgba(255,235,176,.92) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 14% 68%, rgba(255,235,176,.88) 0 1px, transparent 2.4px),
    radial-gradient(circle at 24% 34%, rgba(255,235,176,.92) 0 1.3px, transparent 2.8px),
    radial-gradient(circle at 33% 76%, rgba(255,235,176,.88) 0 1.1px, transparent 2.5px),
    radial-gradient(circle at 42% 28%, rgba(255,235,176,.9) 0 1.25px, transparent 2.7px),
    radial-gradient(circle at 51% 64%, rgba(255,235,176,.9) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 60% 20%, rgba(255,235,176,.92) 0 1.35px, transparent 2.9px),
    radial-gradient(circle at 69% 72%, rgba(255,235,176,.88) 0 1px, transparent 2.4px),
    radial-gradient(circle at 78% 36%, rgba(255,235,176,.9) 0 1.25px, transparent 2.7px),
    radial-gradient(circle at 86% 62%, rgba(255,235,176,.88) 0 1.05px, transparent 2.4px),
    radial-gradient(circle at 94% 26%, rgba(255,235,176,.9) 0 1.2px, transparent 2.6px);
  filter:drop-shadow(0 0 4px rgba(255,226,140,.35));
  opacity:.95;
}
.topbar__in{min-height:78px;padding-top:8px;padding-bottom:6px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#f6edda;font-weight:800}
.brand__mark{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:var(--ui-mark-bg, linear-gradient(145deg,var(--gold-2),var(--gold) 55%,#b37e3b));
  box-shadow:0 6px 14px rgba(9,20,45,.44);
  overflow:hidden;
}
.brand__mark img{width:22px;height:22px;object-fit:contain}
.nav{display:flex;gap:4px}
.nav a{padding:7px 10px;border-radius:8px;color:rgba(248,237,218,.9);text-decoration:none;font-weight:600}
.nav a:hover{background:rgba(255,255,255,.10)}
.nav__text-action{
  padding:7px 6px;
  min-width:auto;
  font-weight:800;
  letter-spacing:.04em;
}

.topbar__actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{
  border:none;border-radius:12px;padding:10px 15px;min-height:38px;cursor:pointer;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
}
/* CTA primary UNIVERSAL: sempre creme/dourado + texto preto.
   Funciona em qualquer pintura, qualquer surface. */
.btn--primary{
  background:linear-gradient(135deg, #fcf6df, #e8c97a);
  color:#1a1410;
  box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
  font-weight:700;
}
.btn--primary:hover{
  background:linear-gradient(135deg, #ffffff, #f0d488);
}
.btn--ghost{background:rgba(255,255,255,.68);border:1px solid var(--line);color:#3d5779}
.btn--full{width:100%}

main{position:relative;z-index:4;padding-bottom:48px}
.hero{padding:28px 0 38px}
.hero__grid{display:grid;grid-template-columns:.92fr 1.08fr;grid-template-rows:auto auto auto;gap:18px 24px;align-items:center}
/* Quando não há heroMascot, hero vira coluna única */
.hero__grid--no-mascot{grid-template-columns:1fr;max-width:760px;margin-inline:auto}
.hero__grid--no-mascot .heroBadges,
.hero__grid--no-mascot .hero__copy,
.hero__grid--no-mascot .heroExampleWrap{grid-column:auto;grid-row:auto}
.heroMascot{grid-column:1;grid-row:1 / span 3;min-height:220px;padding:16px;display:flex;align-items:center;justify-content:center;align-self:center}
.heroMascot::before{display:none}
.heroFocusPanel{grid-column:2;grid-row:1;align-self:end}
.hero__copy{grid-column:2;grid-row:2;padding:14px 30px 22px 18px;align-self:start}
.heroExampleWrap{grid-column:2;grid-row:3;align-self:start;margin-top:-2px}
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
  position:relative;
  overflow:hidden;
}
.panel::before{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.42), transparent 44%, rgba(121,151,197,.16));
}
.heroFocusPanel{
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid rgba(180,142,76,.18);
  background:rgba(255,249,235,.5);
  color:#6f552f;
  font-size:16px;
  line-height:1.35;
  font-weight:700;
}
.heroFocusPanel span{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}
.badge{
  display:inline-flex;padding:7px 12px;border-radius:999px;
  border:1px solid rgba(212,168,87,.45);
  background:linear-gradient(135deg, rgba(252,246,223,.18), rgba(232,201,122,.18));
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#e8c97a;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
body[data-surface="light"] .badge{
  border-color:rgba(180,142,76,.45);
  background:linear-gradient(135deg, rgba(255,249,235,.92), rgba(248,232,191,.84));
  color:#6f552f;
}
h1#heroTitle{
  margin:12px 0 8px;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(42px,5vw,74px);
  line-height:.95;
  letter-spacing:-.015em;
  color:var(--surface-ink, #1f3552);
}
#heroTitle2{margin:0 0 8px;font-size:clamp(26px,2.7vw,40px);line-height:1.05}
.sub{margin:0;color:var(--muted);font-size:18px;line-height:1.7;max-width:60ch}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.heroArtImage{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 18px 34px rgba(42,60,87,.16);
  position:relative;
  z-index:2;
}
.heroDayPlan{
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(53,78,112,.16);
  background:linear-gradient(135deg, rgba(255,255,255,.84), rgba(247,239,224,.88));
  box-shadow:0 12px 24px rgba(42,60,88,.10);
}
.heroDayPlan--example{
  margin-top:0;
}
.heroDayPlan__title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6f552f;
  margin-bottom:12px;
}
.heroDayPlan__track{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
}
.heroDayPlan__track::-webkit-scrollbar{display:none}
.heroDayPlan__step{
  display:inline-flex;
  align-items:center;
  gap:0;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(53,78,112,.16);
  box-shadow:0 8px 16px rgba(42,60,88,.08);
  white-space:nowrap;
}
.heroDayPlan__step strong{
  font-size:14px;
  color:#294669;
}
.heroDayPlan__arrow{
  font-size:18px;
  line-height:1;
  color:#7a8faa;
  flex:0 0 auto;
}

.section{padding:14px 0 72px}
.scene{
  background:rgba(255,255,255,.74);
  border:1px solid rgba(53,78,112,.22);
  border-radius:22px;
  box-shadow:0 12px 28px rgba(42,60,87,.16);
  padding:30px;
  position:relative;
  overflow:hidden;
}
.internal-shell{
  display:grid;
  gap:18px;
}
.internal-shell > .scene{
  margin:0;
}
.scene::before{
  content:"";
  position:absolute;inset:-1px;pointer-events:none;
  background:
    radial-gradient(220px 120px at 12% 16%, rgba(255,238,197,.34), transparent 72%),
    radial-gradient(260px 130px at 88% 24%, rgba(132,163,201,.20), transparent 74%),
    radial-gradient(280px 140px at 76% 82%, rgba(153,184,150,.20), transparent 76%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 2px, transparent 2px 7px);
  mix-blend-mode:soft-light;
  opacity:.78;
}
.scene::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(160px 90px at 10% 8%, rgba(255,240,205,.38), transparent 70%),
    radial-gradient(160px 90px at 92% 86%, rgba(176,205,176,.20), transparent 70%);
  opacity:.9;
}
.section__head,.grid3,.steps,.faq,.cta{position:relative;z-index:2}
.section__head h2{margin:0 0 8px;font-size:clamp(30px,3.4vw,50px);line-height:1.03;letter-spacing:-.02em;color:var(--surface-ink, #1f3552)}
.section__head p{margin:0;color:var(--muted);font-size:17px;line-height:1.7;max-width:72ch}
.grid3{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{
  background:rgba(255,255,255,.92);border:1px solid rgba(53,78,112,.18);border-radius:16px;box-shadow:0 8px 18px rgba(42,60,88,.13);
  padding:18px;min-height:178px;display:flex;flex-direction:column;gap:8px;
}
.card__k{font-size:12px;font-weight:700;color:#725730;letter-spacing:.09em}
.card__t,h3{margin:0;font-size:31px;font-family:"Cormorant Garamond",serif;line-height:1}
.card__p{margin:0;color:#4a6181;line-height:1.56;font-size:15px}
p{margin:0;color:#4a6181;line-height:1.56;font-size:15px}
.courseCard{
  background:rgba(255,255,255,.92);border:1px solid rgba(53,78,112,.18);border-radius:16px;box-shadow:0 8px 18px rgba(42,60,88,.13);
  padding:16px;text-align:left;display:grid;gap:8px;cursor:pointer
}
.courseCard__pill{display:flex;gap:6px;flex-wrap:wrap}
.courseCard__pill span,.courseCard__tag{
  font-size:12px;padding:4px 8px;border-radius:999px;
  background:var(--ui-paper-soft, rgba(255,246,223,.9));
  border:1px solid color-mix(in srgb, var(--ui-accent, #aa8244) 30%, transparent);
  color:color-mix(in srgb, var(--ui-ink, #6f552f) 80%, #000 20%);
}
.courseCard__label{font-size:22px;font-family:"Cormorant Garamond",serif;font-weight:700;line-height:1.1}
.steps{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.step,.qa{
  background:rgba(255,255,255,.9);border:1px solid rgba(53,78,112,.18);border-radius:16px;padding:18px;
}
.step__n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.75);border:1px solid var(--line);font-weight:800;margin-bottom:8px}
.step__t{font-weight:800;margin-bottom:6px}
.step__p{color:#4a6181}
.faq{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qa summary{cursor:pointer;font-weight:800}
.qa p{margin-top:8px}
.cta{
  padding:8px 0 0;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}
.cta__form{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
input[type="email"],input[type="password"],input[type="text"]{
  min-height:42px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.95);font:inherit;color:var(--ink)
}
.footer{
  padding:24px 0;
  border-top:1px solid rgba(255,226,157,.25);
  background:linear-gradient(130deg, rgba(31,58,105,.95), rgba(18,36,71,.96));
  box-shadow:0 -10px 24px rgba(16,30,58,.20);
  overflow:hidden;
  position:relative;
}
.footer::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 6% 22%, rgba(255,235,176,.92) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 14% 68%, rgba(255,235,176,.88) 0 1px, transparent 2.4px),
    radial-gradient(circle at 24% 34%, rgba(255,235,176,.92) 0 1.3px, transparent 2.8px),
    radial-gradient(circle at 33% 76%, rgba(255,235,176,.88) 0 1.1px, transparent 2.5px),
    radial-gradient(circle at 42% 28%, rgba(255,235,176,.9) 0 1.25px, transparent 2.7px),
    radial-gradient(circle at 51% 64%, rgba(255,235,176,.9) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 60% 20%, rgba(255,235,176,.92) 0 1.35px, transparent 2.9px),
    radial-gradient(circle at 69% 72%, rgba(255,235,176,.88) 0 1px, transparent 2.4px),
    radial-gradient(circle at 78% 36%, rgba(255,235,176,.9) 0 1.25px, transparent 2.7px),
    radial-gradient(circle at 86% 62%, rgba(255,235,176,.88) 0 1.05px, transparent 2.4px),
    radial-gradient(circle at 94% 26%, rgba(255,235,176,.9) 0 1.2px, transparent 2.6px);
  filter:drop-shadow(0 0 4px rgba(255,226,140,.35));
  opacity:.95;
}
.footer__in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;position:relative;z-index:1}
.footer__links{display:flex;gap:14px}
.footer__links a,
.footer__brand,
.footer__t,
.footer .mini{color:#f6edda}
.footer__brand{display:flex;align-items:center;gap:10px}
.footer__t{font-weight:800}

.modal{position:fixed;inset:0;display:none;z-index:60}
.modal[data-open="true"]{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(11,20,37,.50);backdrop-filter:blur(4px)}
.modal__card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(440px, calc(100% - 36px));padding:20px;
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:16px;
}
.modal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal__title{font-weight:800;font-size:20px}
.form{display:flex;flex-direction:column;gap:10px}
.form label{display:flex;flex-direction:column;gap:6px}
.line{height:1px;background:rgba(53,78,112,.2)}
.icon{border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:8px;width:34px;height:34px;cursor:pointer}

.reveal{
  opacity:1;
  transform:none;
  filter:none;
  transition:opacity .62s ease, transform .62s ease, filter .62s ease;
}
.reveal.on{opacity:1;transform:none;filter:blur(0)}

@media (max-width:980px){
  .hero__grid,.grid3,.steps,.faq{grid-template-columns:1fr}
  .topbar__in{align-items:stretch;padding-top:10px;padding-bottom:8px}
  .nav{width:100%;order:3;overflow-x:auto;white-space:nowrap;padding-bottom:2px}
  .topbar__actions{width:100%;order:4;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .btn{font-size:12px;padding:8px 10px;min-height:34px}
  .d11,.d12{display:none}
  .heroMascot,
  .heroFocusPanel,
  .hero__copy,
  .heroExampleWrap{grid-column:auto;grid-row:auto}
  .hero__copy{padding:22px}
  .scene{padding:16px}
  .sub{font-size:16px}
  .heroExampleWrap{margin-top:14px}
  .heroDayPlan{padding:14px}
  .heroDayPlan__track{gap:8px}
  .heroDayPlan__step{border-radius:14px}
  .heroFocusPanel{
    gap:8px 14px;
    padding:10px 12px;
    font-size:12px;
    line-height:1.25;
  }
  .card__t,h3{font-size:27px}
  .section{padding-bottom:72px}
  main{padding-bottom:24px}
}

/* Equalização dos blocos dinâmicos de jornada (today/study) */
.journeyBoard{
  display:grid;
  gap:12px;
}
.journeyStepWrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:stretch;
}
.journeyStepWrap .journeyStep{
  width:100%;
  min-height:118px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  padding:16px;
  border:1px solid rgba(53,78,112,.22);
  border-radius:14px;
  background:rgba(255,255,255,.90);
  box-shadow:0 8px 18px rgba(42,60,88,.10);
}
.journeyStepWrap .journeyStep__left{
  min-width:0;
  display:grid;
  gap:6px;
}
.journeyStepWrap .journeyStep__title{
  font-family:"Cormorant Garamond",serif;
  font-size:40px;
  line-height:1;
  margin:0;
}
.journeyStepWrap .journeyStep__meta{
  color:#4a6181;
  line-height:1.45;
  font-size:15px;
}
.journeyStepWrap .journeyStep .pill{
  white-space:nowrap;
  align-self:flex-start;
}
.journeyStepWrap .btn[data-action="replace-open"]{
  min-width:128px;
  min-height:118px;
  height:100%;
  border-radius:14px;
  align-self:stretch;
}
#queue .journeyStep,
#journeyBoard .journeyStep{
  min-height:118px;
}
#queue .journeyStep .journeyStep__title,
#journeyBoard .journeyStep .journeyStep__title{
  min-height:40px;
  display:flex;
  align-items:center;
}
@media (max-width:980px){
  .journeyStepWrap{
    grid-template-columns:1fr;
  }
  .journeyStepWrap .journeyStep{
    min-height:104px;
  }
  .journeyStepWrap .btn[data-action="replace-open"]{
    min-width:unset;
    min-height:42px;
    height:auto;
    align-self:auto;
  }
}

/* Dashboard: corrige "coisas soltas" geradas pelo conteúdo dinâmico */
.dashboard-v2 .kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-top:12px;
}
.dashboard-v2 .kpi{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(53,78,112,.18);
  border-radius:16px;
  box-shadow:0 8px 18px rgba(42,60,88,.13);
  padding:14px 16px;
}
.dashboard-v2 .kpiLabel{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6f552f;
  margin-bottom:6px;
}
.dashboard-v2 .kpiValue{
  font-family:"Cormorant Garamond",serif;
  font-size:34px;
  line-height:1;
  color:#1f3552;
}
.dashboard-v2 .table{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.dashboard-v2 .row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(53,78,112,.18);
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 18px rgba(42,60,88,.10);
}
.dashboard-v2 .row--link{
  text-decoration:none;
  color:inherit;
}
.dashboard-v2 .rowL{
  min-width:0;
  display:grid;
  gap:6px;
}
.dashboard-v2 .rowT{
  margin:0;
  font-size:27px;
  font-family:"Cormorant Garamond",serif;
  line-height:1.06;
  color:#1f3552;
}
.dashboard-v2 .rowM{
  margin:0;
  color:#4a6181;
  line-height:1.45;
  font-size:14px;
  overflow-wrap:anywhere;
}
.dashboard-v2 .pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(170,130,68,.36);
  background:linear-gradient(135deg, rgba(255,248,228,.94), rgba(246,226,182,.90));
  color:#725730;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  white-space:nowrap;
}
.dashboard-v2 .dashSectionTitle .h2{
  font-family:"Cormorant Garamond",serif;
  font-size:38px;
  line-height:1;
}
@media (max-width:980px){
  .dashboard-v2 .kpis{grid-template-columns:1fr 1fr}
  .dashboard-v2 .row{flex-direction:column;align-items:flex-start}
  .dashboard-v2 .pill{align-self:flex-start}
}
@media (max-width:620px){
  .dashboard-v2 .kpis{grid-template-columns:1fr}
  .dashboard-v2 .rowT{font-size:24px}
}

@media (prefers-reduced-motion:reduce){
  .fx-layer{transition:none}
  .reveal{opacity:1;transform:none;filter:none}
}

.studyMascot{
  margin:12px 0 6px;
  padding:12px;
  border:1px solid rgba(53,78,112,.18);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,240,224,.88));
  display:flex;
  align-items:center;
  gap:12px;
}
.studyMascot__img{
  width:94px;
  height:94px;
  object-fit:contain;
  flex:0 0 auto;
}
.studyMascot__label{
  color:#3f5777;
  font-weight:600;
  line-height:1.45;
}
@media (max-width:640px){
  .studyMascot{
    align-items:flex-start;
  }
  .studyMascot__img{
    width:74px;
    height:74px;
  }
}

.pageMascot{
  margin:12px 0 6px;
  padding:12px 14px;
  border:1px solid rgba(53,78,112,.18);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,240,224,.88));
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 8px 16px rgba(42,60,88,.08);
  position:relative;
  overflow:hidden;
}
.pageMascot--inline{
  margin-top:14px;
}
.pageMascot__img{
  width:84px;
  height:84px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 7px 10px rgba(38,59,89,.18));
  animation:mascotFloat 5s ease-in-out infinite;
}
.pageMascot__label{
  color:#3f5777;
  font-weight:600;
  line-height:1.45;
}
.pageMascot::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:140px;
  height:140px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(95,133,182,.12), rgba(95,133,182,0));
  pointer-events:none;
}

.internal-head .pageMascot{
  max-width:620px;
}

.dashboard-v2 .pageMascot{
  margin-top:12px;
  margin-bottom:2px;
}

.auth-page .auth-card .pageMascot{
  margin:10px 0 2px;
  padding:10px 12px;
}

.auth-page .auth-card .pageMascot__img{
  width:72px;
  height:72px;
}

@keyframes mascotFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
  100%{transform:translateY(0)}
}

@media (max-width:640px){
  .pageMascot{
    align-items:flex-start;
    padding:10px 12px;
  }
  .pageMascot__img{
    width:68px;
    height:68px;
  }
  .internal-head .pageMascot{
    max-width:none;
  }
  .pageMascot__label{
    font-size:14px;
    line-height:1.4;
  }
}

@media (prefers-reduced-motion:reduce){
  .pageMascot__img{
    animation:none;
  }
}

.kpis,
.table,
.journeyBoard,
.journeyViewerCard,
.quizOptions,
.quizFeedback,
.mdBody {
  transition: opacity .18s ease;
}

.is-swapping {
  opacity: .45;
}

@media (prefers-reduced-motion:reduce){
  .kpis,
  .table,
  .journeyBoard,
  .journeyViewerCard,
  .quizOptions,
  .quizFeedback,
  .mdBody {
    transition: none;
  }
}

.auth-main{
  padding:34px 0 52px;
}

.auth-card{
  width:min(680px,100%);
  margin:0 auto;
}

.auth-card h1{
  margin:0 0 8px;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(34px,4.4vw,56px);
  line-height:.98;
}

.auth-card .muted{
  color:var(--muted);
}

.auth-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.social-auth{
  display:grid;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(53,78,112,.16);
  background:rgba(255,255,255,.74);
}

.social-auth__title{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6f552f;
}

.social-auth__buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.social-auth__slot{
  min-height:44px;
  display:grid;
  align-items:center;
}

.social-auth__slot > *{
  width:100%;
}

.social-auth__or{
  position:relative;
  text-align:center;
  color:#6b7e98;
  font-size:12px;
  font-weight:700;
}

.social-auth__or::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  border-top:1px solid rgba(53,78,112,.20);
}

.social-auth__or span{
  position:relative;
  padding:0 8px;
  background:rgba(255,255,255,.9);
}

.password-reset{
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(53,78,112,.16);
  background:rgba(255,255,255,.74);
}

.onboarding-main{
  padding:30px 0 58px;
}

.onboarding-shell{
  width:min(760px,100%);
  margin:0 auto;
  display:grid;
  gap:14px;
}

.onb-progress{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.onb-progress__label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6f552f;
}

.onb-progress__title{
  font-family:"Cormorant Garamond",serif;
  font-size:30px;
  line-height:1;
  margin-top:4px;
}

.onb-track{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(53,78,112,.18);
  background:rgba(255,255,255,.72);
  overflow:hidden;
}

.onb-track__bar{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,#6a8ebf,#4c6c9a);
  transition:width .28s ease;
}

.onb-step{
  display:grid;
  gap:12px;
}

.onb-step h1{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(30px,4vw,48px);
  line-height:.98;
}

.onb-step .muted{
  color:var(--muted);
}

.onb-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(170,130,68,.32);
  background:linear-gradient(135deg, rgba(255,248,228,.95), rgba(246,226,182,.92));
  color:#725730;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.onb-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.onb-actions .btn--primary{
  grid-column:1 / -1;
}

.onb-label{
  font-size:13px;
  font-weight:800;
  color:#334d71;
}

.onb-input{
  width:100%;
  min-height:46px;
}

.onb-option-grid,
.onb-contest-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.onb-option,
.onb-contest-card,
.onb-suggest__item,
.onb-pay-btn{
  border:1px solid rgba(53,78,112,.22);
  border-radius:14px;
  background:rgba(255,255,255,.9);
  padding:12px;
  text-align:left;
  cursor:pointer;
  color:#234164;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease;
}

.onb-option:hover,
.onb-contest-card:hover,
.onb-suggest__item:hover,
.onb-pay-btn:hover{
  transform:translateY(-1px);
  border-color:#4d709f;
  box-shadow:0 8px 16px rgba(42,60,88,.14);
}

.onb-option.on,
.onb-contest-card.on,
.onb-suggest__item.on,
.onb-pay-btn.on{
  border-color:#3f5f8d;
  background:linear-gradient(135deg, rgba(233,240,252,.95), rgba(216,230,247,.92));
  box-shadow:0 10px 20px rgba(42,60,88,.16);
}

.onb-option__title,
.onb-contest-card__title{
  font-weight:800;
  display:block;
}

.onb-option__desc{
  display:block;
  margin-top:3px;
  font-size:13px;
  color:#4f6685;
}

.onb-option--tall{
  min-height:74px;
}

.onb-suggest{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.onb-reminder-box,
.onb-summary,
.onb-paywall,
.onb-quiz{
  border:1px solid rgba(53,78,112,.18);
  border-radius:16px;
  background:rgba(255,255,255,.74);
  padding:14px;
}

.onb-time-range{
  width:100%;
  accent-color:#446694;
}

.onb-time-preview{
  margin-top:8px;
}

.onb-time-preview strong{
  font-size:28px;
  font-family:"Cormorant Garamond",serif;
}

.onb-summary{
  display:grid;
  gap:8px;
}

.onb-summary__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(53,78,112,.16);
  background:rgba(255,255,255,.9);
}

.onb-summary__row span{
  color:#516a8a;
}

.onb-summary__row strong{
  color:#224165;
}

.onb-list{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:6px;
  color:#3f5777;
}

.onb-price{
  margin-top:10px;
  font-family:"Cormorant Garamond",serif;
  font-size:34px;
  line-height:1;
  color:#1f3552;
}

.onb-pay-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.onb-pay-btn{
  text-align:center;
  font-weight:700;
}

.onb-result{
  border:1px solid rgba(65,104,154,.24);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(233,241,253,.96), rgba(244,249,255,.94));
  padding:14px;
}

.onb-result__score{
  font-family:"Cormorant Garamond",serif;
  font-size:42px;
  line-height:1;
  color:#1c3f68;
  margin-bottom:4px;
}

.onb-quiz{
  display:grid;
  gap:12px;
}

.onb-quiz__q{
  margin:0;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(53,78,112,.16);
  background:rgba(255,255,255,.92);
}

.onb-quiz__q legend{
  padding:0 6px;
  font-size:14px;
  font-weight:800;
  color:#2f4e74;
}

.onb-quiz__options{
  margin-top:8px;
  display:grid;
  gap:6px;
}

.onb-quiz__opt{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:#415c7d;
  cursor:pointer;
}

#onboardingStatus{
  min-height:20px;
}

@media (max-width:980px){
  .auth-main{
    padding:20px 0 36px;
  }

  .auth-card{
    width:100%;
  }

  .auth-actions,
  .social-auth__buttons{
    grid-template-columns:1fr;
  }

  .onboarding-main{
    padding:18px 0 34px;
  }

  .onboarding-shell{
    width:100%;
    gap:10px;
  }

  .onb-progress{
    gap:8px;
  }

  .onb-progress__title{
    font-size:24px;
  }

  .onb-option-grid,
  .onb-contest-grid,
  .onb-suggest,
  .onb-pay-grid{
    grid-template-columns:1fr;
  }

  .onb-actions{
    grid-template-columns:1fr;
  }

  .onb-actions .btn--primary{
    grid-column:auto;
  }
}

/* ============================================================================
 * LANDING V3 — extensões: CTA hierárquico, gaveta de pinturas, demos, dark
 * ============================================================================ */

/* ---------- Variáveis adaptáveis por pintura ---------- */
:root{
  --art-ink: var(--ink);
  --art-paper: var(--card);
  --art-accent: var(--gold);
  --art-veil: rgba(255,250,238,0);
  --art-haze: 0;
  /* UI vars: defaults atuais. São sobrescritas quando uma pintura está ativa. */
  --ui-ink: #1f3552;
  --ui-accent: #3f5f8d;
  --ui-accent-2: #5e82b5;
  --ui-paper-soft: rgba(255,249,235,.55);
  --ui-on-accent: #ffffff;
  --ui-mark-bg: linear-gradient(145deg,#f2d89d,#ddb562 55%,#b37e3b);
}

/* Quando há uma pintura ativa, a UI passa a usar tons da pintura.
   color-mix garante contraste suficiente mesmo se a paleta extraída tiver tons extremos. */
body[data-pintura]:not([data-pintura=""]){
  --ui-ink: var(--art-ink, #1f3552);
  --ui-accent: color-mix(in srgb, var(--art-ink, #1f3552) 78%, #1a2538 22%);
  --ui-accent-2: color-mix(in srgb, var(--art-ink, #1f3552) 55%, #ffffff 45%);
  --ui-paper-soft: color-mix(in srgb, var(--art-paper, #f4ecdf) 70%, #ffffff 30%);
  --ui-on-accent: #ffffff;
  --ui-mark-bg: linear-gradient(145deg,
    color-mix(in srgb, var(--art-accent, #ddb562) 80%, #ffffff 20%),
    var(--art-accent, #ddb562) 55%,
    color-mix(in srgb, var(--art-accent, #ddb562) 70%, #000000 30%));
}

/* Camada de pintura de fundo — preenche tudo (cover), sem escurecimento, foco curado por obra */
.bg-art{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:0;
  transition:opacity .18s ease;
  overflow:hidden;
}
.bg-art__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  object-position:center center;
  /* Ken Burns lento — zoom + pan contínuo, ciclo 90s.
     Cria sensação de pintura "viva" sem custar quase nada de performance. */
  animation: kenBurns 90s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform;
}
/* B — em hardware MID, aplica SVG turbulence: pintura "respira" como vidro líquido */
[data-perf="mid"] .bg-art__img{
  filter: url(#telosLiquid);
}
/* C — em hardware HIGH, substituímos a img por canvas WebGL (em alien.js).
   Esconde a img original quando o canvas WebGL está ativo. */
[data-perf="high"][data-webgl-art="on"] .bg-art__img{
  visibility: hidden;
}
#telosArtWebGL{
  position:absolute;inset:0;width:100%;height:100%;
  display:none;
  pointer-events:none;
}
[data-perf="high"][data-webgl-art="on"] #telosArtWebGL{
  display:block;
}
@keyframes kenBurns{
  0%   { transform: scale(1.04) translate3d(-1.2%, -.8%, 0); }
  50%  { transform: scale(1.10) translate3d(.8%, .6%, 0); }
  100% { transform: scale(1.06) translate3d(1.2%, -.6%, 0); }
}
[data-perf="low"] .bg-art__img{animation:none;transform:scale(1.02)}
@media (prefers-reduced-motion: reduce){.bg-art__img{animation:none;transform:scale(1.02)}}

/* Toggle de movimento (botão ✨ na topbar) — desliga TODOS os efeitos animados.
   A IMG mantém o Ken Burns PAUSADO no transform atual (não reseta pra scale(1.02))
   pra evitar "delta absurdo" entre canvas e IMG ao alternar — ambos ficam na
   mesma composição no momento do toggle.
   IMPORTANTE: a regra catch-all abaixo força animation-duration:.001ms em TUDO,
   o que desfigura o currentTime do Ken Burns. Por isso restauramos a duração
   original aqui antes de pausar. */
[data-motion="off"] .bg-art__img{animation-duration:90s !important;animation-play-state:paused !important;filter:none !important;visibility:visible !important}
[data-motion="off"] #telosArtWebGL{display:none !important}
[data-motion="off"] #telosParticles{display:none !important}
[data-motion="off"] .cursor-aura{display:none !important}
[data-motion="off"] .reveal{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
[data-motion="off"] #heroTitle .h1-char{opacity:1 !important;transform:none !important;transition:none !important}
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after{
  animation-duration:.001ms !important;
  transition-duration:.001ms !important;
}

/* Camada de partículas douradas (canvas) */
#telosParticles{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.7;
  mix-blend-mode:plus-lighter;
}
[data-perf="low"] #telosParticles{display:none}
@media (prefers-reduced-motion: reduce){#telosParticles{display:none}}
.bg-art__veil{display:none}
body[data-pintura]:not([data-pintura=""]) .bg-art{opacity:1}
body[data-pintura]:not([data-pintura=""]) [data-fx-clean]{display:none}
body[data-pintura]:not([data-pintura=""]) .vignette{display:none}

/* ---------- Topbar reorganizada ---------- */
.topbar__actions{align-items:center}
.topbar-toggle{
  width:38px;height:38px;
  border-radius:10px;
  display:inline-grid;place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:#f6edda;
  font-size:16px;line-height:1;
  cursor:pointer;
  transition:background .14s ease, transform .14s ease;
}
.topbar-toggle:hover{background:rgba(255,255,255,.18)}
.topbar-toggle:active{transform:scale(.96)}
.topbar-toggle__icon{display:none}
[data-theme="light"] .topbar-toggle [data-theme-light]{display:inline}
[data-theme="dark"]  .topbar-toggle [data-theme-dark]{display:inline}
.topbar-link{
  color:rgba(248,237,218,.92);
  text-decoration:none;
  font-weight:600;
  font-size:13px;
  padding:6px 8px;
}
.topbar-link:hover{color:#fff;text-decoration:underline}
.btn--cta-topbar{padding:9px 14px;min-height:36px;font-size:14px;letter-spacing:.005em}
/* CTA topbar herda o estilo do .btn--primary (acima já adapta por surface) */
.topbar-menu-wrap{position:relative}
.topbar-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:240px;
  background:rgba(28,46,82,.98);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  box-shadow:0 14px 36px rgba(8,16,34,.55);
  padding:6px;
  z-index:300; /* acima do painel hero e cards (que ficam em ~10-20) */
}
.topbar-menu__item{
  display:block;width:100%;
  text-align:left;
  padding:9px 12px;
  background:transparent;border:none;color:#f6edda;
  border-radius:8px;
  font:inherit;font-weight:600;font-size:14px;
  cursor:pointer;
}
.topbar-menu__item:hover{background:rgba(255,255,255,.08)}
.topbar-menu__item:disabled{opacity:.4;cursor:default}

/* ---------- Hero CTA hierárquico ---------- */
.hero__cta{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:6px;margin-top:18px;
}
.btn--cta-primary{
  font-size:16px;
  padding:14px 22px;
  min-height:50px;
  letter-spacing:.005em;
  box-shadow:0 12px 28px rgba(27,44,75,.34);
  position:relative;
  animation:ctaPulse 4.5s ease-in-out 1.6s 3;
}
.btn--cta-primary:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(27,44,75,.42)}
@keyframes ctaPulse{
  0%, 92%, 100%{box-shadow:0 12px 28px rgba(27,44,75,.34)}
  96%{box-shadow:0 12px 28px rgba(27,44,75,.34), 0 0 0 8px rgba(94,130,181,.16)}
}
.cta-microcopy{
  font-size:12.5px;color:rgba(247,236,205,.72);
  font-weight:600;letter-spacing:.01em;
}
.link-secondary{
  font-size:13.5px;color:#e8c97a;text-decoration:underline;
  text-underline-offset:3px;font-weight:600;
  cursor:pointer;background:none;border:none;padding:0;
  font-family:inherit;
}
.link-secondary:hover{color:#fcf6df}

/* ---------- Hero badges (prova social) ---------- */
.heroBadges{
  grid-column:2;grid-row:1;align-self:end;
  display:flex;gap:14px;flex-wrap:wrap;
  padding:14px 18px;
  border:1px solid color-mix(in srgb, var(--ui-accent, #6f552f) 20%, transparent);
  background:var(--ui-paper-soft, rgba(255,249,235,.55));
  border-radius:14px;
}
.heroBadges__item{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;padding:0 4px;
  flex:1 1 auto;min-width:120px;
}
.heroBadges__value{
  font-family:"Cormorant Garamond",serif;
  font-size:30px;line-height:1;
  color:var(--surface-ink, #1f3552);
  font-weight:700;
}
.heroBadges__label{
  font-size:12px;font-weight:600;line-height:1.35;
  color:var(--surface-ink-soft, rgba(20,14,5,.74));
}

@media (max-width:980px){
  .heroBadges{grid-column:auto;grid-row:auto}
  .heroBadges__value{font-size:24px}
}

/* ---------- Cards de trilha com mascote ---------- */
.courseCard{
  position:relative;padding-right:84px;
  min-height:120px;
}
.courseCard__mascot{
  position:absolute;right:8px;bottom:6px;
  width:78px;height:78px;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(38,59,89,.18));
  pointer-events:none;
}
@media (max-width:540px){
  .courseCard__mascot{width:60px;height:60px;right:4px}
  .courseCard{padding-right:62px;min-height:100px}
}

/* ---------- Material demo ---------- */
.demo-style-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.84);
  margin-top:10px;margin-bottom:14px;
  font-size:13px;
}
.demo-style-toggle__label{
  color:var(--muted);font-weight:700;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  margin-right:4px;
}
.demo-style-toggle button{
  padding:6px 14px;
  background:transparent;border:none;color:var(--muted);
  border-radius:999px;cursor:pointer;font:inherit;font-weight:700;
  transition:background .14s ease, color .14s ease;
}
.demo-style-toggle button:hover{color:var(--ink);background:rgba(15,23,42,.05)}
.demo-style-toggle button.is-active{background:#0f766e;color:#fff}

.demo-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin-top:8px;
}
.demo-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(53,78,112,.18);
  border-radius:16px;padding:18px;
  display:flex;flex-direction:column;gap:12px;
  min-height:300px;
}
.demo-card h3{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:24px;line-height:1.05;
}
.demo-prose{
  font-size:15px;line-height:1.7;color:#2d4267;margin:0;
}
.demo-legend{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;
}
.demo-legend .chip{
  display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.78);border:1px solid var(--line);
  font-size:11px;font-weight:700;
}
.demo-legend .chip .hl{font-size:11px;padding:0 6px}

/* Highlights inline (mesma família do material-novo) */
.hl{
  border-radius:8px;
  padding:0 .22em .03em;
  font-weight:700;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hl-termo_central     {background:#fff4bf;color:#7c4700}
.hl-dispositivo_legal {background:#dcfce7;color:#166534}
.hl-contraste         {background:#dbeafe;color:#1d4ed8}
.hl-pegadinha         {background:#fee2e2;color:#b91c1c}
.hl-definicao         {background:#ede9fe;color:#6d28d9}
.hl-exemplo           {background:#ffedd5;color:#c2410c}

/* Flashcard 3D demo */
.flashcard{
  display:block;width:100%;
  border:0;background:transparent;padding:0;
  cursor:pointer;perspective:1200px;text-align:left;
  font:inherit;
}
.flashcard-inner{
  position:relative;display:grid;
  grid-template-areas:"stack";
  min-height:200px;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.flashcard.is-flipped .flashcard-inner{transform:rotateY(180deg)}
.flashcard-face{
  grid-area:stack;
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  padding:18px 18px 16px;
  border-radius:16px;border:1px solid #cfd9ea;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.flashcard-front{background:linear-gradient(160deg,#ffffff 0%,#eff6ff 100%);color:#1f3552}
.flashcard-back{
  background:linear-gradient(160deg,#16a34a 0%,#15803d 100%);
  color:#f8fffe;transform:rotateY(180deg);
}
.flashcard-back.flashcard-back-true{background:linear-gradient(160deg,#16a34a 0%,#15803d 100%)}
.flashcard-back.flashcard-back-false{background:linear-gradient(160deg,#dc2626 0%,#991b1b 100%)}
.flashcard-kicker{
  font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:inherit;opacity:.78;
}
.flashcard-body{font-size:16px;line-height:1.6;margin:0;color:inherit}
.flashcard-answer{font-size:38px;font-weight:900;letter-spacing:.01em;color:inherit;display:block}
.flashcard-hint{font-size:12.5px;font-weight:700;color:inherit;opacity:.78}

/* 6 caixas semânticas */
.demo-blks{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin-top:14px;
}
.blk{
  border:1.5px solid;border-radius:14px;
  padding:14px 16px;
  background:#fff;
}
.blk-head{
  display:flex;align-items:center;gap:8px;
  font-weight:800;font-size:12px;
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:6px;
}
.blk-head .ic{font-size:16px}
.blk-body{font-size:14px;line-height:1.55;color:#2d4267}
.blk-body p{margin:0;color:inherit}
.blk.dica      {background:#f0fdf4;border-color:#16a34a}
.blk.dica      .blk-head{color:#15803d}
.blk.conceito  {background:#f5f3ff;border-color:#7c3aed}
.blk.conceito  .blk-head{color:#5b21b6}
.blk.alerta    {background:#fffbeb;border-color:#f59e0b}
.blk.alerta    .blk-head{color:#92400e}
.blk.pegadinha {background:#fef2f2;border-color:#b91c1c}
.blk.pegadinha .blk-head{color:#7f1d1d}
.blk.sintese   {background:#eff6ff;border-color:#2563eb}
.blk.sintese   .blk-head{color:#1d4ed8}
.blk.exemplo   {background:#fdf4ff;border-color:#d946ef}
.blk.exemplo   .blk-head{color:#86198f}

/* Sample com 3 identidades visuais (data-demo-style A/B/C aplicado em <body>) */
.demo-sample{
  margin-top:18px;
  background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:22px;
  transition:font-family .2s ease, font-size .2s ease;
}
.demo-sample__kicker{
  display:inline-block;
  font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#294b68;
  background:#edf4fb;border:1px solid #d6e2f1;
  border-radius:999px;padding:4px 10px;margin-bottom:10px;
}
.demo-sample h3{
  margin:0 0 6px;
  font-family:"Cormorant Garamond",serif;
  font-size:26px;line-height:1.05;
}
.demo-sample p, .demo-sample blockquote{
  font-size:15px;line-height:1.7;color:#2d4267;margin:8px 0;
}
.demo-sample blockquote{
  border-left:3px solid #94a3b8;padding:6px 12px;
  background:#f8fafc;border-radius:0 8px 8px 0;font-style:italic;
}
.demo-sample em{font-style:italic}

body[data-demo-style="A"] .demo-sample{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.62;
}
body[data-demo-style="A"] .demo-sample h3{
  font-family:Inter,system-ui,sans-serif;
  font-size:24px;font-weight:800;letter-spacing:-.02em;
}

body[data-demo-style="B"] .demo-sample{
  font-family:Georgia,"Times New Roman","Cambria",serif;
  font-size:17px;line-height:1.72;
}
body[data-demo-style="B"] .demo-sample h3{
  font-family:Georgia,serif;
  font-style:italic;font-weight:700;
}
body[data-demo-style="B"] .demo-sample p{text-align:justify;hyphens:auto}
body[data-demo-style="B"] .demo-sample p:first-of-type::first-letter{
  font-size:1.4em;font-weight:800;float:left;
  line-height:.9;padding:6px 8px 0 0;color:#0f766e;
}

body[data-demo-style="C"] .demo-sample{
  font-family:Verdana,"Segoe UI","Trebuchet MS",sans-serif;
  font-size:17px;line-height:1.7;
}
body[data-demo-style="C"] .demo-sample h3{
  font-family:Verdana,"Arial Black",sans-serif;
  font-weight:900;font-size:22px;
  background:#0f766e;color:#fff;
  padding:8px 12px;border-radius:8px;display:inline-block;
}
body[data-demo-style="C"] .demo-sample p{margin:11px 0}

@media (max-width:760px){
  .demo-grid{grid-template-columns:1fr}
  .demo-blks{grid-template-columns:1fr}
}

/* ---------- FAQ — duas colunas em desktop ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){
  .faq{grid-template-columns:1fr}
}

/* ---------- CTA bottom simplificado ---------- */
.cta__form--simple{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;
}
.cta__form--simple input[type="text"][name="name"]{grid-column:1}
.cta__form--simple input[type="email"]{grid-column:2}
.cta__form--simple .opt-in{grid-column:1 / -1}
.cta__form--simple input[name="whatsapp"]{grid-column:1 / -1}
.cta__form--simple button[type="submit"]{grid-column:1 / -1;min-height:50px;font-size:15px}
.opt-in{
  display:flex;align-items:center;gap:8px;
  font-size:14px;color:#3f5777;font-weight:600;
}
.opt-in input{accent-color:#3f5f8d;width:18px;height:18px}
@media (max-width:540px){
  .cta__form--simple{grid-template-columns:1fr}
  .cta__form--simple input[type="text"][name="name"],
  .cta__form--simple input[type="email"]{grid-column:1}
}

/* ---------- Footer ampliado ---------- */
.footer__credits{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;
}
.footer__credits .mini{color:#f6edda}
@media (max-width:760px){
  .footer__credits{align-items:flex-start;text-align:left}
}

/* ---------- Sticky CTA mobile ---------- */
.sticky-cta{
  position:fixed;
  left:12px;right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:40;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  background:linear-gradient(135deg,#5e82b5,#3f5f8d);
  color:#fff;text-decoration:none;
  font-weight:800;letter-spacing:.005em;
  box-shadow:0 14px 32px rgba(15,28,55,.4);
  transform:translateY(110%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.sticky-cta__label{font-size:15px;line-height:1.2}
.sticky-cta__sub{font-size:11.5px;opacity:.82;margin-top:2px;font-weight:600}
@media (max-width:760px){
  .sticky-cta{display:flex}
  .sticky-cta.is-visible{transform:translateY(0)}
}

/* ---------- Gaveta de pinturas ---------- */
.art-drawer{
  position:fixed;inset:0;z-index:80;
  display:none;
}
.art-drawer[data-open="true"]{display:block}
.art-drawer__backdrop{
  position:absolute;inset:0;
  background:rgba(11,20,37,.55);
  backdrop-filter:blur(4px);
}
.art-drawer__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(440px, 100%);
  background:#f8f4eb;color:#1f3552;
  display:flex;flex-direction:column;
  border-left:1px solid rgba(53,78,112,.18);
  box-shadow:-12px 0 36px rgba(11,20,37,.34);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.art-drawer[data-open="true"] .art-drawer__panel{transform:translateX(0)}
.art-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid rgba(53,78,112,.14);
  background:rgba(255,255,255,.6);
}
.art-drawer__head h3{margin:0;font-family:"Cormorant Garamond",serif;font-size:24px}
.art-drawer__head .topbar-toggle{
  background:rgba(31,53,82,.12);color:#1f3552;border-color:rgba(31,53,82,.18);
}
.art-drawer__body{
  flex:1;overflow-y:auto;
  padding:14px 16px;
}
.art-drawer__hint{
  margin:0 0 12px;font-size:13px;color:#5e6f86;
}
.art-drawer__quick{
  display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;
}
.art-drawer__chip{
  flex:1;padding:10px 12px;
  border-radius:10px;border:1px solid var(--line);
  background:#fff;color:#3f5f8d;font:inherit;font-weight:700;
  cursor:pointer;font-size:13px;
}
.art-drawer__chip:hover{background:#eff6ff}
.art-drawer__chip--surprise{background:linear-gradient(135deg,#f3e9d3,#e8d4a3);color:#6f552f;border-color:rgba(170,130,68,.36)}
.art-drawer__grid{
  display:flex;flex-direction:column;gap:18px;
}
.art-drawer__section{display:flex;flex-direction:column;gap:8px}
.art-drawer__cat-head{
  display:flex;align-items:center;gap:8px;
  margin:4px 0 0;
  font-family:"Cormorant Garamond",serif;
  font-size:18px;font-weight:700;line-height:1.05;color:#1f3552;
  letter-spacing:.005em;
}
.art-drawer__cat-icon{font-size:18px;line-height:1}
.art-drawer__cat-count{
  margin-left:auto;
  font-family:Inter,system-ui,sans-serif;
  font-size:11px;font-weight:800;
  padding:2px 8px;border-radius:999px;
  background:rgba(53,78,112,.1);color:#5e6f86;
  letter-spacing:.04em;
}
.art-drawer__subgrid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.art-drawer__item{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;cursor:pointer;
  text-align:left;font:inherit;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.art-drawer__item:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,28,55,.18)}
.art-drawer__item.is-active{border-color:#3f5f8d;box-shadow:0 0 0 3px rgba(63,95,141,.18)}
.art-drawer__thumb{
  width:100%;aspect-ratio:4/3;
  object-fit:cover;background:#e9e0cc;
  display:block;
}
.art-drawer__meta{padding:8px 10px}
.art-drawer__meta-title{font-weight:800;font-size:13px;line-height:1.2;color:#1f3552}
.art-drawer__meta-artist{font-size:11.5px;color:#5e6f86;margin-top:2px}
.art-drawer__bg-warn{
  display:inline-block;margin-left:6px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 6px;border-radius:999px;
  background:rgba(245,158,11,.18);color:#92400e;
  vertical-align:middle;
}
.art-drawer__item--bg-unsafe{opacity:.86}
[data-theme="dark"] .art-drawer__bg-warn{background:rgba(251,191,36,.16);color:#fbbf24}
.art-drawer__foot{
  padding:12px 16px;
  border-top:1px solid rgba(53,78,112,.14);
  background:rgba(255,255,255,.5);
}
.art-drawer__credits{margin:0;font-size:11.5px;color:#5e6f86;line-height:1.45}

/* Botão "🎨" pulse na primeira visita */
.topbar-toggle.has-attention::after{
  content:"";position:absolute;
  width:8px;height:8px;border-radius:999px;background:#ddb562;
  top:6px;right:6px;
  box-shadow:0 0 0 0 rgba(221,181,98,.7);
  animation:dotPulse 2s ease-in-out infinite;
}
.topbar-toggle{position:relative}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(221,181,98,.7)}
  60%{box-shadow:0 0 0 10px rgba(221,181,98,0)}
  100%{box-shadow:0 0 0 0 rgba(221,181,98,0)}
}

/* ---------- Dark mode na landing ---------- */
[data-theme="dark"]{
  --ink:#e6ecf5;
  --muted:#94a3b8;
  --line:rgba(140,170,210,.20);
  --paper:#1a2538;
  --card:rgba(28,40,60,.84);
  --shadow:0 14px 34px rgba(0,0,0,.55),0 3px 12px rgba(0,0,0,.3);
}
[data-theme="dark"] body{
  color:var(--ink);
  background:
    radial-gradient(1400px 720px at 50% -18%, rgba(70,100,150,.36), transparent 68%),
    radial-gradient(860px 470px at 8% 16%, rgba(90,72,120,.32), transparent 73%),
    linear-gradient(180deg,#0b1220 0%,#111a2c 60%,#0e1623 100%);
}
[data-theme="dark"] .vignette::before{background:radial-gradient(120% 90% at 50% 38%, rgba(0,0,0,0) 56%, rgba(0,0,0,.40) 100%)}
[data-theme="dark"] .panel,
[data-theme="dark"] .scene,
[data-theme="dark"] .card,
[data-theme="dark"] .step,
[data-theme="dark"] .qa,
[data-theme="dark"] .courseCard,
[data-theme="dark"] .demo-card,
[data-theme="dark"] .demo-sample,
[data-theme="dark"] .modal__card{
  background:rgba(28,40,60,.84);
  border-color:rgba(140,170,210,.20);
  color:var(--ink);
}
[data-theme="dark"] .heroFocusPanel,
[data-theme="dark"] .heroBadges{background:rgba(40,55,82,.7);color:#e6ecf5;border-color:rgba(180,142,76,.32)}
[data-theme="dark"] .heroBadges__value{color:#fff4d6}
[data-theme="dark"] .heroBadges__label{color:#e3c184}
[data-theme="dark"] .heroDayPlan{background:linear-gradient(135deg, rgba(28,40,60,.84), rgba(20,30,48,.84));color:var(--ink)}
[data-theme="dark"] .heroDayPlan__step{background:rgba(40,55,82,.85);color:var(--ink)}
[data-theme="dark"] .heroDayPlan__step strong{color:#cfe0fb}
[data-theme="dark"] .badge{background:linear-gradient(135deg,#3a3522,#56492a);color:#f2d89d;border-color:rgba(180,142,76,.42)}
[data-theme="dark"] .courseCard__pill span,
[data-theme="dark"] .courseCard__tag,
[data-theme="dark"] .pill{background:rgba(56,49,28,.7);border-color:rgba(170,130,68,.42);color:#f2d89d}
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="text"]{
  background:rgba(28,40,60,.7);color:var(--ink);border-color:rgba(140,170,210,.20);
}
[data-theme="dark"] input[type="email"]::placeholder,
[data-theme="dark"] input[type="password"]::placeholder,
[data-theme="dark"] input[type="text"]::placeholder{color:#7d8aa1}
[data-theme="dark"] .demo-prose{color:#cfdaee}
[data-theme="dark"] .blk-body{color:#cfdaee}
[data-theme="dark"] .blk{background:rgba(28,40,60,.92)}
[data-theme="dark"] .blk.dica      {border-color:#16a34a}
[data-theme="dark"] .blk.conceito  {border-color:#a78bfa}
[data-theme="dark"] .blk.alerta    {border-color:#fbbf24}
[data-theme="dark"] .blk.pegadinha {border-color:#f87171}
[data-theme="dark"] .blk.sintese   {border-color:#60a5fa}
[data-theme="dark"] .blk.exemplo   {border-color:#e879f9}
[data-theme="dark"] .demo-style-toggle{background:rgba(40,55,82,.7);border-color:rgba(140,170,210,.20)}
[data-theme="dark"] .demo-style-toggle button{color:#94a3b8}
[data-theme="dark"] .demo-style-toggle button.is-active{background:#0f766e;color:#fff}
[data-theme="dark"] .flashcard-front{background:linear-gradient(160deg,#1f2c44 0%,#172238 100%);color:#e6ecf5;border-color:rgba(140,170,210,.20)}
[data-theme="dark"] .demo-sample{background:rgba(28,40,60,.92);color:#e6ecf5;border-color:rgba(140,170,210,.20)}
[data-theme="dark"] .demo-sample p, [data-theme="dark"] .demo-sample blockquote{color:#cfdaee}
[data-theme="dark"] .demo-sample blockquote{background:rgba(20,30,48,.7)}
[data-theme="dark"] .modal__backdrop{background:rgba(0,0,0,.65)}
[data-theme="dark"] .topbar{background:linear-gradient(130deg, rgba(11,20,37,.96), rgba(8,14,28,.96))}
[data-theme="dark"] .footer{background:linear-gradient(130deg, rgba(11,20,37,.96), rgba(8,14,28,.96))}
[data-theme="dark"] .art-drawer__panel{background:#0f1729;color:#e6ecf5;border-left-color:rgba(140,170,210,.20)}
[data-theme="dark"] .art-drawer__head{background:rgba(28,40,60,.7);border-bottom-color:rgba(140,170,210,.18)}
[data-theme="dark"] .art-drawer__head h3{color:#f6edda}
[data-theme="dark"] .art-drawer__head .topbar-toggle{background:rgba(255,255,255,.12);color:#f6edda;border-color:rgba(255,255,255,.18)}
[data-theme="dark"] .art-drawer__hint{color:#94a3b8}
[data-theme="dark"] .art-drawer__chip{background:rgba(28,40,60,.92);color:#cfdaee;border-color:rgba(140,170,210,.20)}
[data-theme="dark"] .art-drawer__chip:hover{background:rgba(40,55,82,.92)}
[data-theme="dark"] .art-drawer__item{background:rgba(28,40,60,.92);border-color:rgba(140,170,210,.20)}
[data-theme="dark"] .art-drawer__meta-title{color:#f6edda}
[data-theme="dark"] .art-drawer__meta-artist{color:#94a3b8}
[data-theme="dark"] .art-drawer__foot{background:rgba(28,40,60,.7);border-top-color:rgba(140,170,210,.18)}
[data-theme="dark"] .art-drawer__credits{color:#94a3b8}
[data-theme="dark"] .art-drawer__cat-head{color:#f6edda}
[data-theme="dark"] .art-drawer__cat-count{background:rgba(255,255,255,.10);color:#cfdaee}
[data-theme="dark"] .opt-in{color:#cfdaee}

/* Em modo escuro também sem escurecer a pintura — só ajustamos o bg neutro atrás pra dark */
[data-theme="dark"] body[data-pintura]:not([data-pintura=""]) .bg-art{background:#0b1220}
[data-theme="dark"] body[data-pintura]:not([data-pintura=""]) .bg-art__img{filter:none}

/* Em telas com fundo escuro, links/badge ficam mais legíveis */
[data-theme="dark"] .nav a{color:rgba(248,237,218,.92)}
[data-theme="dark"] .topbar-link{color:rgba(248,237,218,.92)}

/* Reduz animação no CTA pra quem prefere */
@media (prefers-reduced-motion:reduce){
  .btn--cta-primary{animation:none}
  .topbar-toggle.has-attention::after{animation:none}
  .bg-art{transition:none}
  .art-drawer__panel{transition:none}
  .sticky-cta{transition:none}
}

/* ---------- Topbar responsivo: enxuta em mobile ---------- */
@media (max-width:760px){
  .topbar__in{
    flex-wrap:wrap;
    gap:6px;
    min-height:auto;
    padding-top:8px;padding-bottom:8px;
  }
  .brand{order:1;flex:1 1 auto;min-width:0;font-size:14px}
  .brand__text{font-size:14px}
  .topbar__actions{
    order:2;flex:0 0 auto;
    display:flex;align-items:center;gap:6px;
    flex-wrap:nowrap;
  }
  .nav{order:3;width:100%;display:flex;justify-content:space-between;gap:0;font-size:13px;padding-top:4px}
  .nav a{padding:5px 6px;font-size:13px}
  /* Em mobile esconde "Já tem conta? Entrar" no topbar — fica acessível pelo hero */
  .topbar__actions .topbar-link{display:none}
  /* CTA topbar vira só "Começar" pra caber */
  .btn--cta-topbar{
    padding:7px 11px;
    font-size:12px;
    min-height:32px;
    letter-spacing:0;
  }
  .topbar-toggle{width:32px;height:32px;font-size:14px}
  .topbar-menu{right:0;left:auto;min-width:200px}
  /* CTA no hero já é grande, não precisa do animation pulse em mobile (atrapalha) */
  .btn--cta-primary{animation:none;font-size:15px;padding:13px 18px;min-height:48px}
  /* Microcopy menor */
  .cta-microcopy{font-size:12px}
  .link-secondary{font-size:13px}
  /* Hero badges ficam mais compactas em mobile */
  .heroBadges{flex-direction:column;align-items:flex-start}
  .heroBadges__item{flex-direction:row;gap:8px;align-items:baseline;min-width:auto}
  .heroBadges__value{font-size:20px}
  .heroBadges__label{font-size:11.5px}
  /* Modal de login full-screen friendly */
  .modal__card{width:calc(100% - 24px);padding:18px}
  /* Footer empilha */
  .footer__in{flex-direction:column;align-items:flex-start;gap:14px}
  .footer__links{flex-wrap:wrap;gap:10px 14px}
  .footer__credits{align-items:flex-start;text-align:left}
}

/* Bloqueia scroll do body quando gaveta aberta */
body.has-drawer-open{overflow:hidden}

/* ============================================================================
 * GLASS PANELS V2 — fim dos retângulos chapados, vira vidro fosco discreto.
 * Pintura aparece nítida atrás, painel é só uma "lâmina" pra leitura do texto.
 * ============================================================================ */

/* Glass panel UNIVERSAL — sempre escuro, alta opacidade. Não adapta à pintura.
   Garante leitura em qualquer pintura, qualquer região.
   A pintura aparece atrás de regiões SEM panel (entre cards, bordas) — esse é o show. */
.panel{
  background:rgba(14,10,6,.66);
  border:1px solid rgba(212,168,87,.22);
  border-radius:18px;
  box-shadow:0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,237,180,.10);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
}
.panel::before{display:none}

/* Hero copy panel: respiração maior, padding generoso */
.hero__copy.panel{
  padding:28px 32px;
  border-radius:22px;
}

/* Hero badges: linha tipográfica horizontal sobre faixa escura sutil pra leitura
   garantida sobre qualquer pintura. */
.heroBadges.panel{
  background:rgba(14,10,6,.55);
  border:none;
  border-top:1px solid rgba(212,168,87,.30);
  border-bottom:1px solid rgba(212,168,87,.30);
  border-radius:0;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  padding:18px 0;
}
.heroBadges__item{
  border-right:1px solid rgba(212,168,87,.22);
  padding:0 20px;
  min-width:0;
  flex:1;
}
.heroBadges__item:last-child{border-right:none}

/* Day plan: pílulas soltas sobre a pintura, sem container externo */
.heroDayPlan.panel{
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:8px 0;
}
.heroDayPlan__step{
  background:rgba(14,10,6,.66);
  border:1px solid rgba(212,168,87,.28);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 8px 22px rgba(0,0,0,.32);
}
.heroDayPlan__step strong{color:#f7eccd}
.heroDayPlan__arrow{color:#d4a857;opacity:.85}
.heroDayPlan__title{color:#d4a857;font-style:italic;font-family:"Cormorant Garamond",serif;font-size:13px;letter-spacing:.18em}

/* Scenes (sections grandes) — UNIVERSAL escuro, mesma lógica do panel */
.scene{
  background:rgba(14,10,6,.62);
  border:1px solid rgba(212,168,87,.18);
  border-radius:24px;
  box-shadow:0 22px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,237,180,.08);
  backdrop-filter:blur(28px) saturate(1.28);
  -webkit-backdrop-filter:blur(28px) saturate(1.28);
}
.scene::before, .scene::after{display:none}

/* Cards internos — glass escuro um pouco mais discreto que panels grandes */
.card,
.courseCard,
.step,
.qa,
.demo-card{
  background:rgba(20,14,8,.55);
  border:1px solid rgba(212,168,87,.18);
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  color:#f7eccd;
}

/* Texto de cards SEMPRE creme */
.card__t, .card__p,
.courseCard__label, .courseCard__tag,
.step__t, .step__p,
.qa summary, .qa p,
.demo-prose, .demo-card h3{
  color:#f7eccd;
}
.muted, p.muted, .mini.muted{color:rgba(247,236,205,.74)}

/* Hero copy: texto SEMPRE creme */
.hero__copy h1, .hero__copy h2, .hero__copy p{color:#f7eccd}
.hero__copy p.sub{color:rgba(247,236,205,.82)}
.hero__copy strong, .hero__copy b{color:#fcf6df;font-weight:700}

/* Day plan title respira */
.heroDayPlan__title{font-size:11px;letter-spacing:.14em}

/* ============================================================================
 * TELOS UI UNIVERSAL — paleta fixa escura/dourada, independe da pintura
 * ============================================================================ */

/* Topbar nav: nav SEMPRE creme com leve text-shadow pra leitura sobre qualquer pintura */
.topbar .nav a{
  color:#f7eccd;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  letter-spacing:.005em;
}
.topbar .nav a:hover{color:#fff;background:rgba(212,168,87,.10)}
.topbar-toggle{
  background:rgba(14,10,6,.45);
  border-color:rgba(212,168,87,.30);
  color:#f7eccd;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.topbar-toggle:hover{background:rgba(14,10,6,.65);border-color:rgba(212,168,87,.55)}
.topbar-link{color:rgba(247,236,205,.85);text-shadow:0 1px 2px rgba(0,0,0,.45)}
.topbar-link:hover{color:#fff}
.topbar-menu{
  background:rgba(14,10,6,.96);
  color:#f7eccd;
  border-color:rgba(212,168,87,.30);
  box-shadow:0 18px 42px rgba(0,0,0,.55);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  /* Expandido pra acomodar o seletor de temas hierárquico */
  min-width:280px;
  max-height:80vh;
  overflow-y:auto;
}
.topbar-menu__item{color:#f7eccd}
.topbar-menu__item:hover{background:rgba(212,168,87,.14)}

/* Footer: glass escuro fixo igual topbar */
.footer{
  background:rgba(14,10,6,.62);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border-top:1px solid rgba(212,168,87,.22);
}
.footer__brand{color:#f7eccd}
.footer__t{color:#fcf6df;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:18px}
.footer__links a, .footer__credits .mini, .footer .mini.muted{color:rgba(247,236,205,.75)}
.footer__links a:hover{color:#fcf6df}

/* H1 hero: SEMPRE creme, com text-shadow pra leitura mesmo sobre regiões claras */
h1#heroTitle{
  color:#fcf6df;
  text-shadow:0 2px 8px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.6);
}

/* Italic em "futuro" (telos = propósito/destino = futuro) — toque editorial Cartier */
h1#heroTitle .h1-word:last-child{
  font-style:italic;
  color:#e8c97a;
}

/* H2 sections: SEMPRE creme */
.section__head h2{color:#fcf6df}

/* Hero badges values: creme + italic editorial (já era italic, mantém) */
.heroBadges__value{color:#fcf6df;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.heroBadges__label{color:rgba(247,236,205,.75)}

/* Course pills: dourado discreto */
.courseCard__pill span,.courseCard__tag{
  background:rgba(14,10,6,.5);
  border-color:rgba(212,168,87,.30);
  color:#e8c97a;
}

/* Divisores dourados Cartier-style entre seções principais */
.section + .section{
  position:relative;
}
.section + .section::before{
  content:"";
  position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:min(360px, 60%);height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,168,87,.45), transparent);
  pointer-events:none;
}

/* Drop cap no parágrafo de subtitle do hero (touch editorial Cartier) */
.hero__copy .sub:first-of-type::first-letter{
  font-family:"Cormorant Garamond",serif;
  font-size:2.6em;
  font-weight:600;
  font-style:italic;
  float:left;
  line-height:.9;
  padding:6px 8px 0 0;
  color:#e8c97a;
}

/* Hero copy padding e espaços maiores (vibe luxo) */
.hero__copy.panel{
  padding:36px 38px 32px;
}
@media (max-width:760px){
  .hero__copy.panel{padding:24px 22px}
}

/* Section spacing maior pra dar respiro (Cartier usa MUITO espaço) */
.section{padding:48px 0 88px}
@media (max-width:760px){.section{padding:36px 0 64px}}

/* Inputs sobre fundos escuros (form de login, lead) — fundo escuro também */
input[type="email"], input[type="password"], input[type="text"]{
  background:rgba(20,14,8,.55);
  color:#f7eccd;
  border-color:rgba(212,168,87,.30);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="text"]::placeholder{color:rgba(247,236,205,.45)}
input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus{
  outline:none;
  border-color:#d4a857;
  box-shadow:0 0 0 3px rgba(212,168,87,.20);
}

/* Caixas semânticas (dica/conceito/etc) — manter cores semânticas mas com fundo dark */
.demo-blks .blk{
  background:rgba(14,10,6,.6);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.demo-blks .blk-body{color:#f7eccd}

/* Sample com 3 estilos: fundo dark consistente */
.demo-sample{
  background:rgba(14,10,6,.6);
  border-color:rgba(212,168,87,.22);
  color:#f7eccd;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.demo-sample h3{color:#fcf6df}
.demo-sample p, .demo-sample blockquote{color:#f7eccd}
.demo-sample blockquote{background:rgba(212,168,87,.08);border-left-color:#d4a857}

/* Demo style toggle */
.demo-style-toggle{
  background:rgba(14,10,6,.55);
  border-color:rgba(212,168,87,.28);
}
.demo-style-toggle__label{color:#d4a857}
.demo-style-toggle button{color:rgba(247,236,205,.7)}
.demo-style-toggle button:hover{color:#fcf6df}
.demo-style-toggle button.is-active{background:#d4a857;color:#1a1410}

/* Flashcard front sobre dark */
.flashcard-front{
  background:rgba(20,14,8,.85);
  color:#f7eccd;
  border-color:rgba(212,168,87,.25);
}
.flashcard-front .flashcard-kicker{color:#d4a857}
.flashcard-front .flashcard-body{color:#f7eccd}
.flashcard-front .flashcard-hint{color:rgba(247,236,205,.6)}

/* Sticky CTA mobile: dourado pra alto contraste */
.sticky-cta{
  background:linear-gradient(135deg,#fcf6df,#e8c97a);
  color:#1a1410;
  box-shadow:0 18px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(212,168,87,.4);
}
.sticky-cta__sub{color:rgba(26,20,16,.7)}

/* ============================================================================
 * ALIEN — pacote de microdetalhes premium (gateado por data-perf=high)
 * ============================================================================ */

/* Tokens de marca */
:root{
  --ease-telos:        cubic-bezier(.22,.61,.36,1);
  --ease-telos-soft:   cubic-bezier(.4,0,.2,1);
  --ease-telos-bounce: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:  220ms;
  --dur-base:  380ms;
  --dur-slow:  720ms;
  --dur-grand: 1100ms;
  --gold-telos: #d4a857;
}

/* Aplica easing telos nas transições principais (não força *) */
.btn, .topbar-toggle, .topbar-link, .topbar-menu, .nav a,
.courseCard, .card, .step, .qa, .demo-card, .panel, .scene,
.heroDayPlan__step, .art-drawer__item, .art-drawer__chip,
.flashcard, .demo-style-toggle button, .heroBadges__item,
.brand__logo{
  transition-timing-function: var(--ease-telos);
  transition-duration: var(--dur-base);
}
.btn{transition-property:transform,box-shadow,background,border-color,color,filter}
.courseCard, .card{transition-property:transform,box-shadow,border-color,background,filter}

/* Cursor aura SUBSTITUI o cursor nativo (não fica em cima dele) */
@media (hover: hover) and (pointer: fine){
  html[data-perf="high"]:not([data-motion="off"]),
  html[data-perf="mid"]:not([data-motion="off"]){
    cursor: none;
  }
  html[data-perf="high"]:not([data-motion="off"]) *,
  html[data-perf="mid"]:not([data-motion="off"]) *{
    cursor: none !important;
  }
  /* Em campos de input texto, restaura o caret nativo pra editar */
  html[data-perf="high"] input[type="text"],
  html[data-perf="high"] input[type="email"],
  html[data-perf="high"] input[type="password"],
  html[data-perf="high"] textarea,
  html[data-perf="mid"] input[type="text"],
  html[data-perf="mid"] input[type="email"],
  html[data-perf="mid"] input[type="password"],
  html[data-perf="mid"] textarea{
    cursor: text !important;
  }
}
.cursor-aura{
  position:fixed;top:0;left:0;
  width:22px;height:22px;border-radius:999px;
  border:1.5px solid var(--gold-telos);
  background:radial-gradient(circle, rgba(212,168,87,.28), rgba(212,168,87,0) 70%);
  pointer-events:none;z-index:9999;
  mix-blend-mode:plus-lighter;
  transition:width .28s var(--ease-telos), height .28s var(--ease-telos),
             border-color .28s var(--ease-telos), opacity .25s ease, background .28s ease;
  will-change:transform;
  opacity:1;
}
.cursor-aura--on{
  width:48px;height:48px;
  border-color:#fcf6df;
  background:radial-gradient(circle, rgba(252,246,223,.45), rgba(212,168,87,.18) 60%, rgba(212,168,87,0) 80%);
}
.cursor-aura--out{opacity:0}
[data-perf="low"] .cursor-aura, [data-perf="low"] .cursor-aura--on{display:none}
[data-motion="off"] .cursor-aura{display:none}
@media (hover: none){.cursor-aura{display:none}}

/* --- Modos do cursor (cycle no kebab "🖱️ Cursor: ...") --------------------
   data-cursor="aura"  — círculo dourado glow grande (default)
   data-cursor="ring"  — apenas anel dourado fino, sem fill
   data-cursor="dot"   — ponto dourado pequeno acompanhando o cursor nativo
   data-cursor="native"— cursor nativo do SO, sem overlay
   ----------------------------------------------------------------------------- */
/* RING: aura sem fill, só borda */
html[data-cursor="ring"] .cursor-aura{
  background:transparent;
  width:26px;height:26px;
  border-width:1.5px;
}
html[data-cursor="ring"] .cursor-aura--on{
  width:46px;height:46px;
  background:transparent;
  border-color:#fcf6df;
}
/* DOT: ponto pequeno, sem mix-blend, junto com cursor nativo */
html[data-cursor="dot"] .cursor-aura{
  width:9px;height:9px;
  border:none;
  background:radial-gradient(circle, #fcf6df 0%, var(--gold-telos) 55%, rgba(212,168,87,0) 100%);
  mix-blend-mode:normal;
  box-shadow:0 0 8px rgba(212,168,87,.7);
}
html[data-cursor="dot"] .cursor-aura--on{
  width:16px;height:16px;
  box-shadow:0 0 14px rgba(252,246,223,.85);
}
@media (hover: hover) and (pointer: fine){
  html[data-cursor="dot"][data-perf="high"], html[data-cursor="dot"][data-perf="mid"]{ cursor: auto; }
  html[data-cursor="dot"][data-perf="high"] *, html[data-cursor="dot"][data-perf="mid"] *{ cursor: auto !important; }
}
/* NATIVE: cursor padrão do SO, esconde overlay */
html[data-cursor="native"] .cursor-aura{ display:none !important; }
@media (hover: hover) and (pointer: fine){
  html[data-cursor="native"][data-perf="high"], html[data-cursor="native"][data-perf="mid"]{ cursor: auto !important; }
  html[data-cursor="native"][data-perf="high"] *, html[data-cursor="native"][data-perf="mid"] *{ cursor: auto !important; }
}

/* --- 10 cursores TEMÁTICOS (pareados a temas no temas.json) ----------------
   Cada modo redesenha o .cursor-aura via pseudo-elementos + CSS animations.
   Mantém posição via translate3d já aplicado pelo JS (alien.js) — não
   precisa tocar no transform. Apenas troca aparência. */

/* FADA — vagalume pequeno com glow pulsante e cauda de partículas */
html[data-cursor="fada"] .cursor-aura{
  width:7px;height:7px;border:none;
  background:radial-gradient(circle, #e8ffd4 0%, #a8e870 35%, rgba(120,220,80,.2) 65%, transparent 100%);
  box-shadow:0 0 14px rgba(168,232,112,.85), 0 0 28px rgba(120,200,80,.4);
  mix-blend-mode:normal;
  animation:cursorFadaPulse 1.6s ease-in-out infinite;
}
html[data-cursor="fada"] .cursor-aura::before,
html[data-cursor="fada"] .cursor-aura::after{
  content:"";position:absolute;top:50%;left:50%;width:3px;height:3px;border-radius:999px;
  background:radial-gradient(circle, rgba(232,255,212,.85), transparent 70%);
  pointer-events:none;
}
html[data-cursor="fada"] .cursor-aura::before{transform:translate(-180%, -60%);opacity:.55;animation:cursorFadaTrail 0.9s ease-in-out infinite alternate}
html[data-cursor="fada"] .cursor-aura::after{transform:translate(-280%, -100%);opacity:.35;animation:cursorFadaTrail 1.2s ease-in-out infinite alternate-reverse}
html[data-cursor="fada"] .cursor-aura--on{width:13px;height:13px;box-shadow:0 0 22px rgba(168,232,112,1), 0 0 44px rgba(120,200,80,.5)}
@keyframes cursorFadaPulse{
  0%,100%{box-shadow:0 0 14px rgba(168,232,112,.85), 0 0 28px rgba(120,200,80,.4)}
  50%   {box-shadow:0 0 20px rgba(232,255,212,1),    0 0 40px rgba(120,200,80,.65)}
}
@keyframes cursorFadaTrail{
  0%{opacity:.7}
  100%{opacity:.15;transform:translate(-260%, -80%)}
}

/* PENA — caractere pena ✒ rotacionado, com tinta dourada */
html[data-cursor="pena"] .cursor-aura{
  width:22px;height:22px;background:transparent;border:none;border-radius:0;
  mix-blend-mode:normal;
}
html[data-cursor="pena"] .cursor-aura::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M3 21 L21 3 M14 4 C18 4 20 6 20 10 L8 22 C4 22 2 20 2 16 Z' stroke='%23d4a857' stroke-width='1.6' fill='%23fcf6df' fill-opacity='.55' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:contain;background-repeat:no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
  transform:rotate(-12deg);
}
html[data-cursor="pena"] .cursor-aura--on{width:30px;height:30px}

/* ENGRENAGEM — gira continuamente, cor latão */
html[data-cursor="engrenagem"] .cursor-aura{
  width:22px;height:22px;background:transparent;border:none;
  mix-blend-mode:normal;
}
html[data-cursor="engrenagem"] .cursor-aura::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L13.5 4.5 L16 3.5 L16.5 6 L19 6.5 L18 9 L20 11 L17.5 12 L18 14.5 L15.5 14.5 L14.5 17 L12 16 L9.5 17 L8.5 14.5 L6 14.5 L6.5 12 L4 11 L6 9 L5 6.5 L7.5 6 L8 3.5 L10.5 4.5 Z' fill='%23d4a857' stroke='%237a5230' stroke-width='1'/><circle cx='12' cy='10.5' r='3' fill='%237a5230'/></svg>");
  background-size:contain;background-repeat:no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
  animation:cursorEngrenagemSpin 5s linear infinite;
}
html[data-cursor="engrenagem"] .cursor-aura--on{width:32px;height:32px}
html[data-cursor="engrenagem"] .cursor-aura--on::before{animation-duration:1.5s}
@keyframes cursorEngrenagemSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* PÉTALA — flutua e gira suavemente */
html[data-cursor="petala"] .cursor-aura{
  width:20px;height:20px;background:transparent;border:none;
  mix-blend-mode:normal;
}
html[data-cursor="petala"] .cursor-aura::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 C16 6 17 12 12 22 C7 12 8 6 12 2 Z' fill='%23f6c8d4' stroke='%23b96e8a' stroke-width='.8'/><path d='M12 4 C13.5 8 14 13 12 19' stroke='%23b96e8a' stroke-width='.6' fill='none'/></svg>");
  background-size:contain;background-repeat:no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
  animation:cursorPetalaFloat 2.4s ease-in-out infinite;
}
html[data-cursor="petala"] .cursor-aura--on{width:28px;height:28px}
@keyframes cursorPetalaFloat{
  0%,100%{transform:rotate(-10deg) translateY(0)}
  50%   {transform:rotate(15deg)  translateY(-2px)}
}

/* ESTRELA CADENTE — ponto brilhante com cauda */
html[data-cursor="estrela-cadente"] .cursor-aura{
  width:6px;height:6px;border:none;
  background:radial-gradient(circle, #fff8dc 0%, #ffe28a 40%, rgba(212,168,87,.4) 80%, transparent 100%);
  box-shadow:0 0 12px rgba(255,235,150,.9), 0 0 24px rgba(212,168,87,.5);
  mix-blend-mode:plus-lighter;
}
html[data-cursor="estrela-cadente"] .cursor-aura::before{
  content:"";position:absolute;top:50%;left:50%;
  width:32px;height:2px;
  background:linear-gradient(to left, rgba(255,235,150,.85), rgba(212,168,87,.3) 60%, transparent 100%);
  transform-origin:0 50%;
  transform:translate(0, -50%) rotate(35deg);
  border-radius:999px;
  filter:blur(.5px);
  pointer-events:none;
}
html[data-cursor="estrela-cadente"] .cursor-aura--on{
  width:11px;height:11px;
  box-shadow:0 0 20px rgba(255,248,220,1), 0 0 40px rgba(212,168,87,.7);
}
html[data-cursor="estrela-cadente"] .cursor-aura--on::before{width:48px}

/* RUNA — caractere rúnico ᛟ flutuante */
html[data-cursor="runa"] .cursor-aura{
  width:auto;height:auto;background:transparent;border:none;
  font-family:"Cormorant Garamond", serif;
  color:#c9b48a;font-size:22px;line-height:1;
  text-shadow:0 0 8px rgba(212,168,87,.7), 0 0 18px rgba(212,168,87,.4);
  mix-blend-mode:normal;
  animation:cursorRunaBreath 2.5s ease-in-out infinite;
}
html[data-cursor="runa"] .cursor-aura::before{
  content:"ᛟ";display:block;
}
html[data-cursor="runa"] .cursor-aura--on{font-size:30px}
@keyframes cursorRunaBreath{
  0%,100%{filter:brightness(1)}
  50%   {filter:brightness(1.35)}
}

/* ASTERISCO NEON — glitch magenta/ciano */
html[data-cursor="asterisco-neon"] .cursor-aura{
  width:auto;height:auto;background:transparent;border:none;
  font-family:"Inter", monospace;
  color:#fff;font-size:18px;line-height:1;font-weight:900;
  mix-blend-mode:normal;
  animation:cursorAsteriscoGlitch 0.9s steps(4, end) infinite;
}
html[data-cursor="asterisco-neon"] .cursor-aura::before{
  content:"✦";display:block;
  text-shadow:
    2px 0 0 rgba(255,40,150,.85),
    -2px 0 0 rgba(40,220,255,.85),
    0 0 12px rgba(255,255,255,.6);
}
html[data-cursor="asterisco-neon"] .cursor-aura--on{font-size:26px}
@keyframes cursorAsteriscoGlitch{
  0%  {transform:translate(-50%, -50%)        rotate(0deg)}
  25% {transform:translate(calc(-50% + 1px), -50%) rotate(0deg)}
  50% {transform:translate(calc(-50% - 1px), calc(-50% + 1px)) rotate(0deg)}
  75% {transform:translate(-50%, calc(-50% - 1px)) rotate(0deg)}
}

/* MÁSCARA KITSUNE — silhueta de raposa em vermelho-tradicional */
html[data-cursor="mascara-kitsune"] .cursor-aura{
  width:24px;height:24px;background:transparent;border:none;
  mix-blend-mode:normal;
}
html[data-cursor="mascara-kitsune"] .cursor-aura::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22 C5 18 3 12 4 6 L8 4 L10 8 L12 7 L14 8 L16 4 L20 6 C21 12 19 18 12 22 Z' fill='%23f5efe1' stroke='%23a82a26' stroke-width='1.2'/><circle cx='9' cy='12' r='1.3' fill='%23a82a26'/><circle cx='15' cy='12' r='1.3' fill='%23a82a26'/><path d='M11 16 L12 17 L13 16' stroke='%23a82a26' stroke-width='1' fill='none' stroke-linecap='round'/></svg>");
  background-size:contain;background-repeat:no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
html[data-cursor="mascara-kitsune"] .cursor-aura--on{width:32px;height:32px}

/* OLHO DE HÓRUS — em dourado egípcio */
html[data-cursor="olho-horus"] .cursor-aura{
  width:26px;height:18px;background:transparent;border:none;border-radius:0;
  mix-blend-mode:normal;
}
html[data-cursor="olho-horus"] .cursor-aura::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18'><path d='M2 9 C8 3 18 3 24 9 C18 15 8 15 2 9 Z' fill='none' stroke='%23d4a857' stroke-width='1.4'/><circle cx='13' cy='9' r='3' fill='%23d4a857'/><path d='M13 13 L11 16 M16 12 L20 17 M24 9 L27 9' stroke='%23d4a857' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-size:contain;background-repeat:no-repeat;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
html[data-cursor="olho-horus"] .cursor-aura--on{width:34px;height:24px}

/* PIXEL ARROW — seta 16-bit em quadradinhos, sem antialias */
html[data-cursor="pixel-arrow"] .cursor-aura{
  width:18px;height:18px;background:transparent;border:none;
  mix-blend-mode:normal;
  image-rendering:pixelated;
}
html[data-cursor="pixel-arrow"] .cursor-aura::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'><rect x='0' y='0' width='2' height='2' fill='%23fff'/><rect x='0' y='2' width='2' height='2' fill='%23fff'/><rect x='2' y='2' width='2' height='2' fill='%23fff'/><rect x='0' y='4' width='2' height='2' fill='%23fff'/><rect x='2' y='4' width='2' height='2' fill='%23fff'/><rect x='4' y='4' width='2' height='2' fill='%23fff'/><rect x='0' y='6' width='2' height='2' fill='%23fff'/><rect x='2' y='6' width='2' height='2' fill='%23fff'/><rect x='4' y='6' width='2' height='2' fill='%23fff'/><rect x='6' y='6' width='2' height='2' fill='%23fff'/><rect x='0' y='8' width='2' height='2' fill='%23fff'/><rect x='2' y='8' width='2' height='2' fill='%23fff'/><rect x='0' y='0' width='12' height='12' fill='none' stroke='%23000' stroke-width='.4' shape-rendering='crispEdges'/></svg>");
  background-size:contain;background-repeat:no-repeat;
  image-rendering:pixelated;
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.7));
}
html[data-cursor="pixel-arrow"] .cursor-aura--on{width:26px;height:26px}

/* ----------------------------------------------------------------------------
 * Variáveis CSS por TEMA — aplicadas via html[data-tema="..."]
 * Default --paint-accent puxa de --gold-telos (visual atual mantido).
 * Quando theme-picker seta tema, sobrescreve inline via style.setProperty.
 * ---------------------------------------------------------------------------- */
:root{
  --paint-accent: var(--gold-telos, #d4a857);
  --paint-display-font: "Cormorant Garamond", serif;
}
/* Usa o accent do tema em alguns elementos sutis pra dar sensação de identidade.
   Não muda formato/grid — só cor de detalhes pequenos. */
html[data-tema] .hl-termo_central,
html[data-tema] .hl-definicao{
  /* Garante que o highlight respeite o accent do tema, caso o tema use cor não-dourada */
  /* (sem !important — só refinamento) */
}
html[data-tema] .topbar-toggle{
  border-color:color-mix(in srgb, var(--paint-accent) 32%, transparent);
}
html[data-tema] .topbar-toggle:hover{
  border-color:color-mix(in srgb, var(--paint-accent) 62%, transparent);
}

/* Letter reveal no H1 — split por <span> via JS, anima por --ci (char index) */
#heroTitle{overflow:visible}
#heroTitle .h1-word{display:inline-block;white-space:nowrap}
#heroTitle .h1-char{
  display:inline-block;
  opacity:0;
  transform:translateY(.5em);
  transition:opacity var(--dur-slow) var(--ease-telos),
             transform var(--dur-slow) var(--ease-telos);
  transition-delay:calc(var(--ci, 0) * 24ms + 80ms);
}
#heroTitle.h1-reveal-on .h1-char{opacity:1;transform:translateY(0)}
[data-perf="low"] #heroTitle .h1-char{opacity:1;transform:none;transition:none}

/* Reveal de seções — refinado: fade + slight scale + un-blur */
.reveal{
  opacity:0;
  transform:translateY(18px) scale(.985);
  filter:blur(6px);
  transition:opacity var(--dur-slow) var(--ease-telos),
             transform var(--dur-slow) var(--ease-telos),
             filter var(--dur-slow) var(--ease-telos);
  will-change:opacity,transform,filter;
}
.reveal.on{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
[data-perf="low"] .reveal{opacity:1;transform:none;filter:none;transition:none}

/* Hover lift sutil em cards (combinado com magnético do JS) */
.courseCard:hover{
  border-color:rgba(212,168,87,.45);
  box-shadow:0 16px 36px rgba(0,0,0,.22), 0 0 0 1px rgba(212,168,87,.20) inset;
}
body[data-surface="light"] .courseCard:hover{
  box-shadow:0 16px 36px rgba(20,14,8,.18), 0 0 0 1px rgba(212,168,87,.32) inset;
}

/* Botão CTA primary com shimmer dourado em hover */
.btn--cta-primary{
  position:relative;
  overflow:hidden;
}
.btn--cta-primary::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,237,180,.28) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform 1.1s var(--ease-telos);
  pointer-events:none;
}
.btn--cta-primary:hover::after{transform:translateX(100%)}
[data-perf="low"] .btn--cta-primary::after{display:none}

/* View Transitions API — fade suave entre estados de pintura */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:var(--dur-slow);
  animation-timing-function:var(--ease-telos);
}
::view-transition-old(root){animation-name:vt-fade-out}
::view-transition-new(root){animation-name:vt-fade-in}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}

/* Glyph dourado nos hovers de link da nav */
.nav a, .topbar-link, .footer__links a, .qa summary{
  position:relative;
}
.nav a::after, .footer__links a::after{
  content:"";
  position:absolute;
  left:50%;bottom:2px;
  width:0;height:1px;
  background:var(--gold-telos);
  transition:width var(--dur-base) var(--ease-telos), left var(--dur-base) var(--ease-telos);
}
.nav a:hover::after, .footer__links a:hover::after{
  width:80%;left:10%;
}
[data-perf="low"] .nav a::after, [data-perf="low"] .footer__links a::after{display:none}

/* Numerais editoriais nos hero badges (italic + serif maior, vibe Cartier) */
.heroBadges__value{
  font-style:italic;
  font-feature-settings: "lnum", "tnum";
}

/* Loading state das imagens de pintura — pulse sutil enquanto carrega */
.bg-art__img:not([src]){opacity:0}
.bg-art__img{transition:opacity var(--dur-slow) var(--ease-telos)}

/* Foco com glyph dourado (acessibilidade premium) */
*:focus-visible{
  outline:2px solid var(--gold-telos);
  outline-offset:3px;
  border-radius:6px;
}

/* Preferência de movimento reduzido — força tudo estático */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .cursor-aura{display:none}
  .reveal{opacity:1;transform:none;filter:none}
  #heroTitle .h1-char{opacity:1;transform:none}
}


/* ============================================================================
 * TELOS BRAND — logo + topbar/footer parchment-frosted + glow adaptativo
 * ============================================================================ */

/* Topbar com sombra sutil dark no topo — garante leitura do logo/nav em qualquer pintura,
   sem chapar como "card" (gradient transparente embaixo, pintura aparece). */
.topbar{
  background:linear-gradient(180deg, rgba(14,10,6,.55) 0%, rgba(14,10,6,.30) 60%, rgba(14,10,6,0) 100%);
  backdrop-filter:blur(5px) saturate(1.08);
  -webkit-backdrop-filter:blur(5px) saturate(1.08);
  border-bottom:none;
  box-shadow:none;
}
.topbar::before, .topbar::after{display:none}
.topbar__in{min-height:64px;padding-top:8px;padding-bottom:8px}

/* Hero ganha mais respiro do topo pra que a topbar fique SOBRE a pintura,
   não sobre o panel branco do hero (que faria o logo claro sumir em fundo claro). */
.hero{padding-top:60px}
@media (max-width:760px){
  .hero{padding-top:36px}
}

/* Brand: logo telos como imagem, presença forte (vibe selo joalheria) */
.brand{display:inline-flex;align-items:center;gap:0;text-decoration:none;line-height:0}
.brand picture{display:inline-block;line-height:0}
/* Container que sobrepõe versão escura + clara pra animação shimmer */
.brand__logos{
  position:relative;
  display:inline-block;
  height:96px;
  line-height:0;
  transition:transform .12s ease;
}
.brand__logos--footer{height:62px}
.brand:hover .brand__logos{transform:scale(1.03)}
.brand__logo{
  display:block;
  height:96px;width:auto;
  transition:filter .25s ease;
}
.brand__logo--footer{height:62px;opacity:.92}
/* Versão clara fica em cima da escura, alternam suavemente via opacity */
.brand__logo--dark{
  position:relative;
  animation: telosShimmerDark 9s ease-in-out infinite;
}
.brand__logo--light{
  position:absolute;
  top:0;left:0;
  animation: telosShimmerLight 9s ease-in-out infinite;
}
@keyframes telosShimmerDark{
  0%, 100% { opacity: 1 }
  50%      { opacity: 0 }
}
@keyframes telosShimmerLight{
  0%, 100% { opacity: 0 }
  50%      { opacity: 1 }
}
@media (prefers-reduced-motion: reduce){
  .brand__logo--dark, .brand__logo--light{ animation: none }
  .brand__logo--light{ opacity: 0 }
  .brand__logo--dark{ opacity: 1 }
}

/* ----------------------------------------------------------------------------
 * Adaptação por SURFACE (luma do fundo) — calculada em JS, aplicada via
 * body[data-surface="light"|"dark"]. Define cor de texto/borda/halo de
 * elementos que ficam DIRETAMENTE sobre a pintura (topbar/footer).
 * ---------------------------------------------------------------------------- */

/* Default (sem pintura ou surface desconhecida): texto escuro, halo escuro */
:root{
  --surface-ink: #1a1410;
  --surface-ink-soft: rgba(20,14,5,.74);
  --surface-toggle-bg: rgba(20,14,5,.10);
  --surface-toggle-bg-hover: rgba(20,14,5,.18);
  --surface-toggle-border: rgba(20,14,5,.22);
  --surface-divider: rgba(20,14,5,.16);
  --logo-filter: drop-shadow(0 1px 2px rgba(20,14,5,.22));
}
body[data-surface="light"]{
  --surface-ink: #1a1410;
  --surface-ink-soft: rgba(20,14,5,.74);
  --surface-toggle-bg: rgba(20,14,5,.08);
  --surface-toggle-bg-hover: rgba(20,14,5,.16);
  --surface-toggle-border: rgba(20,14,5,.18);
  --surface-divider: rgba(20,14,5,.14);
  --logo-filter: drop-shadow(0 1px 2px rgba(20,14,5,.22));
}
body[data-surface="dark"]{
  --surface-ink: #f7eccd;
  --surface-ink-soft: rgba(247,236,205,.82);
  --surface-toggle-bg: rgba(247,236,205,.10);
  --surface-toggle-bg-hover: rgba(247,236,205,.20);
  --surface-toggle-border: rgba(247,236,205,.20);
  --surface-divider: rgba(247,236,205,.16);
  --logo-filter: drop-shadow(0 0 14px rgba(255,250,238,.7)) drop-shadow(0 0 28px rgba(255,237,180,.35)) drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
/* No tema escuro forçado, surface fica dark independente da pintura */
[data-theme="dark"] body{
  --surface-ink: #f7eccd;
  --surface-ink-soft: rgba(247,236,205,.82);
  --surface-toggle-bg: rgba(247,236,205,.10);
  --surface-toggle-bg-hover: rgba(247,236,205,.20);
  --surface-toggle-border: rgba(247,236,205,.20);
  --surface-divider: rgba(247,236,205,.16);
  --logo-filter: drop-shadow(0 0 14px rgba(255,250,238,.7)) drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* Logo: glow duplo (dourado sutil + sombra escura forte) garante leitura
   sobre QUALQUER pintura (claras ou escuras), mantendo aparência de "selo dourado". */
.brand__logo{
  filter:
    drop-shadow(0 0 12px rgba(0,0,0,.55))
    drop-shadow(0 0 24px rgba(212,168,87,.25))
    drop-shadow(0 2px 4px rgba(0,0,0,.4));
}

/* Nav e ações da topbar usam a surface var */
.topbar .nav a{color:var(--surface-ink);text-shadow:none}
.topbar .nav a:hover{background:rgba(212,168,87,.14);color:var(--surface-ink)}
/* Toggles: glass DARK + borda gold sutil (vibe selo joalheria) — funciona universal
   sobre qualquer pintura, sem depender de --surface-* (que misturava creme com
   pintura borrada e dava aspecto acinzentado feio). */
.topbar-toggle{
  background:rgba(18,12,6,.62);
  border:1px solid rgba(212,168,87,.32);
  color:#f7eccd;
  backdrop-filter:blur(10px) saturate(1.18);
  -webkit-backdrop-filter:blur(10px) saturate(1.18);
  box-shadow:0 4px 14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,235,176,.08);
}
.topbar-toggle:hover{
  background:rgba(26,18,8,.82);
  border-color:rgba(212,168,87,.62);
  box-shadow:0 6px 18px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,235,176,.14);
}
.topbar-link{color:var(--surface-ink-soft)}
.topbar-link:hover{color:var(--surface-ink)}
/* topbar-menu (kebab dropdown) precisa de fundo opaco pra leitura — ele FLUTUA, não é parte da topbar */
.topbar-menu{
  background:rgba(28,20,12,.96);color:#f7eccd;border-color:rgba(247,236,205,.18);
  box-shadow:0 14px 36px rgba(0,0,0,.5);
}
.topbar-menu__item{color:#f7eccd}
.topbar-menu__item:hover{background:rgba(247,236,205,.10)}
body[data-surface="light"] .topbar-menu{
  background:rgba(248,242,228,.98);color:#1a1410;border-color:rgba(20,14,5,.20);
  box-shadow:0 14px 36px rgba(20,14,5,.22);
}
body[data-surface="light"] .topbar-menu__item{color:#1a1410}
body[data-surface="light"] .topbar-menu__item:hover{background:rgba(20,14,5,.08)}

/* Footer transparente (mesma lógica da topbar) */
.footer{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-top:1px solid var(--surface-divider);
  box-shadow:none;
}
.footer::before{display:none}
.footer__brand{align-items:center;gap:14px;color:var(--surface-ink)}
.footer__t{color:var(--surface-ink);font-family:"Cormorant Garamond",serif;font-size:18px;font-weight:600;letter-spacing:.005em;text-transform:lowercase;font-style:italic}
.footer__links a, .footer__credits .mini, .footer .mini.muted{color:var(--surface-ink-soft)}
.footer__links a:hover{color:var(--surface-ink)}

/* Mobile: logo um pouco menor + topbar mais compacta */
@media (max-width:760px){
  .brand__logo{height:72px}
  .topbar__in{min-height:84px}
}