/* ==========================================================
   MONEY MAIS — PROTÓTIPO DA HOME (Etapa 6)
   Código de prototipação. Não é código final de produção.
   ========================================================== */

@font-face{font-family:"Montserrat";src:url("assets/fontes/montserrat-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fontes/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --roxo:#2E1A47; --laranja:#F97316; --areia:#D9C9B8; --off:#F6F3ED; --grafite:#282828; --branco:#FFFFFF;
  --massa:#46345B; /* fallback: off-white 12% sobre roxo */
  --massa:color-mix(in srgb, var(--off) 12%, var(--roxo));

  --txt:var(--grafite); --txt2:rgba(40,40,40,.72); --fio:rgba(40,40,40,.14); --rot:var(--roxo); --foco:var(--roxo);

  --mg:20px; --gut:16px; --cabh:60px;

  --padrao:72px; --pausa:96px; --blocos:48px; --compacta:48px;
  --t-ap:16px; --ap-link:24px;

  --rapida:160ms; --base:320ms; --lenta:640ms; --traco:900ms;
  --curva:cubic-bezier(.2,0,0,1);

  --f-display:clamp(34px, calc(25.83px + 2.095vw), 56px);
  --f-h2:clamp(28px, calc(23.54px + 1.143vw), 40px);
  --f-h3:clamp(22px, calc(19.77px + .571vw), 28px);
  --f-h4:clamp(19px, calc(17.89px + .286vw), 22px);
  --f-lead:clamp(18px, calc(17.26px + .19vw), 20px);
  --f-corpo:clamp(16px, calc(15.63px + .095vw), 17px);
}
@media (min-width:768px){
  :root{--mg:40px; --gut:24px; --padrao:96px; --pausa:128px; --compacta:56px; --t-ap:24px; --ap-link:32px}
}
@media (min-width:1200px){
  :root{--mg:48px; --cabh:72px; --padrao:128px; --pausa:160px; --blocos:64px; --compacta:64px}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:var(--cabh)}
body{margin:0; background:var(--off); color:var(--txt); font-family:"Inter",system-ui,sans-serif; font-size:var(--f-corpo); line-height:1.64; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
main{display:block; overflow-x:clip}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0; list-style:none}
img,svg{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit}
[hidden]{display:none !important}

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

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* Contextos escuros */
[data-tema="escuro"], .ice-fixos, .rod{
  --txt:var(--off); --txt2:rgba(246,243,237,.72); --fio:rgba(246,243,237,.2); --rot:rgba(246,243,237,.72); --foco:var(--off);
  color:var(--txt);
}

/* ---------- Estrutura ---------- */
/* Largura útil calculada sobre 100% da área disponível (não sobre 100vw): as margens se mantêm com barra de rolagem clássica */
.cont{width:min(1200px, calc(100% - 2 * var(--mg))); margin-inline:auto}
.leitura{max-width:680px}

/* ---------- Tipografia ---------- */
.display,.h2,.h3,.h4,.rotulo,.descritivo{font-family:"Montserrat",system-ui,sans-serif}
.display{font-size:var(--f-display); line-height:1.1; font-weight:700; letter-spacing:-.015em; text-wrap:balance}
.h2{font-size:var(--f-h2); line-height:1.17; font-weight:700; letter-spacing:-.01em; text-wrap:balance}
.h3{font-size:var(--f-h3); line-height:1.24; font-weight:600; letter-spacing:-.005em; text-wrap:balance}
.h4{font-size:var(--f-h4); line-height:1.3; font-weight:600}
.lead{font-size:var(--f-lead); line-height:1.6; color:var(--txt2); text-wrap:pretty}
.corpo{color:var(--txt2); text-wrap:pretty}
.rotulo{font-size:13px; line-height:1.4; font-weight:600; letter-spacing:.02em; color:var(--rot)}
.descritivo{font-size:13px; line-height:1.4; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--roxo)}
.legenda{font-size:14px; line-height:1.57; color:var(--txt2)}
@media (min-width:768px){ .rotulo{font-size:14px} }

.rotulo + .h2, .rotulo + .display, .rotulo + .h3, .rotulo + .h4{margin-top:12px}
.h2 + .corpo, .h2 + .lead, .display + .lead, .h3 + .corpo, .h4 + .corpo{margin-top:var(--t-ap)}
.corpo + .corpo{margin-top:16px}
@media (min-width:768px){ .rotulo + .h2, .rotulo + .display, .rotulo + .h3, .rotulo + .h4{margin-top:16px} }

