/* ==========================================================================
   NeuralV v6 — EN DIRECTO
   Lo que se mueve solo: métricas, reloj, contador de fuga, cinta de sectores
   y los dos bloques de Antes/Ahora. Separado de vida.css por tamaño.
   ========================================================================== */

/* ==========================================================================
   ELEMENTOS EN DIRECTO
   ========================================================================== */

/* --- Palabra rotativa de la portada ------------------------------------- */
.hero-rotativo {
    margin-top: var(--s-3);
    font-size: var(--t-body);
    color: var(--ink-faint);
}

.rota {
    display: inline-block;
    min-width: 150px;
    text-align: left;
}

.rota b {
    display: inline-block;
    color: var(--brand);
    font-weight: 600;
    animation: rotaEntra 0.45s var(--ease);
}

@keyframes rotaEntra {
    from { opacity: 0; transform: translateY(-10px); filter: blur(3px); }
    to { opacity: 1; transform: none; filter: none; }
}

/* --- Reloj en vivo ------------------------------------------------------- */
.reloj-vivo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--t-small);
    color: #9fb3cc;
    margin-bottom: var(--s-2);
}

.reloj-vivo b { color: #fff; font-variant-numeric: tabular-nums; }

.punto-vivo {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(26, 143, 76, 0.6);
    animation: latido 2s infinite;
}

@keyframes latido {
    0% { box-shadow: 0 0 0 0 rgba(26, 143, 76, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(26, 143, 76, 0); }
    100% { box-shadow: 0 0 0 0 rgba(26, 143, 76, 0); }
}

/* --- Contador de fuga en directo ---------------------------------------- */
.fuga-vivo {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: var(--s-6);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.fuga-vivo:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fuga-vivo-txt p { font-size: var(--t-body-lg); color: var(--ink); max-width: 640px; line-height: 1.4; }

/* La cifra sube mientras se lee. NO se le reserva ancho a proposito: medido a
   320 y 390 px, el parrafo mantiene su altura exacta (176 px / 147 px) desde
   "0,00 €" hasta "99,99 €", porque tabular-nums ya iguala los digitos y la
   linea tiene holgura de sobra. Un min-width de reserva se probo y era PEOR:
   forzaba un salto de linea extra (176 -> 206 px) y dejaba un hueco visible
   entre la cifra y la palabra siguiente. */
.fuga-vivo-txt b {
    color: var(--alert);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* --- Cinta de sectores --------------------------------------------------- */
.cinta {
    overflow: hidden;
    margin-bottom: var(--s-5);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.cinta-pista {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: desfile 46s linear infinite;
}

.cinta-pista span {
    font-size: var(--t-body-lg);
    color: var(--ink-faint);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.cinta:hover .cinta-pista { animation-play-state: paused; }

@keyframes desfile {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .cinta-pista { animation: none; }
    .punto-vivo { animation: none; }
    .rota b { animation: none; }
}


/* --- Métricas de la portada --------------------------------------------- */
.hero-metricas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
    max-width: 760px;
    margin: var(--s-5) auto 0;
}

.metrica {
    text-align: center;
    padding: var(--s-2) 0.5rem;
    border-left: 1px solid var(--line);
}

.metrica:first-child { border-left: 0; }

.metrica b {
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.metrica i {
    font-style: normal;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--brand);
    margin-left: 1px;
}

.metrica span {
    display: block;
    margin-top: 0.4rem;
    font-size: var(--t-micro);
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* Al contar por primera vez, el número se marca en azul */
.contando { color: var(--brand) !important; }

/* Pulso periódico: llama la atención sin tocar el valor */
.pulso { animation: pulsoCifra 1.1s var(--ease); }

@keyframes pulsoCifra {
    0% { transform: scale(1); }
    22% { transform: scale(1.14); color: var(--brand); }
    55% { transform: scale(0.99); }
    100% { transform: scale(1); }
}

.metrica b, .dif-cifra b, .dif-sello b, .kpi-num { display: inline-block; }

@media (max-width: 720px) {
    .hero-metricas { grid-template-columns: repeat(2, 1fr); gap: var(--s-3) 0; }
    .metrica:nth-child(3) { border-left: 0; }
}


/* ==========================================================================
   ANTES = CAOS · AHORA = CRECIMIENTO
   Las dos columnas cuentan la historia sin leer una palabra.
   ========================================================================== */

/* --- Antes: cinco piezas que nunca acaban de encajar -------------------- */
.ad-vis-mal span {
    background: rgba(0, 0, 0, 0.16);
    transform-origin: bottom center;
}

.ad-vis-mal span:nth-child(1) { animation: caos1 3.1s ease-in-out infinite; }
.ad-vis-mal span:nth-child(2) { animation: caos2 2.7s ease-in-out infinite; }
.ad-vis-mal span:nth-child(3) { animation: caos3 3.6s ease-in-out infinite; }
.ad-vis-mal span:nth-child(4) { animation: caos2 3.3s ease-in-out infinite reverse; }
.ad-vis-mal span:nth-child(5) { animation: caos1 2.9s ease-in-out infinite reverse; }

@keyframes caos1 {
    0%, 100% { height: 55%; transform: rotate(-7deg) translateY(0); }
    30% { height: 88%; transform: rotate(5deg) translateY(-3px); }
    65% { height: 40%; transform: rotate(-3deg) translateY(2px); }
}

@keyframes caos2 {
    0%, 100% { height: 92%; transform: rotate(5deg); }
    40% { height: 48%; transform: rotate(-6deg) translateY(3px); }
    75% { height: 72%; transform: rotate(8deg); }
}

@keyframes caos3 {
    0%, 100% { height: 42%; transform: rotate(-4deg); }
    50% { height: 96%; transform: rotate(7deg) translateY(-4px); }
}

/* --- Ahora: escalera que sube, siempre igual --------------------------- */
.ad-vis-bien { position: relative; }

.ad-vis-bien span {
    background: var(--brand);
    transform-origin: bottom center;
    opacity: 1;
    animation: crece 6s var(--ease) infinite;
}

.ad-vis-bien span:nth-child(1) { --alto: 32%; }
.ad-vis-bien span:nth-child(2) { --alto: 50%; }
.ad-vis-bien span:nth-child(3) { --alto: 68%; }
.ad-vis-bien span:nth-child(4) { --alto: 84%; }
.ad-vis-bien span:nth-child(5) { --alto: 100%; }

@keyframes crece {
    0% { height: 22%; opacity: 0.45; }
    16%, 88% { height: var(--alto); opacity: 1; }
    100% { height: 22%; opacity: 0.45; }
}

/* Línea de tendencia que se dibuja sobre las barras */
.ad-tendencia {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.ad-tendencia path {
    fill: none;
    stroke: #e0538f;
    stroke-width: 3;
    opacity: 1;
    stroke-linecap: round;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: dibuja 6s var(--ease) infinite;
}

@keyframes dibuja {
    0%, 10% { stroke-dashoffset: 120; }
    45%, 82% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 120; }
}

/* --- Remate del titular -------------------------------------------------- */
.dif-remate {
    margin-top: var(--s-3);
    font-size: var(--t-body-lg);
    font-weight: 600;
    color: #4da3ff;
}

/* --- Unidad pequeña dentro de un KPI ------------------------------------ */
.kpi-num i { font-style: normal; font-size: 0.55em; margin-left: 1px; opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
    .ad-vis-mal span, .ad-vis-bien span, .ad-tendencia path { animation: none !important; }
    .ad-vis-bien span { height: var(--alto) !important; }
    .ad-tendencia path { stroke-dashoffset: 0 !important; }
}