/*
  modelo.css — estilos específicos de la vista /modelo.
  Hereda paleta v3 de style.css.
*/

/* ============== Nav links ============== */

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: var(--mono);
    font-size: 0.85rem;
}

.nav-link {
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.15s ease;
}

.nav-link:hover { color: var(--terracotta-dark); }

.nav-link-active {
    color: var(--ink);
    border-bottom: 1px solid var(--terracotta);
    padding-bottom: 2px;
}

/* ============== Flujo de información (neuronas) ============== */

.flow-section {
    padding: clamp(2rem, 5vw, 3.5rem) 0;
    border-bottom: 1px solid var(--paper-shadow);
}

.flow-section .section-header {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.01em;
}

.flow-caption {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-soft);
    max-width: 60ch;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

/* Container del grafo 3D WebGL — estetica POZO MISTICO.
   La idea: miramos hacia abajo dentro de un pozo profundo. La luz ámbar
   cae desde la boca arriba, el centro es un abismo oscuro, los bordes
   van perdiéndose en la penumbra. Motas de polvo dorado descendiendo. */
.modelo-3d-graph {
    display: block;
    width: 100%;
    height: 620px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background:
        /* Luz cenital ámbar que entra por la boca del pozo (arriba) */
        radial-gradient(ellipse 75% 28% at 50% 0%,
            rgba(255, 200, 130, 0.22) 0%,
            rgba(220, 150, 90, 0.10) 30%,
            transparent 70%),
        /* Halo central tenue cerca de Brújula (resplandor místico) */
        radial-gradient(circle 30% at 50% 50%,
            rgba(120, 85, 50, 0.08) 0%,
            transparent 70%),
        /* Abismo oscuro en el fondo abajo */
        radial-gradient(ellipse 65% 35% at 50% 100%,
            rgba(0, 0, 0, 0.6) 0%,
            transparent 70%),
        /* Base: gradient vertical desde tinte cálido arriba a abismo abajo */
        linear-gradient(180deg,
            #1A1408 0%,     /* superficie ámbar muy tenue */
            #0C0D1A 25%,    /* zona intermedia oscura */
            #04050D 60%,    /* profundidad */
            #010103 100%);  /* abismo */
    box-shadow:
        inset 0 0 130px rgba(0, 0, 0, 0.75),
        0 20px 60px -20px rgba(0, 0, 0, 0.85);
    cursor: grab;
}
.modelo-3d-graph:active { cursor: grabbing; }
.modelo-3d-graph canvas { display: block; border-radius: 16px; }

/* Boton de audio ambient — flotante en esquina inferior derecha
   del container. Toggle on/off del drone atmosferico. */
.modelo-3d-audio-btn {
    position: absolute;
    bottom: 18px;
    right: 18px;
    z-index: 10;
    background: rgba(10, 37, 64, 0.72);
    border: 1px solid rgba(91, 247, 255, 0.35);
    color: rgba(234, 241, 251, 0.85);
    border-radius: 999px;
    padding: 9px 16px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.25s ease;
    user-select: none;
}
.modelo-3d-audio-btn:hover {
    border-color: rgba(91, 247, 255, 0.7);
    background: rgba(10, 37, 64, 0.9);
    color: #EAF1FB;
    transform: translateY(-1px);
}
.modelo-3d-audio-btn.playing {
    border-color: #5BF7FF;
    color: #5BF7FF;
    box-shadow: 0 0 20px rgba(91, 247, 255, 0.25);
}
.modelo-3d-audio-btn .icon {
    font-size: 15px;
    line-height: 1;
}
.modelo-3d-audio-btn .lbl {
    font-size: 12px;
    opacity: 0.85;
}

.modelo-3d-fallback {
    padding: 3rem 2rem;
    text-align: center;
    background: rgba(6, 11, 20, 0.4);
    border: 1px solid rgba(52, 224, 208, 0.2);
    border-radius: 16px;
    color: var(--fg-dim, rgba(234, 241, 251, 0.65));
    font-family: var(--sans);
}

@media (max-width: 900px) {
    .modelo-3d-graph { height: 520px; }
}
@media (max-width: 700px) {
    .modelo-3d-graph { height: 420px; }
}
@media (max-width: 480px) {
    .modelo-3d-graph { height: 360px; }
}

/* ============== Mobile flow: animación vertical "transporte de información" ==============
   El canvas radial no funciona en portrait (necesita aspect ratio cercano a 1:1).
   Mobile usa esta representación vertical con bullets que pulsan en cascada y
   líneas conectoras animadas que transportan información de I → II → III.
   Coherente con la voz visual dark glassmorphism + cyan. */

/* El stepper vertical (.flow-mobile) queda como fallback únicamente cuando
   el usuario tiene prefers-reduced-motion activado (no quiere animaciones).
   En ese caso el JS para el RAF y el stepper estático ofrece la misma info. */
.flow-mobile {
    display: none;
    margin: 1.5rem 0 0 0;
    padding: 0;
}

@media (max-width: 599px) {
    .flow-caption { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
    .modelo-3d-graph { display: none; }
    .flow-legend { display: none; }
    .flow-mobile { display: block; }
}

/* En mobile chico (<600px) preferimos el stepper vertical — el grafo 3D
   queda apretado y los labels se solapan. El stepper sigue siendo informativo. */
@media (max-width: 599px) {
    .modelo-3d-graph { display: none; }
    .flow-legend { display: none; }
    .flow-mobile { display: block; }
}

/* Cada paso es un "panel glass" con borde sutil */
.flow-mb-step {
    padding: 1.1rem 1.2rem 1.25rem;
    border: 1px solid var(--hair);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.flow-mb-step + .flow-mb-link + .flow-mb-step {
    margin-top: 0;
}

.flow-mb-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
}

.flow-mb-num {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 0.08em;
    border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
    border-radius: 100px;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cyan) 8%, transparent);
    flex-shrink: 0;
}

