/* Contenedor principal del footer */
.footer-pucv {
    /* Fondo con gradiente diagonal que va de azul oscuro a azul medio y vuelve a oscuro */
    background: linear-gradient(135deg, #043a54 0%, #054863 50%, #043a54 100%);
    color: #fff;                        /* Texto en color blanco */
    width: 100%;                        /* Ocupa todo el ancho disponible */
    padding: 40px 20px 30px 20px;      /* Espaciado interno: arriba, laterales, abajo */
    display: flex;                      /* Organiza los elementos hijos en fila */
    justify-content: center;            /* Centra las columnas horizontalmente */
    align-items: flex-start;            /* Alinea las columnas al inicio verticalmente */
    font-family: 'Montserrat', Arial, sans-serif; /* Fuente principal con alternativas */
    font-size: 14px;                    /* Tamaño de letra base */
    position: relative;                 /* Permite posicionar elementos absolutos dentro */
    box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.2); /* Sombra hacia arriba para dar profundidad */
}

/* Línea decorativa superior del footer */
.footer-pucv::before {
    content: '';                       
    position: absolute;                 /* Se posiciona de forma absoluta */
    top: 0;                            /* Se coloca en la parte superior */
    left: 0;                           /* Empieza desde la izquierda */
    right: 0;                          /* Se extiende hasta la derecha */
    height: 2px;                       /* Altura de la línea */
    /* Gradiente horizontal que simula una línea brillante */
    background: linear-gradient(90deg, transparent, #00a8cc, transparent);
}

/* Cada columna del footer */
.footer-pucv .footer-col {
    flex: 1;                           /* Cada columna ocupa el mismo espacio disponible */
    text-align: center;                /* Centra el contenido de la columna */
    min-width: 250px;                  /* Ancho mínimo para evitar que se comprima mucho */
    padding: 0 15px;                   /* Espaciado lateral interno */
}

/* Separadores verticales entre columnas */
.footer-divider {
    width: 1px;                        /* Ancho de la línea separadora */
    /* Gradiente vertical que hace la línea más sutil en los extremos */
    background: linear-gradient(to bottom, transparent, rgb(255, 255, 255), transparent);
    margin: 0 10px;                    /* Espacio a los lados del separador */
    min-height: 100px;                 /* Altura mínima del separador */
}

/* Contenedor de enlaces en la primera columna */
.footer-links {
    line-height: 1.6;                  /* Espaciado entre líneas de texto */
}

/* Separador de texto ("|") entre enlaces */
.separator {
    margin: 0 10px;                    /* Espacio a los lados del separador */
    opacity: 0.6;                      /* Hace el separador semi-transparente */
    font-weight: 300;                  /* Peso de fuente más ligero */
}

/* Enlace de dirección con estilo especial */
.address-link {
    display: inline-block;             /* Se comporta como bloque pero en línea */
    margin-top: 8px;                   /* Espacio superior */
    padding: 6px 12px;                 /* Espaciado interno */
    border-radius: 15px;               /* Bordes redondeados */
    background: rgba(255, 255, 255, 0.05); /* Fondo semi-transparente sutil */
    transition: all 0.3s ease;        /* Transición suave para todos los cambios */
}

/* Efecto hover del enlace de dirección */
.address-link:hover {
    background: rgba(255, 255, 255, 0.1); /* Fondo más visible al pasar el mouse */
    transform: translateY(-1px);       /* Eleva ligeramente el elemento */
}

/* Contenedor del logo central */
.logo-container {
    position: relative;                /* Permite posicionar elementos hijos */
}

/* Imagen del logo */
.footer-pucv .footer-logo {
    max-width: 250px;                  /* Ancho máximo del logo */
    margin-bottom: 10px;               /* Espacio debajo del logo */
    transition: all 0.3s ease;        /* Transición suave para animaciones */
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)); /* Sombra del logo */
}

/* Efecto hover del logo */
.footer-pucv .footer-logo:hover {
    transform: scale(1.02);            /* Agranda ligeramente el logo */
    /* Cambia la sombra a color azul al hacer hover */
    filter: drop-shadow(0 4px 12px rgba(0, 168, 204, 0.3));
}

