/*
 * Guia "Como usar", em duas partes.
 *
 * Tudo aqui vive dentro de .guia. O guia veio pronto, com CSS próprio que
 * redefinia body, h1, a, code e .wrap — nomes que o estilo.css do site também
 * usa. Duas folhas disputando os mesmos seletores é briga garantida, e quem
 * perde é a página que alguém abrir daqui a seis meses. Prefixado, o guia fica
 * com a aparência que foi desenhada e o site continua dono do resto.
 *
 * As cores saem dos tokens do site (estilo.css), e não de uma paleta paralela:
 * o guia original tinha os valores "amostrados do myperfolio.com.br", o que
 * significa que qualquer ajuste de marca deixaria estas páginas para trás.
 */

.guia{
  --papel:      var(--surface-2);
  --branco:     var(--surface);
  --tinta:      var(--ink);
  --tinta-2:    var(--text-soft);
  --verde:      var(--brand);
  --verde-esc:  var(--brand-600);
  --verde-lav:  #EDF4F1;
  --regua:      var(--line);
  --alerta:     #A32C1E;
  background: var(--papel);
}

/* coluna do texto: mais estreita que a do site, porque o guia é leitura corrida */
.guia-col{ width:min(900px, 100% - 2.5rem); margin-inline:auto; }
.guia--estreito .guia-col{ width:min(760px, 100% - 2.5rem); }

/* ---------- abertura escura, no tom do hero da home ---------- */
.guia-hero{
  background: linear-gradient(160deg, #0C2232, var(--ink) 60%);
  color:#fff; padding:3.5rem 0 3rem;
}
.guia-hero .eyebrow{ color:var(--brand-300); }
.guia-hero h1{
  font-size:clamp(1.9rem, 1.3rem + 2.6vw, 2.8rem); font-weight:700; line-height:1.12;
  letter-spacing:-.025em; margin:0 0 1.1rem; max-width:16em; color:#fff;
}
.guia-hero .lede{ font-size:1.08rem; color:var(--text-on-dark-2); margin:0; max-width:38em; }
.guia-hero a{ color:var(--brand-300); }
.guia-pills{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.75rem; }
.guia-pill{
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:.42rem 1rem; font-size:.9rem; color:var(--text-on-dark-2);
}
.guia-pill::before{ content:"\2713"; color:var(--brand-300); margin-right:.5rem; font-weight:700; }

/* ---------- quadros de abertura ---------- */
.guia-chave{
  background:var(--verde-lav); border:1px solid #CFE0D8; border-radius:var(--r);
  padding:1.5rem 1.6rem; margin:2.5rem 0 0;
}
.guia-chave h2{ font-size:1.15rem; font-weight:700; margin:0 0 .6rem; }
.guia-chave p{ margin:0 0 .7rem; max-width:44em; }
.guia-chave p:last-child{ margin-bottom:0; }

.guia-antes{
  background:var(--branco); border:1px solid var(--regua); border-radius:var(--r);
  padding:1.4rem 1.6rem; margin:1.25rem 0 0;
}
.guia-antes h2{
  font-size:.75rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-2); margin:0 0 .85rem;
}
.guia-antes ul{ margin:0; padding-left:1.15rem; }
.guia-antes li{ margin:.45rem 0; }

/* ---------- passos ---------- */
.guia-passos{ padding:1rem 0 0; }
.guia-passo{ padding:2.4rem 0; border-top:1px solid var(--regua); }
.guia-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--verde); color:#fff; font-size:.85rem; font-weight:600; margin:0 0 .85rem;
}
.guia-passo h3{ font-size:1.4rem; font-weight:700; line-height:1.25; margin:0 0 .7rem; }
.guia-passo p{ margin:0 0 1rem; max-width:37em; }
.guia code{
  font-size:.9em; background:var(--branco); border:1px solid var(--regua);
  border-radius:4px; padding:.1em .4em;
}
.guia-tag{
  display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; padding:.22rem .6rem; border-radius:999px; margin:0 0 .7rem;
  background:#FFF3D6; color:#8A6100; border:1px solid #F0DFB0;
}
.guia-nota{
  border-left:3px solid var(--verde); background:var(--branco);
  padding:.85rem 1.1rem; margin:0 0 1.5rem; max-width:37em;
  font-size:.95rem; color:var(--tinta-2);
}
.guia-nota b{ color:var(--tinta); }

