/* =========================================================================
   QuipusCode — soporte visual de la capa extra de movimiento

   Aquí sólo vive el CSS que necesitan los efectos de extras.js. Igual que
   efectos.css, nada de este archivo hace falta para leer la página: si el JS
   no llega, todo se queda en su estado de reposo y se ve correcto.
   ========================================================================= */

/* ------------------------------------------------- Brillo de los botones -- */
/* Un reflejo circular sigue al cursor dentro del botón. Va por debajo del
   contenido (z-index 0 contra el 1 del texto) y recortado por el radio. */
.btn-acento, .btn-wa, .btn-linea, .filtro {
    position: relative; overflow: hidden; isolation: isolate;
}
/* z-index negativo dentro del contexto que crea isolation: el reflejo queda
   por encima del fondo del botón pero por debajo del texto y del icono. Con
   z-index 0 se pintaría encima del rótulo y lo lavaría. */
.btn-acento::after, .btn-wa::after, .btn-linea::after, .filtro::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%),
                                rgba(255, 255, 255, .30), transparent 60%);
    opacity: 0; transition: opacity .3s ease;
}
/* Los botones claros (el CTA invertido del hero, el de línea y los filtros)
   necesitan un reflejo oscuro: uno blanco sobre blanco no se vería. */
.hero .btn-acento::after,
.seccion--oscura .btn-acento::after,
.btn-linea::after, .filtro::after {
    background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%),
                                rgba(15, 39, 71, .12), transparent 60%);
}
.btn-acento:hover::after, .btn-wa:hover::after,
.btn-linea:hover::after, .filtro:hover::after { opacity: 1; }

/* --------------------------------------------- Inclinación de proyectos -- */
/* La tarjeta se inclina siguiendo al puntero. El transform lo escribe el JS
   en línea; aquí sólo se ajusta la transición para que acompañe sin flotar. */
.proyecto { transform-style: preserve-3d; }
.proyecto.inclinable { transition: transform .18s ease-out, box-shadow .25s ease, border-color .25s ease; }
.proyecto.inclinable .proyecto__cuerpo,
.proyecto.inclinable .proyecto__pie { transform: translateZ(0); }

/* ------------------------------------------------- Flotante de WhatsApp -- */
/* Al llegar a la banda de contacto ya hay un CTA de WhatsApp a la vista:
   el botón flotante se aparta para no repetir la misma llamada dos veces. */
.fab-wa { transition: transform .35s var(--salida, ease), opacity .35s ease; }
.fab-wa.replegado {
    opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
}

/* ------------------------------------------------------- Cifras del hero - */
/* Subrayado que se dibuja bajo cada cifra cuando termina de contar. */
.hero__dato { position: relative; }
.hero__dato strong::after {
    content: ""; position: absolute; left: 0; bottom: -.35rem;
    height: 2px; width: 2.2rem; border-radius: 2px;
    background: linear-gradient(90deg, #8fb3da, transparent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .6s var(--salida, ease);
}
.hero__dato.contada strong::after { transform: scaleX(1); }

/* Sin movimiento no hay nada que animar: todo queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
    .proyecto.inclinable { transform: none !important; }
    .fab-wa.replegado { opacity: 1; transform: none; pointer-events: auto; }
    .hero__dato strong::after { transform: scaleX(1); }
}