/* meuRH — folha de estilo única.
 *
 * A referência visual é um meio-termo: a estrutura de perfil e a densidade de
 * informação do LinkedIn, com a navegação e o formato de feed do Instagram.
 * A paleta é verde bem escuro (a marca) com vermelho escuro reservado ao que
 * está atrasado — vermelho aqui significa "isso venceu", nunca decoração.
 *
 * Mobile primeiro: a Isa usa no celular. O desktop é o caso adicional, tratado
 * em duas media queries no fim do arquivo.
 */

:root {
    /* Verdes — do mais escuro (barras) ao mais claro (fundos de destaque) */
    --verde-900: #062a20;
    --verde-800: #0b3b2e;
    --verde-700: #10523f;
    --verde-600: #166b53;
    --verde-400: #2f9b78;
    --verde-100: #e3f2ec;

    /* Vermelhos — atraso e ações destrutivas */
    --vermelho-900: #4a0f0f;
    --vermelho-800: #6d1a1a;
    --vermelho-600: #9b2c2c;
    --vermelho-100: #fbe9e9;

    /* Âmbar — o que vence em breve, mas ainda dá tempo */
    --ambar-700: #92610a;
    --ambar-100: #fdf3dc;

    /* Neutros */
    --tinta: #14201c;
    --tinta-fraca: #5d6b66;
    --linha: #e2e8e5;
    --papel: #ffffff;
    --fundo: #f2f5f4;

    --raio: 14px;
    --raio-p: 9px;
    --sombra: 0 1px 2px rgba(6, 42, 32, .06), 0 4px 14px rgba(6, 42, 32, .05);
    --barra-inferior: 64px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--verde-700); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.08rem; }
h3 { font-size: .95rem; }

/* ---------------------------------------------------------------- topo ---- */

.topo {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--verde-800);
    color: #fff;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    box-shadow: 0 2px 10px rgba(6, 42, 32, .18);
}

.topo .marca { display: flex; align-items: center; }
.topo .marca:hover { text-decoration: none; }

/* --------------------------------------------------------------- marca --- */

/* A logo do produto, quando o arquivo existe. */
.marca-meurh { height: 30px; width: auto; display: block; }
.marca-meurh.grande { height: 62px; margin: 0 auto .9rem; }

/* A logo é verde-escuro e vinho sobre claro — sobre a barra verde ela sumiria.
   Então no topo ela ganha uma placa branca, que também acomoda um PNG sem
   transparência sem parecer defeito. */
.topo .marca-meurh {
    background: #fff;
    padding: 4px 9px;
    border-radius: 8px;
    height: 34px;
    box-sizing: content-box;
}

/* Alternativa em texto: as mesmas cores da logo — verde-escuro no "Meu",
   vinho em itálico no "RH". */
.marca-texto {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.4px;
    white-space: nowrap;
}
.marca-texto .meu { color: var(--verde-800); }
.marca-texto .rh { color: var(--vermelho-800); font-style: italic; font-weight: 800; }
.marca-texto.grande { font-size: 2rem; display: block; text-align: center; margin-bottom: .3rem; }

/* No topo, que é verde-escuro, a versão em texto precisa clarear para ler. */
.topo .marca-texto .meu { color: #fff; }
.topo .marca-texto .rh { color: #f0a8a8; }

.topo .espaco { flex: 1; }

.topo .eu {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--verde-600);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, .25);
}
.topo .eu:hover { text-decoration: none; }

/* --------------------------------------------------------- navegação ----- */

/* No celular a navegação é a barra de baixo, como no Instagram. */
.nav-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    height: var(--barra-inferior);
    background: var(--papel);
    border-top: 1px solid var(--linha);
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-inferior a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: .64rem;
    color: var(--tinta-fraca);
    padding: .35rem 0;
}
.nav-inferior a:hover { text-decoration: none; }
.nav-inferior a .icone { font-size: 1.2rem; line-height: 1; }
.nav-inferior a.ativo { color: var(--verde-700); font-weight: 650; }

.nav-lateral { display: none; }

/* ------------------------------------------------------------ layout ----- */

.pagina {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1rem .9rem calc(var(--barra-inferior) + 1.5rem);
}

.cabecalho-pagina {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
}
.cabecalho-pagina .sub { color: var(--tinta-fraca); font-size: .85rem; margin: 0; }
.cabecalho-pagina .acoes { margin-left: auto; display: flex; gap: .5rem; flex-shrink: 0; }

