/* ===== CURSOR PERSONALIZADO ===== */
@media (min-width: 1025px) {

    /* Ocultamos el cursor por defecto en toda la web */
    body,
    a,
    button,
    select,
    input {
        cursor: none !important;
    }

    /* ===== CURSOR PERSONALIZADO BÁSICO ===== */
    .custom-cursor {
        width: 30px;
        height: 30px;
        border: 1px solid #2d4f95;
        /* Color azul institucional */
        border-radius: 50%;
        position: fixed;
        transform: translate(-50%, -50%);
        pointer-events: none;
        /* Crucial para poder hacer click a través del círculo */
        z-index: 99999;

        /* --- MEJORA: LIGERO BACKGROUND TRANSLÚCIDO AZUL --- */
        background-color: rgba(45, 79, 149, 0.03);
        /* Fondo azul ultra sutil */

        /* Transiciones suaves para hover */
        transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;

        /* Aseguramos que el pseudo-elemento para el pulso se posicione correctamente */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* ===== EFECTO DE PULSO AL CLICAR (NUEVO) ===== */
    /* Creamos el pulso con un pseudo-elemento translúcido */
    .custom-cursor::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: rgba(45, 79, 149, 0.4);
        /* Fondo azul más intenso para el pulso */
        opacity: 0;
        transform: scale(1);
        transition: opacity 0.1s ease;
        /* Transición rápida para aparecer */
    }

    /* Clase para activar el pulso al clicar (Añadida por JS) */
    .custom-cursor.cursor-click::after {
        /* Usamos una animación CSS para expandir y desvanecer */
        animation: pulse 0.4s ease;
        /* Animación rápida de pulso */
    }

    /* Definición de la animación de pulso */
    @keyframes pulse {
        0% {
            transform: scale(1);
            /* Tamaño normal */
            opacity: 1;
            /* Totalmente visible al inicio */
        }

        100% {
            transform: scale(3.5);
            /* Expansión grande de ultra impacto */
            opacity: 0;
            /* Desvanecimiento completo al final */
        }
    }

    /* ===== EFECTO INTERACTIVO HOVER ===== */
    /* Cuando pasa sobre un enlace o botón, el círculo base cambia */
    body.cursor-hover .custom-cursor {
        width: 50px;
        height: 50px;
        background-color: rgba(208, 19, 65, 0.12);
        /* Rojo sutil con opacidad */
        border-color: #d1173c;
        /* Mantenemos el azul institucional para el borde */
    }
}

/* ===== DESPLAZAMIENTO CONTROLADO POR SECCIONES (Scroll Snap) ===== */
html {
    scroll-behavior: smooth;
    /* Desplazamiento suave nativo */
}

/* Contenedor principal que bloquea el scroll por secciones */
.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    /* Fuerza el scroll vertical por secciones */
    scroll-behavior: smooth;
}

/* Cada sección obligatoriamente debe medir el 100% de la pantalla */
.section-block {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    /* Se alinea perfectamente al inicio de la pantalla */
    scroll-snap-stop: always;
    /* Evita que el usuario se salte secciones de un solo golpe */
}