/* Guia de uso: o cartão é o mesmo das boas-vindas; aqui só o que é dele */
.guia-cartao{position:relative;max-width:860px}
.g-fechar{position:absolute;top:12px;right:12px;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:none;font-size:24px;line-height:1;color:var(--tinta-3);cursor:pointer}
.g-fechar:hover{background:var(--neutro-2);color:var(--tinta)}
.g-topo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0 34px 8px 0;font-size:13px;color:var(--tinta-2)}
.g-parte{font:800 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--marca-texto)}
.guia-cartao h1{font-size:24px;margin-bottom:8px}
.g-intro{margin:0 0 10px;color:var(--tinta-2)}
/* As instruções de uma tela com a foto dela ao lado; até 900 px a coluna do texto ficaria fina demais, e a foto vai embaixo. A foto abre grande no clique */
.g-bloco{display:grid;gap:10px 22px;margin-bottom:12px;padding-top:12px;border-top:1px solid var(--linha)}
@media (min-width:900px){.g-bloco:has(.g-foto){grid-template-columns:minmax(0,1fr) minmax(0,380px);align-items:start}}
.g-foto{display:block;width:100%;padding:0;border:1px solid var(--linha);border-radius:10px;background:#fff;overflow:hidden;cursor:zoom-in}
.g-foto:hover{border-color:var(--marca)}
.g-moldura{position:relative;display:block;line-height:0}
.g-img{display:block;width:100%;height:auto}
/* Cada instrução repete, no lugar do número, a bolinha da setinha que aponta o lugar dela na foto */
.g-itens{margin:0;padding:0;list-style:none;display:grid;gap:10px;align-content:start}
.g-itens li{position:relative;padding-left:32px;counter-increment:passo}
.g-marca,.g-itens li::before{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--marca);color:var(--sobre-marca,#fff);font:800 12px/1 var(--sans)}
.g-itens li::before{content:counter(passo);position:absolute;left:0;top:1px}
/* Setinha: a bolinha com uma ponta. O ponto marcado é a ponta, e a bolinha fica do lado de onde ela vem (data-d) */
.g-marca{--p:9px;position:absolute;box-shadow:0 0 0 1.5px #fff,0 1px 4px rgba(0,0,0,.3)}
.g-marca::after{content:"";position:absolute;border:calc(var(--p) - 1px) solid transparent;filter:drop-shadow(0 0 1px #fff)}
.g-marca[data-d="d"]{transform:translate(calc(-100% - var(--p) + 2px),-50%)}
.g-marca[data-d="d"]::after{left:calc(100% - 2px);top:50%;margin-top:calc(1px - var(--p));border-left-color:var(--marca);border-left-width:var(--p)}
.g-marca[data-d="e"]{transform:translate(calc(var(--p) - 2px),-50%)}
.g-marca[data-d="e"]::after{right:calc(100% - 2px);top:50%;margin-top:calc(1px - var(--p));border-right-color:var(--marca);border-right-width:var(--p)}
.g-marca[data-d="b"]{transform:translate(-50%,calc(-100% - var(--p) + 2px))}
.g-marca[data-d="b"]::after{top:calc(100% - 2px);left:50%;margin-left:calc(1px - var(--p));border-top-color:var(--marca);border-top-width:var(--p)}
.g-marca[data-d="c"]{transform:translate(-50%,calc(var(--p) - 2px))}
.g-marca[data-d="c"]::after{bottom:calc(100% - 2px);left:50%;margin-left:calc(1px - var(--p));border-bottom-color:var(--marca);border-bottom-width:var(--p)}
/* Na diagonal a bolinha sai da linha da ponta, para não cobrir o que está ao lado dela na tabela (x e y: o canto onde a bolinha fica) */
.g-marca[data-d="dc"]{--x:-1;--y:1;--g:-45deg}
.g-marca[data-d="db"]{--x:-1;--y:-1;--g:45deg}
.g-marca[data-d="eb"]{--x:1;--y:-1;--g:135deg}
.g-marca:is([data-d="dc"],[data-d="db"],[data-d="eb"]){--r:calc(35.35% + (var(--p) - 2px)*.707);transform:translate(calc(-50% + var(--x)*var(--r)),calc(-50% + var(--y)*var(--r)))}
.g-marca:is([data-d="dc"],[data-d="db"],[data-d="eb"])::after{left:calc(50% - var(--x)*35.35%);top:calc(50% - var(--y)*35.35%);margin-top:calc(1px - var(--p));border-left-color:var(--marca);border-left-width:var(--p);transform-origin:0 50%;transform:rotate(var(--g)) translateX(-2px)}
.foto-grande .g-moldura{display:inline-block;max-width:min(1000px,100%)}
.foto-grande .g-img{width:auto;max-width:100%;max-height:85vh;object-fit:contain}
.foto-grande .g-marca{--p:13px;width:32px;height:32px;font-size:17px;color:var(--sobre-marca,#fff)}
.g-dica{background:var(--marca-claro);color:var(--marca-texto);border-radius:12px;padding:10px 12px;font-size:14px}
.g-barra{height:6px;margin:16px 0 14px;border-radius:3px;background:var(--linha);overflow:hidden}
.g-barra i{display:block;height:100%;background:var(--marca);transition:width .2s}
.g-rodape{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 10px}
.g-rodape > span{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-left:auto}
h3.g-parte{margin:14px 0 4px}
.g-lista{list-style:none;margin:0;padding:0}
.g-link{display:block;width:100%;padding:7px 10px;border:0;border-radius:10px;background:none;text-align:left;font-size:15px;color:var(--tinta);cursor:pointer}
.g-link:hover{background:var(--marca-claro)}
.g-link.atual{font-weight:800;color:var(--marca-texto)}

@media (max-width:620px){
  .guia-cartao h1{font-size:21px}
}

/* Entrada do guia nas boas-vindas: em destaque, acima das opções de cadastrar o primeiro material */
.bv-guia{position:relative;width:100%;margin:10px 0 18px;padding:20px 20px 20px 66px;border:1.5px solid var(--marca);background:var(--marca-claro)}
.bv-guia::before{content:"?";position:absolute;left:20px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--marca);color:#fff;font:800 17px/1 var(--sans)}
.bv-guia b{font-size:17.5px}
.bv-guia:hover{background:var(--marca-claro);border-color:var(--marca-forte)}
.bv-ou{margin:0 0 -2px;font-size:14px;font-weight:700;color:var(--tinta-2)}