.flow-mb-head h3 {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0;
    color: var(--fg);
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.flow-mb-caption {
    margin: 0 0 0.9rem 0;
    font-family: var(--sans);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--fg-dim);
}

/* === Lista de bullets con pulse en cascada (Step I: Fuentes) === */
.flow-mb-dots {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.45rem 0.85rem;
}

.flow-mb-dots li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--fg-dim);
    line-height: 1.3;
}

.flow-mb-dots .dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 50%, transparent);
    flex-shrink: 0;
    animation: flow-mb-pulse-dot 2.6s ease-in-out infinite;
    opacity: 0.45;
}

/* Cada bullet con un delay distinto para que pulsen en cascada */
.flow-mb-dots li:nth-child(1)  .dot { animation-delay: 0s; }
.flow-mb-dots li:nth-child(2)  .dot { animation-delay: 0.15s; }
.flow-mb-dots li:nth-child(3)  .dot { animation-delay: 0.3s; }
.flow-mb-dots li:nth-child(4)  .dot { animation-delay: 0.45s; }
.flow-mb-dots li:nth-child(5)  .dot { animation-delay: 0.6s; }
.flow-mb-dots li:nth-child(6)  .dot { animation-delay: 0.75s; }
.flow-mb-dots li:nth-child(7)  .dot { animation-delay: 0.9s; }
.flow-mb-dots li:nth-child(8)  .dot { animation-delay: 1.05s; }
.flow-mb-dots li:nth-child(9)  .dot { animation-delay: 1.2s; }
.flow-mb-dots li:nth-child(10) .dot { animation-delay: 1.35s; }
.flow-mb-dots li:nth-child(11) .dot { animation-delay: 1.5s; }

@keyframes flow-mb-pulse-dot {
    0%, 100% {
        opacity: 0.35;
        transform: scale(1);
        box-shadow: 0 0 4px color-mix(in srgb, var(--cyan) 30%, transparent);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
        box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 80%, transparent);
    }
}

/* === Línea conectora vertical animada entre pasos === */
.flow-mb-link {
    height: 32px;
    margin: 0;
    position: relative;
    display: flex;
    justify-content: flex-start;
    padding-left: 1.55rem;  /* alineada al centro del .flow-mb-num */
    pointer-events: none;
}

