/* ==========================================================================
   KROTAR — Analizador de Marketing Digital (/analisis-web/)
   Reutiliza tokens, .section/.glass-card/.btn/.ambient-glow/.advantages-grid
   ya definidos en style.css y sections.css — este archivo solo añade lo que
   esas hojas no cubren: el formulario del analizador, sus estados
   (cargando/error/resultados), las tarjetas de comprobación y el bloque de
   alcance "qué sí / qué no". Mismo patrón que assets/css/valoracion-inicial.css.
   ========================================================================== */

/* ==========================================================================
   Dirección visual — corrección obligatoria tras rechazo de la v1 (carbón +
   latón). Concepto aprobado: CLARIDAD, LUZ, ORDEN — la interfaz misma debe
   sentirse clara, no "oscuridad con puntos de luz". Referencias: Semrush
   Site Audit (ref-semrush-desktop.png: jerarquía, separación de bloques,
   lectura inmediata del estado) y Cloudflare "Is Your Site Agent-Ready?"
   (capturas del mensaje de entrega: superficie luminosa, tarjetas blancas
   con borde fino, iconos de estado circulares, secciones expandibles
   Goal/Issue/How to implement). Ninguna se copia literalmente — solo su
   lógica de composición y luminosidad.

   Redefine, SOLO dentro de #appShell, las mismas variables que ya usan
   style.css/sections.css/contact.css (--color-*). El <header> (nav) y el
   resto de páginas de KROTAR quedan fuera de #appShell y no ven este
   bloque, así que conservan su identidad azul intacta; dentro de esta
   página, todo lo que ya reutiliza esos mismos tokens (formularios,
   .glass-card, .btn-ghost, .eyebrow, tarjetas) se retematiza solo con
   esto. Tipografía: se retira Source Serif 4 de la v1 — evaluada contra el
   criterio "claridad + precisión + lectura técnica rápida", no lo cumplía
   mejor que la Manrope que ya usa el resto del sitio (así lo hacen también
   las dos referencias: sans en todo el contenido, sin serif). Los pocos
   sitios donde las hojas compartidas escriben un color en literal (no en
   variable) se sobreescriben aparte, más abajo.
   ========================================================================== */
/* El header del sitio nace transparente y solo gana fondo oscuro al hacer
   scroll (pensado para vivir sobre un hero oscuro): sobre el nuevo fondo
   claro de esta página, el logo/nav (claros) quedan ilegibles en los
   primeros pixeles, antes de scrollear. Es la única zona oscura de la
   página — puntual, una barra fina de navegación, igual que ya se ve tras
   hacer scroll en el resto del sitio — y existe solo para que ese texto
   claro compartido siga siendo legible, no como lenguaje visual del
   analizador. No se toca header.css (compartido); se fija vía una clase
   en el <body> de esta página. */
body.aw-page .site-header {
    background: rgba(2, 3, 6, 0.82);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

#appShell {
    --color-bg: #faf8f4;
    --color-surface: #ffffff;
    --color-surface-heavy: #ffffff;
    --color-card: #ffffff;
    --color-card-hover: #fdfbf7;
    --color-border: #eae4d7;
    --color-border-light: #e2dbcb;
    --color-text: #211c15;
    --color-text-body: #4d4638;
    --color-text-muted: #766d5c;
    --color-text-dim: #9c9384;
    --color-cyan: #a2620a;
    --color-cyan-bright: #b8720c;
    --color-success: #2f8a4e;
    --color-error: #c1402b;

    background-color: var(--color-bg);
}

/* Los cuatro ambient-glow de esta página (2 en el hero, 1 en "Cómo
   funciona", 1 en el footer) eran manchas de color difuminadas — el
   lenguaje "brillo tecnológico" que la dirección aprobada prohíbe
   explícitamente sobre una superficie clara. Se retiran del todo, no se
   recolorean. */
#appShell .aw-glow {
    display: none;
}

/* Firma visual: una regla vertical de acento junto a cada título de
   sección — el único adorno recurrente, siempre igual, discreto sobre
   fondo claro. */
