/* Contas · Como funciona, resumo no Início e amostra do login: páginas de apresentação. Usa os tokens de estilo.css. */
.guia { max-width: 1100px; margin: 0 auto; }
.guia > section { margin-top: 4.5rem; }
.guia h2, .g-resumo h2 { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 1.95rem); line-height: 1.2; margin: 0 0 .8rem; }
.guia h3, .g-resumo h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.g-sobre { margin: 0 0 .6rem; font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ouro); }
.g-lead { font-size: 1.1rem; line-height: 1.6; max-width: 40rem; margin: 0; }
.g-intro { max-width: 46rem; margin: 0 auto 2.25rem; text-align: center; }
.g-intro .g-lead { margin: 0 auto; color: var(--suave); }
.g-nota { font-size: .85rem; color: var(--suave); margin: 1rem 0 0; }

/* ---------- abertura ---------- */
.g-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: center;
  background: var(--tinta); color: #dfe5ee; border-radius: 22px; padding: clamp(1.5rem, 4vw, 3.5rem);
  box-shadow: var(--sombra); overflow: hidden; }
.g-hero .marca-grande { margin-bottom: 1.75rem; }
.g-hero h1 { color: #fff; font-size: clamp(1.85rem, 1.2rem + 2.5vw, 2.8rem); line-height: 1.12; margin: 0 0 1.1rem; }
.g-hero .g-lead { color: #c8d0dc; }
.g-numeros { list-style: none; padding: 0; margin: 2rem 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem; }
.g-numeros li { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: .8rem; }
.g-numeros b { display: block; font-family: var(--serifa); font-size: 1.4rem; line-height: 1.15; color: #fff; }
.g-numeros span { display: block; margin-top: .25rem; font-size: .85rem; line-height: 1.4; color: #9fb0c6; }
.g-accoes { display: flex; flex-wrap: wrap; gap: .65rem; }
.botao.ouro { background: var(--ouro); border-color: var(--ouro); color: #fff; }
.botao.ouro:hover { background: #8f6d2f; border-color: #8f6d2f; color: #fff; }

/* ---------- ecrãs de exemplo: moldura de browser no PC, de telemóvel no telemóvel ---------- */
.g-ecra { margin: 0; }
.g-ecra img { display: block; width: 100%; height: auto; }
.g-moldura { display: block; border-radius: 12px; overflow: hidden; background: var(--cartao); border: 1px solid var(--linha);
  box-shadow: 0 20px 50px rgba(22, 36, 58, .16); }
.g-moldura::before { content: ""; display: block; height: 24px; border-bottom: 1px solid var(--linha);
  background: radial-gradient(circle at 14px 50%, #d6d0c3 4px, transparent 4.5px),
    radial-gradient(circle at 29px 50%, #d6d0c3 4px, transparent 4.5px),
    radial-gradient(circle at 44px 50%, #d6d0c3 4px, transparent 4.5px), #f1ede5; }
.g-hero .g-moldura { border-color: rgba(255, 255, 255, .14); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.g-ecra figcaption { margin-top: .7rem; font-size: .85rem; color: var(--suave); }
.g-hero .g-ecra figcaption { color: #9fb0c6; }

/* ---------- cinco passos ---------- */
.g-passos { list-style: none; counter-reset: passo; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.g-passos li { counter-increment: passo; position: relative; }
.g-passos li::before { content: counter(passo); position: relative; z-index: 1; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; border-radius: 50%; background: var(--tinta); color: #fff;
  font-family: var(--serifa); font-size: 1.1rem; font-weight: 600; box-shadow: 0 0 0 6px var(--papel); }
.g-passos li:not(:last-child)::after { content: ""; position: absolute; top: 1.3rem; left: 2.6rem; right: -1.5rem;
  height: 2px; background: var(--linha-forte); }
.g-passos p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--suave); }

/* ---------- blocos texto + ecrã ---------- */
.g-bloco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 3.5rem; align-items: center; }
.g-bloco.inverso .g-ecra { order: -1; }
.g-checks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.g-checks li { position: relative; padding-left: 2rem; }
.g-checks li::before { content: ""; position: absolute; left: 0; top: .15rem; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--ok-claro); }
.g-checks li::after { content: ""; position: absolute; left: .45rem; top: .35rem; width: .32rem; height: .62rem;
  border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.g-checks b, .g-lista b { display: block; color: var(--tinta); }
.g-checks span, .g-lista span { display: block; margin-top: .15rem; font-size: .93rem; line-height: 1.5; color: var(--suave); }

/* ---------- cartões ---------- */
.g-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 1.25rem; }
.g-cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 1.5rem;
  box-shadow: var(--sombra); }
.g-cartao.ouro { border-top: 3px solid var(--ouro); }
.g-cartoes.quatro { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.g-cartao h3 { font-size: 1.2rem; margin-bottom: 1rem; }
.g-cartao > p { margin: 0; color: var(--suave); font-size: .95rem; line-height: 1.55; }
.g-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.g-ritmo { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem; }
.g-ritmo li { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 1.1rem 1.2rem; }
.g-ritmo b { display: block; margin-bottom: .35rem; font-family: var(--serifa); font-size: 1.05rem; color: var(--ouro); }
.g-ritmo span { font-size: .92rem; line-height: 1.5; color: var(--suave); }
.g-formatos { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.g-formatos li { padding: .35rem .8rem; border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--cartao);
  font-size: .85rem; font-weight: 500; color: var(--tinta); }

/* ---------- o que é guardado e glossário ---------- */
.regras { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.regras .etiqueta { justify-self: start; }
.regras li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; align-items: start; }
.g-detalhe { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 0 1.5rem; }
.g-detalhe[open] { padding-bottom: 1.25rem; }
.g-detalhe summary { display: flex; justify-content: space-between; align-items: center; padding: 1.15rem 0; cursor: pointer;
  list-style: none; font-family: var(--serifa); font-size: 1.15rem; font-weight: 600; color: var(--tinta); }
.g-detalhe summary::-webkit-details-marker { display: none; }
.g-detalhe summary::after { content: "+"; font-family: var(--sans); font-size: 1.5rem; font-weight: 400; color: var(--ouro); }
.g-detalhe[open] summary::after { content: "\2212"; }
.glossario dl { display: grid; grid-template-columns: 9rem 1fr; gap: .6rem 1rem; margin: 0 0 1.25rem; }
.glossario dd { margin: 0; }
.glossario h3 { margin: 1rem 0 .6rem; }

/* ---------- fecho ---------- */
.g-fecho { background: var(--tinta); color: #c8d0dc; border-radius: 22px; padding: clamp(1.75rem, 4vw, 3.25rem);
  text-align: center; }
.g-fecho h2 { color: #fff; }
.g-fecho p { max-width: 40rem; margin: 0 auto 1.5rem; line-height: 1.6; }
.g-fecho .g-accoes { justify-content: center; }

/* ---------- resumo no fundo do Início ---------- */
.g-resumo { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--linha); }
.g-resumo-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem;
  margin-bottom: 2.25rem; }
.g-resumo-cabeca h2 { margin: 0; max-width: 34ch; }
.g-resumo .g-cartoes { margin-top: 2.5rem; }
.g-galeria { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.g-resumo .g-fecho { margin-top: 2.5rem; padding: 1.75rem; }
.g-resumo .g-fecho h2 { font-size: 1.35rem; }

/* ---------- amostra no painel do login ---------- */
.amostra { margin: 0 0 1.5rem; }
.amostra .g-moldura { border-color: rgba(255, 255, 255, .15); box-shadow: none; }
.amostra figcaption { margin-top: .4rem; font-size: .75rem; color: #9fb0c6; }

@media (max-width: 900px) {
  .g-hero, .g-bloco { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .g-bloco.inverso .g-ecra { order: 0; }
  .g-passos { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .g-passos li { padding-left: 3.6rem; min-height: 2.6rem; }
  .g-passos li::before { position: absolute; left: 0; top: -.35rem; margin: 0; }
  .g-passos li:not(:last-child)::after { top: 2.3rem; bottom: -1.4rem; left: 1.25rem; right: auto; width: 2px; height: auto; }
  .g-ritmo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .guia > section { margin-top: 3.25rem; }
  .g-numeros { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .g-moldura { max-width: 290px; margin: 0 auto; border: 7px solid var(--tinta); border-radius: 30px; }
  .g-moldura::before { display: none; }
  .g-hero .g-moldura { border-color: #0d1828; }
  .g-ecra figcaption { text-align: center; }
  .g-galeria { grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; }
  .g-galeria .g-ecra { scroll-snap-align: start; }
  .g-ritmo, .regras li, .glossario dl { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .regras { gap: 1.1rem; }
  .glossario dd { margin-bottom: .7rem; }
  .g-detalhe { padding: 0 1.1rem; }
}