.flow-mb-link::before {
    /* Línea base estática sutil */
    content: "";
    position: absolute;
    left: 1.55rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cyan) 18%, transparent) 0%,
        color-mix(in srgb, var(--cyan) 8%, transparent) 100%);
    transform: translateX(-50%);
}

.flow-mb-link-pulse {
    /* Pulso que viaja de arriba hacia abajo — la información en movimiento */
    position: absolute;
    left: 1.55rem;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 16px var(--cyan);
    transform: translateX(-50%);
    animation: flow-mb-travel 1.8s ease-in-out infinite;
}

.flow-mobile > .flow-mb-link:nth-of-type(2) .flow-mb-link-pulse {
    /* Desfasamos el segundo conector para que parezca un flujo continuo */
    animation-delay: 0.9s;
}

@keyframes flow-mb-travel {
    0% { top: 0; opacity: 0; transform: translate(-50%, 0) scale(0.7); }
    15% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    85% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { top: 100%; opacity: 0; transform: translate(-50%, -100%) scale(0.7); }
}

/* === Stat de Step II ("19 sub-tesis activas hoy") === */
.flow-mb-stat {
    margin: 0 0 0.85rem 0;
    font-family: var(--sans);
    font-size: 0.88rem;
    color: var(--fg-dim);
}

.flow-mb-stat #flow-step-active {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 400;
    color: var(--cyan);
    margin-right: 0.35rem;
    letter-spacing: -0.01em;
}

/* === Pills de granulares (Step II) — micro pulse sutil === */
.flow-mb-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.flow-mb-pill {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--fg-dim);
    padding: 0.28rem 0.55rem;
    border: 1px solid var(--hair);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.025);
    letter-spacing: 0.02em;
    transition: color 0.3s ease, border-color 0.3s ease;
    animation: flow-mb-pill-glow 4s ease-in-out infinite;
}

@keyframes flow-mb-pill-glow {
    0%, 92%, 100% {
        border-color: var(--hair);
        color: var(--fg-dim);
    }
    96% {
        border-color: color-mix(in srgb, var(--cyan) 55%, transparent);
        color: var(--cyan);
    }
}

/* Aplicamos delays escalonados a los pills para que el "glow" parezca recorrer
   las sub-tesis en cascada, como si la información estuviera siendo procesada */
.flow-mb-pills .flow-mb-pill:nth-child(3n+1) { animation-delay: 0s; }
.flow-mb-pills .flow-mb-pill:nth-child(3n+2) { animation-delay: 1.3s; }
.flow-mb-pills .flow-mb-pill:nth-child(3n)   { animation-delay: 2.6s; }

/* === Lista de maestras (Step III) — más estructurada, sin animación === */
.flow-mb-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.85rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.flow-mb-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--sans);
    font-size: 0.88rem;
    color: var(--fg);
    line-height: 1.35;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid color-mix(in srgb, var(--gold, #F2B340) 60%, transparent);
}

.flow-mb-list li .code {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--gold, #F2B340);
    letter-spacing: 0.05em;
}

.flow-mb-cta {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.8rem;
}

.flow-mb-cta a {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
    padding-bottom: 1px;
    transition: border-color 0.2s ease;
}

.flow-mb-cta a:hover {
    border-bottom-color: var(--cyan);
}

/* prefers-reduced-motion: matamos animaciones, mantenemos colores */
@media (prefers-reduced-motion: reduce) {
    .flow-mb-dots .dot,
    .flow-mb-link-pulse,
    .flow-mb-pill {
        animation: none !important;
        opacity: 1 !important;
    }
    .flow-mb-link-pulse {
        display: none;
    }
}

/* Leyenda de colores del flujo */
.flow-legend {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-soft);
}

.flow-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }

