/* Guia com trava de e-mail (/guias/<slug>/). Usa os tokens de /mapa/assets/styles.css. */
.guia { padding: clamp(2rem, 5vw, 4.5rem) clamp(1.2rem, 4vw, 4.5rem) 5rem; }
.guia-topo { max-width: 60rem; display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.guia-topo h1 { margin: 0; font-size: clamp(2.1rem, 5vw, 3.9rem); line-height: 1.02; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.guia-sub { margin: 0; max-width: 48rem; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.5; }
.guia-meta { margin: 0; color: var(--subtle); font-size: .82rem; }
.guia-grade { display: grid; grid-template-columns: minmax(0, 46rem) minmax(16rem, 22rem); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.guia-texto { min-width: 0; font-size: 1.04rem; line-height: 1.7; color: var(--paper); }
.guia-texto > p, .guia-texto li { color: #d7d9de; }
.guia-texto h2 { margin: 3rem 0 1rem; font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.15; font-weight: 800; text-wrap: balance; }
.guia-texto h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.guia-texto strong { color: var(--paper); }
.previa { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.previa img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.previa:hover img { transform: scale(1.02); }
.previa span { position: absolute; left: 1rem; bottom: 1rem; padding: .55rem .8rem; border-radius: 3px; background: var(--paper); color: var(--ink); font-size: .78rem; font-weight: 700; }
.previa:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.area { margin: 1.6rem 0 2.2rem; }
.area h3 { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: baseline; padding-bottom: .7rem; border-bottom: 1px solid var(--line); font-size: 1.2rem; }
.area h3 small { grid-column: 2; color: var(--subtle); font-size: .8rem; font-weight: 500; }
.area-n { color: var(--accent); font-variant-numeric: tabular-nums; font-size: .9rem; }
.agentes { list-style: none; margin: 0; padding: 0; display: grid; }
.agentes li { padding: .95rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .3rem; }
.agentes p { margin: 0; font-size: .96rem; line-height: 1.55; }
.ag-topo { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ag-topo code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .86rem; color: var(--paper); word-break: break-all; }
.estado { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .45rem; border: 1px solid var(--line-accessible); border-radius: 2px; color: var(--muted); }
.estado-em-uso { border-color: var(--accent); color: var(--paper); }
.ag-trava { color: var(--muted) !important; }
.ag-trava span { color: var(--accent); font-weight: 700; font-size: .78rem; margin-right: .3rem; }
.camadas-lista { padding-left: 1.3rem; display: grid; gap: .9rem; }
.camadas-lista li::marker { color: var(--accent); font-weight: 800; }
/* trava */
.trava { position: relative; margin-top: 3rem; }
.trava-teaser { position: relative; max-height: 11rem; overflow: hidden; pointer-events: none; user-select: none; }
.trava-teaser::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5,5,6,0) 0%, rgba(5,5,6,.75) 55%, var(--ink) 100%); }
.trava-cartao { position: relative; margin-top: -2.5rem; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--line-accessible); border-radius: 6px; background: var(--surface-2); display: grid; gap: .9rem; }
.trava-cartao h2 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.trava-cartao > p { margin: 0; color: var(--muted); }
#trava-form { display: grid; gap: .9rem; }
.campo { display: grid; gap: .35rem; font-size: .8rem; color: var(--muted); }
.campo input { min-height: 50px; padding: .8rem .95rem; border: 1px solid var(--line-accessible); border-radius: 3px; background: var(--ink); color: var(--paper); font: inherit; font-size: 1rem; }
.campo input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consentimento { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; font-size: .86rem; color: var(--muted); line-height: 1.45; }
.consentimento input { width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--accent); }
.consentimento a { color: var(--paper); }
#trava-botao { width: 100%; }
#trava-botao[disabled] { opacity: .6; cursor: progress; }
.trava-erro { margin: 0; color: #ffb4a8; font-size: .88rem; }
.trava.liberada { display: none; }
.prompt { margin: 1.6rem 0; display: grid; gap: .5rem; }
.prompt p { margin: 0; }
.prompt-caixa { position: relative; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.prompt-caixa pre { margin: 0; padding: 1.1rem 1.1rem 3.2rem; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .88rem; line-height: 1.6; color: var(--paper); }
.copiar { position: absolute; right: .7rem; bottom: .7rem; min-height: 38px; padding: .45rem .8rem; border: 1px solid var(--line-accessible); border-radius: 3px; background: var(--elevated); color: var(--paper); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.copiar:hover, .copiar:focus-visible { border-color: var(--accent); outline: none; }
/* lateral */
.guia-lado { position: sticky; top: 6.2rem; display: grid; gap: 1rem; }
.lado-cartao { padding: 1.3rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); display: grid; gap: .8rem; }
.lado-cartao h2 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.lado-cartao p { margin: 0; color: var(--muted); font-size: .92rem; }
.lado-lista { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; color: #d7d9de; font-size: .92rem; }
.lado-lista li::marker { color: var(--accent); }
.lado-destaque { border-color: var(--line-accessible); background: var(--surface-2); }
.guia-rodape { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: 2rem clamp(1.2rem, 4vw, 4.5rem); border-top: 1px solid var(--line); }
.guia-rodape a { color: var(--muted); font-size: .8rem; text-decoration: none; }
.guia-rodape a:hover { color: var(--paper); }
@media (max-width: 960px) {
  .guia-grade { grid-template-columns: 1fr; }
  .guia-lado { position: static; }
  .lp-nav nav { display: none; }
  .lp-nav { grid-template-columns: 1fr auto; }
}
@media (prefers-reduced-motion: reduce) { .previa img { transition: none; } }