/* Dev 3 — prova (pv-), como funciona (cm-), CTA final e rodapé (ft-) */

/* títulos que se alargam no hover (equivale ao .wide da referência) */
.pv-h2,.cm-h2,.ft-h2{font-variation-settings:"wdth" 100;transition:font-variation-settings .8s var(--ease)}
.pv-h2:hover,.cm-h2:hover,.ft-h2:hover{font-variation-settings:"wdth" 130}

/* foco e links legíveis sobre o preto */
.escuro :focus-visible{outline-color:var(--laranja-sobre-preto)}

/* ---------- 08 prova ---------- */
.pv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:48px;align-items:start}
.pv-texto{display:flex;flex-direction:column;gap:18px}
.pv-sobre{margin:0;font-size:15px;color:var(--cinza-2)}
.pv-h2{margin:0;font-weight:400;font-size:clamp(36px,4.4vw,60px);line-height:1.02;letter-spacing:-.03em}
.pv-p{margin:0;max-width:44ch;font-size:17px;line-height:1.7;color:var(--areia)}
.pv-cartoes{display:flex;flex-direction:column;gap:14px}
.pv-card{border-radius:var(--raio);display:flex;flex-direction:column;gap:6px}
.pv-card-num{border:1.5px solid var(--creme);padding:26px}
.pv-num{margin:0;font-size:clamp(44px,5vw,64px);font-weight:500;line-height:1;font-variation-settings:"wdth" 120}
.pv-dez{color:var(--laranja-sobre-preto)}
.pv-leg{margin:0;font-size:15px;line-height:1.55;color:var(--cinza-2)}
.pv-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:14px}
.pv-card-sm{border:1.5px solid var(--grafite);padding:22px}
.pv-h3{margin:0;font-size:24px;font-weight:500;font-variation-settings:"wdth" 115}
.pv-fund{border:1.5px dashed var(--cinza-1);padding:26px;gap:8px}
.pv-fund .pv-leg{line-height:1.6}
.pv-fund-t{margin:0;font-family:var(--f-texto);font-weight:600;font-size:17px}
.pv-fund-a{align-self:flex-start;color:var(--creme);font-weight:600;padding-top:4px}
.pv-fund-a:hover{color:var(--laranja-sobre-preto)}

/* ---------- 09 como funciona ---------- */
.cm-in{display:flex;flex-direction:column;gap:36px}
.cm-h2{margin:0;font-weight:400;font-size:clamp(38px,4.8vw,68px);line-height:1;letter-spacing:-.03em}
.cm-lista{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));column-gap:28px;row-gap:32px}
.cm-passo{display:grid;grid-template-rows:auto auto 1fr;grid-row:span 3;row-gap:8px;align-content:start;border-top:1px solid var(--cinza-2);padding-top:18px}
@supports (grid-template-rows:subgrid){.cm-passo{grid-template-rows:subgrid}}
.cm-n{font-size:44px;font-weight:300;line-height:1}
.cm-h3{margin:0;font-size:19px;font-weight:600}
.cm-p{margin:0;font-size:15px;line-height:1.6;color:var(--grafite)}

/* ---------- 10 CTA + rodapé ---------- */
.ft{overflow:hidden}
.ft-cta{padding-top:clamp(72px,10vw,128px);padding-bottom:clamp(72px,10vw,128px);display:flex;flex-direction:column;gap:32px}
.ft-h2{margin:0;font-weight:300;font-size:clamp(48px,8vw,120px);line-height:.92;letter-spacing:-.035em;overflow-wrap:break-word}
.ft-linha{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.ft-p{margin:0;max-width:40ch;font-size:18px;line-height:1.65;color:var(--areia)}
.ft-btn{min-height:56px;padding:18px 32px;font-size:17px}

.ft-footer{color:var(--cinza-2)}
.ft-rodape{border-top:1px solid var(--grafite);padding-top:28px;padding-bottom:28px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;font-size:14px}
.ft-marca{margin:0}
.ft-links{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:22px}
.ft-links a{color:var(--areia)}
.ft-links a:hover{color:var(--creme)}

.ft-assin{overflow:hidden;padding:0 clamp(8px,2vw,24px);display:flex;align-items:flex-end;justify-content:center;gap:1vw;line-height:.78}
.ft-giant{font-size:clamp(110px,24vw,340px);font-weight:600;color:var(--creme);white-space:nowrap;transform:translateY(8%);font-variation-settings:"wdth" 120}
.ft-alma{height:clamp(70px,15vw,210px);width:auto;flex-shrink:0;margin-bottom:4%}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .ft-giant{animation:ft-stretch linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
    .ft-alma path{stroke-dasharray:120;animation:ft-draw linear both;animation-timeline:view();animation-range:entry 10% cover 60%}
  }
}
@keyframes ft-stretch{from{font-variation-settings:"wdth" 50;letter-spacing:-.06em}to{font-variation-settings:"wdth" 150;letter-spacing:-.03em}}
@keyframes ft-draw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){.pv-h2,.cm-h2,.ft-h2{transition:none}}