/* ZNITH.AI · solucoes.campioto.com · rodada 2 (13/11/2026)
   Marfim e papel no fundo, ouro com peso (arco, botões, a escada), navy no texto.
   Texto pequeno em ouro usa o ouro escuro (#7A5A1C, 6,25:1 sobre o marfim). */

:root{
  --marfim:#FFFDF8;
  --papel:#FAF7F0;
  --papel-2:#F3ECDD;
  --navy:#00172B;
  --navy-2:#14213D;
  --tinta:#2B2622;
  --tinta-2:#5A524A;
  --ouro:#C49738;
  --ouro-claro:#E9D3A0;
  --ouro-luz:#F6EBCB;
  --ouro-escuro:#7A5A1C;
  --ouro-fundo:#A57C25;
  --fio:#E6DCC6;
  --botao:linear-gradient(180deg,#F1CB62 0%,#C49738 60%,#A57C25 100%);
  --metal:linear-gradient(155deg,#F6DA86 0%,#D9AE4A 38%,#C49738 62%,#8E6820 100%);
  --numeral:linear-gradient(180deg,#B08328 0%,#7A5A1C 100%);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --larg:1200px;
  --gutter:clamp(16px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--marfim);color:var(--tinta);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  font-feature-settings:"lnum" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-2);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--ouro)}
:focus-visible{outline:3px solid var(--navy-2);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);font-weight:500;line-height:1.12;margin:0;letter-spacing:-.005em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
[hidden]{display:none!important}
.envelope{max-width:var(--larg);margin:0 auto;padding:0 var(--gutter)}
.so-leitor{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;z-index:50}
.pular:focus{left:12px}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:46px;padding:.7em 1.25em;border-radius:3px;
  font:600 .95rem/1.2 var(--sans);text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:filter .15s,background-color .15s,color .15s;
  text-align:center;
}
.btn-ouro{background:var(--botao);color:#2A1D05;border-color:var(--ouro-fundo);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 0 rgba(122,90,28,.25)}
.btn-ouro:hover{filter:brightness(1.05)}
.btn-linha{background:transparent;color:var(--navy);border-color:var(--navy-2)}
.btn-linha:hover{background:var(--navy);color:var(--marfim)}
.btn-texto{
  display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;
  color:var(--navy-2);text-decoration:underline;text-underline-offset:4px;font:500 .95rem/1.3 var(--sans);cursor:pointer;
}
.btn-texto:hover{text-decoration-color:var(--ouro)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- topo ---------- */
.topo{border-bottom:1px solid var(--fio);background:var(--marfim)}
.topo .envelope{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}
.marca img{width:auto;height:44px}
.marca span{font-family:var(--serif);font-size:1.3rem;font-weight:600;letter-spacing:.02em}
.btn-topo{min-height:44px;padding:.5em 1.1em;font-size:.9rem}

/* ---------- abertura: o seletor ---------- */
.abertura{padding:clamp(28px,5vw,72px) 0 clamp(40px,6vw,80px);overflow:hidden}
.abertura .envelope{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,80px);align-items:center}
.abertura-texto{grid-column:1;grid-row:1}
.posicao{font-size:.95rem;color:var(--ouro-escuro);font-weight:500;margin-bottom:18px}
.abertura h1{font-size:clamp(2.4rem,5.6vw,4.5rem);max-width:13ch}
.abertura .lead{margin-top:20px;font-size:1.125rem;color:var(--tinta-2);max-width:46ch}

.momentos{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--fio)}
.momentos li{border-bottom:1px solid var(--fio)}
.momento{
  width:100%;display:grid;grid-template-columns:30px 1fr;gap:4px 16px;align-items:start;
  padding:18px 10px 18px 8px;background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit;
  transition:background-color .2s;
}
.momento .anel{
  grid-row:1 / span 2;margin-top:5px;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--ouro-escuro);background:var(--marfim);position:relative;transition:background .2s,border-color .2s;
}
.momento .anel::after{content:"";position:absolute;inset:5px;border-radius:50%;background:transparent}
.momento .frase{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.55rem);color:var(--navy);line-height:1.25}
.momento .rumo{font-size:.92rem;color:var(--tinta-2)}
.momento:hover{background:rgba(196,151,56,.07)}
.momento:hover .anel{border-color:var(--ouro-fundo)}
.momento[aria-pressed="true"]{background:linear-gradient(90deg,var(--ouro-luz),rgba(246,235,203,0) 85%)}
.momento[aria-pressed="true"] .anel{background:var(--metal);border-color:var(--ouro-escuro)}
.momento[aria-pressed="true"] .anel::after{background:var(--navy)}