.legend-dot {
    width: 9px; height: 9px; border-radius: 50%;
    display: inline-block;
}
.legend-up { background: #34E0D0; }
.legend-down { background: #FF6B8A; }

/* Resumen "qué se movió esta semana" */
.flow-summary { margin-top: 1.5rem; }

.flow-summary-title {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--terracotta-dark);
    margin-bottom: 0.75rem;
}

.flow-summary-empty {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.flow-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.flow-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    border-radius: 0.3rem;
    border: 1px solid var(--paper-shadow);
    background: var(--paper);
    text-decoration: none;
    font-size: 0.85rem;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.flow-chip:hover { transform: translateY(-1px); }
.flow-chip-up { border-left: 3px solid #34E0D0; }
.flow-chip-down { border-left: 3px solid #FF6B8A; }
.flow-chip-up:hover { border-color: #34E0D0; }
.flow-chip-down:hover { border-color: #FF6B8A; }

.flow-chip-code {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-soft);
    font-weight: 500;
}
.flow-chip-title { color: var(--ink); }
.flow-chip-delta {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
}
.flow-chip-up .flow-chip-delta { color: #34E0D0; }
.flow-chip-down .flow-chip-delta { color: var(--terracotta-dark); }

/* "¿Por qué se mueve?" en las master-cards (label corta) */
.card-why-label {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--terracotta-dark);
    margin-right: 0.3rem;
}

.why-block-empty {
    color: var(--ink-soft);
    font-style: italic;
    font-family: var(--serif);
}

/* ============== Hero del modelo ============== */

.modelo-hero {
    padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem) 0;
    border-bottom: 1px solid var(--paper-shadow);
}

.modelo-hero h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    letter-spacing: -0.02em;
    margin: 0 0 1rem 0;
    color: var(--ink);
}

.modelo-hero .lede {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.5;
    color: var(--ink-soft);
    font-style: italic;
    max-width: 50ch;
    margin: 0 0 1.5rem 0;
}

.modelo-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--ink-soft);
    padding: 0.5rem 1rem;
    border: 1px solid var(--paper-shadow);
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.3);
}

.modelo-meta .dot {
    color: var(--terracotta);
    font-size: 1.1em;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============== Grid de maestras ============== */

.masters-grid-section {
    padding: clamp(2rem, 4vw, 3rem) 0;
}

.section-header {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 1.5rem 0;
    letter-spacing: -0.01em;
}

.masters-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .masters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 980px) {
    .masters-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.master-card {
    background: var(--paper);
    border: 1px solid var(--paper-shadow);
    border-radius: 0.35rem;
    padding: 1.25rem 1.25rem 1rem 1.25rem;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.master-card:hover {
    border-color: var(--terracotta);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px -8px rgba(44, 44, 44, 0.25);
}

.master-card-code {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--terracotta-dark);
    font-weight: 500;
    letter-spacing: 1px;
}

.master-card-title {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0.35rem 0 1rem 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
    min-height: 2.7em;
}

.master-card-prob {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.prob-value {
    font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.prob-meta {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: right;
    line-height: 1.3;
}

/* Confidence dots */
.conf-dots {
    display: inline-flex;
    gap: 2px;
    margin-left: 0.25rem;
}

.conf-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--paper-shadow);
}

.conf-dot.filled { background: var(--terracotta); }

/* Mini bar para probabilidad */
.prob-bar {
    margin-top: 0.75rem;
    height: 4px;
    background: var(--paper-shadow);
    border-radius: 2px;
    overflow: hidden;
}

.prob-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--terracotta), var(--terracotta-dark));
    transition: width 0.4s ease;
}