/* ------------------------------------------------------------- cartão ---- */

.cartao {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1rem;
    margin-bottom: .85rem;
}
.cartao > h2:first-child, .cartao > h3:first-child { margin-top: 0; }
.cartao.compacto { padding: .75rem .9rem; }

.cartao-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--linha);
}
.cartao-titulo .acoes { margin-left: auto; }

/* ------------------------------------------------------------ números ---- */

.numeros {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
    margin-bottom: 1rem;
}

.numero {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: .75rem .85rem;
    box-shadow: var(--sombra);
}
.numero .valor { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.numero .rotulo { font-size: .72rem; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .4px; }
.numero.alerta { border-color: var(--vermelho-600); background: var(--vermelho-100); }
.numero.alerta .valor { color: var(--vermelho-800); }
.numero.destaque { border-color: var(--verde-600); background: var(--verde-100); }
.numero.destaque .valor { color: var(--verde-800); }

/* ---------------------------------------------------------- pendência ---- */

/* Cada pendência é um cartão clicável do feed. A faixa colorida à esquerda diz
 * a urgência sem precisar ler o texto. */
.pendencia {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-left: 4px solid var(--verde-400);
    border-radius: var(--raio-p);
    padding: .7rem .85rem;
    margin-bottom: .5rem;
    color: inherit;
}
.pendencia:hover { text-decoration: none; border-color: var(--verde-400); }
.pendencia .icone { font-size: 1.25rem; flex-shrink: 0; }
.pendencia .corpo { min-width: 0; flex: 1; }
.pendencia .titulo { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pendencia .detalhe { font-size: .8rem; color: var(--tinta-fraca); }
.pendencia .prazo { font-size: .74rem; font-weight: 650; text-align: right; flex-shrink: 0; }

.pendencia.g-vencido { border-left-color: var(--vermelho-600); background: var(--vermelho-100); }
.pendencia.g-vencido .prazo { color: var(--vermelho-800); }
.pendencia.g-hoje { border-left-color: var(--vermelho-600); }
.pendencia.g-hoje .prazo { color: var(--vermelho-800); }
.pendencia.g-urgente { border-left-color: var(--ambar-700); }
.pendencia.g-urgente .prazo { color: var(--ambar-700); }
.pendencia.g-atencao { border-left-color: var(--verde-400); }
.pendencia.g-atencao .prazo { color: var(--tinta-fraca); }
.pendencia.g-tranquilo { border-left-color: var(--linha); }
.pendencia.g-tranquilo .prazo { color: var(--tinta-fraca); }

/* ------------------------------------------------------------- filtros --- */

/* Rolagem horizontal de "pílulas", como os stories/filtros do Instagram. */
.filtros {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    margin-bottom: .75rem;
    scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }

.filtro {
    flex-shrink: 0;
    padding: .35rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--linha);
    background: var(--papel);
    color: var(--tinta-fraca);
    font-size: .82rem;
    font-weight: 550;
}
.filtro:hover { text-decoration: none; border-color: var(--verde-400); }
.filtro.ativo { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }

/* -------------------------------------------------------------- pessoa --- */

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--verde-700);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}
.avatar.grande { width: 76px; height: 76px; font-size: 1.5rem; }
.avatar.desligado { background: var(--tinta-fraca); }

.linha-pessoa {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .25rem;
    border-bottom: 1px solid var(--linha);
    color: inherit;
}
.linha-pessoa:last-child { border-bottom: none; }
.linha-pessoa:hover { text-decoration: none; background: var(--verde-100); border-radius: var(--raio-p); }
.linha-pessoa .corpo { min-width: 0; flex: 1; }
.linha-pessoa .nome { font-weight: 600; display: block; }
.linha-pessoa .cargo { font-size: .8rem; color: var(--tinta-fraca); }

/* Capa do perfil — o "cabeçalho de perfil" do LinkedIn. */
.capa {
    background: linear-gradient(135deg, var(--verde-800), var(--verde-600));
    border-radius: var(--raio) var(--raio) 0 0;
    height: 76px;
}
.perfil {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-top: none;
    border-radius: 0 0 var(--raio) var(--raio);
    box-shadow: var(--sombra);
    padding: 0 1rem 1rem;
    margin-bottom: .85rem;
}
.perfil .avatar { margin-top: -38px; border: 3px solid var(--papel); }
.perfil h1 { margin: .6rem 0 .15rem; }
.perfil .cargo { color: var(--tinta-fraca); font-size: .9rem; }
.perfil .acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }

