footer {
        background: var(--color-base);
        color: var(--color-base-interno);
        text-align: center;
    }

    body {
        font-family: 'Roboto', sans-serif;
        background: radial-gradient(#E7E7E7, #E2E2E2);
    }

    .servicios {
        display: flex;
        flex-wrap: wrap; /* Permite que las cajas se envuelvan */
        justify-content: center; /* Centra horizontalmente */
        align-items: center; /* Centra verticalmente */
        padding: 2rem;
    }
    
    .servicio {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: calc(25% - 1rem); 
        height: 200px;
        margin: 1rem;
        padding: 1.8rem;
        text-align: center;
        transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .servicio:hover {
        background-color: #e0e0e0; /* Cambia el fondo al pasar el cursor */
        transform: translateY(-5px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    }
    
    /* Responsividad */
    @media (max-width: 768px) {
        .servicio {
            width: calc(50% - 1rem); /* Dos cajas por fila en pantallas medianas */
        }
    }
    
    @media (max-width: 480px) {
        .servicio {
            width: 100%; /* Una caja por fila en pantallas pequeñas */
        }
    }
    
    /* Estilos de texto */
    .servicio i {
        font-size: 3rem;
        color: #006400;
        margin-bottom: 1rem;
    }
    
    .servicio p {
        font-family: Arial, sans-serif;
        margin: 0.5rem 0;
    }
    
    .servicio h3 {
        font-size: 1.25rem;
        margin: 0.5rem 0;
    }
    
    .servicio h3 a {
        color: #006400;
        text-decoration: none;
    }
    
    .servicio h3 a:hover {
        text-decoration: underline;
    }
    

#destacable h1{
    text-align: center;
}

    #destacable p {
        font-family: 'Roboto', sans-serif; /* Fuente Roboto Medium */
        font-weight: 500; /* Medium weight */
        font-size: 1.125rem; /* Tamaño de fuente para el párrafo */
        line-height: 1.6; /* Espacio entre líneas para mejor legibilidad */
        color: #333; /* Color del texto del párrafo */
        margin: 0 auto; /* Centra el párrafo */
        max-width: 800px; /* Ancho máximo del párrafo */
        text-align: center;
    }


    /* Estilos generales del menú */
    .navbar1 {
        background-color: rgba(255, 255, 255, 0.836);
        padding: 10px 20px; /* Añade padding para el espacio a los lados */
        display: flex;
        align-items: center;
        justify-content: space-between; 
        border-bottom: 1px solid #ddd;
        height: 80px; 
    }

    .logo {
        height: 80px; 
        transition: transform 0.3s ease; 
    }

    .logo:hover {
        transform: scale(1.1); 
    }

    .menu {
        list-style-type: none;
        display: flex;
        gap: 15px; 
        margin: 0; 
        padding: 0; 
        flex-grow: 1; 
        justify-content: center; /* Centra los ítems en el contenedor */
    }

    .menu li {
        position: relative;
    }

    .menu a {
        text-decoration: none;
        color: #333;
        padding: 10px 20px;
        display: block;
        text-align: center;
        font-weight: bold;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; 
        border-radius: 5px; 
    }

    .menu a:hover {
        background-color: #e0f7fa; 
        color: #00796b; 
        transform: scale(1.1); 
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
    }

    .dropdown {
        position: relative; /* Asegura que el menú desplegable se posicione en relación con el ítem principal */
    }

    .dropdown:hover .dropdown-content {
        display: block; /* Muestra el menú desplegable cuando el cursor está sobre el ítem principal */
    }



    /* Estilos del menú desplegable */
    .dropdown .dropbtn {
        cursor: pointer;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: white;
        min-width: 180px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        list-style-type: none;
        padding: 0;
        border-radius: 5px; /* Bordes redondeados */
        margin-top: 5px;
    }

    .dropdown-content li a {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        color: #333;
        transition: background-color 0.3s ease; /* Animación suave */
    }

    .dropdown-content li a:hover {
        background-color: #e0f7fa; /* Color de fondo al pasar el cursor */
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* Estilos del botón de menú hamburguesa */
    .menu-toggle {
        display: none; /* Oculto por defecto */
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #333;
    }

    /* Responsividad */
    @media (max-width: 768px) {
        .menu {
            display: none; /* Oculta el menú por defecto */
            flex-direction: column;
            width: 100%;
            position: absolute;
            top: 80px; /* Ajusta para que el menú quede justo debajo del header */
            left: 0;
            background-color: white;
            border-top: 1px solid #ddd;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            padding: 10px 0;
        }

        .menu.show {
            display: flex; /* Muestra el menú cuando está activado */
        }

        .menu-toggle {
            display: block; /* Muestra el botón en pantallas pequeñas */
        }

        .menu a {
            padding: 15px;
        }

        .dropdown-content {
            position: static;
            box-shadow: none;
        }
    }

    
    
    .footer {
        position: relative;
        width: 100%;
        background-color: #04696e90;
        min-height: 100px;
        padding: 20px 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    
    
    }
    
    .social-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin: 10px 5px;
        flex-wrap: wrap;
    }
    
    .icon-elem {
        list-style: none;
    }
    
    .icon {
        color: white;
        font-size: 32px;
        display: inline-block;
        margin: 0 10px;
        transition: 0.5s;
    }
    
    .icon:hover {
        transform: translateY(-10px);
    }