/* Teléfonos pequeños */
@media (max-width: 425px) {
    /* Estilos específicos para teléfonos de 425px de ancho */

    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    header {
        display: flex;
        justify-content: space-between; /* Asegura que los elementos estén bien distribuidos */
        align-items: center;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        padding: 10px; /* Espaciado interno uniforme */
        background-color: black; /* Fondo para el header */
    }

    .header-contenedor {
        margin: 0; /* Elimina márgenes adicionales */
        padding: 0; /* Elimina padding adicional */
        width: 100%; /* Asegura que ocupe todo el ancho */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .div-logo {
        width: auto; /* Ajusta automáticamente según el contenido */
        margin-left: 10px; /* Mueve el logo ligeramente a la derecha */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .logoFouces {
        width: 100px; /* Ajusta el tamaño del logo */
        height: auto;
        filter: invert(1);
    }

    /* .nav-desplegable {
        display: none; /* Ocultar la navegación 
        flex-direction: column;
        position: absolute; /* Para que se superponga correctamente 
        top: 60px; /* Ajusta según el tamaño del header 
        left: 0; /* Asegura que comience desde el borde izquierdo 
        right: 0; /* Asegura que termine en el borde derecho 
        background-color: black; /* Fondo del menú desplegable 
        width: 100%; /* Ocupa todo el ancho 
        height: auto; /* Ajusta la altura automáticamente según el contenido 
        text-align: center; /* Centra los enlaces de navegación 
        gap: 20px; /* Espacio entre los elementos 
        z-index: 999; /* Asegura que esté por encima de otros elementos 
        padding: 10px 0; /* Espaciado interno opcional 
    } */

    .nav-desplegable {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background-color: black;
        width: 100%;
        text-align: center;
        z-index: 999;
    }
    
    .nav-desplegable.active {
        display: flex; /* Muestra la navegación cuando está activa */
    }
    
    .menu-icon {
        display: block;
        font-size: 28px; /* Ajusta el tamaño del icono */
        color: white;
        cursor: pointer;
        margin-right: 0; /* Evita que se salga de los límites */
        padding: 5px; /* Agrega algo de espaciado interno */
    }

    .hero {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        margin-top: 0; /* Asegura que el margen superior sea 0 */
        padding-top: 300px; /* Ajusta al tamaño del header */
        padding-bottom: 0;
    }

    button {
        position: absolute;
        top: 50%; /* Centra los botones verticalmente */
        transform: translateY(-50%); /* Ajuste fino */
        background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
        color: white;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 10; /* Asegura que estén sobre las imágenes */
    }
    
 
    .section-nosotros {
        padding-top: 0px; /* Ajuste de espaciado superior */
    }

    .h2-nosotros {
        font-size: 19px; /* Reducción en el tamaño de la fuente */
    }

    .container-nosotros {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    h4 {
        font-size: 14px; /* Reducción en el tamaño de la fuente */
    }

    .p-nosotros {
        font-size: 14px; /* Reducción en el tamaño de la fuente */
    }

    .h2-nosotros-clientes {
        font-size: 19px; /* Reducción en el tamaño de la fuente */
    }

    .clientes-grid {
        flex-direction: column;
    }

    .p-Bodoni {
        font-size: 19px;
        color: white;
    }

    li {
        font-size: 14px; /* Reducción en el tamaño de la fuente */
        color: white;
    }

    li a {
        color: rgb(145, 104, 26);
    }

    .p-Bodoni-contacto {
        font-size: 19px; /* Reducción en el tamaño de la fuente */
    }

    .logosDeuda {
        flex-direction: column;
    }

    .logo-circle {
        background-color: rgba(0, 0, 0, 0.7);
    }

    .logo-circle img {
        opacity: 0.3;
    }

    .icons {
        opacity: 1;
    }

    .icons i:hover {
        transform: scale(0);
    }

    #contacto {
        flex-direction: column;
        align-items: center;
    }

    .texto-contacto {
        font-size: 23px; /* Ajuste en el tamaño de la fuente */
    }

    footer {
        padding-top: 90px; /* Ajuste de espaciado superior */
        padding-bottom: 50px;
    }

    .section-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        text-align: center;
        padding-left: 20px; /* Ajuste de espaciado */
        padding-right: 20px; /* Ajuste de espaciado */
    }

    .redes-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        gap: 5px;
        padding-right: 20px; /* Ajuste de espaciado */
    }

    .fila-redes {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: auto;
    }

    .footer-icono {
        margin: 0;
        width: 18px; /* Reducción en el tamaño del icono */
        height: auto;
    }

    .p-footer {
        text-align: center;
        font-size: 12px;
    }

    .p-footer-nombre {
        font-size: 16px; /* Ajuste de tamaño de la fuente */
    }

    .div-logo-footer-a,
    .div-logo-footer-n {
        height: 3px;
    }

    .p-footer-derecha {
        font-size: 12px; /* Reducción en el tamaño del texto */
    }
}




