/* MÉTODO VIDA FINANCEIRA | Estilos exclusivos da página do curso */


:root {
  
  --paper:#F6F2E9;
   --paper2:#EDE7D8;
   --white:#fff;
   --moss:#3D4A3A;
   --moss-deep:#2B3529;
   --moss-soft:#6B7A63;
  
  --sage:#A9B49C;
   --sage-soft:#E6EBDD;
   --ink:#24271F;
   --ink-soft:#5C6055;
   --line:#E4DDCB;
   --gold:#B8975A;
   --gold-deep:#86672C;
  
  --serif:'Fraunces',Georgia,serif;
   --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  
}


* {
  box-sizing:border-box;
  margin:0;
  padding:0}


html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%}


body {
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  font-size:17px;
  overflow-x:hidden;
  padding-bottom:78px}


a {
  color:inherit}


.wrap {
  max-width:1080px;
  margin:0 auto;
  padding:0 24px}


section {
  padding:84px 0;
  position:relative}


h1,h2,h3 {
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.005em;
  color:var(--moss)}


h1 {
  font-size:clamp(3rem,12vw,5.2rem);
  font-weight:400}


h2 {
  font-size:clamp(2rem,7vw,3.2rem);
  font-weight:400;
  margin-bottom:18px}


h3 {
  font-size:1.5rem}


em {
  font-style:italic;
  color:var(--gold-deep)}


.eyebrow {
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px}


.eyebrow::before {
  content:"";
  width:34px;
  height:1px;
  background:var(--gold)}


.center {
  text-align:center}

.center .eyebrow {
  justify-content:center}

.center .eyebrow::after {
  content:"";
  width:34px;
  height:1px;
  background:var(--gold)}


.lead {
  font-size:1.1rem;
  color:var(--ink-soft);
  max-width:620px}

.center .lead {
  margin:0 auto}


.alt {
  background:var(--paper2)}

.white {
  background:#fff}



/* botão */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-decoration:none;
  font-family:var(--sans);
  font-weight:500;
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#FAF7F0;
  background:var(--moss);
  border:1px solid var(--moss);
  border-radius:999px;
  padding:19px 38px;
  min-height:54px;
  cursor:pointer;
  transition:background .3s,transform .3s,box-shadow .3s;
  box-shadow:0 10px 28px rgba(61,74,58,.22);
  text-align:center}


.btn:hover {
  background:var(--moss-deep);
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(61,74,58,.3)}


.btn svg {
  width:16px;
  height:16px;
  transition:transform .3s}

.btn:hover svg {
  transform:translateX(4px)}


.btn.ghost {
  background:transparent;
  color:var(--moss);
  box-shadow:none}

.btn.ghost:hover {
  background:var(--moss);
  color:#FAF7F0}


.micro {
  display:block;
  margin-top:16px;
  font-size:.82rem;
  color:var(--ink-soft);
  letter-spacing:.02em}



/* topo */
header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  padding:16px 0;
  transition:background .3s,box-shadow .3s,padding .3s}


header.solid {
  background:rgba(250,247,240,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  padding:10px 0}


.nav {
  display:flex;
  align-items:center;
  justify-content:space-between}


.brand {
  font-family:var(--serif);
  font-size:1.5rem;
  text-decoration:none;
  color:var(--moss)}

.brand span {
  font-style:italic;
  color:var(--gold-deep)}


header .btn {
  padding:11px 22px;
  min-height:42px;
  font-size:.7rem;
  box-shadow:none}



/* hero */
.hero {
  padding:140px 0 70px;
  background:radial-gradient(900px 500px at 88% 8%,rgba(201,210,190,.55),transparent 62%),radial-gradient(700px 420px at 0% 100%,rgba(184,151,90,.12),transparent 60%),var(--paper);
  overflow:hidden}


.hero .grid {
  display:grid;
  gap:50px;
  align-items:center}


@media(min-width:960px) {
  .hero .grid {
  grid-template-columns:1.05fr .95fr}

}


.hero h1 {
  margin-bottom:6px}


.hero .sub {
  font-family:var(--serif);
  font-size:clamp(1.4rem,4.4vw,2rem);
  font-style:italic;
  color:var(--moss-soft);
  line-height:1.3;
  margin-bottom:24px;
  max-width:560px}


.hero .txt {
  max-width:520px;
  color:var(--ink-soft);
  margin-bottom:34px}


.hero .grid>* {
  min-width:0}



/* mockups */
.dev {
  position:relative}


.tablet {
  background:#1F261D;
  border-radius:26px;
  padding:12px;
  box-shadow:0 40px 80px rgba(43,53,41,.28),0 6px 16px rgba(43,53,41,.12);
  max-width:520px;
  margin:0 auto;
  transform:rotate(-2deg)}


.screen {
  background:var(--paper);
  border-radius:16px;
  padding:20px;
  aspect-ratio:4/3;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:12px}


.s-top {
  display:flex;
  justify-content:space-between;
  align-items:center}


.s-top b {
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--moss);
  font-weight:500}


.s-top i {
  font-style:normal;
  font-size:.62rem;
  letter-spacing:.2em;
  color:var(--gold-deep);
  text-transform:uppercase}


.bars {
  display:grid;
  gap:9px}


.bar {
  display:grid;
  grid-template-columns:78px 1fr 28px;
  gap:8px;
  align-items:center;
  font-size:.64rem;
  color:var(--ink-soft)}


.bar .t {
  height:7px;
  background:var(--line);
  border-radius:4px;
  overflow:hidden}

.bar .t i {
  display:block;
  height:100%;
  background:var(--moss-soft);
  border-radius:4px}


.bar b {
  font-weight:500;
  color:var(--moss)}


.s-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:auto}


.s-cards div {
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 11px;
  font-size:.62rem;
  color:var(--ink-soft)}


.s-cards b {
  display:block;
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--moss);
  font-weight:500}


.sheet {
  position:absolute;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:0 18px 40px rgba(43,53,41,.16);
  padding:16px 18px;
  width:46%;
  max-width:210px}


.sheet.a {
  left:-4%;
  bottom:-8%;
  transform:rotate(-6deg)}


.sheet h4 {
  font-family:var(--serif);
  font-weight:500;
  color:var(--moss);
  font-size:.95rem;
  margin-bottom:8px;
  line-height:1.1}


.sheet .l {
  display:flex;
  gap:7px;
  align-items:center;
  margin:7px 0}