/* a porta: a foto num arco, com o arco de ouro maciço atrás */
.porta{grid-column:2;grid-row:1;position:relative;margin:0;justify-self:end;width:100%;max-width:410px}
.moldura{position:relative;margin:0 40px 40px 0}
.moldura::before{
  content:"";position:absolute;inset:40px -40px -40px 40px;border-radius:999px 999px 6px 6px;
  background:var(--metal);box-shadow:0 18px 40px -18px rgba(122,90,28,.55);z-index:0;
}
.arco{
  position:relative;z-index:1;border-radius:999px 999px 6px 6px;overflow:hidden;aspect-ratio:3/4.3;
  background:var(--navy-2);outline:1px solid rgba(255,253,248,.6);outline-offset:-7px;
}
.arco img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.porta figcaption{margin-top:14px;font-size:.88rem;color:var(--tinta-2);max-width:34ch}

/* ---------- o caminho escolhido ---------- */
.caminho{background:var(--papel);border-top:1px solid var(--fio);border-bottom:1px solid var(--fio)}
.caminho:focus{outline:none}
.caminho .envelope{padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(36px,5vw,56px)}
.quem-disse{font-family:var(--serif);font-style:italic;color:var(--ouro-escuro);font-size:1.1rem;margin-bottom:6px}
.caminho h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.caminho .resumo{margin-top:10px;color:var(--tinta-2);max-width:62ch}
.passos{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:0;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));position:relative}
.passos::before{
  content:"";position:absolute;left:0;right:0;top:17px;height:3px;background:var(--metal);
  transform-origin:left center;transform:scaleX(var(--traco,1));transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.passo{position:relative;padding:0 22px 0 0}
.passo .marco{
  position:relative;z-index:1;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--metal);border:1px solid var(--ouro-escuro);font:600 .95rem/1 var(--sans);color:#2A1D05;
}
.passo .rotulo{display:block;margin-top:14px;font-size:.85rem;color:var(--ouro-escuro);font-weight:500}
.opcoes{display:grid;gap:14px;margin-top:6px}
.opcao{border-top:1px solid var(--fio);padding-top:12px}
.opcao:first-child{border-top:0;padding-top:0}
.opcao h3{font-size:1.25rem}
.opcao .preco{margin-top:4px;font-family:var(--serif);font-size:1.05rem;color:var(--navy)}
.opcao .fmt{margin-top:2px;font-size:.86rem;color:var(--ouro-escuro)}
.opcao .acoes{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.opcao .acoes .btn:not(.btn-texto){min-height:44px;font-size:.88rem;padding:.55em 1em}
.juncao{font-size:.85rem;color:var(--tinta-2);font-style:italic}
.passos.unico{display:block}
.passos.unico::before,.passos.unico .marco,.passos.unico .rotulo,.passos.unico .juncao{display:none}
.passos.unico .passo{padding:0}
.passos.unico .opcoes{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px 32px;margin:0}
.passos.unico .opcao,.passos.unico .opcao:first-child{border-top:3px solid var(--ouro);background:var(--marfim);padding:18px 20px 20px}
.passos.unico .opcao h3{font-size:1.5rem}
.passos.unico .opcao:only-child{max-width:560px}
.caminho .depois{margin-top:26px;display:flex;flex-wrap:wrap;gap:4px 28px;align-items:center}

/* ---------- método ---------- */
.metodo{padding:clamp(36px,5vw,56px) 0;border-bottom:1px solid var(--fio)}
.metodo .envelope{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 64px;align-items:center}
.metodo p.titulo{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);color:var(--navy);line-height:1.2;text-wrap:balance}
.ppd{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(8px,1.2vw,14px);font-family:var(--serif);font-size:clamp(1.15rem,4.8vw,2rem);color:var(--navy)}
@media (min-width:961px){.ppd{font-size:clamp(1.4rem,2.6vw,2rem)}}
.ppd .mais{color:var(--ouro-escuro)}
.ppd .ia{color:var(--ouro-escuro);font-style:italic}
.metodo .nota{margin-top:10px;color:var(--tinta-2);font-size:.98rem}