/* ---------- Link editorial ---------- */
.link{display:inline-block; padding-block:9px; font-weight:500; color:var(--txt); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px}
.link .seta{display:inline-block; margin-left:8px; text-decoration:none; transition:transform var(--rapida) var(--curva)}
a.link:hover, .faixa:hover .link{text-decoration-thickness:2px}
a.link:hover .seta, .faixa:hover .seta{transform:translateX(4px)}
a.link:hover .seta.ext{transform:translate(3px,-3px)}
a.link:active{opacity:.85}
p > .link:only-child{margin-top:calc(var(--ap-link) - 9px)}

/* Marcação de protótipo: destino pendente */
a[data-pendente]::after{content:"pendente"; display:inline-block; vertical-align:middle; margin-left:10px; padding:1px 6px; border:1px dashed currentColor; border-radius:2px; font:600 10px/1.5 "Inter",sans-serif; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; opacity:.8; white-space:nowrap}

/* ---------- Botões ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 24px; border-radius:4px; background:var(--roxo); color:var(--off); font:600 16px/1.25 "Montserrat",sans-serif; letter-spacing:.01em; text-align:center; text-decoration:none; transition:background-color var(--rapida) var(--curva)}
.btn:hover{background:color-mix(in srgb, var(--roxo) 78%, var(--grafite))}
.btn:active{opacity:.85}
[data-tema="escuro"] .btn, [data-tema="escuro"].cab .btn{background:var(--off); color:var(--roxo)}
[data-tema="escuro"] .btn:hover{background:var(--branco)}
[data-tema="escuro"] .btn.btn-destaque{background:var(--laranja); color:var(--roxo); min-height:52px; padding:16px 24px}
[data-tema="escuro"] .btn.btn-destaque:hover{background:color-mix(in srgb, var(--laranja) 88%, var(--branco))}
.btn-largo{display:flex; width:100%; min-height:52px}
@media (min-width:1200px){ .btn{font-size:15px} }

/* ---------- Pular ---------- */
.pular{position:fixed; left:16px; top:-80px; z-index:200; padding:12px 16px; background:var(--roxo); color:var(--off); border-radius:4px; font-weight:500}
.pular:focus{top:12px; outline:2px solid var(--off); outline-offset:-5px}

/* ==========================================================
   CABEÇALHO
   ========================================================== */
.cab{position:fixed; inset:0 0 auto 0; z-index:100; height:var(--cabh); background:var(--off); border-bottom:1px solid var(--fio); color:var(--txt); transition:background-color var(--base) var(--curva), border-color var(--base) var(--curva), color var(--base) var(--curva)}
.cab[data-tema="escuro"]{background:var(--roxo)}
.cab[data-topo="sim"]{background:transparent; border-bottom-color:transparent}
.cab-in{width:min(1200px, calc(100% - 2 * var(--mg))); height:100%; margin-inline:auto; display:flex; align-items:center}
.cab-logo{display:block; flex:none; padding-block:8px}
.cab-logo img{width:168px; height:auto}
.logo-branco{display:none}
.cab[data-tema="escuro"] .logo-roxo{display:none}
.cab[data-tema="escuro"] .logo-branco{display:block}

.cab-nav, .cab-btn{display:none}
.menu-btn{margin-left:auto; margin-right:-10px; width:44px; height:44px; display:grid; place-items:center; background:none; border:0; border-radius:4px; cursor:pointer}
.menu-btn .mb-b{display:none}
.menu-btn[aria-expanded="true"] .mb-a{display:none}
.menu-btn[aria-expanded="true"] .mb-b{display:block}

@media (min-width:1200px){
  .menu-btn{display:none}
  .cab-nav{display:block; margin-left:auto}
  .cab-nav > ul{display:flex; align-items:center; gap:32px}
  .cab-nav > ul > li{position:relative; display:flex; align-items:center}
  .cab-nav > ul > li > a{display:inline-flex; align-items:center; min-height:44px; font-size:15px; font-weight:500; text-decoration:none; text-underline-offset:6px; text-decoration-thickness:1px}
  .cab-nav > ul > li > a:hover{text-decoration:underline}
  .cab-btn{display:inline-flex; margin-left:40px}
  .painel-btn{width:44px; height:44px; margin:0 -16px 0 0; display:grid; place-items:center; background:none; border:0; border-radius:4px; cursor:pointer}
  .painel-btn svg{transition:transform var(--rapida) var(--curva)}
  .painel-btn[aria-expanded="true"] svg{transform:scaleY(-1)}
  .painel{position:absolute; top:calc(100% + 14px); left:-24px; width:380px; padding:12px; background:var(--off); border:1px solid var(--fio); border-radius:4px}
  .cab[data-tema="escuro"] .painel{background:var(--roxo)}
  .painel-item{display:block; padding:12px; border-radius:2px; text-decoration:none}
  .painel-t{display:block; font:600 19px/1.3 "Montserrat",sans-serif}
  .painel-s{display:block; margin-top:2px; font-size:15px; color:var(--txt2)}
  .painel-item:hover .painel-t{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px}
  .painel-sep{margin-top:8px; padding:16px 12px 8px; border-top:1px solid var(--fio)}
  .painel-diag{display:inline-flex; align-items:center; gap:6px; min-height:36px; font-size:15px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px}
}

