/* --- Variables Específicas del Footer (Con Prefijo) --- */
:root {
    /* Colores del Footer */
    --footer-bg-color: #222;
    --footer2-text-color: #ccc;
    --footer2-link-color: #ccc; /* Mismo que texto, pero podría cambiar */
    --footer-secondary-text-color: #aaa;
    --footer-link-hover-opacity: 0.7;

    /* Tamaños de Iconos y Texto del Footer */
    --footer-icon-fa-size: 1.6rem;          /* Font Awesome icon size */
    --footer-icon-fa-size-mobile: 1.4rem;
    --footer-img-icon-height: 75px;         /* Image icon height */
    --footer-img-icon-height-mobile: 35px;
    --footer-img-sumat-height: 25px;        /* SUMAT image height */
    --footer-text-size: 0.9rem;
    --footer-text-size-mobile: 0.8rem;

     /* Espaciado del Footer */
    --footer-padding-vertical: 2rem;
    --footer-padding-horizontal: 1rem;
    --footer-padding-vertical-mobile: 1.5rem;
    --footer-padding-horizontal-mobile: 0.5rem;
    --footer-icon-margin-bottom: 1.5rem;
    --footer-icon-link-margin-horizontal: 0.8rem;
    --footer-icon-link-margin-horizontal-mobile: 0.6rem;
    --footer-text-margin-top: 1rem;
}


/* --- Estilos base y reseteo (Sin cambios) --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f4f4f4; /* <- Podrías hacerla variable global si quieres, ej: --global-bg-color */
    color: #333;             /* <- Podrías hacerla variable global si quieres, ej: --global-text-color */
}

main {
    flex-grow: 1;
}

/* --- Estilos del Footer (Usando Variables Prefijadas) --- */
.site-footer {
    background-color: var(--footer-bg-color); /* <-- Cambio */
    color: var(--footer-text-color);         /* <-- Cambio */
    padding: var(--footer-padding-vertical) var(--footer-padding-horizontal); /* <-- Cambio */
    text-align: center;
    margin-top: auto;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-icons {
    margin-bottom: var(--footer-icon-margin-bottom); /* <-- Cambio */
    /* Alinea verticalmente los elementos en línea (iconos img y font awesome) */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para TODOS los enlaces de iconos (img y font awesome) */
.icon-link {
    color: var(--footer-link-color); /* <-- Cambio */
    text-decoration: none;
    margin: 0 var(--footer-icon-link-margin-horizontal); /* <-- Cambio */
    display: inline-block; /* Asegura que el enlace tome dimensiones */
    transition: opacity 0.3s ease; /* Transición para hover */
}

.icon-link:hover {
    opacity: var(--footer-link-hover-opacity); /* <-- Cambio */
}

/* Estilos específicos para los iconos Font Awesome (sección contacto) */
.footer-icons-contact .icon-link i {
    font-size: var(--footer-icon-fa-size); /* <-- Cambio */
    vertical-align: middle; /* Ayuda a alinear con las imágenes si fuera necesario */
}

/* Estilos específicos para las IMÁGENES icono (sección genérica) */
.footer-img-icon {
    height: var(--footer-img-icon-height);   /* <-- Cambio */
    width: auto;                             /* Ancho automático para mantener proporción */
    vertical-align: middle;                  /* Alinea la imagen verticalmente dentro del enlace */
}

/* Estilos específicos para la IMAGEN SUMAT icono */
.footer-img-sumat {
    height: var(--footer-img-sumat-height); /* <-- Cambio */
    width: auto;                           /* Ancho automático para mantener proporción */
    vertical-align: middle;                /* Alinea la imagen verticalmente dentro del enlace */
}


.footer-text p {
    font-size: var(--footer-text-size);    /* <-- Cambio */
    color: var(--footer-secondary-text-color); /* <-- Cambio */
    margin-top: var(--footer-text-margin-top);  /* <-- Cambio */
}

/* --- Ajustes responsivos (Usando Variables Prefijadas) --- */
@media (max-width: 600px) {
    .site-footer {
        padding: var(--footer-padding-vertical-mobile) var(--footer-padding-horizontal-mobile); /* <-- Cambio */
    }

    .icon-link {
        margin: 0 var(--footer-icon-link-margin-horizontal-mobile); /* <-- Cambio */
    }

    /* Reduce el tamaño de los iconos Font Awesome en móvil */
    .footer-icons-contact .icon-link i {
        font-size: var(--footer-icon-fa-size-mobile); /* <-- Cambio */
    }

    /* Reduce el tamaño de las IMÁGENES icono en móvil */
    .footer-img-icon {
        height: var(--footer-img-icon-height-mobile); /* <-- Cambio */
    }
    /* Nota: No definimos variable móvil para sumat, así que mantiene su tamaño o puedes añadir una si es necesario */

    .footer-text p {
        font-size: var(--footer-text-size-mobile); /* <-- Cambio */
    }
}