/* ---------- a escada ---------- */
.escada{padding:clamp(48px,7vw,96px) 0}
.escada-topo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:clamp(28px,4vw,40px)}
.escada h2{font-size:clamp(2rem,4.4vw,3.2rem);max-width:16ch}
.escada-topo p{max-width:44ch;color:var(--tinta-2)}

/* o perfil da escada: patamares que sobem da esquerda para a direita */
.perfil{position:relative;padding-top:84px;margin-bottom:clamp(40px,6vw,72px)}
.patamares{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;border-bottom:2px solid var(--ouro-fundo)}
.patamar{
  position:relative;min-height:calc(210px + var(--i) * 64px);
  padding:18px 16px 20px;border-top:3px solid var(--ouro);border-left:2px solid var(--ouro);
  /* a luz cresce a cada degrau: do marfim ao ouro */
  background:linear-gradient(180deg,color-mix(in srgb,#EFC965 calc(14% + var(--i) * 13%),#FCF7EA) 0%,color-mix(in srgb,#EFC965 calc(4% + var(--i) * 7%),var(--marfim)) 100%);
  transition:background .35s,border-color .35s;
}
.patamar .pprod .pp{color:#5C4413}
.patamar:first-child{border-left-width:3px}
.patamar-nome{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--navy);min-height:44px}
.patamar-nome:hover .pnome,.patamar-nome:hover > span:last-child{text-decoration:underline;text-decoration-color:var(--ouro)}
.pn{
  font-family:var(--serif);font-weight:600;font-size:2.8rem;line-height:1;color:var(--ouro-escuro);
}
.patamar-nome > span:last-child{font-family:var(--serif);font-size:1.15rem;line-height:1.2}
.pprod{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.pprod button{
  display:block;width:100%;min-height:44px;text-align:left;background:none;border:0;padding:6px 0;cursor:pointer;
  font:500 .92rem/1.3 var(--sans);color:var(--navy-2);
}
.pprod button:hover{color:var(--navy);text-decoration:underline;text-decoration-color:var(--ouro);text-underline-offset:3px}
.pprod .pp{display:block;font-weight:400;font-size:.82rem;color:var(--ouro-escuro);margin-top:1px}
.leao-topo{position:absolute;right:14px;bottom:calc(100% + 3px);height:72px;width:auto}
/* aceso: o degrau que está no caminho escolhido */
body.filtrando .patamar{background:var(--marfim)}
body.filtrando .patamar.aceso{background:linear-gradient(180deg,#EFC965 0%,#F5DE9C 50%,#FBF0D2 100%);border-top-color:var(--ouro-fundo);border-top-width:5px}
.pprod button.no-caminho{font-weight:600;color:var(--navy)}
.pprod button.no-caminho::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--navy);margin-right:7px;vertical-align:middle;transform:translateY(-1px)}

.filtro-ativo{display:none;align-items:center;gap:4px 16px;flex-wrap:wrap;margin:0 0 28px;padding:8px 16px;background:var(--ouro-luz);border-left:3px solid var(--ouro-fundo)}
body.filtrando .filtro-ativo{display:flex}

.sub-escada{font-size:clamp(1.4rem,2.4vw,1.8rem);margin-bottom:8px}
.degraus{list-style:none;margin:0;padding:0}
.degrau{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:20px 40px;padding:32px 0;border-top:1px solid var(--fio);scroll-margin-top:16px}
.degrau:last-child{border-bottom:1px solid var(--fio)}
.degrau-nome{display:grid;grid-template-columns:auto 1fr;gap:16px;align-content:start;align-items:start}
.num{
  font-family:var(--serif);font-weight:600;font-size:4.2rem;line-height:.9;color:var(--ouro-escuro);
}
.degrau-nome .n{font-size:.85rem;color:var(--ouro-escuro);font-weight:500}
.degrau-nome h3{font-size:1.6rem;margin-top:2px}
.degrau-nome p{font-size:.95rem;color:var(--tinta-2);margin-top:6px}

.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cartao{
  position:relative;display:flex;flex-direction:column;background:var(--marfim);
  border:1px solid var(--fio);border-top:3px solid var(--ouro-claro);padding:22px 22px 18px;
  transition:border-color .35s,background-color .35s;scroll-margin-top:24px;
}
.cartao h4{font-weight:500;font-size:1.35rem;line-height:1.2}
.cartao .quem{margin-top:8px;font-size:.95rem;color:var(--tinta-2)}
.cartao .pe{margin-top:auto;padding-top:18px}
.cartao .valor{font-family:var(--serif);font-size:1.25rem;color:var(--navy);line-height:1.3;min-height:2.9em}
.cartao .valor .unid{font-size:.85em}
.cartao .valor small{display:block;font-family:var(--sans);font-size:.84rem;color:var(--tinta-2);margin-top:2px}
.cartao .formato{margin-top:4px;font-size:.86rem;color:var(--ouro-escuro)}
.cartao .acoes{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.cartao .acoes .btn-ouro,.cartao .acoes .btn-linha{min-height:44px;padding:.55em 1em;font-size:.88rem}
.cartao .detalhe{display:none}
.selo{
  position:absolute;top:-13px;right:14px;display:none;background:var(--navy);color:var(--marfim);
  font-size:.78rem;font-weight:600;padding:3px 11px;border-radius:999px;
}
/* com um caminho escolhido: o caminho ganha ouro, o resto fica quieto (texto com contraste inteiro) */
body.filtrando .cartao{background:transparent;border-top-color:var(--fio)}
body.filtrando .cartao:not(.no-caminho) .btn-ouro{background:transparent;color:var(--navy);border-color:var(--navy-2);box-shadow:none}
body.filtrando .cartao.no-caminho{background:var(--marfim);border-color:var(--ouro);border-top:4px solid var(--ouro-fundo);box-shadow:0 10px 30px -18px rgba(122,90,28,.5)}
body.filtrando .cartao.no-caminho .selo{display:inline-block}

/* ---------- palco ---------- */
.palco{background:var(--papel);border-top:1px solid var(--fio);border-bottom:1px solid var(--fio);padding:clamp(48px,7vw,88px) 0;scroll-margin-top:0}
.palco:focus{outline:none}
.palco .envelope{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.palco h2{font-size:clamp(2rem,4vw,2.8rem)}
.palco .intro{margin-top:14px;color:var(--tinta-2);max-width:46ch}
.palco figure{margin:0;position:relative}
.palco figure::before{content:"";position:absolute;inset:16px -16px -16px 16px;background:var(--metal);border-radius:3px}
.palco figure img{position:relative;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:3px}
.formatos{list-style:none;margin:28px 0 0;padding:0}
.formato-palco{border-top:1px solid var(--fio);padding:16px 0;display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:baseline}
.formato-palco:last-child{border-bottom:1px solid var(--fio)}
.formato-palco h4{font-size:1.45rem}
.formato-palco .formato{font-size:.86rem;color:var(--ouro-escuro)}
.formato-palco .valor{font-family:var(--serif);font-size:1.35rem;color:var(--navy);text-align:right}
.acoes-formato{display:none;grid-column:1 / -1;margin-top:6px}
.palco .acoes-palco{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
body[data-momento="evento"] .acoes-formato{display:flex}
body[data-momento="evento"] .acoes-palco .btn-ouro{display:none}
body[data-momento="evento"] .formato-palco{border-left:4px solid var(--ouro-fundo);padding-left:16px;background:var(--marfim)}

/* ---------- o que dizem ---------- */
.falas{padding:clamp(48px,7vw,96px) 0}
.falas h2{font-size:clamp(1.8rem,3.6vw,2.6rem);max-width:20ch}
.falas figure{margin:0}
.falas blockquote{margin:0}
.fala-grande{margin-top:36px!important;position:relative;padding:8px 0 0 clamp(0px,6vw,88px);max-width:980px}
.fala-grande::before{
  content:"“";position:absolute;left:0;top:-18px;font-family:var(--serif);font-size:clamp(5rem,9vw,8rem);line-height:1;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.fala-grande blockquote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.3vw,1.75rem);line-height:1.5;color:var(--navy)}
.fala-grande blockquote p::after{content:"\201D";color:var(--ouro-escuro);font-style:normal;margin-left:2px}
.falas figcaption{margin-top:14px;font-size:.92rem;color:var(--tinta-2)}
.falas figcaption b{color:var(--navy);font-weight:600}
.falas-menores{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.falas-menores figure{padding-top:18px;border-top:2px solid var(--ouro)}
.falas-menores blockquote p{font-family:var(--serif);font-style:italic;font-size:1.18rem;line-height:1.5;color:var(--navy)}

/* ---------- fecho ---------- */
.fecho{background:var(--papel);border-top:1px solid var(--fio);padding:clamp(56px,8vw,104px) 0;text-align:center}
.fecho img{width:min(240px,55vw);margin:0 auto 20px}
.fecho h2{font-size:clamp(2rem,4.4vw,3rem)}
.fecho p{margin:14px auto 0;max-width:48ch;color:var(--tinta-2)}
.fecho .acoes{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px}

.rodape{padding:36px 0 44px;font-size:.88rem;color:var(--tinta-2)}
.rodape .envelope{display:grid;gap:14px}
.rodape .versiculo{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--navy);max-width:70ch}
.rodape .versiculo cite{font-style:normal;font-family:var(--sans);font-size:.85rem;color:var(--ouro-escuro);white-space:nowrap;margin-left:4px}

/* ---------- ficha (dialog) ---------- */
dialog.ficha{
  width:min(920px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:4px;
  background:var(--marfim);color:var(--tinta);box-shadow:0 30px 80px rgba(0,23,43,.28);overflow-y:auto;overflow-x:hidden;
}
dialog.ficha::backdrop{background:rgba(0,23,43,.55)}
.ficha-corpo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.ficha-lado{position:relative;min-height:100%;background:var(--papel-2)}
.ficha-lado img{width:100%;height:100%;object-fit:cover;min-height:360px}
.arte{
  height:100%;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  padding:clamp(22px,3vw,34px);background:linear-gradient(160deg,#FBF1D6 0%,#F1D995 55%,#E2BE66 100%);color:var(--navy);
}
.arte .grande{font-family:var(--serif);font-weight:600;font-size:clamp(4.5rem,9vw,7rem);line-height:.85;color:var(--navy)}
.arte .grande small{display:block;font-family:var(--sans);font-weight:500;font-size:.9rem;letter-spacing:0;margin-top:10px;color:#3C2C0A}
.arte svg{width:100%;height:auto;max-width:300px}
.arte .degrau-arte{font-family:var(--serif);font-size:1.2rem}
.ficha-texto{padding:clamp(24px,4vw,44px);position:relative}
.ficha-texto .degrau-de{font-size:.86rem;color:var(--ouro-escuro);font-weight:500}
.ficha-texto h3{font-size:clamp(1.7rem,3vw,2.3rem);margin-top:6px;padding-right:40px}
.ficha-texto .quem{margin-top:10px;color:var(--tinta-2)}
.ficha-texto .oque{margin-top:18px}
.ficha-texto dl{margin:22px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;border-top:1px solid var(--fio);padding-top:18px}
.ficha-texto dt{font-size:.86rem;color:var(--ouro-escuro);font-weight:500;padding-top:2px}
.ficha-texto dd{margin:0;color:var(--navy)}
.ficha-texto dd.preco{font-family:var(--serif);font-size:1.2rem}
.ficha-texto .acoes{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 14px}
/* o Fechar acompanha a rolagem da ficha longa (fica preso no topo da caixa) */
.ficha-texto{padding-top:14px}
.fechar{
  position:sticky;top:14px;z-index:3;margin:0 calc(-1 * clamp(24px,4vw,44px) + 14px) -44px auto;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--fio);
  background:var(--marfim);cursor:pointer;display:grid;place-items:center;color:var(--navy);
  box-shadow:0 4px 14px -6px rgba(0,23,43,.35);
}
.ficha-texto .degrau-de{padding-top:clamp(10px,3vw,30px)}
.fechar:hover{border-color:var(--ouro)}
.fechar svg{width:18px;height:18px}

/* ---------- tablet e celular ---------- */
@media (min-width:1101px){
  .cartoes.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cartoes.tres .cartao{padding:20px 18px 16px}
}
@media (max-width:1100px) and (min-width:600px){
  .cartoes.tres{grid-template-columns:1fr 1fr}
  .cartoes.tres .cartao:last-child{grid-column:1 / -1}
}
@media (max-width:960px){
  .abertura .envelope{grid-template-columns:1fr;gap:28px}
  .abertura-texto,.porta{grid-column:1;grid-row:auto}
  .porta{justify-self:stretch;max-width:none}
  .moldura{margin:0 14px 14px 0}
  .moldura::before{inset:14px -14px -14px 14px;border-radius:999px 999px 6px 6px}
  .arco{aspect-ratio:auto;height:clamp(250px,52vw,400px)}
  .arco img{object-position:50% 14%}
  .porta figcaption{margin-top:10px}
  .passos{grid-template-columns:1fr;gap:26px}
  .passos::before{left:17px;right:auto;top:0;bottom:0;width:3px;height:auto;transform-origin:center top;transform:scaleY(var(--traco,1))}
  .passo{padding:0 0 0 56px}
  .passo .marco{position:absolute;left:0;top:0}
  .passo .rotulo{margin-top:8px}
  .metodo .envelope{grid-template-columns:1fr}
  .degrau{grid-template-columns:1fr;gap:18px}
  .palco .envelope{grid-template-columns:1fr}
  .palco figure{order:-1;margin-right:16px}
  .falas-menores{grid-template-columns:1fr;gap:28px}
  .ficha-corpo{grid-template-columns:1fr}
  .ficha-lado img{min-height:0;aspect-ratio:16/9;height:auto}
  .arte{min-height:0;flex-direction:row;align-items:flex-end;padding:20px 22px}
  .arte svg{max-width:160px}
  .arte .grande{font-size:4rem}

  /* no celular e no tablet: degrau 1 no topo (ordem da leitura = ordem do Tab);
     a subida aparece no recuo crescente e no fio de ouro em degrau */
  .perfil{padding-top:0}
  .patamares{display:flex;flex-direction:column;align-items:stretch;border-bottom:0}
  .patamar{
    min-height:0;margin-left:calc(var(--i) * 7%);padding:14px 14px 14px 16px;
    border-top:3px solid var(--ouro);border-left:3px solid var(--ouro);border-bottom:0;
  }
  .patamar[data-degrau="5"]{border-bottom:3px solid var(--ouro-fundo);padding-right:74px}
  .pn{font-size:2.2rem}
  .pprod{margin-top:6px}
  .leao-topo{bottom:auto;top:12px;right:10px;height:52px}
}
@media (max-width:520px){
  body{font-size:1rem}
  /* a 1ª opção do seletor cabe na primeira tela do celular */
  .abertura{padding-top:14px}
  .abertura .envelope{gap:14px}
  .arco{height:168px}
  .arco img{object-position:50% 12%}
  .moldura{margin:0 10px 10px 0}
  .moldura::before{inset:10px -10px -10px 10px}
  .porta figcaption{margin-top:6px;font-size:.78rem}
  .posicao{margin-bottom:8px;font-size:.84rem}
  .abertura h1{font-size:2.15rem}
  .abertura .lead{margin-top:10px;font-size:1rem}
  .momentos{margin-top:16px}
  .momento{padding:14px 8px 14px 6px}
  .btn-topo span{display:none}
  .btn-topo{width:46px;padding:0}
  .marca img{height:38px}
  .cartoes{grid-template-columns:1fr}
  .cartao .valor{min-height:0}
  .formato-palco{grid-template-columns:1fr}
  .formato-palco .valor{text-align:left}
  .cartao .acoes .btn-ouro,.cartao .acoes .btn-linha{flex:1 1 auto}
  .patamar{margin-left:calc(var(--i) * 6%)}
  .pprod{grid-template-columns:1fr}
  .arte svg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .passos::before,.cartao,.momento,.momento .anel,.patamar{transition:none}
}