/* MYRA — A Anatomia da Face · pele: prancha de atlas (marfim + carmim) */

:root{
  --paper:#f4ecdd;
  --paper-deep:#ece1cc;
  --ink:#2b2015;
  --carmine:#8e2434;
  --sepia:#8a7660;
  --line:rgba(43,32,21,.18);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,Helvetica,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

.kicker{
  font-family:var(--sans);
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--carmine);
}

/* ── Nav ─────────────────────────────── */
#nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem 2.4rem;
  transition:transform .45s cubic-bezier(.4,0,.2,1),background .3s;
  background:linear-gradient(to bottom,rgba(244,236,221,.92),rgba(244,236,221,0));
}
#nav.nav-hidden{transform:translateY(-110%)}
.nav-mark{
  font-family:var(--serif);font-weight:600;font-size:1.35rem;
  letter-spacing:.42em;text-decoration:none;color:var(--ink);
}
.nav-links{display:flex;gap:2.2rem;align-items:center}
.nav-links a{
  font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);opacity:.75;transition:opacity .25s;
}
.nav-links a:hover{opacity:1}
.nav-links a.nav-cta{
  color:var(--carmine);opacity:1;
  border-bottom:1px solid var(--carmine);padding-bottom:2px;
}

/* ── Hero ─────────────────────────────── */
.hero{
  position:relative;height:100vh;height:100svh;
  display:flex;align-items:center;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(244,236,221,.94) 0%,rgba(244,236,221,.72) 34%,rgba(244,236,221,0) 62%);
}
.hero-inner{position:relative;z-index:2;padding:0 6vw;max-width:60ch}
.hero-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(4rem,13vw,11rem);
  letter-spacing:.14em;line-height:.95;
  margin:1.2rem 0 1.4rem -6px;
  white-space:nowrap;
}
.hero-title .lt{display:inline-block;opacity:0;transform:translateY(.28em)}
.hero-sub{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.6rem);
  color:var(--ink);opacity:0;
}
.scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sepia);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;z-index:2;
}
.scroll-hint span{
  width:1px;height:44px;background:var(--sepia);display:block;
  animation:hint 2.4s ease-in-out infinite;transform-origin:top;
}
@keyframes hint{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── Capítulos ────────────────────────── */
.cap{
  position:relative;height:100vh;height:100svh;
  display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);
  align-items:center;overflow:hidden;
}
.cap:nth-child(even){grid-template-columns:minmax(0,58%) minmax(0,42%)}
.cap:nth-child(even) .cap-media{order:-1}
.cap-texto{padding:0 5vw;position:relative;z-index:2}
.cap-num{
  font-family:var(--serif);font-size:clamp(4rem,8vw,7rem);font-weight:400;
  color:transparent;-webkit-text-stroke:1px var(--carmine);
  line-height:1;opacity:.85;
}
.cap-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.2rem,4.6vw,3.8rem);
  line-height:1.05;margin:.8rem 0 1.2rem;
}
.cap-frase{
  font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.7;
  color:var(--ink);max-width:34ch;
}
.cap-legenda{
  margin-top:2.2rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sepia);
  display:flex;gap:1.6rem;flex-wrap:wrap;
}
.cap-media{height:78vh;padding:0 3vw;display:flex;align-items:center}
.cap-media img{
  width:100%;height:100%;object-fit:cover;
  border:1px solid var(--line);
  box-shadow:0 30px 80px -30px rgba(43,32,21,.35);
}

/* ── O Curso ──────────────────────────── */
.curso{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:16vh 6vw;background:var(--paper-deep);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.curso-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.4rem,6vw,5rem);line-height:1.08;margin:1.4rem 0 3rem;
}
.curso-fatos{display:flex;gap:4rem;flex-wrap:wrap;margin-bottom:3rem}
.fato strong{
  font-family:var(--serif);font-size:clamp(2.6rem,5vw,4rem);font-weight:500;
  color:var(--carmine);display:block;line-height:1;
}
.fato span{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sepia)}
.curso-texto{max-width:62ch;font-size:1.05rem}
.curso-docentes{
  margin-top:2.6rem;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sepia);
}

/* ── CTA ─────────────────────────────── */
.cta{
  min-height:88vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:14vh 6vw;
}
.cta-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.6rem,7vw,5.6rem);line-height:1.06;margin:1.4rem 0 3rem;
}
.cta-btn{
  display:inline-block;
  font-size:.75rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--paper);background:var(--carmine);
  padding:1.35rem 3.2rem;text-decoration:none;
  transition:background .3s,transform .3s;
}
.cta-btn:hover{background:#6f1a27;transform:translateY(-2px)}
.cta-nota{margin-top:1.6rem;font-family:var(--serif);font-style:italic;color:var(--sepia)}

footer{
  display:flex;justify-content:space-between;padding:2rem 2.4rem;
  border-top:1px solid var(--line);
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--sepia);
}

/* ── Mobile ───────────────────────────── */
@media (max-width:820px){
  .nav-links a:not(.nav-cta){display:none}
  .cap,.cap:nth-child(even){grid-template-columns:1fr;grid-template-rows:52% 48%}
  .cap:nth-child(even) .cap-media{order:0}
  .cap-media{order:-1;height:100%;padding:12vh 6vw 0}
  .cap-media img{box-shadow:0 18px 50px -20px rgba(43,32,21,.35)}
  .cap-texto{padding:1.6rem 8vw 0}
  .cap-num{font-size:3rem}
  .cap-legenda{margin-top:1.2rem}
  .curso-fatos{gap:2.2rem}
  footer{flex-direction:column;gap:.6rem;text-align:center}
}

/* ── Reduce motion ────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hero-title .lt,.hero-sub{opacity:1!important;transform:none!important}
  .scroll-hint span{animation:none}
  *{scroll-behavior:auto!important}
}