/* ------------------------------------------------------------ etiquetas -- */

.etiqueta {
    display: inline-block;
    padding: .16rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 650;
    background: var(--verde-100);
    color: var(--verde-800);
    white-space: nowrap;
}
.etiqueta.cinza { background: #eef1f0; color: var(--tinta-fraca); }
.etiqueta.vermelha { background: var(--vermelho-100); color: var(--vermelho-800); }
.etiqueta.ambar { background: var(--ambar-100); color: var(--ambar-700); }

/* --------------------------------------------------------------- botões -- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1rem;
    border-radius: var(--raio-p);
    border: 1px solid transparent;
    background: var(--verde-800);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    min-height: 42px; /* alvo confortável para o dedo */
}
.botao:hover { background: var(--verde-700); text-decoration: none; color: #fff; }
.botao.secundario { background: var(--papel); color: var(--verde-800); border-color: var(--linha); }
.botao.secundario:hover { background: var(--verde-100); color: var(--verde-800); }
.botao.perigo { background: var(--vermelho-800); }
.botao.perigo:hover { background: var(--vermelho-600); color: #fff; }
.botao.pequeno { padding: .35rem .7rem; min-height: 34px; font-size: .8rem; }
.botao.largo { width: 100%; }
.botao:disabled { opacity: .5; cursor: not-allowed; }

/* ----------------------------------------------------------- formulário -- */

.campo { margin-bottom: .9rem; }
.campo label {
    display: block;
    font-size: .78rem;
    font-weight: 650;
    color: var(--tinta-fraca);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: .3rem;
}
.campo .ajuda { font-size: .76rem; color: var(--tinta-fraca); margin-top: .25rem; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=file], input[type=search], select, textarea {
    width: 100%;
    padding: .62rem .7rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    background: var(--papel);
    font-family: inherit;
    font-size: 16px; /* menor que 16px faz o iOS dar zoom ao focar */
    color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--verde-600);
    box-shadow: 0 0 0 3px rgba(22, 107, 83, .13);
}
textarea { min-height: 88px; resize: vertical; }

.grade { display: grid; gap: 0 .8rem; grid-template-columns: 1fr; }
.secao-form {
    margin: 1.2rem 0 .5rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--verde-700);
    border-bottom: 2px solid var(--verde-100);
    padding-bottom: .3rem;
}

/* -------------------------------------------------------------- avisos --- */

.aviso {
    padding: .7rem .9rem;
    border-radius: var(--raio-p);
    margin-bottom: .75rem;
    font-size: .88rem;
    border: 1px solid;
}
.aviso.ok { background: var(--verde-100); border-color: var(--verde-400); color: var(--verde-800); }
.aviso.erro { background: var(--vermelho-100); border-color: var(--vermelho-600); color: var(--vermelho-800); }
.aviso.senha {
    background: var(--ambar-100);
    border-color: var(--ambar-700);
    color: var(--ambar-700);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-all;
}

/* ------------------------------------------------------------- checklist - */

.etapa {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .25rem;
    border-bottom: 1px solid var(--linha);
}
.etapa:last-child { border-bottom: none; }
.etapa .marca-etapa {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--linha);
    display: grid;
    place-items: center;
    background: var(--papel);
    color: transparent;
    font-size: .85rem;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.etapa.feita .marca-etapa { background: var(--verde-600); border-color: var(--verde-600); color: #fff; }
.etapa.feita .texto { color: var(--tinta-fraca); text-decoration: line-through; }
.etapa .texto { flex: 1; font-weight: 550; }
.etapa .quando { font-size: .74rem; color: var(--tinta-fraca); }

.progresso {
    height: 7px;
    background: var(--linha);
    border-radius: 999px;
    overflow: hidden;
    margin: .5rem 0;
}
.progresso i { display: block; height: 100%; background: var(--verde-600); border-radius: 999px; }

/* -------------------------------------------------------------- listas --- */

.dados { display: grid; grid-template-columns: 1fr; gap: .1rem; }
.dados div { padding: .45rem 0; border-bottom: 1px solid var(--linha); }
.dados div:last-child { border-bottom: none; }
.dados dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; color: var(--tinta-fraca); }
.dados dd { margin: 0; font-weight: 550; }

.vazio {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--tinta-fraca);
}
.vazio .emoji { font-size: 2.2rem; display: block; margin-bottom: .5rem; }

