/* ==========================================================================
   NeuralV v6 — VIDA
   Movimiento con intención: cada efecto cuenta algo. Nada gira porque sí.
   Todo se apaga con "reducir movimiento".
   ========================================================================== */

/* --- 1. Barra de progreso de lectura ------------------------------------ */
.progreso {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 1000;
    background: linear-gradient(90deg, var(--brand), #4da3ff);
    transition: width 0.1s linear;
    pointer-events: none;
}

/* --- 2. Ken Burns: la imagen respira ------------------------------------ */
.showcase-img img,
.dif-foto img {
    animation: respira 22s ease-in-out infinite alternate;
}

@keyframes respira {
    from { transform: scale(1); }
    to { transform: scale(1.07); }
}

.showcase-img:hover img { animation-play-state: paused; transform: scale(1.05); }

/* --- 3. Antes / Ahora: las piezas se enderezan solas -------------------- */
.ad-vis-bien span {
    height: 30%;
    opacity: 0.25;
    transition: height 0.7s var(--ease), opacity 0.7s var(--ease);
}

.visible .ad-vis-bien span,
.ad-vis-bien.animar span { height: 100%; }
.visible .ad-vis-bien span:nth-child(1), .ad-vis-bien.animar span:nth-child(1) { opacity: 0.85; transition-delay: 0.1s; }
.visible .ad-vis-bien span:nth-child(2), .ad-vis-bien.animar span:nth-child(2) { opacity: 0.7; transition-delay: 0.25s; }
.visible .ad-vis-bien span:nth-child(3), .ad-vis-bien.animar span:nth-child(3) { opacity: 0.55; transition-delay: 0.4s; }
.visible .ad-vis-bien span:nth-child(4), .ad-vis-bien.animar span:nth-child(4) { opacity: 0.4; transition-delay: 0.55s; }

/* La flecha empuja hacia el lado bueno */
.ad-flecha .icon { animation: empuja 2.4s var(--ease) infinite; }

@keyframes empuja {
    0%, 100% { transform: translateX(0); opacity: 0.75; }
    50% { transform: translateX(6px); opacity: 1; }
}

/* --- 4. Recorrido: la línea se dibuja y los pasos se encienden ---------- */
.recorrido::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--ease); }
.recorrido.dibujada::before { transform: scaleX(1); }

.hito-ico { position: relative; }

/* Aro que late en el paso activo */
.hito-ico::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 32px;
    border: 2px solid var(--brand);
    opacity: 0;
    transform: scale(0.9);
}