.sheet .l i {
  width:10px;
  height:10px;
  border:1.2px solid var(--gold);
  border-radius:50%;
  flex:none}

.sheet .l.on i {
  background:var(--gold)}


.sheet .l u {
  flex:1;
  height:5px;
  border-radius:3px;
  background:var(--line);
  text-decoration:none}


@media(max-width:600px) {
  .sheet {
  display:none}

}



/* vídeo */
.video {
  max-width:900px;
  margin:0 auto}


.vframe {
  position:relative;
  aspect-ratio:16/9;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(145deg,#4B5A47,#2B3529);
  box-shadow:0 36px 70px rgba(43,53,41,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(184,151,90,.5)}


.vframe::before {
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(250,247,240,.18);
  border-radius:14px;
  pointer-events:none}


.vframe iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0}


.play {
  margin-bottom:46px;
  width:84px;
  height:84px;
  border-radius:50%;
  background:rgba(250,247,240,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 12px rgba(250,247,240,.16);
  transition:transform .3s}


.vframe:hover .play {
  transform:scale(1.06)}


.play::after {
  content:"";
  margin-left:6px;
  border-left:20px solid var(--moss);
  border-top:12px solid transparent;
  border-bottom:12px solid transparent}


.vcap {
  position:absolute;
  left:28px;
  bottom:22px;
  right:28px;
  color:#EFEBDD;
  font-family:var(--serif);
  font-size:1.25rem;
  font-style:italic}


@media(max-width:600px) {
  .vcap {
  font-size:1rem;
  left:20px;
  bottom:18px}

.play {
  width:64px;
  height:64px}

}


.vcap small {
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#C9D2BE;
  margin-bottom:2px}


.vnote {
  text-align:center;
  margin-top:18px;
  font-size:.85rem;
  color:var(--ink-soft)}



/* identificação */
.ident {
  display:grid;
  gap:50px}


@media(min-width:960px) {
  .ident {
  grid-template-columns:.9fr 1.1fr;
  align-items:start}

}


.ilist {
  list-style:none}


.ilist li {
  padding:20px 0 20px 46px;
  border-bottom:1px solid var(--line);
  position:relative;
  font-size:1.08rem;
  color:var(--ink)}


.ilist li:first-child {
  border-top:1px solid var(--line)}


.ilist li::before {
  content:attr(data-n);
  position:absolute;
  left:0;
  top:17px;
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--gold);
  font-style:italic}


.closing {
  margin-top:28px;
  font-family:var(--serif);
  font-size:1.6rem;
  color:var(--moss);
  font-style:italic;
  line-height:1.3}



/* método */
.steps {
  display:grid;
  gap:0;
  margin-top:50px;
  position:relative}


.stp {
  display:grid;
  grid-template-columns:54px 1fr;
  gap:18px;
  padding-bottom:30px;
  position:relative}


.stp::before {
  content:"";
  position:absolute;
  left:26px;
  top:54px;
  bottom:0;
  width:1px;
  background:linear-gradient(var(--gold),transparent)}


.stp:last-child {
  padding-bottom:0}

.stp:last-child::before {
  display:none}


.stp .c {
  width:54px;
  height:54px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-size:1.4rem;
  color:var(--gold-deep)}


.stp h3 {
  font-size:1.5rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-family:var(--sans);
  font-weight:500;
  font-size:.92rem;
  letter-spacing:.2em;
  color:var(--moss);
  margin:4px 0 4px}


.stp p {
  color:var(--ink-soft);
  font-size:1rem;
  max-width:520px}


@media(min-width:900px) {
  
 .steps {
  grid-template-columns:repeat(5,1fr);
  gap:0 22px}


 .stp {
  grid-template-columns:1fr;
  text-align:center;
  justify-items:center;
  padding:0}


 .stp::before {
  left:calc(50% + 34px);
  top:27px;
  bottom:auto;
  width:calc(100% - 46px);
  height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(184,151,90,.15))}


 .stp:last-child::before {
  display:none}


 .stp h3 {
  margin-top:14px}


}



/* encontrar */
.find {
  display:grid;
  gap:56px;
  align-items:center}


@media(min-width:960px) {
  .find {
  grid-template-columns:1.1fr .9fr}

}


.find>* {
  min-width:0}


.stage {
  position:relative;
  padding:20px 0 40px}


.laptop {
  max-width:540px;
  margin:0 auto}


.lscreen {
  background:#1F261D;
  border-radius:14px 14px 0 0;
  padding:12px 12px 0;
  box-shadow:0 30px 60px rgba(43,53,41,.25)}


.lin {
  background:var(--paper);
  border-radius:6px 6px 0 0;
  aspect-ratio:16/10;
  padding:14px;
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:12px}