#appShell .aw-section-title,
#appShell .aw-plan-group-title {
    position: relative;
    padding-left: 1rem;
}

#appShell .aw-section-title::before,
#appShell .aw-plan-group-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 2px;
    background: var(--color-cyan);
}

/* .glass-card ("Cómo funciona"): tarjeta blanca de borde fino, sin
   degradado ni textura — mismo lenguaje que las tarjetas de Cloudflare. */
#appShell .glass-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 2px rgba(33, 28, 21, 0.04);
}

#appShell .glass-card:hover {
    border-color: rgba(162, 98, 10, 0.4);
    background: var(--color-surface);
    box-shadow: 0 4px 14px rgba(33, 28, 21, 0.08);
    transform: translateY(-2px);
}

#appShell .advantage-card::before {
    background: linear-gradient(90deg, transparent, rgba(162, 98, 10, 0.5), transparent);
}

/* "Cómo funciona" — replanteamiento tras evidencia visual (probado antes en
   Figma: el número pequeño y tenue detrás del texto no funcionaba como
   arquitectura gráfica). Ahora el número es la masa gráfica dominante de
   cada tarjeta: enorme, anclado a la esquina, recortado por el propio
   límite de la tarjeta (overflow:hidden) — se percibe primero, el texto
   sigue siendo perfectamente legible porque va encima y en color sólido.
   Retícula estructural: TODAS las tarjetas reservan la misma altura fija
   para el título (2 líneas) y el mismo padding superior — así las cuatro
   descripciones arrancan exactamente en la misma línea, sea cual sea la
   longitud real de cada título. Progresión 1→4 en una sola familia
   cromática (el mismo ámbar del resto de la página): más opacidad del
   número, más tono de fondo y borde más presente en cada paso — nunca un
   color distinto ni una tarjeta oscura. */
#appShell .advantage-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    min-height: 300px;
    padding: 2.2rem 1.75rem 1.75rem;
}

#appShell .advantage-card>* {
    position: relative;
    z-index: 1;
}

#appShell .advantage-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.6rem;
}

#appShell .advantage-desc {
    margin-top: 0.65rem;
}

/* El número: masa gráfica, no decoración. Anclado a la esquina
   inferior-derecha y sobredimensionado a propósito para que sangre fuera
   de dos límites de la tarjeta — clipsContent (overflow:hidden en la
   tarjeta) recorta el sobrante, exactamente como se validó en el
   prototipo. */
#appShell .advantage-card::after {
    content: attr(data-step);
    position: absolute;
    z-index: 0;
    right: -0.14em;
    bottom: -0.22em;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(13rem, 22vw, 18rem);
    line-height: 1;
    color: rgba(162, 98, 10, 0.16);
    pointer-events: none;
}

#appShell .advantage-card[data-step="2"]::after {
    color: rgba(162, 98, 10, 0.24);
}

#appShell .advantage-card[data-step="3"] {
    background: #fbf3e4;
    border-color: rgba(162, 98, 10, 0.3);
}

#appShell .advantage-card[data-step="3"]::after {
    color: rgba(143, 83, 8, 0.32);
}

#appShell .advantage-card[data-step="4"] {
    background: #f8ecd2;
    border: 1.5px solid rgba(143, 83, 8, 0.55);
    box-shadow: 0 6px 20px rgba(143, 83, 8, 0.16);
}

#appShell .advantage-card[data-step="4"]::after {
    color: rgba(143, 83, 8, 0.42);
}

#appShell .advantage-card[data-step="4"] .advantage-title {
    color: #6b3d05;
}

#appShell .site-footer {
    border-top-color: var(--color-border);
    background: var(--color-bg);
}

#appShell .site-footer::before {
    background: linear-gradient(90deg, transparent, rgba(162, 98, 10, 0.55), transparent);
}

#appShell .btn-cta-accent {
    color: #ffffff;
    background: linear-gradient(180deg, #b8720c 0%, #8f5308 100%);
    border-color: #8f5308;
    box-shadow: 0 1px 2px rgba(33, 28, 21, 0.15), 0 6px 16px rgba(162, 98, 10, 0.22);
}

