/* HEADER */
.header123 {
    background-color: #ffffff;          /* Blanco puro en hexadecimal */
    padding: 15px 20px;                /* Más espacio: 15px vertical, 20px horizontal */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
    position: sticky;                  /* Se mantiene fijo al hacer scroll */
    top: 0;                           /* Pegado al tope de la página */
    z-index: 1000;                    /* Asegura que esté sobre otros elementos */
    width: 100%;                      /* Ocupa todo el ancho */
    box-sizing: border-box;           /* Incluye padding en el ancho total */
}

.logo123 {
    height: 50px;                     /* Altura fija para consistencia */
    width: auto;                      /* Mantiene proporciones */
    display: block;                   /* Elimina espacios inferiores */
    transition: opacity 0.3s ease;    /* Transición suave para hover */
}

.logo123:hover {
    opacity: 0.8;                     /* Efecto subtle al pasar el mouse */
}
/* MAIN */


/* FOOTER */
.footer456 {
    background-color: #ffffff;          /* Fondo blanco */
    padding: 20px;                     /* Espaciado interno */
    display: flex;                     /* Flexbox para alinear logo y enlaces */
    justify-content: space-between;    /* Espacio entre logo y enlaces */
    align-items: center;               /* Centrado vertical */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Sombra superior */
    width: 100%;                       /* Ocupa todo el ancho */
    box-sizing: border-box;            /* Incluye padding en el ancho */
}

.footer-logo456 {
    flex: 0 0 auto;                    /* Evita que el logo se estire */
}

.logo-footer456 {
    height: 40px;                      /* Altura base para el logo */
    width: auto;                       /* Mantiene proporciones */
    display: block;                    /* Elimina espacios inferiores */
}

.footer-links456 {
    display: flex;                     /* Enlaces en línea */
    gap: 20px;                         /* Espacio entre enlaces */
}

.link456 {
    color: #333;                       /* Color oscuro para contraste */
    text-decoration: none;             /* Sin subrayado */
    font-size: 14px;                   /* Tamaño de fuente legible */
    transition: color 0.3s ease;       /* Transición suave para hover */
}

.link456:hover {
    color: #007bff;                    /* Color azul al pasar el mouse */
}

/* Media query para pantallas pequeñas (móviles, hasta 768px) */
@media (max-width: 768px) {
    .footer456 {
        flex-direction: column;        /* Cambia a columna en pantallas pequeñas */
        align-items: center;           /* Centra los elementos */
        padding: 15px;                 /* Reduce el padding */
    }

    .footer-logo456 {
        margin-bottom: 15px;           /* Espacio entre el logo y los enlaces */
    }

    .logo-footer456 {
        height: 30px;                  /* Reduce el tamaño del logo en móviles */
    }

    .footer-links456 {
        flex-direction: column;        /* Enlaces en columna */
        gap: 10px;                     /* Reduce el espacio entre enlaces */
        text-align: center;            /* Centra el texto de los enlaces */
    }

    .link456 {
        font-size: 12px;               /* Reduce el tamaño de fuente */
    }
}

/* Media query para pantallas muy pequeñas (menos de 480px) */
@media (max-width: 480px) {
    .footer456 {
        padding: 10px;                 /* Más reducción del padding */
    }

    .logo-footer456 {
        height: 25px;                  /* Logo aún más pequeño */
    }

    .footer-links456 {
        gap: 8px;                      /* Espacio aún más pequeño entre enlaces */
    }

    .link456 {
        font-size: 11px;               /* Fuente más pequeña */
    }
}