/* =============================================
   ESTILOS PERSONALIZADOS DE CESPEM
   =============================================
   Este archivo contiene los estilos CSS que no
   se pueden lograr fácilmente con clases de
   Tailwind. Complementa al framework.
   ============================================= */


/* --------------------------------------------- 
   EFECTO GLASS (VIDRIO ESMERILADO)
   Se usa en el header fijo para que se vea el
   contenido de fondo con un efecto de blur.
   --------------------------------------------- */
.glass {
    background: rgba(255, 255, 255, 0.8);    /* Fondo blanco semitransparente */
    backdrop-filter: blur(12px);              /* Desenfoque del contenido detrás */
    -webkit-backdrop-filter: blur(12px);      /* Soporte para Safari */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Borde sutil inferior */
}


/* --------------------------------------------- 
   PATRÓN DEL HERO (SECCIÓN PRINCIPAL)
   Crea un patrón de puntos sutiles como fondo
   decorativo en la sección principal del sitio.
   --------------------------------------------- */
.hero-pattern {
    background-color: #f8fafc;               /* Color base (slate-50) */
    /* Dos capas de puntos radiales para crear el patrón */
    background-image: 
        radial-gradient(#1a5f7a11 0.5px, transparent 0.5px),     /* Puntos capa 1 */
        radial-gradient(#1a5f7a11 0.5px, #f8fafc 0.5px);         /* Puntos capa 2 */
    background-size: 20px 20px;              /* Tamaño de cada celda del patrón */
    background-position: 0 0, 10px 10px;     /* Desplazamiento para efecto diagonal */
}


/* --------------------------------------------- 
   ANIMACIÓN FADE-IN (APARECER AL SCROLL)
   Los elementos con esta clase empiezan ocultos
   y se muestran suavemente cuando entran en el
   viewport (visible en pantalla).
   --------------------------------------------- */

/* Estado inicial: invisible y desplazado hacia abajo */
.fade-in {
    opacity: 0;                              /* Totalmente transparente */
    transform: translateY(20px);             /* Desplazado 20px hacia abajo */
    transition: opacity 0.6s ease-out,       /* Transición suave de opacidad */
                transform 0.6s ease-out;     /* Transición suave de posición */
}

/* Estado visible: se activa con JavaScript (IntersectionObserver) */
.fade-in.visible {
    opacity: 1;                              /* Totalmente visible */
    transform: translateY(0);                /* Posición original */
}


/* --------------------------------------------- 
   HOVER PARA TARJETAS
   Efecto de elevación suave al pasar el mouse
   sobre las tarjetas de objetivos, proyectos, etc.
   --------------------------------------------- */
.card-hover {
    transition: transform 0.3s ease,         /* Transición suave al moverse */
                box-shadow 0.3s ease;        /* Transición suave de sombra */
}

.card-hover:hover {
    transform: translateY(-4px);             /* Se eleva 4px al hacer hover */
}