#appShell .btn-cta-accent:hover {
    color: #ffffff;
    background: linear-gradient(180deg, #c17d1a 0%, #9c5c09 100%);
    border-color: #9c5c09;
    box-shadow: 0 2px 4px rgba(33, 28, 21, 0.18), 0 10px 22px rgba(162, 98, 10, 0.28);
    transform: translateY(-1px);
}

#appShell .btn-cta-accent .btn-arrow {
    color: #ffffff;
}

#appShell .btn-ghost {
    border-color: var(--color-border);
}

#appShell .btn-ghost:hover {
    border-color: var(--color-text-dim);
    background: rgba(33, 28, 21, 0.03);
}

/* contact.css deja el fondo/borde de .form-field input en literal (navy
   oscuro, pensado para la landing) — se corrige aquí para el resto de
   campos del formulario del informe (nombre, empresa, teléfono), que hasta
   ahora solo se veían claros mientras tenían el foco. */
#appShell .form-field input,
#appShell .form-field select,
#appShell .form-field textarea {
    background: #ffffff;
    border-color: var(--color-border);
    box-shadow: none;
}

#appShell .form-field input:focus,
#appShell .form-field select:focus,
#appShell .form-field textarea:focus {
    border-color: rgba(162, 98, 10, 0.55);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(162, 98, 10, 0.14);
}

#appShell .aw-form-row {
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(33, 28, 21, 0.04);
}

#appShell .aw-optional-input {
    background: #ffffff;
}

/* Jerarquía real por estado, mismo lenguaje que las tarjetas de check de
   Cloudflare: CADA comprobación es una tarjeta de borde fino y fondo
   blanco (no una lista de hairlines); lo que necesita atención (warn/fail)
   lleva además un canto de color e icono a juego, para que se identifique
   sin leer el texto. Lo correcto/informativo queda igual de claro, solo
   sin ese acento. */
#appShell .aw-row {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: 0 1px 2px rgba(33, 28, 21, 0.03);
}

#appShell .aw-row:first-child {
    padding-top: var(--space-4);
}

#appShell .aw-row:last-child {
    margin-bottom: 0;
}

#appShell .aw-row:has(.aw-row-status.is-warn) {
    border-color: rgba(162, 98, 10, 0.35);
    border-left: 3px solid var(--color-cyan);
}

#appShell .aw-row:has(.aw-row-status.is-fail) {
    border-color: rgba(193, 64, 43, 0.35);
    border-left: 3px solid var(--color-error);
}

#appShell .aw-row-status {
    width: 9px;
    height: 9px;
    margin-top: 6px;
}

/* .aw-loading/.aw-results etc. set their own `display` (flex/grid) below,
   which has the same specificity as the UA stylesheet's [hidden]{display:
   none} and would otherwise win by cascade order. This keeps [hidden]
   authoritative for every element in this file regardless of its own
   display rule. */
[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------------- */
/* Hero + formulario                                                     */
/* -------------------------------------------------------------------- */
.aw-hero {
    padding-top: 7rem;
}

.aw-hero-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.aw-hero-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 4.2vw, 2.9rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.aw-hero-subtitle {
    font-size: clamp(1rem, 1.7vw, 1.15rem);
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 68ch;
    margin: 0 auto var(--space-7);
}

.aw-hero-glow-a {
    top: -60px;
    left: 50%;
    width: 620px;
    height: 420px;
    transform: translateX(-70%);
}

.aw-hero-glow-b {
    top: 0;
    right: 50%;
    width: 560px;
    height: 420px;
    transform: translateX(70%);
}

.aw-form {
    max-width: 560px;
    margin: 0 auto;
}

.aw-form-row {
    display: flex;
    gap: var(--space-3);
    background: var(--color-surface-heavy);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-2);
}

.aw-form-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: var(--space-3) var(--space-4);
}

.aw-form-input::placeholder {
    color: var(--color-text-dim);
}