.hito.activo .hito-ico::after { animation: aro 1.6s var(--ease); }
.hito.activo .hito-ico { background: var(--brand); color: #fff; }
.hito.activo .hito-num { background: var(--brand); }

@keyframes aro {
    0% { opacity: 0.9; transform: scale(0.9); }
    100% { opacity: 0; transform: scale(1.35); }
}

/* --- 5. Cara a cara: las líneas entran una a una ------------------------ */
.vs-col li {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.vs-nosotros li { transform: translateX(10px); }
.versus.visible .vs-col li { opacity: 1; transform: none; }
.versus.visible .vs-col li:nth-child(1) { transition-delay: 0.10s; }
.versus.visible .vs-col li:nth-child(2) { transition-delay: 0.22s; }
.versus.visible .vs-col li:nth-child(3) { transition-delay: 0.34s; }
.versus.visible .vs-col li:nth-child(4) { transition-delay: 0.46s; }
.versus.visible .vs-col li:nth-child(5) { transition-delay: 0.58s; }

/* --- 6. Conversaciones que se escriben solas ---------------------------- */
/* Mientras no le toca, el mensaje no existe para el layout: así la tarjeta
   crece con la conversación en lugar de reservar el hueco desde el principio. */
.conv-viva .msg { display: none; }

.conv-viva .msg.puesto {
    display: block;
    animation: entraMsg 0.45s var(--ease) both;
}

@keyframes entraMsg {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.escribiendo {
    /* order 99: siempre al final del hilo sin tocar el DOM */
    order: 99;
    display: none;
    align-self: flex-start;
    gap: 4px;
    padding: 0.75rem 1rem;
    background: var(--surface-alt);
    border-radius: 16px 16px 16px 5px;
}

.escribiendo.activo { display: flex; }
.section-dark .escribiendo { background: rgba(255, 255, 255, 0.08); }
.chat-wa .escribiendo { background: #fff; }

.escribiendo i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-faint);
    animation: puntito 1.2s infinite;
}

.escribiendo i:nth-child(2) { animation-delay: 0.16s; }
.escribiendo i:nth-child(3) { animation-delay: 0.32s; }

@keyframes puntito {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* --- 7. Botones con reacción -------------------------------------------- */
.btn { position: relative; overflow: hidden; }

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.3), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(0.97); }

/* --- 8. Tarjetas que siguen al cursor ----------------------------------- */
.card-hover, .hito, .vs-col { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }

/* --- 9. Entrada de la portada ------------------------------------------- */
.hero h1, .hero .lead, .hero-cta, .hero-pie {
    animation: sube 0.9s var(--ease) both;
}

.hero .lead { animation-delay: 0.12s; }
.hero-cta { animation-delay: 0.24s; }
.hero-pie { animation-delay: 0.36s; }
.hero-visual { animation: sube 1.1s var(--ease) 0.4s both; }

@keyframes sube {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
}

/* --- 10. El punto "en vivo" del panel ----------------------------------- */
.kpi-num { transition: color 0.3s var(--ease); }
.device:hover .kpi-num { color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
    .showcase-img img, .dif-foto img, .ad-flecha .icon,
    .hito.activo .hito-ico::after, .escribiendo i { animation: none !important; }
    .hero h1, .hero .lead, .hero-cta, .hero-pie, .hero-visual { animation: none !important; opacity: 1; transform: none; }
    .vs-col li { opacity: 1 !important; transform: none !important; }
    .conv-viva .msg { display: block !important; animation: none !important; }
    .escribiendo { display: none !important; }
    .recorrido::before { transform: scaleX(1) !important; }
    .ad-vis-bien span { height: 100% !important; }
    .progreso { display: none; }
}



/* ==========================================================================
   MÓVIL: SIN ANIMACIONES QUE RECALCULEN EL DISEÑO
   En una pantalla estrecha, cualquier animación que cambie la ALTURA de algo
   (no su opacidad ni su desplazamiento) obliga al navegador a recolocar la
   página entera en cada fotograma. Eso, sumado a la barra de direcciones que
   aparece y desaparece al hacer scroll, es lo que hacía que la lectura
   "saltara". Aquí se detienen todas; las apariciones al entrar en pantalla
   (opacidad + desplazamiento) se mantienen porque no recolocan nada.
   ========================================================================== */
@media (max-width: 768px) {
    /* Barras que laten cambiando su altura, en bucle infinito */
    .ad-vis-mal span,
    .ad-vis-bien span,
    .onda span,
    .escribiendo i { animation: none !important; }

    /* Se quedan en su estado final, legible y quieto. Con !important porque
       directo.css se carga despues que esta hoja y .visible tiene mas
       especificidad: sin el, sus alturas animadas seguirian ganando. */
    .ad-vis-bien span { height: var(--alto) !important; opacity: 1 !important; }
    .ad-vis-mal span:nth-child(1) { height: 60% !important; }
    .ad-vis-mal span:nth-child(2) { height: 100% !important; }
    .ad-vis-mal span:nth-child(3) { height: 45% !important; }
    .ad-vis-mal span:nth-child(4) { height: 80% !important; }
    .ad-vis-mal span:nth-child(5) { height: 65% !important; }
    .onda span { height: 60% !important; }

    /* La conversación se muestra entera y fija, sin escribirse sola */
    .conv-viva .msg { display: block !important; animation: none !important; }
    .escribiendo { display: none !important; }

    /* La barra de progreso SÍ se mantiene en móvil: va en position:fixed, fuera
       del flujo, así que no recoloca nada. Se había apagado junto al resto en
       el arreglo del 2026-08-30, pero nunca formó parte del problema. */
}