/* Teléfonos pequeños */
@media (max-width: 480px) {
    /* Estilos específicos para teléfonos pequeños */

    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    header {
        display: flex;
        justify-content: space-between; /* Distribuye los elementos en los extremos */
        align-items: center;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        padding: 0 10px; /* Espaciado horizontal */
        background-color: black;
    }
    

    .logoFouces {
        width: 100px;
        height: auto;
        margin-left: 0px; /* Margen opcional para separarlo del borde izquierdo */
        filter: invert(1); /* Mantén el filtro si es necesario */
    }

    .nav-desplegable {
        display: none; /* Ocultar la navegación */
        flex-direction: column;
        position: absolute; /* Para que se superponga correctamente */
        top: 60px; /* Ajusta según el tamaño del header */
        left: 0; /* Asegura que comience desde el borde izquierdo */
        right: 0; /* Asegura que termine en el borde derecho */
        background-color: black; /* Fondo del menú desplegable */
        width: 100%; /* Ocupa todo el ancho */
        height: auto; /* Ajusta la altura automáticamente según el contenido */
        text-align: center; /* Centra los enlaces de navegación */
        gap: 20px; /* Espacio entre los elementos */
        z-index: 999; /* Asegura que esté por encima de otros elementos */
        padding: 10px 0; /* Espaciado interno opcional */
    }
    
    .nav-desplegable.active {
        display: flex; /* Muestra la navegación cuando está activa */
    }
    


    .menu-icon {
        display: block;
        font-size: 30px;
        color: white;
        cursor: pointer;
        margin-right: 20px; /* Espaciado desde el borde derecho */
    }


    .section-nosotros{
        padding-top: 0px;
    }

    .h2-nosotros{
        font-size: 20px;
    }

    .container-nosotros{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    h4{
        font-size: 15px;
    }

    .p-nosotros{
        font-size: 15px;
    }

    .h2-nosotros-clientes{
        font-size: 20px;
    }

    .clientes-grid{
        flex-direction: column;
    }

    .p-Bodoni{
        font-size: 20px;
        color: white;
    }

    li{
        font-size: 15px;
        color: white;
    }

    li a{
        color: rgb(145, 104, 26);
    }

    .p-Bodoni-contacto{
        font-size: 20px;
    }

    .logosDeuda{
        flex-direction: column;
    }

    .logo-circle{
        background-color: rgba(0, 0, 0, 0.7);
    }

    .logo-circle img{
        opacity: 0.3;
    }

    .icons{
        opacity: 1;
    }

    .icons i:hover {
        transform: scale(0);
    }

    #contacto{
        flex-direction: column;
        align-items: center;
    }

    .texto-contacto{
        font-size: 25px;
    }


    footer{
        padding-top: 100px;
        padding-bottom: 50px;

    }
    .section-footer {
        display: flex;
        flex-direction: column; /* Mantén la dirección en columna */
        align-items: center; /* Centra los elementos horizontalmente */
        justify-content: center; /* Centra los elementos verticalmente */
        margin: 0; /* Elimina márgenes que empujen a la derecha */
        text-align: center; /* Asegura que el texto esté centrado */
        padding-left: 25px;
    }

    .redes-footer {
        display: flex;
        flex-direction: column; /* Mantén la dirección en columna */
        align-items: center; /* Centra los elementos horizontalmente */
        justify-content: center; /* Centra los elementos verticalmente */
        margin: 0; /* Elimina márgenes laterales */
        gap: 5px; /* Espaciado uniforme entre las filas */
        padding-right: 25px;
    }

    .fila-redes {
        display: flex;
        justify-content: center; /* Centra los iconos y el texto dentro de cada fila */
        align-items: center; /* Alinea verticalmente */
        gap: 8px;
        width: auto; /* Deja que el ancho se ajuste automáticamente */
    }

    .footer-icono {
        margin: 0; /* Asegúrate de que no tenga márgenes */
        width: 20px; /* Reduce el tamaño del icono */
        height: auto; /* Mantén la proporción */
    }

    .p-footer {
        text-align: center; /* Centra el texto dentro de `.section-footer` */
        font-size: 12px;
    }

    .p-footer-nombre {
        font-size: 18px; /* Reduce el tamaño del nombre */
    }

    .div-logo-footer-a,
    .div-logo-footer-n {
        height: 3px; /* Reduce el grosor de las barras */
    }

    .p-footer-derecha {
        font-size: 12px; /* Reduce el tamaño del texto de las redes sociales */
    } 
}




  
/* Teléfonos y phablets */
@media (min-width: 481px) and (max-width: 768px) {

    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    header {
        display: flex;
        justify-content: space-between; /* Mantén la separación con el menú */
        align-items: center;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        padding: 0; /* Elimina cualquier relleno en el header */
        background-color: black;
    }

    .header-contenedor {
        display: flex;
        align-items: center; /* Asegura la alineación vertical */
        justify-content: flex-start; /* Alinea los elementos a la izquierda */
        width: 100%; /* Ocupa todo el ancho disponible */
        padding: 0; /* Elimina cualquier relleno */
        margin: 0; /* Elimina márgenes innecesarios */
    }

    .logoFouces {
        width: 120px; /* Tamaño del logo */
        height: auto;
        margin: 0; /* Sin márgenes */
        padding: 0; /* Sin relleno */
    }

    .menu-icon {
        display: block;
        font-size: 35px; /* Tamaño del ícono */
        color: white;
        cursor: pointer;
        margin-right: 15px; /* Espacio entre el menú y el borde derecho */
    }

    .nav-desplegable {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px; /* Ajusta el espacio según el header */
        left: 0;
        right: 0;
        background-color: black;
        width: 100%;
        height: auto;
        text-align: center;
        gap: 25px;
        z-index: 999;
        padding: 15px 0;
    }

    .nav-desplegable.active {
        display: flex;
    }

    .section-nosotros {
        padding-top: 10px;
    }

    .h2-nosotros {
        font-size: 22px; /* Tamaño ligeramente mayor */
    }

    .container-nosotros {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    h4 {
        font-size: 18px;
    }

    .p-nosotros {
        font-size: 18px; /* Aumenta el tamaño */
    }

    .h2-nosotros-clientes {
        font-size: 22px;
    }

    .clientes-grid {
        flex-direction: column;
    }

    .p-Bodoni {
        font-size: 22px;
        color: white;
    }

    li {
        font-size: 16px;
        color: white;
    }

    li a {
        color: rgb(145, 104, 26);
    }

    .p-Bodoni-contacto {
        font-size: 22px;
    }

    .logosDeuda {
        flex-direction: column;
    }

    .logo-circle {
        background-color: rgba(0, 0, 0, 0.7);
    }

    .logo-circle img {
        opacity: 0.4; /* Aumenta ligeramente la visibilidad */
    }

    .icons {
        opacity: 1;
    }

    .icons i:hover {
        transform: scale(1.2); /* Aumenta el efecto de escala */
    }

    #contacto {
        flex-direction: column;
        align-items: center;
    }

    .texto-contacto {
        font-size: 28px;
    }

    footer{
        padding-top: 150px;
        padding-bottom: 50px;
    }

    .section-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        text-align: center;
        padding-left: 30px;
    }

    .redes-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        gap: 10px; /* Aumenta un poco el espacio */
        padding-right: 30px;
    }

    .fila-redes {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: auto;
    }

    .footer-icono {
        margin: 0;
        width: 25px; /* Iconos un poco más grandes */
        height: auto;
    }

    .p-footer {
        text-align: center;
        font-size: 14px; /* Aumenta ligeramente el tamaño del texto */
    }

    .p-footer-nombre {
        font-size: 20px; /* Tamaño mayor para el nombre */
    }

    .div-logo-footer-a,
    .div-logo-footer-n {
        height: 4px; /* Aumenta un poco el grosor */
    }

    .p-footer-derecha {
        font-size: 14px; /* Aumenta el tamaño del texto de las redes sociales */
    }
}
  