.aw-form-submit {
    flex-shrink: 0;
    white-space: nowrap;
}

.aw-form.has-error .aw-form-row {
    border-color: var(--color-error);
}

.aw-form #analyzerInputError {
    display: none;
    text-align: left;
    margin-top: var(--space-2);
    font-size: 0.82rem;
    color: var(--color-error);
}

.aw-form.has-error #analyzerInputError {
    display: block;
}

.aw-hero-note {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.02em;
    color: var(--color-text-dim);
    margin-top: var(--space-4);
}

/* -------------------------------------------------------------------- */
/* Campo opcional: enlace de la ficha de Google                          */
/* -------------------------------------------------------------------- */
.aw-optional-toggle {
    display: inline-block;
    margin-top: var(--space-3);
    background: none;
    border: none;
    color: var(--color-cyan-bright);
    font-size: 0.84rem;
    cursor: pointer;
    padding: var(--space-1) 0;
}

.aw-optional-fields {
    max-width: 560px;
    margin: var(--space-3) auto 0;
    text-align: left;
}

.aw-optional-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.aw-optional-input {
    width: 100%;
    background: var(--color-surface-heavy);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.aw-optional-hint {
    font-size: 0.76rem;
    color: var(--color-text-dim);
    margin-top: var(--space-2);
}

/* -------------------------------------------------------------------- */
/* Estados: cargando / error                                             */
/* -------------------------------------------------------------------- */
.aw-panel {
    max-width: 640px;
    margin: var(--space-7) auto 0;
    text-align: center;
    padding: var(--space-5);
    border-radius: var(--radius-md);
}

.aw-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-body);
    font-size: 0.95rem;
}

.aw-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-cyan-bright);
    animation: aw-spin 0.8s linear infinite;
}

@keyframes aw-spin {
    to {
        transform: rotate(360deg);
    }
}

.aw-error {
    background: rgba(193, 64, 43, 0.06);
    border: 1px solid rgba(193, 64, 43, 0.35);
    color: #8a2c1c;
    font-size: 0.95rem;
}

/* ==========================================================================
   Resultados — composición editorial (Fase de reconstrucción visual)

   Referencias: Semrush Site Audit (círculo único grande + checklist corta;
   tabla ancha de incidencias con prioridad) e "Is Your Site Agent-Ready?"
   (arco de puntuación + veredicto; secciones con encabezado + fracción +
   filas anchas que se despliegan a un informe de ancho completo). Ninguna
   marca, color propietario ni texto se copia — solo la lógica de
   composición: pocas ideas grandes, mucho espacio, filas en vez de
   cuadrícula de tarjetas. Ver la matriz de adaptación en el mensaje de
   entrega de esta fase.
   ========================================================================== */
.aw-results {
    max-width: 820px;
    margin: var(--space-9) auto 0;
}

.aw-results>section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    border-top: 1px solid var(--color-border-light);
}

.aw-results>section:first-child {
    border-top: none;
    padding-top: 0;
}

.aw-section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.aw-section-intro {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 62ch;
    margin-bottom: var(--space-5);
}

/* -------------------------------------------------------------------- */
/* 1. Resumen general abierto                                            */
/* -------------------------------------------------------------------- */
.aw-summary-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.aw-summary-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--color-text-dim);
    text-transform: uppercase;
}

.aw-summary-url {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--color-cyan-bright);
    word-break: break-all;
}

.aw-summary-date {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-dim);
}

.aw-summary-main {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.aw-score-circle {
    position: relative;
    width: 190px;
    height: 190px;
    flex-shrink: 0;
}

.aw-score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.aw-score-track {
    fill: none;
    stroke: var(--color-border-light);
    stroke-width: 8;
}

.aw-score-arc {
    fill: none;
    stroke: var(--color-cyan-bright);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 339.3;
    stroke-dashoffset: 339.3;
    transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}

.aw-score-arc.is-good {
    stroke: var(--color-success);
}

.aw-score-arc.is-warn {
    stroke: var(--color-cyan);
}

.aw-score-arc.is-bad {
    stroke: var(--color-error);
}

.aw-score-circle-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.aw-score-percent {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 3rem;
    color: var(--color-text);
    line-height: 1;
}

.aw-score-caption {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-top: var(--space-2);
}

.aw-summary-verdict {
    flex: 1;
    min-width: 280px;
}

.aw-verdict-text {
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--color-text);
    margin-bottom: var(--space-5);
    max-width: 52ch;
}