.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Assinatura de quem faz o produto — presente, sem competir com o conteúdo. */
/* Tudo numa linha só: "MeuRH by ⌁ FLS Tecnologia". O símbolo acompanha a
   altura da letra em vez de competir com ela — é assinatura, não logotipo. */
.assinatura {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: nowrap;
    gap: .3rem;
    font-size: .72rem;
    color: var(--tinta-fraca);
    margin: 1.6rem 0 .5rem;
    white-space: nowrap;
}

.fls {
    display: inline-flex;
    align-items: baseline;
    gap: .22rem;
    color: #55636b; /* o cinza-ardósia da marca */
}
.fls-marca {
    width: .78em;
    height: .78em;
    flex-shrink: 0;
    align-self: center;
    position: relative;
    top: .06em;
}
.fls-nome { font-size: .72rem; letter-spacing: .1px; }
.fls-nome b { font-weight: 750; letter-spacing: .3px; }

/* Marca do cliente (a logo que a empresa enviar). */
.marca-cliente {
    max-height: 34px;
    max-width: 130px;
    object-fit: contain;
    vertical-align: middle;
}
.marca-cliente-grande {
    max-height: 92px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto .4rem;
}
.vitrine-cliente {
    text-align: center;
    padding: 1.1rem 1rem .9rem;
    background: linear-gradient(160deg, var(--verde-100), var(--papel));
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: .85rem;
}
.vitrine-cliente .lema { color: var(--tinta-fraca); font-size: .82rem; margin: .2rem 0 0; }

/* --------------------------------------------------------------- entrar -- */

.tela-entrada {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, var(--verde-900), var(--verde-700) 55%, var(--vermelho-900));
}
.caixa-entrada {
    width: 100%;
    max-width: 380px;
    background: var(--papel);
    border-radius: 18px;
    padding: 1.75rem 1.4rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.caixa-entrada .marca {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 750;
    color: var(--verde-800);
    margin-bottom: .2rem;
}
.caixa-entrada .lema { text-align: center; color: var(--tinta-fraca); font-size: .85rem; margin-bottom: 1.4rem; }

/* ---------------------------------------------------------------- guia --- */

.botao-guia { margin-top: .7rem; }
.botao-guia .chapeu { font-size: 1.05rem; }

.corpo-guia { background: var(--fundo); }

.guia-capa {
    background: linear-gradient(160deg, var(--verde-900), var(--verde-700) 60%, var(--vermelho-900));
    color: #fff;
    text-align: center;
    padding: 2rem 1.2rem 2.2rem;
}
.guia-capa .marca-meurh {
    background: #fff;
    padding: .6rem .9rem;
    border-radius: 12px;
    height: 46px;
    box-sizing: content-box;
}
.guia-capa h1 { font-size: 1.5rem; margin: 1rem 0 .5rem; }
.guia-capa p { max-width: 34rem; margin: 0 auto 1.2rem; opacity: .88; font-size: .95rem; }
.guia-capa .botao { background: #fff; color: var(--verde-800); }
.guia-capa .botao:hover { background: var(--verde-100); color: var(--verde-800); }

/* O guia não tem barra de navegação: o padding de baixo volta ao normal. */
.pagina-guia { padding-bottom: 2rem; }

.titulo-secao {
    margin: 1.6rem 0 .7rem;
    font-size: 1.15rem;
    text-align: center;
    color: var(--verde-800);
}

.selo {
    display: inline-block;
    background: var(--verde-100);
    color: var(--verde-800);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: .2rem .6rem;
    border-radius: 999px;
    margin-bottom: .5rem;
}

/* Recurso: ícone à esquerda, texto à direita. */
.recurso {
    display: flex;
    gap: .85rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--linha);
}
.recurso:last-child { border-bottom: none; }
.recurso h3 { margin: 0 0 .2rem; color: var(--verde-800); }
.recurso p { margin: 0; font-size: .9rem; color: var(--tinta); }
.icone-recurso {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--verde-100);
    border-radius: 10px;
}

/* Comparação antes/depois. */
.destaque-guia {
    border-radius: var(--raio-p);
    padding: .8rem .9rem;
    border: 1px solid;
    margin-bottom: .6rem;
}
.destaque-guia ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .86rem; }
.destaque-guia li { margin-bottom: .2rem; }
.destaque-guia.ruim { background: var(--vermelho-100); border-color: var(--vermelho-600); color: var(--vermelho-900); }
.destaque-guia.bom { background: var(--verde-100); border-color: var(--verde-400); color: var(--verde-900); }