/* Tabletas */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Estilos para tabletas */

    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        padding: 10px 20px;
        background-color: transparent;
    }

    .header-contenedor {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 20px;
    }

    .logoFouces {
        width: 150px; /* Ajuste del logo */
        height: auto;
    }

    .menu-icon {
        display: none; /* Ocultar menú hamburguesa */
    }

    .nav-desplegable {
        display: flex;
        flex-direction: row;
        position: relative;
        background-color: transparent;
        width: auto;
        height: auto;
        text-align: center;
        gap: 30px;
        padding: 0;
    }

    .nav-desplegable a {
        color: rgb(145, 104, 26);
        font-size: 18px;
        text-decoration: none;
    }

    .section-nosotros {
        padding-top: 20px;
    }

    .h2-nosotros {
        font-size: 24px;
    }

    .container-nosotros {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    h4 {
        font-size: 20px;
    }

    .p-nosotros {
        font-size: 20px;
    }

    .h2-nosotros-clientes {
        font-size: 24px;
    }

    .clientes-grid {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .p-Bodoni {
        font-size: 24px;
        color: white;
    }

    li {
        font-size: 18px;
        color: white;
    }

    li a {
        color: rgb(145, 104, 26);
    }

    .p-Bodoni-contacto {
        font-size: 24px;
    }

    .logosDeuda {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }

    .logo-circle {
        background-color: rgba(0, 0, 0, 0.7);
        padding: 10px;
        border-radius: 50%;
    }

    .logo-circle img {
        opacity: 0.6;
    }

    .icons {
        opacity: 1;
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .icons i:hover {
        transform: scale(1.2);
    }

    #contacto {
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }

    .texto-contacto {
        font-size: 30px;
    }

    footer {
        padding-top: 100px;
        padding-bottom: 50px;
    }

    .section-footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        margin: 0;
        text-align: center;
        padding-left: 30px;
    }

    .redes-footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

    .fila-redes {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .footer-icono {
        width: 30px;
        height: auto;
    }

    .p-footer {
        text-align: center;
        font-size: 16px;
    }

    .p-footer-nombre {
        font-size: 22px;
    }

    .div-logo-footer-a,
    .div-logo-footer-n {
        height: 5px;
    }

    .p-footer-derecha {
        font-size: 16px;
    }
    
}
  
/* Laptops pequeños y pantallas estándar */
@media (min-width: 1025px) and (max-width: 1280px) {
    /* Estilos para laptops pequeños */
}
  
/* Pantallas grandes y monitores de alta resolución */
@media (min-width: 1281px) and (max-width: 1920px) {
    /* Estilos para pantallas grandes */
}
  
/* Pantallas ultra-ancho y 4K */
@media (min-width: 1921px) {
    /* Estilos para pantallas 4K */
}