.player {
  background:linear-gradient(145deg,#4B5A47,#2B3529);
  border-radius:8px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center}


.player::after {
  content:"";
  margin-left:3px;
  border-left:11px solid #FAF7F0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent}


.player span {
  position:absolute;
  left:10px;
  bottom:8px;
  font-family:var(--serif);
  font-style:italic;
  font-size:.78rem;
  color:#EFEBDD}


.plist {
  display:grid;
  gap:6px;
  align-content:start}


.plist b {
  font-size:.5rem;
  letter-spacing:.18em;
  color:var(--gold-deep);
  text-transform:uppercase;
  font-weight:500}


.plist div {
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:5px 7px;
  font-size:.55rem;
  color:var(--moss);
  line-height:1.3}


.lbase {
  height:12px;
  background:linear-gradient(#D5D8CE,#B6BAAD);
  border-radius:0 0 14px 14px;
  width:112%;
  margin-left:-6%}


.mini {
  position:absolute;
  right:-2%;
  bottom:-2%;
  width:36%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 20px 40px rgba(43,53,41,.18);
  padding:12px 14px;
  transform:rotate(4deg)}


.mini h4 {
  font-family:var(--serif);
  font-weight:500;
  color:var(--moss);
  font-size:.9rem;
  margin-bottom:6px;
  line-height:1.1}


.mini .l {
  display:flex;
  gap:6px;
  align-items:center;
  margin:6px 0}

.mini .l i {
  width:8px;
  height:8px;
  border:1.2px solid var(--gold);
  border-radius:50%;
  flex:none}

.mini .l.on i {
  background:var(--gold)}

.mini .l u {
  flex:1;
  height:4px;
  background:var(--line);
  border-radius:2px}


.vitems {
  display:grid;
  gap:0;
  margin-top:30px;
  border-top:1px solid var(--line)}


.vi {
  padding:20px 0 20px 28px;
  border-bottom:1px solid var(--line);
  position:relative}


.vi::before {
  content:"";
  position:absolute;
  left:2px;
  top:30px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold)}


.vi b {
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:1.45rem;
  color:var(--moss);
  line-height:1.2;
  margin-bottom:4px}


.vi p {
  color:var(--ink-soft);
  font-size:.98rem}


.vi.wide {
  background:var(--moss);
  border-radius:16px;
  border:0;
  margin-top:18px;
  padding:22px 24px 22px 44px}


.vi.wide::before {
  left:22px;
  top:34px;
  background:#C9B27A}


.vi.wide b {
  color:#FAF7F0}

.vi.wide p {
  color:#D5DACB}


.chips {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px}


.chips div {
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:16px 18px;
  font-size:.98rem;
  color:var(--moss);
  display:flex;
  gap:12px;
  align-items:center}


.chips div::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  flex:none}


.chips div.wide {
  grid-column:span 2;
  background:var(--moss);
  color:#FAF7F0;
  border-color:var(--moss)}


.chips div.wide::before {
  background:#C9B27A}


@media(max-width:480px) {
  .chips {
  grid-template-columns:1fr}

.chips div.wide {
  grid-column:auto}

}



/* módulos */
.mods {
  margin-top:44px;
  border-top:1px solid var(--line)}


.mod {
  display:grid;
  grid-template-columns:70px 1fr;
  gap:10px;
  padding:30px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
  transition:background .3s,padding .3s}


@media(min-width:760px) {
  .mod {
  grid-template-columns:110px 1fr 1fr;
  gap:30px;
  padding:36px 14px}

.mod:hover {
  background:rgba(255,255,255,.7)}

}


.mod .n {
  font-family:var(--serif);
  font-size:3rem;
  color:var(--gold);
  font-weight:400;
  line-height:1}


.mod h3 {
  font-size:1.65rem}


.mod .edu {
  grid-column:1/-1;
  margin-top:6px;
  border-left:2px solid var(--gold);
  background:rgba(255,255,255,.65);
  border-radius:0 12px 12px 0;
  padding:14px 18px;
  font-size:.88rem;
  line-height:1.6;
  color:var(--ink-soft)}


.mod .edu b {
  display:block;
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:4px}


@media(min-width:760px) {
  .mod .edu {
  grid-column:2/-1}

}


.mod .st {
  display:block;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:8px}


.mod p {
  color:var(--ink-soft);
  grid-column:2}


@media(min-width:760px) {
  .mod p {
  grid-column:auto}

}



/* transformação */
.trans {
  background:linear-gradient(180deg,var(--sage-soft),#F1F4EA);
  text-align:center;
  padding:100px 0}


.quote {
  font-family:var(--serif);
  font-size:clamp(1.9rem,6.4vw,3.4rem);
  line-height:1.15;
  color:var(--moss);
  max-width:880px;
  margin:0 auto 26px;
  font-weight:400}


.quote em {
  color:var(--gold-deep)}


.tcols {
  display:grid;
  gap:16px;
  margin:46px auto 0;
  max-width:860px;
  text-align:left}


@media(min-width:760px) {
  .tcols {
  grid-template-columns:1fr 1fr}

}


.tc {
  background:rgba(255,255,255,.75);
  border:1px solid rgba(61,74,58,.12);
  border-radius:20px;
  padding:28px}


.tc small {
  display:block;
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:12px;
  font-weight:500}


.tc p {
  font-family:var(--serif);
  font-size:1.45rem;
  line-height:1.25;
  color:var(--moss)}


.tc.dim p {
  color:var(--moss-soft)}


.tnote {
  max-width:640px;
  margin:34px auto 0;
  color:var(--ink-soft);
  font-size:1rem}



/* para quem */
.who {
  display:grid;
  gap:44px;
  align-items:start}


@media(min-width:900px) {
  .who {
  grid-template-columns:.8fr 1.2fr}

}


.wl {
  list-style:none;
  display:grid;
  gap:0}


@media(min-width:600px) {
  .wl {
  grid-template-columns:1fr 1fr;
  column-gap:34px}

}


.wl li {
  padding:16px 0 16px 30px;
  border-bottom:1px solid var(--line);
  position:relative;
  font-size:1.02rem}


.wl li::before {
  content:"";
  position:absolute;
  left:3px;
  top:24px;
  width:11px;
  height:6px;
  border-left:1.5px solid var(--gold);
  border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg)}



/* sobre */
.about {
  display:grid;
  gap:44px;
  align-items:center}


@media(min-width:900px) {
  .about {
  grid-template-columns:.8fr 1.2fr}

}


.portrait {
  aspect-ratio:4/5;
  border-radius:240px 240px 24px 24px;
  background:linear-gradient(170deg,var(--sage),#9CA990);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--moss);
  font-size:.9rem;
  padding:20px;
  overflow:hidden;
  max-width:380px;
  margin:0 auto;
  border:1px solid rgba(61,74,58,.15)}


.portrait img {
  width:100%;
  height:100%;
  object-fit:cover}


.about p {
  color:var(--ink-soft);
  margin-bottom:14px;
  max-width:560px}


.about strong {
  color:var(--moss);
  font-weight:500}


.about .aend {
  margin-top:22px;
  margin-bottom:6px}


.about .aq {
  font-family:var(--serif);
  font-size:clamp(1.5rem,5vw,2rem);
  line-height:1.3;
  color:var(--moss);
  max-width:none}


.sign {
  font-family:var(--serif);
  font-size:1.6rem;
  font-style:italic;
  color:var(--moss);
  margin-top:20px}



/* final */
.final {
  text-align:center;
  padding:110px 0;
  background:radial-gradient(800px 400px at 50% 0,rgba(201,210,190,.6),transparent 70%),var(--paper)}


.final h2 {
  font-size:clamp(2.2rem,8vw,4rem);
  max-width:760px;
  margin:0 auto 22px;
  line-height:1.05}


.final p {
  max-width:600px;
  margin:0 auto 36px;
  color:var(--ink-soft);
  font-size:1.1rem}


.final p.legal {
  margin-top:72px;
  margin-bottom:0;
  }


.legal {
  font-size:.8rem;
  color:var(--ink-soft);
  max-width:520px;
  margin-left:auto;
  margin-right:auto}


footer {
  background:var(--moss-deep);
  color:#C9D2BE;
  text-align:center;
  padding:36px 0 42px;
  font-size:.82rem}


footer .brand {
  color:#FAF7F0;
  display:inline-block;
  margin-bottom:6px}

footer .brand span {
  color:#CDAE74}


footer a {
  color:#CDAE74}


footer .ig {
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  margin-top:6px}


footer .ig:hover {
  color:#FAF7F0}



/* barra fixa */
.sticky {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,247,240,.96);
  backdrop-filter:blur(10px);
  box-shadow:0 -1px 0 var(--line),0 -10px 30px rgba(43,53,41,.08);
  transform:translateY(110%);
  transition:transform .35s}


.sticky.show {
  transform:none}

.sticky .btn {
  width:100%;
  padding:15px}


@media(min-width:900px) {
  .sticky {
  display:none}

body {
  padding-bottom:0}

}


.rv {
  opacity:1;
  transform:none}


@media(prefers-reduced-motion:reduce) {
  .rv {
  opacity:1;
  transform:none;
  transition:none}

html {
  scroll-behavior:auto}

}


#toast {
  position:fixed;
  left:50%;
  bottom:90px;
  transform:translateX(-50%) translateY(20px);
  background:var(--moss-deep);
  color:#fff;
  padding:12px 18px;
  border-radius:12px;
  font-size:.88rem;
  opacity:0;
  pointer-events:none;
  transition:.3s;
  z-index:90;
  max-width:90vw;
  text-align:center}


#toast.on {
  opacity:1;
  transform:translateX(-50%)}


.ph {
  background:rgba(184,151,90,.14);
  outline:1.5px dashed var(--gold);
  outline-offset:2px;
  border-radius:4px;
  padding:0 4px}


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




/* =========================================
   DISPOSITIVO - IPAD COM DIAGNÓSTICO ANIMADO
========================================= */

.ipad-stage {
  position: relative;
  padding: 28px 8px 52px;
}

.ipad {
  position: relative;
  width: 100%;
  max-width: 570px;
  margin: 0 auto;
  padding: 17px;
  background: #20251f;
  border: 2px solid #596057;
  border-radius: 32px;
  box-shadow: 0 35px 70px rgba(43, 53, 41, 0.25);
  transform: rotate(-2deg);
}

.ipad-camera {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #656d65;
}

.ipad-display {
  padding: 24px;
  border-radius: 18px;
  background: var(--paper);
  overflow: hidden;
}

.ipad-top,
.ipad-heading,
.ipad-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ipad-top {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.ipad-logo,
.macbook-top > span {
  color: var(--moss);
  font-family: var(--serif);
  font-size: 20px;
}

.ipad-logo em,
.macbook-top em {
  color: var(--gold-deep);
}

.ipad-tag,
.ipad-heading small,
.ipad-bottom small,
.macbook-top small,
.macbook-lessons small {
  color: var(--gold-deep);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.ipad-heading {
  padding: 23px 0;
}

.ipad-heading h3 {
  margin: 6px 0;
  font-size: 25px;
}

.ipad-heading p {
  color: var(--ink-soft);
  font-size: 12px;
}

.ipad-score {
  display: flex;
  flex: 0 0 96px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 5px solid var(--sage);
  border-radius: 50%;
  color: var(--moss);
}

.ipad-score strong {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1;
}

.ipad-score span {
  font-size: 10px;
}

.ipad-chart {
  display: grid;
  gap: 18px;
}

.ipad-indicator {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
  color: var(--moss);
  font-size: 12px;
}

.ipad-indicator b {
  font-size: 12px;
  text-align: right;
}

.ipad-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfdfd3;
}

.ipad-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--moss-soft);
}

.ipad-bottom {
  margin-top: 24px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.ipad-bottom > div {
  display: grid;
  gap: 5px;
}

.ipad-bottom strong {
  color: var(--moss);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
}

.ipad-floating {
  position: absolute;
  right: 0;
  bottom: 12px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 15px 30px rgba(43, 53, 41, 0.12);
  color: var(--moss);
  font-size: 12px;
}

.ipad-floating span {
  color: var(--gold);
}

/* =========================================
   DISPOSITIVO - MACBOOK COM ÁREA DO ALUNO
========================================= */

.macbook-stage {
  padding: 38px 0 70px;
}

.macbook {
  width: 100%;
  max-width: 590px;
  margin: 0 auto;
}

.macbook-lid {
  padding: 13px 13px 11px;
  border-radius: 17px 17px 4px 4px;
  background: #252b26;
  box-shadow: 0 25px 55px rgba(43, 53, 41, 0.23);
}

.macbook-screen {
  min-height: 310px;
  padding: 17px;
  border-radius: 6px;
  background: var(--paper);
}

.macbook-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.macbook-course {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
  padding-top: 17px;
}

.macbook-video {
  position: relative;
  display: flex;
  min-height: 205px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #52654e, var(--moss-deep));
}

.macbook-play {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--moss);
}

.macbook-video p {
  position: absolute;
  bottom: 14px;
  left: 12px;
  color: var(--white);
  font-family: var(--serif);
  font-size: 14px;
}

.macbook-lessons h4 {
  margin: 8px 0 12px;
  color: var(--moss);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
}

.macbook-lesson {
  margin-bottom: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--moss);
  font-size: 10px;
  line-height: 1.4;
}

.macbook-lesson.is-current {
  border-color: var(--sage);
  background: #e6ebdd;
}

.macbook-base {
  height: 14px;
  margin: 0 -5%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(#d6d9d0, #aab0a5);
}

.macbook-foot {
  width: 18%;
  height: 5px;
  margin: 0 auto;
  border-radius: 0 0 8px 8px;
  background: #a3a99d;
}

.macbook-note {
  position: absolute;
  right: 0;
  bottom: 15px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 14px 35px rgba(43, 53, 41, 0.12);
  color: var(--moss);
  font-size: 12px;
}

.macbook-note span {
  color: var(--gold-deep);
}

/* =========================================
   ANIMAÇÕES - ENTRADA NO SCROLL
========================================= */

.rv {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.rv.in {
  opacity: 1;
  transform: translateY(0);
}

.ilist li,
.mod,
.vi,
.wl li {
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.rv:not(.in) .ilist li,
.ilist.rv:not(.in) li,
.mods.rv:not(.in) .mod,
.vitems:not(.in) .vi,
.wl.rv:not(.in) li {
  opacity: 0;
  transform: translateY(22px);
}

.ilist.in li,
.mods.in .mod,
.wl.in li {
  opacity: 1;
  transform: translateY(0);
}

.ilist li:nth-child(2),
.mod:nth-child(2),
.wl li:nth-child(2) { transition-delay: 0.1s; }

.ilist li:nth-child(3),
.mod:nth-child(3),
.wl li:nth-child(3) { transition-delay: 0.2s; }

.ilist li:nth-child(4),
.mod:nth-child(4),
.wl li:nth-child(4) { transition-delay: 0.3s; }

.ilist li:nth-child(5),
.mod:nth-child(5),
.wl li:nth-child(5) { transition-delay: 0.4s; }

.ilist li:nth-child(6),
.wl li:nth-child(6) { transition-delay: 0.5s; }

.wl li:nth-child(7) { transition-delay: 0.6s; }

/* =========================================
   RESPONSIVIDADE - DISPOSITIVOS E ANIMAÇÕES
========================================= */

@media (max-width: 700px) {
  .ipad {
    padding: 11px;
    border-radius: 23px;
    transform: none;
  }

  .ipad-display {
    padding: 15px;
  }

  .ipad-heading h3 {
    font-size: 19px;
  }

  .ipad-score {
    flex-basis: 70px;
    width: 70px;
    height: 70px;
  }

  .ipad-score strong {
    font-size: 29px;
  }

  .ipad-indicator {
    grid-template-columns: 90px minmax(0, 1fr) 33px;
    gap: 7px;
    font-size: 10px;
  }

  .ipad-tag {
    font-size: 7px;
  }

  .ipad-floating,
  .macbook-note {
    display: none;
  }

  .macbook-screen {
    min-height: 0;
    padding: 10px;
  }

  .macbook-course {
    gap: 7px;
  }

  .macbook-video {
    min-height: 175px;
  }

  .macbook-lessons h4 {
    font-size: 14px;
  }

  .macbook-lesson {
    padding: 6px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rv,
  .ilist li,
  .mod,
  .vi,
  .wl li {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================
   MOCKUPS - ACABAMENTO REALISTA
========================================= */

/* Corpo do iPad com bordas metálicas e profundidade. */
.ipad {
  position: relative;
  border: 2px solid #879087;
  background: linear-gradient(140deg, #333a35 0%, #0f1412 47%, #485149 100%);
  box-shadow:
    0 3px 0 #9ca49b inset,
    0 0 0 1px #222924,
    0 26px 46px rgba(22, 32, 24, 0.24),
    0 48px 90px rgba(22, 32, 24, 0.16);
}

/* Reflexo sutil do vidro do iPad. */
.ipad-display {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

/* Reflexo no canto superior do iPad. */
.ipad-display::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 32%;
  height: 55%;
  background: linear-gradient(225deg, rgba(255,255,255,.17), transparent 70%);
  pointer-events: none;
}

/* Câmera frontal do iPad. */
.ipad-camera {
  background: radial-gradient(circle at 38% 35%, #526b76 0 12%, #11191e 35%, #050708 75%);
  border: 1px solid #56615c;
  box-shadow: 0 0 0 2px #1b201d;
}

/* Estrutura do MacBook com acabamento de alumínio. */
.macbook-lid {
  position: relative;
  border: 2px solid #a9ada8;
  background: linear-gradient(125deg, #464c48, #101513 48%, #5e6760);
  box-shadow:
    0 1px 1px rgba(255,255,255,.5) inset,
    0 18px 36px rgba(28,36,30,.22);
}

/* Câmera superior integrada à moldura do MacBook. */
.macbook-lid::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #121b22;
  border: 1px solid #4d626c;
}

/* Tela do MacBook com leve brilho de vidro. */
.macbook-screen {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}

/* Reflexo na tela do MacBook. */
.macbook-screen::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 60%;
  background: linear-gradient(225deg, rgba(255,255,255,.13), transparent 72%);
  pointer-events: none;
}

/* Base de alumínio do MacBook. */
.macbook-base {
  background: linear-gradient(180deg, #e3e5e0, #aeb4ae 65%, #757e78);
  box-shadow: 0 4px 5px rgba(24,33,26,.16);
}

/* Sombra de contato do MacBook sobre o fundo. */
.macbook {
  filter: drop-shadow(0 25px 22px rgba(32,42,34,.15));
}

/* =========================================
   O QUE VOCÊ VAI ENCONTRAR - TEXTOS E FADE
========================================= */

/* Garante que os cinco benefícios apareçam após o scroll. */
.vitems.in .vi {
  opacity: 1;
  transform: translateY(0);
}

/* Anima cada benefício individualmente. */
.vitems .vi {
  transition:
    opacity .65s ease,
    transform .65s ease,
    background-color .3s ease;
}

/* Entrada do segundo benefício. */
.vitems .vi:nth-child(2) {
  transition-delay: .10s;
}

/* Entrada do terceiro benefício. */
.vitems .vi:nth-child(3) {
  transition-delay: .20s;
}

/* Entrada do quarto benefício. */
.vitems .vi:nth-child(4) {
  transition-delay: .30s;
}

/* Entrada do quinto benefício. */
.vitems .vi:nth-child(5) {
  transition-delay: .40s;
}

/* =========================================
   O MÉTODO - CINCO CARDS COM LINHA DOURADA
========================================= */

/* Grade responsiva de cards dos módulos. */
.mods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
  margin-top: 48px;
  border: 0;
}

/* Card individual com linha dourada superior. */
.mod {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 29px 27px;
    border: 1px solid rgba(61, 74, 58, .11);
    border-top: 3px solid var(--gold);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(43, 53, 41, .045);
}

/* Numeração dos módulos dentro dos cards. */
.mod .n {
  font-size: 2.65rem;
  line-height: 1;
}

/* Títulos dos módulos sem largura fixa. */
.mod h3 {
  font-size: 1.48rem;
  line-height: 1.25;
}

/* Descrição dos módulos em uma única coluna. */
.mod p {
  grid-column: auto;
  font-size: .94rem;
  line-height: 1.65;
}

/* Nota educacional do quarto módulo. */
.mod .edu {
  grid-column: auto;
  margin-top: auto;
  width: 100%;
}

/* Entrada inicial dos cards a partir de cima. */
.mods.rv:not(.in) {
  opacity: 1;
  transform: none;
}

/* Cards ocultos antes de entrar na tela. */
.mods.rv:not(.in) .mod {
  opacity: 0;
  transform: translateY(-28px);
}

/* Cards aparecem em sequência, de 1 a 5. */
.mods.in .mod {
  opacity: 1;
  transform: translateY(0);
}

/* Hover com elevação e sombra. */
.mods.in .mod:hover {
  transform: translateY(-9px);
  border-top-color: var(--gold);
  box-shadow: 0 18px 36px rgba(43, 53, 41, .14);
}

/* Transições de entrada e hover dos cards. */
.mod {
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.7,.2,1),
    box-shadow .3s ease,
    background-color .3s ease;
}

/* Primeiro card aparece sem atraso. */
.mod:nth-child(1) {
  transition-delay: 0s;
}

/* Segundo card aparece após o primeiro. */
.mod:nth-child(2) {
  transition-delay: .14s;
}

/* Terceiro card aparece após o segundo. */
.mod:nth-child(3) {
  transition-delay: .28s;
}

/* Quarto card aparece após o terceiro. */
.mod:nth-child(4) {
  transition-delay: .42s;
}

/* Quinto card aparece por último. */
.mod:nth-child(5) {
  transition-delay: .56s;
}

/* Ajuste para tablets. */
@media (max-width: 1050px) {
  .mods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ajuste para celulares. */
@media (max-width: 640px) {
  .mods {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mod {
    padding: 24px;
  }
}

/* Respeita as preferências de movimento reduzido. */
@media (prefers-reduced-motion: reduce) {
  .mods.rv:not(.in) .mod,
  .vitems:not(.in) .vi {
    opacity: 1;
    transform: none;
  }

  .mods.in .mod:hover {
    transform: none;
  }
}


/* =========================================
   MACBOOK REALISTA - ÁREA DO ALUNO
========================================= */

/* Área do dispositivo, centralizada na seção. */
.macbook-stage {
  padding: 22px 0 38px;
  min-width: 0;
}

/* Estrutura completa do notebook. */
.macbook-realista {
  position: relative;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  filter: drop-shadow(0 26px 21px rgba(31, 38, 32, 0.22));
}

/* Tampa preta com borda metálica fina. */
.macbook-tampa {
  position: relative;
  padding: 13px 11px 10px;
  border: 2px solid #858d87;
  border-bottom: 0;
  border-radius: 19px 19px 3px 3px;
  background: linear-gradient(120deg, #1c201e, #080a09 55%, #303733);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.3);
}

/* Câmera frontal na moldura superior. */
.macbook-camera {
  position: absolute;
  top: 5px;
  left: 50%;
  z-index: 2;
  width: 5px;
  height: 5px;
  border: 1px solid #536773;
  border-radius: 50%;
  background: #0c1419;
}

/* Tela com menu do sistema, navegador e dock. */
.macbook-display {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.56;
  border-radius: 5px;
  background: #dfe4df;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Barra superior no estilo macOS. */
.macos-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 19px;
  padding: 0 12px;
  background: #e7e8e5;
  color: #343b35;
  font-size: 7px;
  font-weight: 500;
}

/* Janela do navegador na tela. */
.macos-browser {
  width: 89%;
  height: 78%;
  margin: 11px auto 0;
  overflow: hidden;
  border: 1px solid rgba(42, 48, 43, 0.15);
  border-radius: 7px 7px 2px 2px;
  background: var(--white);
  box-shadow: 0 8px 20px rgba(34, 40, 35, 0.13);
}

/* Barra do navegador. */
.macos-browser-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 25px;
  padding: 0 10px;
  background: #f0f0ee;
}

/* Botões de controle da janela. */
.macos-dots {
  display: flex;
  gap: 4px;
}

/* Círculos de controle do navegador. */
.macos-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ed7268;
}

/* Botão amarelo da janela. */
.macos-dots i:nth-child(2) {
  background: #e8be5e;
}

/* Botão verde da janela. */
.macos-dots i:nth-child(3) {
  background: #70bc77;
}

/* Endereço ilustrativo do navegador. */
.macos-address {
  width: 55%;
  padding: 3px 5px;
  border-radius: 4px;
  background: #e3e4e1;
  color: #687067;
  font-size: 7px;
  text-align: center;
}

/* Ícones de ação do navegador. */
.macos-browser-actions {
  color: #687067;
  font-size: 11px;
}

/* Conteúdo do site exibido dentro do MacBook. */
.macos-site {
  height: calc(100% - 25px);
  padding: 14px 17px;
  background: #faf8f3;
}

/* Cabeçalho interno da área do aluno. */
.macos-site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
  color: var(--moss);
}

/* Marca no topo da tela. */
.macos-site-header strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
  font-weight: 500;
}

/* Destaque dourado na marca. */
.macos-site-header em {
  color: var(--gold);
}

/* Navegação interna do curso. */
.macos-site-header span {
  font-size: 7px;
  letter-spacing: 0.06em;
}

/* Bloco principal do curso, dividido em texto e vídeo. */
.macos-site-content {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  min-height: 145px;
}

/* Conteúdo editorial da área do aluno. */
.macos-feature {
  padding: 15px 12px 10px 0;
}

/* Identificação do curso. */
.macos-kicker {
  color: var(--gold);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* Título exibido dentro do notebook. */
.macos-feature h4 {
  margin: 10px 0 8px;
  color: var(--moss-deep);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(14px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.1;
}

/* Palavra em destaque do título. */
.macos-feature h4 em {
  color: var(--gold-deep);
}

/* Descrição do curso no mockup. */
.macos-feature p {
  max-width: 170px;
  color: var(--ink-soft);
  font-size: 8px;
  line-height: 1.5;
}

/* Botão visual de continuar a aula. */
.macos-lesson-button {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 10px;
  border-radius: 20px;
  background: var(--moss);
  color: #fff;
  font-size: 7px;
}

/* Área de destaque da aula em vídeo. */
.macos-course-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 145px;
  overflow: hidden;
  background: linear-gradient(135deg, #8e9f88, #3d4a3a 60%, #253026);
}

/* Etiqueta de aula em destaque. */
.macos-video-badge {
  position: absolute;
  top: 10px;
  left: 12px;
  color: #f6f2e9;
  font-size: 7px;
  letter-spacing: 0.1em;
}

/* Botão de reprodução ilustrativo. */
.macos-video-play {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding-left: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--moss);
  font-size: 13px;
}

/* Nome da aula em destaque. */
.macos-course-visual p {
  margin-top: 12px;
  color: #fff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
}

/* Cartões dos módulos dentro da tela. */
.macos-course-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

/* Card individual do curso. */
.macos-course-cards div {
  min-height: 55px;
  padding: 9px 8px;
  background: #e7ece5;
}

/* Número do módulo. */
.macos-course-cards small {
  display: block;
  margin-bottom: 5px;
  color: var(--gold-deep);
  font-size: 7px;
}

/* Nome do módulo. */
.macos-course-cards b {
  display: block;
  color: var(--moss);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.3;
}

/* Dock de aplicativos no rodapé do sistema. */
.macos-dock {
  position: absolute;
  bottom: 8px;
  left: 50%;
  display: flex;
  gap: 5px;
  padding: 5px 7px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  background: rgba(235, 239, 235, 0.75);
  backdrop-filter: blur(6px);
}

/* Ícones ilustrativos do dock. */
.macos-dock span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(135deg, #a9b49c, #3d4a3a);
  color: #fff;
  font-size: 11px;
}

/* Variação cromática dos aplicativos. */
.macos-dock span:nth-child(2n) {
  background: linear-gradient(135deg, #d5b47c, #987341);
}

/* Base horizontal em alumínio do MacBook. */
.macbook-aluminio {
  position: relative;
  width: 114%;
  height: 17px;
  margin-left: -7%;
  border: 1px solid #adb4ad;
  border-radius: 1px 1px 12px 12px;
  background: linear-gradient(180deg, #e9ece8, #c4cac3 52%, #939b94);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.8);
}

/* Rebaixo central da abertura do notebook. */
.macbook-entalhe {
  width: 17%;
  height: 5px;
  margin: 0 auto;
  border-radius: 0 0 8px 8px;
  background: #a3aaa3;
}

/* Borda inferior da base de alumínio. */
.macbook-borda-inferior {
  width: 107%;
  height: 3px;
  margin-left: -3.5%;
  border-radius: 0 0 50% 50%;
  background: #7e877e;
}

/* Aviso de que a tela é uma representação do curso. */
.macbook-disclaimer {
  margin-top: 26px;
  color: var(--ink-soft);
  font-size: 12px;
  text-align: center;
}

/* Ajustes para telas pequenas. */
@media (max-width: 640px) {
  .macbook-stage {
    padding: 20px 10px 35px;
  }

  .macos-site {
    padding: 8px;
  }

  .macos-site-content {
    min-height: 110px;
  }

  .macos-course-visual {
    min-height: 110px;
  }

  .macos-course-cards div {
    min-height: 45px;
    padding: 5px;
  }

  .macos-feature {
    padding: 6px 5px 5px 0;
  }

  .macos-feature h4 {
    margin: 5px 0;
    font-size: 13px;
  }

  .macos-feature p {
    font-size: 6px;
  }

  .macos-lesson-button {
    margin-top: 5px;
    padding: 4px 6px;
    font-size: 6px;
  }

  .macos-dock {
    bottom: 4px;
    gap: 3px;
    padding: 3px;
  }

  .macos-dock span {
    width: 13px;
    height: 13px;
    font-size: 8px;
  }
}


/* =========================================
   HERO DO CURSO - FOTO DA MAIANA AO FUNDO
========================================= */

/* Mantém o fundo creme e isola as camadas da composição. */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--paper);
}

/* Foto com opacidade reduzida e posicionamento à direita. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: url("../assets/images/maiana-hero-curso.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 20%;
  opacity: 1.5;
  pointer-events: none;
}

/* Gradiente claro que protege a leitura dos textos e do iPad. */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(250, 247, 240, 0.95) 0%,
    rgba(250, 247, 240, 0.75) 45%,
    rgba(250, 247, 240, 0.25) 100%
  );
  pointer-events: none;
}

/* Conteúdo principal fica acima da foto e do gradiente. */
.hero .wrap {
  position: relative;
  z-index: 1;
}

/* Ajuste da composição da foto em tablets. */
@media (max-width: 959px) {
  .hero::before {
    background-position: 55% center;
    opacity: 0.17;
  }

  .hero::after {
    background: rgba(250, 247, 240, 0.84);
  }
}

/* Maior contraste para leitura em celulares. */
@media (max-width: 600px) {
  .hero::before {
    background-position: 52% top;
    opacity: 0.14;
  }

  .hero::after {
    background: linear-gradient(
      180deg,
      rgba(250, 247, 240, 0.91),
      rgba(250, 247, 240, 0.83)
    );
  }
}


/* =========================================
   TELA DO MACBOOK - PRÉVIA DO HTML ORIGINAL
   Mantém intactos a moldura, o dock e a base.
========================================= */

/* Área do aluno com o mesmo conteúdo do modelo-base. */
.macos-site-original {
  display: flex;
  flex-direction: column;
  background: #f8f7f2;
}

/* Divisão entre a aula em vídeo e a lista do módulo. */
.macos-curso-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 9px;
  min-height: 0;
  flex: 1;
}

/* Player ilustrativo com fundo verde profundo. */
.macos-curso-player {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(140deg, #4b604b 0%, #29382c 65%, #19271e 100%);
}

/* Identificação da aula, exatamente como no modelo original. */
.macos-curso-player-label {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  color: #f6f2e9;
  font-family: "Inter", sans-serif;
  font-size: clamp(7px, .75vw, 10px);
  font-weight: 500;
}

/* Botão visual central do vídeo. */
.macos-curso-play {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding-left: 2px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #3d4a3a;
  font-size: 12px;
}

/* Barra de controles ilustrativa do vídeo. */
.macos-curso-player-controls {
  position: absolute;
  right: 10px;
  bottom: 9px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f6f2e9;
  font-size: 7px;
}

/* Trilha do progresso da aula. */
.macos-curso-progress {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, .35);
}

/* Progresso ilustrativo da aula. */
.macos-curso-progress i {
  display: block;
  width: 38%;
  height: 100%;
  background: #b8975a;
}

/* Lista das aulas do segundo módulo. */
.macos-curso-playlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 9px;
  border: 1px solid #e5e9df;
  border-radius: 4px;
  background: #ffffff;
}

/* Título da lista de aulas. */
.macos-curso-playlist b {
  margin-bottom: 3px;
  color: #2b3529;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(10px, 1.05vw, 14px);
  font-weight: 500;
}

/* Cada aula do módulo, preservando os nomes originais. */
.macos-curso-playlist div {
  padding: 7px 6px;
  border-radius: 3px;
  background: #f1f3ed;
  color: #3d4a3a;
  font-family: "Inter", sans-serif;
  font-size: clamp(7px, .75vw, 10px);
  line-height: 1.3;
}

/* Aula selecionada com detalhe dourado. */
.macos-curso-playlist div:first-of-type {
  border-left: 2px solid #b8975a;
  background: #e9ede5;
}

/* Prévia da ferramenta de plano financeiro do modelo-base. */
.macos-curso-extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  padding: 7px 10px;
  border-radius: 4px;
  background: #e9ede5;
}

/* Título da ferramenta de planejamento. */
.macos-curso-extra-titulo {
  color: #3d4a3a;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(9px, .9vw, 12px);
}

/* Indicadores ilustrativos do plano. */
.macos-curso-extra-checks {
  display: flex;
  gap: 8px;
  color: #9ba698;
  font-size: 10px;
}

/* Etapas concluídas da ferramenta. */
.macos-curso-extra-checks .done {
  color: #b8975a;
}

/* Escala dos detalhes internos em celulares, sem alterar o notebook. */
@media (max-width: 640px) {
  .macos-curso-layout {
    gap: 5px;
  }

  .macos-curso-playlist {
    gap: 3px;
    padding: 5px;
  }

  .macos-curso-playlist div {
    padding: 3px;
    font-size: 6px;
  }

  .macos-curso-playlist b {
    font-size: 9px;
  }

  .macos-curso-player-label {
    top: 5px;
    left: 5px;
    font-size: 6px;
  }

  .macos-curso-play {
    width: 26px;
    height: 26px;
    font-size: 9px;
  }

  .macos-curso-extras {
    margin-top: 4px;
    padding: 4px 6px;
  }
}


/* =========================================
   SOBRE MAIANA - FOTO SEM MOLDURA
========================================= */

/* Remove a moldura e o fundo decorativo da fotografia. */
#autora .portrait {
  width: 100%;
  max-width: 450px;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

/* Foto natural, sem contorno e com enquadramento central. */
#autora .portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  border: none;
  border-radius: 0;
}

/* Adapta o retrato à largura de telas pequenas. */
@media (max-width: 640px) {
  #autora .portrait {
    max-width: 420px;
  }
}


/* =========================================
   NAVBAR - LOGOTIPO MAIANA BETTIO
========================================= */

/* Alinha o monograma e o nome, preservando a cor do texto da navbar. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  text-decoration: none;
}

/* Monograma circular dourado inspirado na identidade visual. */
.brand .brand-monogram {
  display: grid;
  flex: 0 0 45px;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1.5px solid #B8975A;
  border-radius: 50%;
  color: #B8975A;
  font-family: "Fraunces", Georgia, serif;
  font-size: 27px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

/* Nome em maiúsculas, sem subtítulo ou especialidades. */
.brand .brand-name {
  color: inherit;
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .13em;
  line-height: 1.1;
  white-space: nowrap;
}

/* Reduz o logotipo em telas menores. */
@media (max-width: 600px) {
  .brand {
    gap: 9px;
  }

  .brand .brand-monogram {
    flex-basis: 37px;
    width: 37px;
    height: 37px;
    font-size: 23px;
  }

  .brand .brand-name {
    font-size: 14px;
    letter-spacing: .09em;
  }
}

/* =========================================
   IDENTIDADE OFICIAL - LOGO COMPACTA
========================================= */

/* Alinha a imagem oficial e o nome da consultora na navbar. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  text-decoration: none;
}

/* Monograma original, com fundo transparente e tamanho ergonômico. */
.brand .brand-logo-img {
  display: block;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Nome institucional em maiúsculas, preservando a cor da navbar. */
.brand .brand-name {
  color: inherit;
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .105em;
  line-height: 1.1;
  white-space: nowrap;
}

/* Monograma original também no rodapé principal. */
.rodape-marca .rodape-logo-img {
  display: block;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  object-fit: contain;
}

/* Tamanho proporcional para celulares. */
@media (max-width: 600px) {
  .brand {
    gap: 7px;
  }

  .brand .brand-logo-img {
    flex-basis: 29px;
    width: 29px;
    height: 29px;
  }

  .brand .brand-name {
    font-size: 13px;
    letter-spacing: .07em;
  }
}

/* Mantém a marca completa alinhada no rodapé do curso. */
footer .brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
}

footer .brand .brand-name {
  color: #FAF7F0;
  font-style: normal;
}

/* === REVISÃO FINAL: contenção responsiva e acessibilidade === */
html{overflow-x:clip}img,video,iframe,svg{max-width:100%}img{height:auto}button,input,select,textarea{max-width:100%}a,button{overflow-wrap:anywhere}:focus-visible{outline:3px solid #b8975a;outline-offset:3px}@media(max-width:480px){input,textarea,select{font-size:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ==========================================
   NAVBAR RESPONSIVA — PÁGINA DO CURSO
   Evita sobreposição entre logo e botão
========================================== */

@media (max-width: 600px) {

  header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* Mantém a marca visível sem sobreposição */
  header .brand {
    flex: 0 1 auto;
    min-width: 0;
    gap: 6px;
  }

  header .brand .brand-logo-img {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
  }

  header .brand .brand-name {
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: normal;
    line-height: 1.15;
  }

  /* Botão compacto, sem invadir a marca */
  header .nav > .btn {
    flex: 0 0 auto;
    max-width: 46%;
    padding: 10px 12px;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
}

/* Vídeo de apresentação: player responsivo hospedado no próprio site */
#video .vframe-video{aspect-ratio:16/9;height:auto;min-height:0;padding:0;overflow:hidden;background:#18241d;border-radius:16px;display:block;}
#video .curso-video-player{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;background:#18241d;max-width:100%;}
@media(max-width:600px){#video .vframe-video{border-radius:10px;}}