/* Δ 4w en card de maestra */
.card-delta {
    margin-top: 0.75rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.card-delta-up { color: #34E0D0; }
.card-delta-down { color: var(--terracotta-dark); }
.card-delta-flat { color: var(--ink-soft); }

.delta-arrow {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
}

.delta-period {
    color: var(--ink-soft);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Why short — la frase pequeña en cada card */
.card-why {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--paper-shadow);
    font-family: var(--serif);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--ink-soft);
    line-height: 1.4;
    /* clamp a 3 lineas para no romper la grid */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============== Detail panel ============== */

.thesis-detail {
    padding: clamp(2rem, 5vw, 4rem) 0;
    border-top: 1px solid var(--paper-shadow);
    background: rgba(220, 211, 192, 0.3);
}

.detail-back {
    background: none;
    border: 1px solid var(--paper-shadow);
    color: var(--ink-soft);
    padding: 0.45rem 0.9rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.8rem;
    transition: border-color 0.15s;
    margin-bottom: 1.5rem;
}

.detail-back:hover {
    border-color: var(--terracotta);
    color: var(--ink);
}

.detail-code {
    font-family: var(--mono);
    font-size: 0.95rem;
    color: var(--terracotta-dark);
    font-weight: 500;
    letter-spacing: 2px;
}

.detail-title {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 500;
    color: var(--ink);
    margin: 0.5rem 0 1rem 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.detail-description {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--ink-soft);
    max-width: 65ch;
    margin: 0 0 2rem 0;
    line-height: 1.55;
}

/* Descripción clara destacada (lenguaje accesible) */
.detail-plain {
    font-family: var(--serif);
    font-size: clamp(1.02rem, 1.6vw, 1.18rem);
    color: var(--ink);
    max-width: 66ch;
    margin: 0 0 1.5rem 0;
    line-height: 1.65;
}

/* Definición operativa colapsable (criterio técnico) */
.detail-operational {
    max-width: 65ch;
    margin: 0 0 2rem 0;
    border-left: 2px solid var(--paper-shadow);
    padding-left: 1rem;
}

.detail-operational summary {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--terracotta-dark);
    cursor: pointer;
    user-select: none;
    padding: 0.2rem 0;
}

.detail-operational summary:hover { color: var(--ink); }

.detail-operational p {
    font-family: var(--sans);
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0.6rem 0 0 0;
}

.detail-stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 0 0 2.5rem 0;
}

.stat-block {
    background: var(--paper);
    border: 1px solid var(--paper-shadow);
    border-radius: 0.3rem;
    padding: 1rem 1.25rem;
}

.stat-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: 0.25rem;
}

/* Stat delta colors dentro del detail */
.stat-delta-up { color: #34E0D0; }
.stat-delta-down { color: var(--terracotta-dark); }

/* Why section en detail */
.why-section {
    margin: 0 0 2.5rem 0;
}

.why-section h3 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 1rem 0;
}

.why-block {
    background: var(--paper);
    border: 1px solid var(--paper-shadow);
    border-left: 3px solid var(--terracotta);
    border-radius: 0 0.3rem 0.3rem 0;
    padding: 1.25rem 1.5rem;
}

.why-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-family: var(--mono);
    font-size: 0.8rem;
}

.why-delta {
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.why-delta-up { color: #34E0D0; }
.why-delta-down { color: var(--terracotta-dark); }

.why-date {
    color: var(--ink-soft);
    letter-spacing: 1px;
}

.why-event {
    color: var(--ink-soft);
    font-style: italic;
    font-family: var(--serif);
    font-size: 0.9rem;
}

.why-reasoning {
    margin: 0;
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
}

/* History chart (SVG inline) */
.history-section {
    margin: 0 0 2.5rem 0;
}

.history-section h3 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 1rem 0;
}

.history-chart {
    background: var(--paper);
    border: 1px solid var(--paper-shadow);
    border-radius: 0.3rem;
    padding: 1.5rem;
    overflow-x: auto;
}

.history-chart svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.chart-empty {
    color: var(--ink-soft);
    font-style: italic;
    font-family: var(--serif);
    text-align: center;
    padding: 2rem;
}

/* Granulares dentro del detail */
.granulars-section {
    margin: 0 0 2rem 0;
}

.granulars-section h3 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 1rem 0;
}

.granular-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    background: var(--paper);
    border: 1px solid var(--paper-shadow);
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    transition: border-color 0.15s ease;
    text-decoration: none;
    color: inherit;
}

.granular-row:hover {
    border-color: var(--terracotta);
}

.granular-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.granular-code {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--terracotta-dark);
    letter-spacing: 1px;
}

.granular-title {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1.3;
}

.granular-prob {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
}

/* ============== Loading + error states ============== */

.loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-soft);
}

.error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem;
    color: #b04848;
    font-family: var(--sans);
}

/* ============== Explainer ============== */

.model-explainer {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    border-top: 1px solid var(--paper-shadow);
}

.model-explainer h2 {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 1rem 0;
    letter-spacing: -0.01em;
}

.model-explainer .col p {
    margin: 0 0 1rem 0;
    max-width: 60ch;
}

.model-explainer .col a {
    color: var(--terracotta-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}