/**
 * SEO Check — resultados e conteúdo editorial.
 *
 * Tudo o que só é pintado depois que a análise volta, mais o conteúdo
 * editorial. No <style> da página ficou o de cima da dobra (§5.5).
 */

:root {
    --tom-good:   var(--good);
    --tom-medium: var(--medium);
    --tom-poor:   var(--poor);
    --tom-na:     var(--na);
    --tom-trilho: var(--rule);
}

/* RESULTS */
.results { display: none; }
.results.active { display: block; }

/* RESULTS OVERVIEW (hero do resultado) */
.result-overview {
    /* §5.4: era `display:none` aqui, mais uma classe `.show` que devolvia o
       grid e trocava o fundo: dois mecanismos para um estado só. O estado
       agora é o atributo `hidden`, e o fundo é sempre este. */
    display: grid;
    background: rgba(230, 255, 0, 0.07);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 1.75rem 1.75rem 1.5rem;
    margin-bottom: 1.5rem;
    grid-template-columns: auto 1fr;
    gap: 1.75rem;
    align-items: center;
    position: relative;
}
.result-overview-info {
    min-width: 0;
    padding-right: 7rem; /* reserva espaço pro botão absoluto */
}
.result-overview-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 0.5rem;
}
.result-overview-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-1);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
    word-break: break-word;
}
.result-overview-url {
    font-family: 'DM Mono', monospace;
    font-size: 0.85rem;
    color: var(--accent);
    word-break: break-all;
    margin-bottom: 0.85rem;
}
.result-overview-meta {
    font-size: 0.85rem;
    color: var(--ink-3);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
}
.result-overview-meta .muted { color: var(--ink-4); }
.result-overview-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 180px;
}
.result-overview-score-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-3);
}
.result-overview-actions {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
}
@media (max-width: 720px) {
    .result-overview { grid-template-columns: 1fr; padding: 1.25rem 1.25rem 4rem; }
    .result-overview-score { min-width: 0; }
    .result-overview-info { padding-right: 0; }
    .result-overview-actions { top: auto; bottom: 1rem; left: 1rem; right: auto; }
}