/* Contenedor de la sección "Nuestros Sitios" */
.footer-pucv .footer-sites-content {
    display: flex;                     /* Organiza ícono y texto en fila */
    align-items: center;               /* Centra verticalmente */
    justify-content: center;           /* Centra horizontalmente */
    gap: 10px;                         /* Espacio entre ícono y texto */
}

/* Wrapper del ícono de sitios */
.icon-wrapper {
    padding: 8px;                      /* Espaciado interno alrededor del ícono */
    border-radius: 50%;                /* Hace el contenedor circular */
    background: rgba(255, 255, 255, 0.08); /* Fondo semi-transparente */
    transition: all 0.3s ease;        /* Transición suave */
}

/* Efecto hover del wrapper del ícono */
.icon-wrapper:hover {
    background: rgba(255, 255, 255, 0.15); /* Fondo más visible */
    transform: rotate(5deg);           /* Rota ligeramente el ícono */
}

/* Imagen dentro del contenedor de sitios */
.footer-pucv .footer-sites-content img {
    width: 90px;                       /* Ancho fijo del ícono */
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3)); /* Sombra del ícono */
}

/* Estilos generales para todos los enlaces */
.footer-pucv a {
    color: #fff;                       
    font-weight: 700;                  /* Texto en negrita */
    text-decoration: none;             /* Sin subrayado */
    transition: all 0.3s ease;        /* Transición suave */
    position: relative;                /* Permite crear el efecto de subrayado */
}

/* Efecto hover para enlaces generales */
.footer-pucv a:hover {
    color: #b2e6ff;                    /* Color azul claro al hacer hover */
    text-shadow: 0 0 8px rgba(178, 230, 255, 0.5); /* Efecto de resplandor */
}


/* Línea de subrayado animada que aparece en hover */
.footer-pucv a::after {
    content: '';                       /* Crea elemento vacío */
    position: absolute;                /* Posicionamiento absoluto */
    bottom: -2px;                      /* Se coloca debajo del texto */
    left: 50%;                         /* Empieza desde el centro */
    width: 0;                          /* Inicialmente sin ancho */
    height: 1px;                       /* Altura de la línea */
    background: #b2e6ff;               /* Color de la línea */
    transition: all 0.3s ease;        /* Transición suave */
    transform: translateX(-50%);       /* Centra la línea */
}

/* Animación de la línea de subrayado */
.footer-pucv a:hover::after {
    width: 100%;                       /* Se expande al 100% del ancho */
}

/* Estilos específicos para el enlace de "Nuestros Sitios" */
.footer-sites a {
    padding: 8px 16px;                 /* Espaciado interno */
    border-radius: 20px;               /* Bordes muy redondeados (botón) */
    background: rgba(0, 168, 204, 0.15); /* Fondo azul semi-transparente */
    border: 1px solid rgba(0, 168, 204, 0.3); /* Borde azul */
    transition: all 0.3s ease;        /* Transición suave */
}

/* Efecto hover para el botón "Nuestros Sitios" */
.footer-sites a:hover {
    background: rgba(0, 168, 204, 0.25); /* Fondo más intenso */
    border-color: rgba(0, 168, 204, 0.5); /* Borde más intenso */
    transform: translateY(-2px);       /* Eleva el botón */
    box-shadow: 0 4px 15px rgba(0, 168, 204, 0.2); /* Sombra azul */
}

/* Estilos responsive para pantallas medianas tablets y laptops */
@media (max-width: 900px) {
    .footer-pucv {
        flex-direction: column;        /* Cambia a organización vertical */
        align-items: center;           /* Centra las columnas */
        text-align: center;            /* Centra el texto */
    }
    .footer-pucv .footer-col {
        margin-bottom: 20px;           /* Espacio entre columnas apiladas */
        min-width: 180px;   /* permite columnas mas pequeñas */
        padding: 0 5px;            
    }
    .footer-divider {
        display: none;  /* Oculta los separadores verticales */
                        
    }
}
@media screen and (max-width:767px) {
    .footer-pucv {
        padding: 30px 15px 20px 15px;  /* Reduce el padding del footer */
        font-size: 13px;                /* Reduce el tamaño de la fuente */
    }
    .footer-pucv .footer-logo {
        max-width: 200px;               /* Reduce el tamaño máximo del logo */
    }
    .footer-pucv .footer-sites-content img {
        width: 70px;                    /* Reduce el tamaño del ícono de sitios */
    }
}