.aw-top-priorities {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.aw-top-priorities li {
    display: flex;
    gap: var(--space-3);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-body);
}

.aw-top-priorities .aw-priority-index {
    flex-shrink: 0;
    font-family: var(--font-mono);
    color: var(--color-text-dim);
}

.aw-top-priorities strong {
    color: var(--color-text);
}

/* -------------------------------------------------------------------- */
/* 2. Panorama por áreas — barras horizontales largas, no cajas           */
/* -------------------------------------------------------------------- */
.aw-panorama-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.aw-panorama-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    align-items: center;
    gap: var(--space-4);
}

.aw-panorama-row.is-unavailable {
    opacity: 0.55;
}

.aw-panorama-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
}

.aw-panorama-bar-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.aw-panorama-bar-track {
    flex: 1;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--color-border-light);
    overflow: hidden;
}

.aw-panorama-bar-track.is-dashed {
    background: repeating-linear-gradient(90deg, var(--color-border-light) 0 6px, transparent 6px 12px);
}

.aw-panorama-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-cyan-bright);
}

.aw-panorama-bar-fill.is-good {
    background: var(--color-success);
}

.aw-panorama-bar-fill.is-warn {
    background: var(--color-cyan);
}

.aw-panorama-bar-fill.is-bad {
    background: var(--color-error);
}

.aw-panorama-percent {
    flex-shrink: 0;
    width: 4.5ch;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.aw-panorama-verdict {
    grid-column: 2;
    font-size: 0.84rem;
    color: var(--color-text-dim);
    margin-top: 2px;
}

/* -------------------------------------------------------------------- */
/* 4. Filas anchas — usadas en "Qué requiere atención" y en las           */
/*    secciones editoriales (SEO, IA, redes). Un patrón, muchos usos.    */
/* -------------------------------------------------------------------- */
.aw-row {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-border-light);
}

.aw-row:first-child {
    border-top: none;
    padding-top: 0;
}

.aw-row-status {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 7px;
}

.aw-row-status.is-pass {
    background: var(--color-success);
}

.aw-row-status.is-warn {
    background: var(--color-cyan);
}

.aw-row-status.is-fail {
    background: var(--color-error);
}

.aw-row-status.is-info {
    background: var(--color-cyan-bright);
}

.aw-row-main {
    flex: 1;
    min-width: 0;
}

.aw-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.aw-row-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.aw-row-status-text {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-dim);
}

.aw-row-detail {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 68ch;
}

.aw-row-report {
    margin-top: var(--space-3);
}

.aw-row-report>summary {
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-cyan-bright);
}

.aw-report-body {
    margin-top: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface-heavy);
    border-radius: var(--radius-md);
    max-width: 68ch;
}

.aw-report-body p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-body);
    margin-bottom: var(--space-3);
}

.aw-report-body p:last-of-type {
    margin-bottom: 0;
}

.aw-report-body p strong {
    color: var(--color-text);
}

.aw-report-confianza {
    display: inline-block;
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-dim);
}

.aw-report-evidence {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-border-light);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--color-text-dim);
    word-break: break-word;
}

/* -------------------------------------------------------------------- */
/* 6/7/9. Secciones editoriales — indicador de progreso + filas           */
/* -------------------------------------------------------------------- */
.aw-editorial-progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.aw-editorial-progress .aw-panorama-bar-track {
    max-width: 320px;
}

.aw-editorial-progress-label {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* -------------------------------------------------------------------- */
/* 8. Presencia local                                                    */
/* -------------------------------------------------------------------- */
.aw-local p {
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--color-text-body);
    max-width: 66ch;
    margin-bottom: var(--space-4);
}