/* Recomendações dentro do card de result-overview */
.result-overview-recommendations {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}
.result-overview-recommendations h2 {
    color: var(--ink-1);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.result-overview-recommendations h2 .lucide {
    width: 16px; height: 16px;
    color: var(--accent);
}
.result-overview-recommendations .recommendations-list {
    list-style: none;
}
.result-overview-recommendations .recommendations-list li {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--rule);
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    font-size: 0.92rem;
    color: var(--ink-2);
}
.result-overview-recommendations .recommendations-list li:last-child {
    border-bottom: none;
}
.result-overview-recommendations .recommendations-list li > .lucide {
    color: var(--accent);
    margin-top: 0.2rem;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* GAUGE SVG (semicírculo de pontuação) */
.gauge-svg { display: block; }
.gauge-large  { width: 180px; height: auto; }
.gauge-medium { width: 84px;  height: auto; flex-shrink: 0; }

/* RECOMMENDATIONS */


.recommendations-list { list-style: none; }
.recommendations-list .rec-priority {
    margin-left: 8px; font-size: 0.78em; opacity: 0.65;
    text-transform: uppercase; letter-spacing: 0.04em;
}

.recommendations-list li {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--rule);
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.recommendations-list li:last-child { border-bottom: none; }

.recommendations-list li > .lucide {
    margin-top: 0.2rem;
    color: var(--accent);
}

/* RESULTS ACTIONS */

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 9999px;
    color: var(--ink-1);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.btn-export:hover {
    border-color: var(--ink-1);
    box-shadow: 0 2px 8px rgba(22,25,0,0.08);
    transform: translateY(-1px);
}
.btn-export .lucide { width: 14px; height: 14px; }

/* LIGHTHOUSE SCORES */


/* METADATA CARD */


/* SUMMARY CARD */
.summary-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.summary-card h2 {
    color: var(--ink-1);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
}
.summary-card .summary-intro {
    color: var(--ink-3);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
}
.summary-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--bg);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s, transform .15s;
}
.summary-item:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.summary-item-content { min-width: 0; flex: 1; }
.summary-item .sum-title {
    font-size: 0.88rem;
    color: var(--ink-1);
    font-weight: 700;
    margin-bottom: 0.2rem;
    line-height: 1.25;
}
.summary-item .sum-meta {
    font-size: 0.72rem;
    color: var(--ink-3);
    line-height: 1.3;
}
.summary-item.is-informative {
    border-style: dashed;
}
/* Fundo por faixa de percentual (tom claro, estilo tech-chip); texto segue preto/cinza. */
.summary-item--good   { background: #DCFCE7; border-color: #BBF7D0; }
.summary-item--medium { background: #FEF3C7; border-color: #FDE68A; }
.summary-item--poor   { background: #FEE2E2; border-color: #FECACA; }
.summary-item--na     { background: #F1F5F9; border-color: #E2E8F0; }
/* Percentual na cor cheia da faixa (cor aplicada inline via toneColor). */
.sum-pct {
    flex-shrink: 0;
    min-width: 3ch;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sum-info-tag {
    margin-top: 0.3rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}

/* TECH DATA (Lighthouse + CWV + Metadados, compactos) */
.tech-data-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.5rem;
}
.tech-data-card h3 {
    color: var(--ink-1);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.tech-data-card h3 .lucide { width: 16px; height: 16px; }
.tech-data-card h3 small {
    font-weight: 400;
    color: var(--ink-3);
    font-size: 0.78rem;
    margin-left: auto;
}
.tech-data-card h3 small a { color: var(--accent); text-decoration: none; }
.tech-data-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.85rem;
    align-items: center;
    padding: 0.45rem 0;
    border-top: 1px solid var(--rule);
    font-size: 0.82rem;
}
.tech-data-row:first-of-type { border-top: 0; }
.tech-data-label {
    color: var(--ink-3);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tech-data-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    align-items: center;
}
.tech-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 6px;
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.tech-chip-good   { background: #DCFCE7; color: #166534; }
.tech-chip-medium { background: #FEF3C7; color: #92400E; }
.tech-chip-poor   { background: #FEE2E2; color: #991B1B; }
.tech-chip-na     { background: #F1F5F9; color: #64748B; }
.tech-chip-info   { background: #E3F2FD; color: #0369A1; }
.tech-chip small  { font-weight: 400; opacity: 0.7; margin-left: 2px; }
.tech-data-text {
    color: var(--ink-2);
    font-size: 0.82rem;
    word-break: break-word;
}
.tech-data-text .muted { color: var(--ink-4); }
/* Metadados nas duas versões, quando há versão renderizada (R4). */
.tech-data-versoes { display: grid; gap: 0.35rem; }
.tech-data-versao {
    min-width: 6.5rem;
    color: var(--ink-3);
    font-size: 0.72rem;
    font-weight: 700;
}
.tech-data-versao--renderizado { color: var(--info-fg); }
.tech-data-versao-igual { color: var(--ink-4); font-size: 0.75rem; }
@media (max-width: 600px) {
    .tech-data-row { grid-template-columns: 1fr; gap: 0.3rem; }
    /* No celular o rótulo da versão fica sempre acima do valor: com a
       largura mínima, uns valores cabiam ao lado e outros quebravam. */
    .tech-data-versao { flex-basis: 100%; min-width: 0; }
}

/* SECTIONS */
.sections-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 12px;
    overflow: hidden;
}

.section-header {
    margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    transition: background 0.3s;
}

.section-header-titulo {
    color: var(--ink-1);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.section-percentage {
    background: var(--accent);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
}
.section-percentage.na {
    background: var(--rule);
    color: var(--ink-3);
}
.section-percentage.good   { background: #48BB78; }
.section-percentage.medium { background: #ED8936; }
.section-percentage.poor   { background: #F56565; }

.section-toggle-icon {
    color: var(--ink-3);
    transition: transform 0.3s;
    font-size: 1.2rem;
}

details.section[open] .section-toggle-icon { transform: rotate(180deg); }

/* §5.4: o corpo abria e fechava por `max-height: 0` e `max-height: 5000px`.
   Era um truque para animar altura, e tinha um teto: seção mais alta que
   5000px ficaria cortada. O <details> abre e fecha sozinho, sem teto. */

.section-items {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.check-item {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--bg);
    overflow: hidden;
}

.check-item-status {
    flex-shrink: 0;
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
}
.check-item-status .lucide {
    width: 1.8rem;
    height: 1.8rem;
    stroke-width: 2.5;
}
.check-item-status.sim     { background: #48BB78; }
.check-item-status.nao     { background: #F56565; }
.check-item-status.parcial { background: #F59E0B; }
.check-item-status.na      { background: #A0AEC0; }

.check-item-body {
    flex: 1;
    min-width: 0;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.check-item-main {
    flex: 1;
    min-width: 0;
}

.check-item-title {
    color: var(--ink-1);
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.check-item-note {
    color: var(--ink-3);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.check-item-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-source {
    background: #BEE3F8;
    color: #2C5282;
    text-transform: none;
    letter-spacing: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.badge-priority {
    background: #D6BCFA;
    color: #6B21A8;
}
.badge-priority.media {
    background: #FCD34D;
    color: #78350F;
}
.badge-priority.baixa {
    background: #D1D5DB;
    color: #374151;
}

.badge-unreliable {
    background: #FEF3C7;
    color: #92400E;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.badge-unreliable .lucide { width: 0.85rem; height: 0.85rem; }

/* HTML usado no item, quando a versão renderizada entrou na análise (R4).
   Contorno, e não preenchimento: são selos de ESTADO, ao lado de selos de
   classificação todos preenchidos. Preenchidos, o "Renderizado" se confundia
   com o azul do selo de fonte e o "Inicial ≠ renderizado" com o âmbar da
   prioridade Média (conferência no Chrome, 25/09/2026). */
.badge-renderizado,
.badge-divergente {
    text-transform: none;
    letter-spacing: 0;
    background: var(--surface);
    border: 1px solid;
    padding: calc(0.25rem - 1px) calc(0.7rem - 1px);
}
.badge-renderizado { color: var(--info-fg); border-color: #7DD3FC; }
.badge-divergente  { color: var(--medium-fg); border-color: #F59E0B; }

/* AVISO DE RENDERIZAÇÃO (SPA/CSR) */
.render-warning {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    color: #92400E;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
/* Com a versão renderizada avaliada, o aviso é informativo, não alerta
   (R4 do plano de renderização): nada na análise está errado. */
.render-warning--info {
    background: var(--info-bg);
    border-color: #BAE6FD;
    color: var(--info-fg);
}
.render-warning > .lucide {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
}
.render-warning strong { display: block; font-size: 1rem; }
.render-warning-details { font-size: 0.9rem; line-height: 1.55; }
.render-warning-details > summary {
    margin-top: 0.35rem;
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline;
    width: fit-content;
    list-style: none;
}
.render-warning-details > summary::-webkit-details-marker { display: none; }
.render-warning-details > summary::before { content: '▸ '; }
.render-warning-details[open] > summary::before { content: '▾ '; }
.render-warning-details p { margin: 0.5rem 0 0; }
.render-warning-details p:first-of-type { margin-top: 0.6rem; }

/* Item avaliado sobre HTML incompleto (conteúdo via JS) */
.check-item.is-unreliable {
    border-left: 3px solid #F59E0B;
    background: repeating-linear-gradient(
        135deg, var(--bg), var(--bg) 12px, #FEFCE8 12px, #FEFCE8 24px);
}

/* ERROR */
.error-box {
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid transparent;
    background: #FED7D7;
    color: #742A2A;
    border-color: #FC8181;
}
.error-box.tone-red    { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.error-box.tone-orange { background: #FFEDD5; color: #9A3412; border-color: #FDBA74; }
.error-box.tone-amber  { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.error-box.tone-blue   { background: #DBEAFE; color: #1E3A8A; border-color: #93C5FD; }
.error-box .error-title {
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.error-box .error-title .lucide { width: 20px; height: 20px; }
.error-box .error-hint {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    opacity: 0.85;
    line-height: 1.5;
}
.error-box .error-retry {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.error-box .error-retry:hover { background: rgba(0,0,0,0.05); }
.error-box .error-retry .lucide { width: 16px; height: 16px; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .section-header-titulo { font-size: 1rem; }
    .check-item-status { width: 48px; }
    .check-item-status .lucide { width: 1.4rem; height: 1.4rem; }
    .check-item-body   { flex-direction: column; gap: 0.5rem; padding: 0.85rem; }
    .check-item-meta   { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
}

/* METRICS */


/* ── Editorial (parágrafos no fim da página) ─────────────────── */
.page-editorial {
    max-width: 720px;
    margin: clamp(72px, 10vw, 120px) auto 24px;
    padding: 0 20px;
}
.page-editorial .editorial-title {
    font-family: 'Abril Fatface', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    line-height: 1.18;
    letter-spacing: -0.005em;
    color: var(--ink-1);
    margin: 0 0 1.5rem;
    text-wrap: balance;
}
.page-editorial .editorial-title em {
    font-style: normal;
    background-image: linear-gradient(var(--primary), var(--primary));
    background-size: 100% 0.4em;
    background-repeat: no-repeat;
    background-position: 0 88%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 0.08em;
}
.page-editorial .editorial-subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--ink-1);
    margin: 2.2em 0 1rem;
}
.page-editorial p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    line-height: 1.78;
    color: var(--ink-2);
    margin: 0 0 1.2em;
}
.page-editorial p:last-child { margin-bottom: 0; }
.page-editorial .editorial-related {
    margin-top: 2.4em;
    padding-top: 1.6em;
    border-top: 1px solid var(--rule);
    text-align: center;
    color: var(--ink-3);
    font-size: 0.9rem;
    line-height: 1.8;
}
.page-editorial .editorial-related a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    border-bottom: none;
}
.page-editorial .editorial-related a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}
.page-editorial .editorial-lead {
    color: var(--ink-1);
    font-weight: 500;
    margin-bottom: 1em;
}
.page-editorial .editorial-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 2.4em;
    font-family: 'Roboto', sans-serif;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--ink-2);
}
.page-editorial .editorial-table th,
.page-editorial .editorial-table td {
    text-align: left;
    padding: 0.7em 0.9em;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.page-editorial .editorial-table tr:last-child th,
.page-editorial .editorial-table tr:last-child td { border-bottom: none; }
.page-editorial .editorial-table th {
    color: var(--ink-1);
    font-weight: 700;
    white-space: nowrap;
    width: 34%;
    background: rgba(230, 255, 0, 0.08);
    border-left: 3px solid var(--primary);
}
.page-editorial .editorial-faq {
    margin: 0 0 2.4em;
}
.page-editorial .editorial-faq h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: var(--ink-1);
    font-size: 1.05rem;
    line-height: 1.4;
    margin: 1.6em 0 0;
}
.page-editorial .editorial-faq h3:first-child {
    margin-top: 0;
}
.page-editorial .editorial-faq p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    line-height: 1.78;
    color: var(--ink-2);
    margin: 0.4em 0 0;
}
@media (max-width: 520px) {
    .page-editorial .editorial-title { font-size: 1.7rem; }
    .page-editorial p { font-size: 1rem; }
    .page-editorial .editorial-table { font-size: 0.95rem; }
    .page-editorial .editorial-table th,
    .page-editorial .editorial-table td {
        padding: 0.6em 0.7em;
    }
    .page-editorial .editorial-table th {
        white-space: normal;
        width: 38%;
    }
}

/* Passo a passo, tabela comparativa e identificadores tecnicos:
   usados so pelo conteudo editorial novo. */
/* Passos em cards: SVG animado no topo, titulo numerado e descricao.
   O hover repete o dos cards da home: borda, sombra e deslocamento. */
.page-editorial .passos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.8em;
    counter-reset: passo;
}
.page-editorial .passo-card {
    counter-increment: passo;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 1.1rem 1.1rem 1.3rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.page-editorial .passo-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 12px 28px rgba(22, 25, 0, 0.08);
}
.page-editorial .passo-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.page-editorial .passo-titulo {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--ink-1);
    margin: 0.9rem 0 0.35rem;
}
.page-editorial .passo-titulo::before {
    content: counter(passo) ". ";
    color: var(--accent);
}
.page-editorial .passo-card p {
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}
/* Animacao dos passos. Por padrao ela existe, mas parada em 87,5% do
   ciclo, que e o quadro em que cada ilustracao esta completa: URL
   digitada, medidor em 100%, itens marcados. Parar no quadro zero
   deixaria os cards com cara de quebrado, e quem escolhe o quadro e o
   delay negativo. Em movimento reduzido nada disso vale: cada SVG traz
   o proprio bloco com o estado estatico. */
@media (prefers-reduced-motion: no-preference) {
    .page-editorial .passo-img * {
        animation-play-state: paused;
        animation-delay: -4.2s;
    }
    /* Sem hover (celular e tablet), roda uma vez quando o card entra na
       tela. A classe vem do IntersectionObserver no fim da pagina. O
       fill-mode segura o ultimo quadro, que e o estado completo. */
    .page-editorial .passo-card.animar .passo-img * {
        animation-play-state: running;
        animation-delay: 0s;
        animation-iteration-count: 0.875;
        animation-fill-mode: forwards;
    }
    /* O cursor pisca em ciclo proprio de 0,9s, entao 4,2s de animacao
       dao 4,6667 ciclos dele. */
    .page-editorial .passo-card.animar:not(:hover) .passo-img .p1-caret {
        animation-iteration-count: 0.875, 4.6667;
    }
    /* Com ponteiro, o gatilho e o hover, e repete enquanto ele ficar. */
    .page-editorial .passo-card:hover .passo-img *,
    .page-editorial .passo-card:focus-within .passo-img * {
        animation-play-state: running;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-fill-mode: none;
    }
}
@media (max-width: 640px) {
    .page-editorial .passos-grid { grid-template-columns: 1fr; }
    /* Numa coluna so, a ilustracao esticada ate a largura do card fica
       desproporcional: ela foi desenhada em 200px. */
    .page-editorial .passo-img { max-width: 260px; margin-inline: auto; }
}
.page-editorial strong { font-weight: 700; color: var(--ink-1); }
.page-editorial code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: 5px;
    background: #F1F5E8;
    color: var(--ink-1);
    /* Identificador tecnico nao tem espaco: sem isso um deles estica a
       celula e joga a pagina em rolagem horizontal. */
    overflow-wrap: anywhere;
}
/* A caixa rola sozinha em tela estreita; a pagina, nao. */
.page-editorial .editorial-table-wrap {
    overflow-x: auto;
    margin: 0 0 2.4em;
}
.page-editorial .editorial-table-wrap .editorial-table { margin-bottom: 0; }
/* Comparativa: duas colunas de igual peso, sem a coluna-rotulo da
   tabela de criterios. */
.page-editorial .editorial-table.editorial-table-compare thead th {
    width: 50%;
    white-space: nowrap;
    background: rgba(230, 255, 0, 0.12);
    border-left: none;
    border-bottom: 2px solid var(--primary);
}
.page-editorial .editorial-table.editorial-table-compare td { width: 50%; }
.page-editorial .editorial-table.editorial-table-compare tbody tr:last-child td {
    border-bottom: none;
}
@media (max-width: 520px) {
    .page-editorial .editorial-table.editorial-table-compare thead th { white-space: normal; }
}

/* ── §5.5: o que saiu de atributo inline ou de JavaScript ─────────── */

/* Gauge: a cor vinha em hexadecimal, montada pelo toneColor() no JS. */
.gauge-trilho { stroke: var(--tom-trilho); }
.gauge-arco   { transition: stroke-dashoffset .6s ease; }
.gauge-label  { font-family: 'DM Mono', monospace; }

/* O arco é TRAÇO e o número é PREENCHIMENTO, e cada um leva só a propriedade
   que lhe cabe.

   Pintar os dois nos dois, com um `.gauge-arco { fill: none }` depois para
   corrigir, é o que estava aqui e não funciona: a regra do tom tem duas
   classes (0,2,0) e a correção tem uma (0,1,0), então a correção perde e o
   `fill` fecha o semicírculo inteiro por cima do número. O `fill="none"` que o
   JS escreve no próprio path também perde, porque atributo de apresentação
   cede a qualquer regra de folha. Mesma armadilha da §5.1. */
.gauge-svg--good   .gauge-arco { stroke: var(--tom-good); }
.gauge-svg--medium .gauge-arco { stroke: var(--tom-medium); }
.gauge-svg--poor   .gauge-arco { stroke: var(--tom-poor); }
.gauge-svg--na     .gauge-arco { stroke: var(--tom-na); }

.gauge-svg--good   .gauge-label { fill: var(--tom-good); }
.gauge-svg--medium .gauge-label { fill: var(--tom-medium); }
.gauge-svg--poor   .gauge-label { fill: var(--tom-poor); }
.gauge-svg--na     .gauge-label { fill: var(--tom-na); }

/* Nada mais pinta estes dois, mas `fill` e `stroke` sao herdados em SVG:
   a trava segura o caso de um ancestral passar a declarar um deles. */
.gauge-arco  { fill: none; }
.gauge-label { stroke: none; }

/* Percentual do resumo: mesma cor, antes aplicada por style inline. */
.sum-pct--good   { color: var(--tom-good); }
.sum-pct--medium { color: var(--tom-medium); }
.sum-pct--poor   { color: var(--tom-poor); }
.sum-pct--na     { color: var(--tom-na); }

/* O cabeçalho de seção abre e fecha o corpo.

   Era um <div> com onclick: não recebia foco nem respondia a Enter e
   Espaço, e navegação só por teclado é critério de aceite da §5.5. Virou
   <h3><button> na §5.5 e, na §5.4, o <summary> de um <details> — que é o
   elemento que o HTML tem para isto: abre e fecha sozinho, responde a
   teclado, e expõe o estado sem precisar de aria-expanded. 

   Some o triângulo nativo, que o chevron do sprite já substitui. */
.section-header::-webkit-details-marker { display: none; }

.section-header {
    list-style: none;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    user-select: none;
}
.section-header:hover { background: rgba(230,255,0,0.07); }
.section-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.section-header-right {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Trecho monoespaçado (canonical), antes com font-family inline. */
.mono { font-family: 'DM Mono', monospace; }

/* Badge da origem do critério (§4.1), com link para a documentação. */
.badge-criterio {
    text-decoration: none;
    border: 1px solid transparent;
}
a.badge-criterio:hover { text-decoration: underline; }
a.badge-criterio:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.badge-criterio--google         { background: #E8F0FE; color: #1A56B8; }
.badge-criterio--web-dev        { background: #E6F4EA; color: #1E6B3A; }
.badge-criterio--wcag           { background: #F3E8FD; color: #6B21A8; }
.badge-criterio--seguranca      { background: #FEF2F2; color: #9B1C1C; }
.badge-criterio--social         { background: #FFF1E6; color: #9A3412; }
.badge-criterio--analytics      { background: #F1F5F9; color: #475569; }
/* Prática e Mercado em cinza de propósito: são os que NÃO têm requisito
   oficial atrás, e dar-lhes a mesma cor dos demais igualaria o peso. */
.badge-criterio--mercado-onpage { background: #F1F5F9; color: #64748B; }
.badge-criterio--mercado        { background: #F1F5F9; color: #64748B; font-style: italic; }