/* ==========================================================================
   Como funciona: componentes próprios da página.
   Usa os tokens e as classes de site.css; aqui só o que é desta página.
   ========================================================================== */

/* ---------- passo a passo em 2 x 2 ---------- */
.passos.como-passos{grid-template-columns:repeat(2,minmax(0,1fr))}
.como-passos .passo{display:flex;flex-direction:column}
.como-passos .passo > p{max-width:30em}
.como-passos .como-passo__det{margin:20px 0 0}
.como-passos .como-passo__det li{font-size:15.5px;color:#3a3d45}
.como-passos .como-passo__link{margin:22px 0 0;font-size:16px}

/* ---------- três jeitos de rodar ---------- */
.como-modos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.como-modo{display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;border:1px solid var(--linha);border-radius:18px;background:var(--papel)}
.como-modo .card__cat i{background:var(--laranja);border-color:var(--laranja)}
.como-modo h3{font:700 22px/1.2 var(--display);letter-spacing:-.015em;margin:8px 0 0}
.como-modo p{margin:0;font-size:16px;color:#3a3d45}
.como-modo p.como-modo__ex{margin-top:auto;padding-top:14px;border-top:1px solid var(--linha);font:400 13px/1.55 var(--mono);color:var(--cinza-texto)}
.como-modos__link{margin:30px 0 0}

/* ---------- quando algo não confere ---------- */
.como-excecao__p{margin:16px 0 0;font-size:17px;color:#3a3d45;max-width:34em}

.como-registro{margin:0;background:var(--papel);border:1px solid var(--linha);border-radius:20px;box-shadow:0 30px 60px -30px rgba(23,25,31,.25);overflow:hidden}
.como-registro__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--linha);font:500 12.5px var(--mono);color:var(--cinza-texto);white-space:nowrap;overflow:hidden}
.como-registro__bar b{font-weight:500;color:var(--grafite)}
.como-registro__rot{overflow:hidden;text-overflow:ellipsis}
.como-registro__dots{display:flex;gap:6px;flex:none}
.como-registro__dots span{width:10px;height:10px;border-radius:50%;background:var(--linha)}
.como-registro__lista{list-style:none;margin:0;padding:18px 16px;display:flex;flex-direction:column;gap:8px;background-image:radial-gradient(#E3E2DC 1px,transparent 1px);background-size:18px 18px}
.como-registro__l{display:grid;grid-template-columns:44px 14px minmax(0,1fr);align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--linha);border-radius:12px;background:var(--papel);font:400 13.5px/1.45 var(--mono);color:var(--grafite)}
.como-registro__l time{color:var(--cinza-texto);font-size:12px;font-variant-numeric:tabular-nums}
.como-registro__l b{width:10px;height:10px;transform:rotate(45deg);border-radius:2px;background:var(--grafite);justify-self:center}
.como-registro__l.is-esp{color:var(--laranja-texto);background:var(--laranja-tinta);border-color:#F3CDB6}
.como-registro__l.is-esp b{background:var(--laranja)}
.como-registro__cap{font:400 12.5px var(--texto);color:var(--cinza-texto);padding:10px 16px;border-top:1px solid var(--linha);background:var(--off)}
/* as linhas do registro entram uma a uma quando o quadro aparece */
.como-registro.in .como-registro__l{animation:comoRegIn .45s ease both;animation-delay:calc(.35s + var(--i, 0) * .45s)}
@keyframes comoRegIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- nada para instalar ---------- */
.como-nuvem__nota{margin:22px 0 0}
.como-nuvem__nota a{color:var(--laranja-texto);font-weight:600}

/* ---------- glossário ---------- */
.como-gloss{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:48px 0 0}
.como-gloss__i{background:var(--off);border-radius:18px;padding:24px 24px 26px}
.como-gloss dt{display:flex;align-items:center;gap:10px;font:700 21px/1.2 var(--display);letter-spacing:-.015em;margin:0 0 8px}
.como-gloss dt::before{content:"";flex:none;width:9px;height:9px;background:var(--laranja);transform:rotate(45deg);border-radius:2px}
.como-gloss dd{margin:0;font-size:16px;color:#3a3d45}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .como-gloss{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .passos.como-passos,.como-modos,.como-gloss{grid-template-columns:1fr}
  .como-registro__l{grid-template-columns:40px 12px minmax(0,1fr);font-size:13px;padding:10px 12px}
  .como-registro__rot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .como-registro.in .como-registro__l{animation:none}
}