/* ---------- Painel do menu (mobile e tablet) ---------- */
.menu-movel{position:fixed; inset:var(--cabh) 0 0 0; z-index:90; display:flex; flex-direction:column; gap:32px; padding:32px var(--mg) 32px; background:var(--off); overflow-y:auto; overscroll-behavior:contain; opacity:0; transition:opacity var(--base) var(--curva)}
.menu-movel.aberto{opacity:1}
.menu-movel nav{flex:1}
.menu-movel nav > ul > li + li{margin-top:16px}
.menu-movel nav > ul > li > a, .mm-exp{display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:0; background:none; border:0; font:500 22px/1.3 "Inter",sans-serif; text-align:left; text-decoration:none; cursor:pointer}
.mm-exp svg{transition:transform var(--rapida) var(--curva)}
.mm-exp[aria-expanded="true"] svg{transform:scaleY(-1)}
.mm-sub{padding:4px 0 8px 16px}
.mm-sub a{display:inline-flex; align-items:center; min-height:44px; font-size:17px; color:var(--txt2); text-decoration:none}
.mm-sep{margin-top:8px; padding-top:16px; border-top:1px solid var(--fio)}
.mm-sep .rotulo{display:block}
.mm-sep a span[aria-hidden]{margin-left:6px}
.mm-sep a{font-size:16px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px}
@media (min-width:1200px){ .menu-movel{display:none !important} }
body.trava{overflow:hidden}

/* ==========================================================
   A LINHA
   ========================================================== */
.linha{display:block; background:var(--laranja)}

/* ==========================================================
   1. ABERTURA
   ========================================================== */
.abertura{position:relative; display:flex; align-items:center; min-height:min(100vh, 780px); padding:calc(var(--cabh) + var(--pausa) * .75) 0 var(--pausa); background:var(--off)}
.abertura-txt .display{margin-top:16px}
.abertura-txt .lead{max-width:600px}
.abertura-txt p:last-child{margin-top:calc(var(--ap-link) - 9px)}
.linha-abertura{position:absolute; inset:auto 0 0 0; height:1.5px; transform-origin:left center}
@media (min-width:768px){ .abertura-txt{max-width:75%} }
@media (min-width:1200px){ .abertura-txt{max-width:calc(7 * ((100% - 264px) / 12) + 144px)} .abertura-txt .display{margin-top:24px} }