/* ---------- prints ---------- */
.guia figure{ margin:0; }
.guia-tela{
  max-width:290px; padding:7px; background:var(--branco);
  border:1px solid var(--regua); border-radius:16px;
  box-shadow:0 12px 26px -18px rgba(10,28,45,.45);
}
.guia-tela img{ display:block; width:100%; height:auto; border-radius:9px; }
.guia-telaw{
  background:var(--branco); border:1px solid var(--regua); border-radius:var(--r);
  overflow:hidden; box-shadow:0 12px 26px -20px rgba(10,28,45,.45); margin-top:1.4rem;
}
.guia-telaw img{ display:block; width:100%; height:auto; }
.guia figcaption{ font-size:.82rem; color:var(--tinta-2); margin-top:.65rem; line-height:1.5; }
.guia-passo figure > .guia-tela + figcaption{ max-width:290px; }

/* ---------- erros ---------- */
.guia-erros{ padding:2.5rem 0 1rem; border-top:1px solid var(--regua); }
.guia-erros h2, .guia-fim h2{ font-size:1.6rem; font-weight:700; margin:0 0 1.2rem; }
.guia-erro{
  display:grid; grid-template-columns:auto 1fr; gap:.9rem;
  padding:1.05rem 0; border-top:1px solid var(--regua); align-items:start;
}
.guia-erro:last-child{ border-bottom:1px solid var(--regua); }
.guia-erro .x{ font-size:.9rem; font-weight:700; color:var(--alerta); line-height:1.6; }
.guia-erro p{ margin:0; }
.guia-erro p + p{ margin-top:.3rem; color:var(--tinta-2); font-size:.95rem; }

.guia-erro-box{
  background:#FFF8F2; border:1px solid #F0DCCB; border-left:3px solid #C9622F;
  border-radius:8px; padding:1.2rem 1.4rem; margin:1.6rem 0 0;
}
.guia-erro-box h4{ font-size:1rem; font-weight:700; margin:0 0 .6rem; color:#8A3F16; }
.guia-erro-box p{ margin:0 0 .7rem; font-size:.95rem; }
.guia-erro-box p:last-child{ margin-bottom:0; color:var(--tinta-2); }

/* ---------- a regra das datas ---------- */
.guia-regra{
  background:var(--branco); border:1px solid var(--regua); border-radius:var(--r);
  padding:1.6rem 1.7rem; margin:2.5rem 0 0;
}
.guia-regra h2{ font-size:1.3rem; font-weight:700; margin:0 0 .9rem; }
.guia-regra blockquote{
  margin:0 0 1.2rem; padding:.9rem 1.1rem; background:var(--verde-lav);
  border-left:3px solid var(--verde); font-size:.97rem; color:var(--tinta);
}
.guia-regra blockquote cite{
  display:block; margin-top:.5rem; font-style:normal; font-size:.82rem; color:var(--tinta-2);
}
.guia-regra ul{ margin:0; padding-left:1.15rem; }
.guia-regra li{ margin:.5rem 0; }

/* ---------- fecho ---------- */
.guia-fim{ padding:2.5rem 0 4rem; }
.guia-fim p{ max-width:37em; }

/* Print à direita do texto na tela larga. Abaixo disso ele desce, e é por isso
   que a imagem vem depois do texto no HTML: em coluna única, a ordem do
   documento é a ordem de leitura. */
@media (min-width:820px){
  .guia-passo .guia-col{
    display:grid; grid-template-columns:1fr 290px;
    grid-template-rows:auto auto 1fr; gap:0 3.5rem; align-items:start;
  }
  .guia-passo .guia-col > .cab{ grid-column:1; grid-row:1; }
  .guia-passo .guia-col > .txt{ grid-column:1; grid-row:2; }
  .guia-passo .guia-col > figure{ grid-column:2; grid-row:1 / span 3; }
  .guia--estreito .guia-passo .guia-col{ display:block; }
}