.aw-local p strong {
    color: var(--color-text);
}

.aw-local-not-evaluated {
    padding: var(--space-5);
    border: 1px dashed var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 60ch;
}

.aw-local-candidates {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.aw-ficha-candidate {
    text-align: left;
    background: var(--color-surface-heavy);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.aw-ficha-candidate:hover {
    border-color: var(--color-cyan-bright);
}

.aw-local-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.aw-local-list li {
    font-size: 0.9rem;
    color: var(--color-text-body);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border-light);
}

.aw-local-list li:first-child {
    border-top: none;
}

.aw-local-list strong {
    color: var(--color-text);
}

/* -------------------------------------------------------------------- */
/* 10. Plan de acción                                                    */
/* -------------------------------------------------------------------- */
.aw-plan-group {
    margin-bottom: var(--space-7);
}

.aw-plan-group:last-child {
    margin-bottom: 0;
}

.aw-plan-group-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.aw-plan-group-title .aw-plan-count {
    font-family: var(--font-mono);
    font-weight: 400;
    color: var(--color-text-dim);
    font-size: 0.82rem;
}

.aw-plan-row {
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border-light);
}

.aw-plan-row:first-child {
    border-top: none;
    padding-top: 0;
}

.aw-plan-problem {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.aw-plan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    font-size: 0.86rem;
    color: var(--color-text-body);
}

.aw-plan-meta-item strong {
    color: var(--color-text-muted);
    font-weight: 600;
    margin-right: 4px;
}

.aw-plan-empty {
    color: var(--color-text-dim);
    font-size: 0.88rem;
}

/* -------------------------------------------------------------------- */
/* Apartados no incluidos                                                */
/* -------------------------------------------------------------------- */
.aw-unavailable-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.aw-unavailable-list li {
    font-size: 0.86rem;
    color: var(--color-text-body);
    line-height: 1.55;
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border-light);
}

.aw-unavailable-list strong {
    color: var(--color-text);
    display: block;
    margin-bottom: 2px;
}

.aw-unavailable-tag {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-dim);
}

/* -------------------------------------------------------------------- */
/* 11. PDF + CTA final                                                   */
/* -------------------------------------------------------------------- */
.aw-final-cta {
    text-align: center;
}

.aw-final-cta .aw-section-title,
.aw-final-cta .aw-section-intro {
    margin-left: auto;
    margin-right: auto;
}

/* Formulario "¿Dónde te enviamos el informe?" — único punto de entrada al
   PDF (ver "Descargar informe PDF" más arriba, que ahora abre este panel en
   lugar de descargar directamente). Ancho de formulario propio, centrado,
   texto alineado a la izquierda dentro de él (igual que .aw-form-input). */
.aw-email-report-form {
    max-width: 460px;
    margin: var(--space-5) auto 0;
    text-align: left;
}

.aw-email-report-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-text);
    text-align: center;
    margin-bottom: var(--space-2);
}

.aw-email-report-intro {
    font-size: 0.92rem;
    color: var(--color-text-body);
    text-align: center;
    margin-bottom: var(--space-5);
}

.aw-email-report-privacy {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-body);
    margin: var(--space-1) 0 var(--space-4);
}

.aw-email-report-privacy a {
    color: var(--color-cyan);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Responsive                                                            */
/* -------------------------------------------------------------------- */
@media (max-width: 720px) {
    .aw-summary-main {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-6);
    }

    .aw-panorama-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .aw-panorama-verdict {
        grid-column: 1;
    }
}

@media (max-width: 560px) {
    .aw-form-row {
        flex-direction: column;
    }

    .aw-form-submit {
        justify-content: center;
    }

    .aw-summary-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .aw-row-head {
        flex-direction: column;
        gap: var(--space-1);
    }
}