@media (prefers-reduced-motion:no-preference){
  .ent{opacity:0; animation:ent var(--lenta) var(--curva) calc(var(--i) * 80ms + 120ms) forwards}
  .linha-abertura{transform:scaleX(0); animation:traco var(--traco) var(--curva) 520ms forwards}
  @keyframes ent{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
  @keyframes traco{to{transform:scaleX(1)}}
}

/* ==========================================================
   2. ICEBERG — sequência vertical (padrão)
   ========================================================== */
.ice{--w:56vw; position:relative; background:var(--roxo); overflow:clip}
/* Proporções da forma (viewBox 600 × 1360): linha d'água a 0,5833 × largura do topo; ponta com 0,547 × largura; massa submersa com 1,667 × largura */
.ice-mundo{position:relative; z-index:1; background:var(--off)}
.ice-cont{position:relative; padding-top:var(--padrao); padding-bottom:calc(var(--w) * .56 + 64px)}
.ice-fig{position:absolute; z-index:1; top:calc(100% - var(--w) * .5833); left:calc(50% - var(--w) / 2); width:var(--w); aspect-ratio:600 / 1360; pointer-events:none}
.ice-svg{width:100%; height:100%; overflow:visible}
.ice-massa{fill:var(--massa); stroke:rgba(246,243,237,.45); stroke-width:1; vector-effect:non-scaling-stroke; stroke-linejoin:miter}
.ice-ponta{fill:var(--areia); stroke:rgba(40,40,40,.6); stroke-width:1; vector-effect:non-scaling-stroke}
.ice-ar-sub path{fill:none; stroke:rgba(246,243,237,.45); stroke-width:1; vector-effect:non-scaling-stroke}
.ice-ar-vis path{fill:none; stroke:rgba(40,40,40,.6); stroke-width:1; vector-effect:non-scaling-stroke}
.linha-agua{position:absolute; z-index:2; inset:auto 0 0 0; height:1.5px; transform:translateY(50%)}

/* Rótulos: sem caixa, sem marcador, sem linha de chamada */
.ice-rot{position:absolute; left:var(--x); top:var(--y); width:max-content; font-size:13px; line-height:1.25; font-weight:500; text-wrap:balance}
.ice-rot[data-lado="e"]{transform:translate(-100%,-50%); padding-right:10px; text-align:right}
.ice-rot[data-lado="d"]{transform:translate(0,-50%); padding-left:10px}
.ice-rot.s{color:var(--grafite)}
.ice-rot.s[data-lado="e"]{max-width:calc((100vw - 56px - var(--w)) / 2 + var(--x))}
.ice-rot.s[data-lado="d"]{max-width:calc((100vw - 56px + var(--w)) / 2 - var(--x))}
.ice-rot.c{display:none; color:rgba(246,243,237,.72)}

.ice-fixos{position:relative; z-index:2; display:flex; flex-direction:column; gap:var(--padrao); padding-block:calc(var(--w) * 1.667 + 56px) var(--padrao)}
/* Lista editorial das situações (mobile e tablet): fios, sem cartões */
.ice-lista{margin-top:32px; font-size:15px; line-height:1.45; font-weight:500; color:var(--txt2)}
.ice-lista li{padding-block:12px; border-top:1px solid var(--fio)}
.ice-lista li:last-child{border-bottom:1px solid var(--fio)}

/* Tablet: forma à direita; texto e lista à esquerda; os seis sintomas empilhados à esquerda da ponta, acompanhando a aresta */
@media (min-width:768px){
  .ice{--w:46vw}
  .ice-fig{left:auto; right:-40px}
  .ice-t{max-width:calc(50% - 28px)}
  .ice-rot{font-size:15px}
  .ice-rot[data-lado="e"]{padding-right:14px}
  .ice-rot[data-lado="d"]{padding-left:14px}
  .ice-fixos{justify-content:space-between; min-height:calc(var(--w) * 1.75); padding-top:72px}
}
@media (min-width:768px) and (max-width:1199px){
  .ice-rot.s{max-width:none; white-space:nowrap; transform:translate(-100%,-50%); padding:0 14px 0 0; text-align:right}
  .ice-rot.s:nth-of-type(1){left:45%; top:3%}
  .ice-rot.s:nth-of-type(2){left:44%; top:6.6%}
  .ice-rot.s:nth-of-type(3){left:41.5%; top:10.2%}
  .ice-rot.s:nth-of-type(4){left:38.8%; top:13.8%}
  .ice-rot.s:nth-of-type(5){left:37%; top:17.4%}
  .ice-rot.s:nth-of-type(6){left:27%; top:21%}
}
/* Desktop: texto nas colunas 1–4; forma deslocada para deixar 180 px de cada lado da massa para as situações */
@media (min-width:1200px){
  .ice{--w:min(460px, 32vw)}
  .ice-fig{right:auto; left:calc(100% - 194px - var(--w) * .942)}
  .ice-t{max-width:calc(4 * ((100% - 264px) / 12) + 72px)}
  .ice-rot.s[data-lado]{max-width:260px}
  .ice-rot.c{display:block; max-width:194px; line-height:1.4}
  .ice-lista{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
}

/* ---------- Iceberg — cena fixa (desktop, com condições) ---------- */
.cena .ice{height:calc(160vh + max(66vh + .35 * var(--w), 1.417 * var(--w) + 45px - 14vh)); overflow:visible}
.cena .ice-palco{position:sticky; top:0; height:100vh; overflow:hidden; background:var(--roxo)}
.cena .ice-mundo{position:absolute; inset:0 0 auto 0; height:calc(66vh + 2.4 * var(--w)); background:linear-gradient(var(--off) 0, var(--off) 66vh, var(--roxo) 66vh); will-change:transform}
.cena .ice-cont{height:100%; padding:0}
.cena .ice-t1{position:absolute; left:0; top:0; height:66vh; padding-bottom:56px; display:flex; flex-direction:column; justify-content:flex-end}
.cena .ice-fig{top:calc(66vh - var(--w) * .5833); opacity:var(--of,1)}
.cena .linha-agua{top:66vh; bottom:auto; transform:translateY(-50%)}
.cena .ice-rot.c{opacity:0; transition:opacity var(--base) var(--curva)}
.cena .ice-rot.c.on{opacity:var(--oc,1)}
.cena .ice-fixos{position:absolute; inset:0; z-index:3; display:block; min-height:0; padding:0; pointer-events:none}
.cena .ice-t2{position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:var(--o2,0)}
.cena .ice-t3{position:absolute; left:50%; top:50%; width:min(880px,100%); max-width:none; transform:translate(-50%,-50%); text-align:center; opacity:var(--o3,0)}
.cena .ice-t3 .lead{max-width:560px; margin-inline:auto}

/* ==========================================================
   3. ORIGEM
   ========================================================== */
.origem-esc{background:var(--roxo); padding-block:var(--padrao) calc(var(--padrao) * .75)}
.origem-cont{position:relative}
.linha-origem{display:none}
.origem-trans{height:120px; background:linear-gradient(var(--roxo), var(--branco))}
.origem-cla{background:var(--branco); padding-block:calc(var(--padrao) * .5) var(--padrao)}
.linha-origem-m{width:48px; height:1.5px; margin-bottom:24px}
.destaque{max-width:760px}
.dq{display:block}
.dq2{margin-top:.2em}
.origem-cla .leitura{margin-top:calc(var(--ap-link) - 9px)}
@media (min-width:768px){
  .origem-cont > .leitura, .origem-cla .cont > *{margin-left:calc((100% - 168px) / 8 + 24px)}
  .origem-trans{height:200px}
}
@media (min-width:1200px){
  .origem-cont > .leitura, .origem-cla .cont > *{margin-left:calc(2 * ((100% - 264px) / 12) + 48px)}
  .linha-origem{display:block; position:absolute; top:4px; bottom:4px; left:calc(2 * ((100% - 264px) / 12) + 8px); width:1.5px}
  .linha-origem-m{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .js .dq{opacity:0; transform:translateY(12px); transition:opacity var(--lenta) var(--curva), transform var(--lenta) var(--curva)}
  .js .visto .dq{opacity:1; transform:none}
  .js .visto .dq2{transition-delay:480ms}
}

/* ==========================================================
   4. MÉTODO SMART FLOW
   ========================================================== */
.sf{background:var(--branco)}
.sf-entrada{padding-top:var(--padrao)}
.sf-ponte{margin-bottom:var(--blocos); color:var(--txt)}
.sf-entrada .h2{max-width:880px}
.sf-entrada .corpo{max-width:680px}

.sf-dia{display:flex; justify-content:center; padding-block:72px 64px}
.sf-anel{position:relative; flex:none; width:min(calc((100% + 40px) * .66), 275px); aspect-ratio:1}
.sf-anel svg{width:100%; height:100%; overflow:visible}
.sf-trilho{fill:none; stroke:rgba(40,40,40,.22); stroke-width:1}
.sf-traco{fill:none; stroke:var(--laranja); stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:0}
.sf-volta2{fill:none; stroke:var(--laranja); stroke-opacity:.45; stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:0}
.sf-p .pt{fill:var(--grafite)}
.sf-p .aro{fill:none; stroke:var(--laranja); stroke-width:1.5; opacity:0}
.sf-p[data-e="f"] .pt{fill:var(--branco); stroke:rgba(40,40,40,.6); stroke-width:1.5}
.sf-p[data-e="a"] .pt{fill:var(--roxo); transform:scale(1.6)}
.sf-p[data-e="a"] .aro{opacity:1}

.sf-n{position:absolute; left:var(--x); top:var(--y); min-height:44px; min-width:44px; padding:0 2px; background:none; border:0; border-radius:2px; font:500 14px/1.2 "Inter",sans-serif; color:var(--txt); white-space:nowrap; cursor:pointer}
.sf-n[data-pos="t"]{transform:translate(-50%, calc(-100% - 2px))}
.sf-n[data-pos="b"]{transform:translate(-50%, 2px)}
.sf-n[data-pos="d"]{transform:translate(14px, -50%); text-align:left}
.sf-n[data-pos="e"]{transform:translate(calc(-100% - 14px), -50%); text-align:right}
.sf-n[data-e="f"]{color:var(--txt2); font-weight:400}
.sf-n[data-e="a"]{font-family:"Montserrat",sans-serif; font-weight:600}
.sf-arco{display:none; position:absolute; top:50%; transform:translateY(-50%); white-space:nowrap}
.sf-arco-d{left:calc(90% + 20px)}
.sf-arco-f{right:calc(90% + 20px)}

.sf-txt{display:grid; gap:48px}
.sf-mov-f{margin-top:8px !important}
.sf-dims{margin-top:32px; display:grid; gap:24px}
.sf-dims li{display:grid; grid-template-columns:20px 1fr; column-gap:12px; align-items:start}
.marca{grid-row:1; grid-column:1; width:20px; height:20px; margin-top:calc((var(--f-h4) * 1.3 - 20px) / 2)}
.marca svg{width:20px; height:20px; overflow:visible}
.m-a{fill:none; stroke:rgba(40,40,40,.4); stroke-width:1}
.m-p{fill:var(--grafite)}
.sf-dn{grid-column:2; font:600 var(--f-h4)/1.3 "Montserrat",sans-serif}
.sf-dims p{grid-column:2; margin-top:4px}
.sf-retorno{padding-top:40px; border-top:1px solid var(--fio)}
.sf-retorno .corpo{max-width:680px}

.sf-saida{padding-block:var(--padrao)}
.sf-saida .corpo{max-width:680px}
.sf-saida p:last-child{margin-top:calc(var(--ap-link) - 9px)}

/* Mobile: anel de ~190–220 px; os quatro nomes laterais sobem ou descem em diagonal para caber sem sair das margens */
@media (max-width:767px){
  .sf-n[data-pos="d"], .sf-n[data-pos="e"]{display:inline-flex}
  .sf-n[data-i="2"]{transform:translate(-14px, calc(-100% - 26px)); align-items:flex-end}
  .sf-n[data-i="6"]{transform:translate(calc(-100% + 14px), calc(-100% - 26px)); align-items:flex-end}
  .sf-n[data-i="3"]{transform:translate(-14px, 26px); align-items:flex-start}
  .sf-n[data-i="5"]{transform:translate(calc(-100% + 14px), 26px); align-items:flex-start}
}
@media (min-width:768px){
  .sf-anel{width:360px}
  .sf-entrada, .sf-saida{text-align:center}
  .sf-entrada .h2, .sf-entrada .corpo, .sf-saida .corpo{margin-inline:auto}
  .sf-dia{padding-block:96px 88px}
  .sf-n{font-size:15px}
  .sf-n[data-pos="d"]{transform:translate(20px, -50%)}
  .sf-n[data-pos="e"]{transform:translate(calc(-100% - 20px), -50%)}
  .sf-arco{display:block}
  .sf-txt{grid-template-columns:1fr 1fr; column-gap:24px}
  .sf-retorno{grid-column:1 / -1}
}
@media (min-width:1200px){
  .sf-anel{width:min(440px, calc((7 * ((100% - 264px) / 12) + 144px - 290px) / .8))}
  .sf-dia{padding-block:88px 80px}
}

/* ---------- Método — cena fixa ---------- */
.cena .sf-anel{width:min(440px, 50vh, calc((100% - 290px) / .8))}
.cena .sf-entrada{padding-bottom:0}
.cena .sf-cena{height:calc(100vh + 7 * 30vh)}
.cena .sf-palco{position:sticky; top:0; height:100vh; display:flex; align-items:center; padding-top:var(--cabh)}
.cena .sf-grade{display:grid; grid-template-columns:repeat(12, 1fr); column-gap:24px; align-items:center}
.cena .sf-dia{grid-column:1 / 8; padding:0}
.cena .sf-txt{grid-column:8 / 13; display:grid; grid-template-columns:minmax(0,1fr); gap:0}
.cena .sf-txt > *{grid-area:1 / 1; align-self:center; opacity:0; transition:opacity var(--base) var(--curva)}
.cena .sf-txt > .on{opacity:1}
.cena .sf-dims{display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin-top:40px}
.cena .sf-dims li{grid-area:1 / 1; display:block; opacity:0; transition:opacity var(--base) var(--curva)}
.cena .sf-dims li.on{opacity:1}
.cena .marca{display:none}
.cena .sf-dn{font-size:var(--f-h3); line-height:1.24}
.cena .sf-dims p{margin-top:12px}
.cena .sf-retorno{padding-top:0; border-top:0}
.cena .sf-retorno .corpo{margin-top:16px}
.cena .sf-n[data-e="a"]{font-size:19px}
.cena .sf-n, .cena .sf-p .aro{transition:color var(--base) var(--curva), opacity var(--base) var(--curva)}
.cena .sf-saida{padding-top:var(--blocos)}

/* ==========================================================
   5. SOLUÇÕES
   ========================================================== */
.sol{background:var(--off); padding-block:var(--padrao)}
.sol-cab{max-width:680px; margin-bottom:var(--blocos)}
.faixa{display:block; padding-block:32px; border-bottom:1px solid var(--fio); text-decoration:none; transition:border-color var(--rapida) var(--curva)}
.faixa-1{padding-block:40px; border-top:1px solid var(--fio)}
.faixa-t .rotulo{margin-top:8px}
.faixa-c{margin-top:16px}
.faixa .link{margin-top:calc(var(--ap-link) - 16px)}
.faixa:active{opacity:.85}
.faixa:focus-visible{outline-offset:6px}
.sol-todas{margin-top:calc(var(--blocos) - 9px)}
@media (min-width:768px){
  .faixa{display:grid; grid-template-columns:1fr 1fr; column-gap:24px; padding-block:40px}
  .faixa-1{padding-block:48px}
  .faixa-c{margin-top:0}
}
@media (min-width:1200px){
  .faixa{grid-template-columns:repeat(12, 1fr); padding-block:48px}
  .faixa-1{padding-block:64px}
  .faixa-t{grid-column:1 / 7}
  .faixa-c{grid-column:8 / 13}
}
@media (hover:hover){ .faixa:hover{border-bottom-color:var(--laranja)} }

/* ==========================================================
   6. DIAGNÓSTICO
   ========================================================== */
.diag{--txt2:var(--grafite); --fio:rgba(40,40,40,.2); background:var(--areia); padding-block:var(--compacta)}
.diag .corpo{max-width:600px; margin-top:12px}
.diag-link{margin-top:15px}
@media (min-width:768px){
  .diag-grade{display:grid; grid-template-columns:5fr 3fr; column-gap:24px; align-items:end}
  .diag-link{margin:0 0 -9px}
}
@media (min-width:1200px){
  .diag-grade{grid-template-columns:repeat(12, 1fr)}
  .diag-txt{grid-column:1 / 8}
  .diag-link{grid-column:9 / 13; white-space:nowrap}
}

/* ==========================================================
   7. MARCOS + LIVRO
   ========================================================== */
.marcos{background:var(--branco); padding-block:var(--blocos) var(--padrao)}
.foto-ph{display:grid; place-items:center; width:100%; aspect-ratio:4 / 5; padding:24px; background:var(--areia); color:var(--grafite); font:600 12px/1.6 "Montserrat",sans-serif; letter-spacing:.08em; text-align:center}
.foto-ph span{max-width:240px}
.marcos-txt{width:min(1200px, calc(100% - 2 * var(--mg))); margin-inline:auto; padding-top:40px}
.marcos-sub{margin-top:8px; font:500 var(--f-corpo)/1.5 "Inter",sans-serif; color:var(--txt)}
.marcos-sub + .corpo{margin-top:var(--t-ap)}
.marcos-txt p:last-child{margin-top:calc(var(--ap-link) - 9px)}

.livro{margin-top:var(--blocos); padding-top:var(--blocos); border-top:1px solid var(--fio)}
.livro-t{margin-top:16px; font-weight:inherit}
.livro-t .h3{display:block}
.livro-st{display:block; margin-top:8px; font:500 var(--f-h4)/1.3 "Montserrat",sans-serif}
.livro-autor{margin-top:16px; font-size:15px; line-height:1.6; color:var(--txt2)}
.livro-c{margin-top:24px}
.livro-c p:last-child{margin-top:calc(var(--ap-link) - 9px)}

@media (min-width:768px){
  .marcos{padding-top:var(--padrao)}
  .marcos-grade{width:min(1200px, calc(100% - 2 * var(--mg))); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; column-gap:24px; align-items:center}
  .marcos-txt{width:auto; margin:0; padding-top:0}
  .livro{display:grid; grid-template-columns:1fr 1fr; column-gap:24px}
  .livro-rosto .rotulo{display:block}
  .livro-c{margin-top:0; align-self:end}
}
@media (min-width:1200px){
  /* Fotografia: borda direita sempre no fim da coluna 6; largura = o espaço até a borda esquerda da tela, limitada a 810 px.
     Até ~1644 px de tela ela sangra; acima disso mantém 810 px e se afasta da borda aos poucos. Regra única, sem ponto de troca. */
  .marcos-grade{width:auto; margin:0; grid-template-columns:calc(50% - 12px) 1fr; column-gap:0}
  .marcos-foto{justify-self:end; width:min(100%, 810px)}
  .foto-ph{aspect-ratio:3 / 2}
  /* na coluna do texto, 100% = meia tela + 12 px; a largura útil equivale a min(1200px, 200% - 120px) */
  .marcos-txt{padding-left:calc(48px + ((min(1200px, calc(200% - 120px)) - 264px) / 12)); width:calc(48px + 6 * ((min(1200px, calc(200% - 120px)) - 264px) / 12) + 96px)}
  .livro{grid-template-columns:repeat(12, 1fr)}
  .livro-rosto{grid-column:1 / 8}
  .livro-c{grid-column:8 / 13}
}

/* ==========================================================
   8. PROPÓSITO
   ========================================================== */
.prop{background:var(--off); padding-block:var(--pausa)}
.prop-t{max-width:880px}
.prop .lead{max-width:560px}
.prop-in p:last-child{margin-top:calc(var(--ap-link) - 9px)}
@media (min-width:768px){
  .prop-in{text-align:center}
  .prop-t, .prop .lead{margin-inline:auto}
}
@media (prefers-reduced-motion:no-preference){
  .js .prop-t{opacity:0; transition:opacity var(--lenta) var(--curva)}
  .js .prop-t.visto{opacity:1}
}

/* ==========================================================
   10. CONVITE
   ========================================================== */
.convite{background:var(--roxo); padding-block:var(--pausa)}
.convite .h2{max-width:880px}
.linha-convite{width:64px; height:1.5px; margin-top:24px; transform-origin:left center}
.convite .lead{max-width:560px; margin-top:24px}
.convite .lead + p{margin-top:var(--ap-link)}
.convite .btn{width:100%}
.convite .legenda{margin-top:24px}
@media (min-width:768px){
  .convite-in{text-align:center}
  .convite .h2, .convite .lead, .linha-convite{margin-inline:auto}
  .linha-convite{width:96px; transform-origin:center}
  .convite .btn{width:auto}
}
@media (prefers-reduced-motion:no-preference){
  .js .linha-convite{transform:scaleX(0); transition:transform var(--traco) var(--curva)}
  .js .linha-convite.visto{transform:scaleX(1)}
}

/* ==========================================================
   RODAPÉ
   ========================================================== */
.rod{background:var(--grafite); padding-block:64px 32px}
.rod-logo img{width:260px; height:auto}
.rod-g{margin-top:40px}
.rod-t{font:600 15px/1.4 "Montserrat",sans-serif; color:var(--txt2); margin-bottom:8px}
.rod-g a{display:inline-block; padding-block:10px; text-decoration:none; text-underline-offset:5px; text-decoration-thickness:1px}
.rod-g a[data-pendente]::after{display:inline-block; vertical-align:middle}
.rod-links a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; text-underline-offset:5px; text-decoration-thickness:1px}
.rod-g a:hover, .rod-links a:hover{text-decoration:underline}
.rod-legal{margin-top:40px}
.rod-id{font-size:14px; line-height:1.57; color:var(--txt2); padding-block:8px}
.rod-links{font-size:14px}
.rod-ano{padding-block:12px; color:var(--txt2)}
@media (min-width:768px){
  .rod{padding-block:96px 48px}
  .rod-grade{display:grid; grid-template-columns:repeat(3, 1fr); column-gap:24px}
  .rod-logo{grid-column:1 / -1; margin-bottom:16px}
  .rod-g a{font-size:15px}
  .rod-legal{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 32px; margin-top:64px; padding-top:32px; border-top:1px solid var(--fio)}
  .rod-t-legal{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .rod-id{padding:0}
  .rod-links{display:flex; align-items:center; gap:24px}
  .rod-ano{padding:0}
}
@media (min-width:1200px){
  .rod-grade{grid-template-columns:repeat(12, 1fr)}
  .rod-logo{grid-column:1 / 5; margin:0}
  .rod-g{margin-top:0}
  .rod-g:nth-of-type(1){grid-column:5 / 7}
  .rod-g:nth-of-type(2){grid-column:7 / 10}
  .rod-g:nth-of-type(3){grid-column:10 / 13}
}

/* ---------- Aviso do protótipo ---------- */
.aviso{position:fixed; left:50%; bottom:24px; z-index:300; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); padding:12px 16px; background:var(--grafite); color:var(--off); border:1px solid rgba(246,243,237,.2); border-radius:4px; font-size:14px; line-height:1.5}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important}
}