/* Amostra da tela inicial — pendências de mentira, só para ilustrar. */
.amostra {
    background: var(--fundo);
    border-radius: var(--raio-p);
    padding: .7rem;
    margin: .9rem 0;
}
.amostra .pendencia { cursor: default; }

.nota {
    font-size: .84rem;
    color: var(--tinta-fraca);
    background: var(--fundo);
    border-left: 3px solid var(--verde-400);
    padding: .55rem .7rem;
    border-radius: 0 var(--raio-p) var(--raio-p) 0;
    margin: .8rem 0 0;
}

/* A régua das férias. */
.regua {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin: .7rem 0;
    font-size: .72rem;
}
.regua span {
    background: var(--verde-100);
    color: var(--verde-800);
    padding: .25rem .55rem;
    border-radius: 999px;
    font-weight: 650;
}
.regua span.fim { background: var(--vermelho-100); color: var(--vermelho-800); }
.regua i {
    color: var(--tinta-fraca);
    font-style: normal;
    font-size: .68rem;
}
.regua i::before { content: "──"; margin-right: .2rem; }
.regua i::after { content: "──▶"; margin-left: .2rem; }

.lista-limpa { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.lista-limpa li { margin-bottom: .3rem; }

.tabela-guia { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: .6rem; }
.tabela-guia td { padding: .5rem .4rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela-guia tr:last-child td { border-bottom: none; }
.tabela-guia td:first-child { white-space: nowrap; color: var(--verde-800); }

.passos { counter-reset: passo; list-style: none; padding: 0; margin: .8rem 0 0; }
.passos li {
    position: relative;
    padding: 0 0 .9rem 2.2rem;
    border-left: 2px solid var(--verde-100);
    margin-left: .8rem;
}
.passos li:last-child { border-left-color: transparent; padding-bottom: 0; }
.passos li::before {
    counter-increment: passo;
    content: counter(passo);
    position: absolute;
    left: -.85rem;
    top: -.15rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--verde-800);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 700;
}
.passos strong { display: block; color: var(--verde-800); }
.passos span { font-size: .87rem; color: var(--tinta-fraca); }

/* ------------------------------------------------- detalhes recolhíveis -- */

details.bloco {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: .85rem;
    overflow: hidden;
}
details.bloco > summary {
    padding: .85rem 1rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
}
details.bloco > summary::-webkit-details-marker { display: none; }
details.bloco > summary::after { content: "＋"; margin-left: auto; color: var(--tinta-fraca); }
details.bloco[open] > summary::after { content: "－"; }
details.bloco > summary:hover { background: var(--verde-100); }
details.bloco .conteudo { padding: 0 1rem 1rem; border-top: 1px solid var(--linha); padding-top: .9rem; }

/* ------------------------------------------------------------ desktop ---- */

@media (min-width: 720px) {
    .numeros { grid-template-columns: repeat(4, 1fr); }
    .grade.duas { grid-template-columns: 1fr 1fr; }
    .grade.tres { grid-template-columns: repeat(3, 1fr); }
    .dados { grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
    .perfil { padding: 0 1.5rem 1.25rem; }
    .capa { height: 104px; }
}

@media (min-width: 1000px) {
    /* No desktop a navegação vira coluna fixa à esquerda, estilo LinkedIn. */
    .nav-inferior { display: none; }

    .nav-lateral {
        display: block;
        position: fixed;
        top: 56px;
        left: max(0px, calc(50% - 560px));
        width: 210px;
        padding: 1rem .5rem;
    }
    .nav-lateral a {
        display: flex;
        align-items: center;
        gap: .65rem;
        padding: .6rem .75rem;
        border-radius: var(--raio-p);
        color: var(--tinta);
        font-weight: 550;
        margin-bottom: .15rem;
    }
    .nav-lateral a:hover { background: var(--verde-100); text-decoration: none; }
    .nav-lateral a.ativo { background: var(--verde-800); color: #fff; }
    .nav-lateral .icone { font-size: 1.1rem; }

    .pagina { padding: 1.5rem 1rem 3rem 232px; }
    .conteudo-duplo { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; }
}

@media print {
    .topo, .nav-inferior, .nav-lateral, .acoes, .botao { display: none !important; }
    .pagina { padding: 0; max-width: none; }
    .cartao, .perfil { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}