@media (max-width: 480px) {
    /* Mismo criterio que valoracion-inicial.css para .vi-header-cta: la
       regla genérica compartida (.header-cta .btn span { display:none })
       solo oculta el texto, y este CTA no lleva icono — sin esto quedaba
       un botón visible pero vacío. Se retira entero, como en la página
       hermana, porque el propio hero repite el mismo CTA a un scroll. */
    .vi-header-cta {
        display: none;
    }

    /* En 390px, clamp(2rem, 4.2vw, 2.9rem) ya está en su mínimo (2rem) y el
       titular real (11 palabras) cae en 4 líneas, empujando el formulario
       fuera de la primera pantalla. Un tamaño propio para móvil, más
       compacto, sin tocar la escala de escritorio. */
    .aw-hero {
        padding-top: 4.5rem;
    }

    .aw-hero-title {
        font-size: 1.7rem;
        letter-spacing: -0.01em;
    }

    .aw-hero-subtitle {
        font-size: 0.95rem;
    }

    #appShell .aw-section-title,
    #appShell .aw-plan-group-title {
        padding-left: 0.85rem;
    }
}

/* ==========================================================================
   Flujo funcional vigente (rendimiento, estado PDF, CTA «Solicitar propuesta»,
   modal de informe/propuesta) — se añade sobre la capa visual aprobada.
   ========================================================================== */
/* -------------------------------------------------------------------- */
/* 3. Rendimiento — dos indicadores circulares grandes lado a lado        */
/* -------------------------------------------------------------------- */
.aw-performance-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
}

.aw-perf-col {
    text-align: center;
}

.aw-perf-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.aw-perf-circle {
    position: relative;
    width: 128px;
    height: 128px;
    margin: 0 auto var(--space-4);
}

.aw-perf-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.aw-perf-track {
    fill: none;
    stroke: var(--color-border-light);
    stroke-width: 9;
}

.aw-perf-arc {
    fill: none;
    stroke: var(--color-cyan-bright);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 289;
    stroke-dashoffset: 289;
    transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}

.aw-perf-arc.is-good {
    stroke: var(--color-success);
}

.aw-perf-arc.is-warn {
    stroke: #fbbf24;
}

.aw-perf-arc.is-bad {
    stroke: var(--color-error);
}

.aw-perf-circle-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.7rem;
    color: var(--color-text);
}

.aw-perf-metrics {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    text-align: left;
    max-width: 260px;
    margin: 0 auto var(--space-3);
}

.aw-perf-note {
    font-size: 0.86rem;
    color: var(--color-text-body);
    line-height: 1.55;
    text-align: left;
    max-width: 260px;
    margin: 0 auto;
}

.aw-pdf-status {
    display: block;
    min-height: 1.2em;
    margin-top: var(--space-3);
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.aw-pdf-status.is-error {
    color: var(--color-error);
}

.aw-final-cta-next {
    margin-top: var(--space-8);
    padding-top: var(--space-7);
    border-top: 1px solid var(--color-border-light);
}

.aw-final-cta-next h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.aw-final-cta-next p {
    color: var(--color-text-body);
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 56ch;
    margin: 0 auto var(--space-5);
}

@media (max-width: 720px) {
    .aw-performance-row {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

/* ==========================================================================
   Modal "Recibe el informe por email" — overlay/posicionamiento propios;
   los campos del formulario reutilizan .form-field/.form-consent/.btn de
   contact.css (ya cargado en esta página), el cierre reutiliza .modal-close
   y body.modal-open de modal.css. Nada de esto se duplica aquí.
   ========================================================================== */
.aw-report-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

.aw-report-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 3, 6, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.aw-report-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 2 * var(--space-5));
    overflow-y: auto;
    padding: var(--space-6) var(--space-5);
}

.aw-report-modal-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.005em;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    padding-right: var(--space-6);
}

.aw-report-modal-lead {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
}

.aw-report-confirm {
    text-align: center;
}

.aw-report-confirm p {
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--color-text-body);
    margin-bottom: var(--space-5);
}

.aw-report-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
}

@media (max-width: 560px) {
    .aw-report-modal {
        padding: var(--space-3);
        align-items: flex-end;
    }

    .aw-report-modal-panel {
        max-width: none;
    }
}