<style>
    /* Ajustar la barra de navegación */
    nav {
        display: flex;
        align-items: center; /* Alinear el contenido verticalmente */
        justify-content: space-between; /* Separar el logo de los enlaces */
        padding: 2rem; /* Aumenta el padding para hacer la barra más alta */
        background-color: rgba(0, 0, 0, 0.8);
        position: sticky;
        top: 0;
        z-index: 10;
        width: 100%;
    }

    nav .logo {
        max-height: 100px; /* Aumentar el tamaño del logo */
        width: auto;
        cursor: pointer;
    }

    nav .menu {
        display: flex;
        gap: 2rem; /* Aumentar el espacio entre los apartados */
    }

    nav .menu a {
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        font-size: 2rem; /* Aumenta el tamaño de la letra de los enlaces en la barra de navegación */
        padding: 0.5rem 1rem; /* Espaciado dentro de los recuadros */
        border: 2px solid #ffd700; /* Añade un recuadro dorado */
        border-radius: 5px; /* Bordes redondeados */
        background-color: rgba(255, 255, 255, 0.1); /* Fondo ligeramente transparente */
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    nav .menu a:hover {
        background-color: #ffd700; /* Fondo dorado al pasar el mouse */
        color: #000; /* Texto negro en hover */
    }

    /* Ajustes generales para body y html */
    html, body {
        height: 100%; /* Asegura que el body y html ocupen toda la altura */
        margin: 0; /* Elimina márgenes para evitar el espacio en blanco */
        overflow-x: hidden; /* Evita que se pueda mover horizontalmente */
        font-family: Arial, sans-serif;
        line-height: 1.6;
        scroll-behavior: smooth; /* Transición suave al hacer scroll */
        font-size: 1.2rem; /* Aumenta el tamaño de la fuente base para toda la web */
    }

    /* Estilo para el header (Inicio) */
    header {
        position: relative;
        height: 100vh; /* El header ocupa toda la altura de la pantalla */
        width: 100%;
        overflow: hidden;
        scroll-margin-top: 70px; /* Asegura que no se oculte detrás del menú */
    }

    /* Video de fondo */
    .video-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Asegura que el video cubra toda la pantalla */
        z-index: -1; /* El video estará en el fondo */
    }

    /* Estilos del contenido del header */
    .header-content {
        position: absolute;
        top: 10%; /* Mueve el contenido más cerca del inicio de la página */
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        color: #fff;
        padding: 0 2rem; /* Agrega padding horizontal para evitar que el texto toque los bordes */
        word-wrap: break-word; /* Permite que el texto se ajuste correctamente */
        hyphens: auto; /* Permite la separación de palabras */
    }

    /* Estilo de los textos del header */
    .header-content h1, .header-content p {
        color: #fff; /* Texto blanco en el header */
        line-height: 1.4; /* Aumenta el interlineado para mejorar la legibilidad */
    }

    .header-content h1 {
        font-size: 4rem; /* Aumentar el tamaño del título */
    }

    .header-content p {
        font-size: 2rem; /* Aumentar el tamaño del párrafo */
    }

    /* Estilo para el formulario de contacto */
    .contact-form input, .contact-form textarea {
        padding: 1.2rem;
        border-radius: 5px;
        border: 1px solid #ddd;
        font-size: 1.2rem; /* Aumenta el tamaño de la fuente de los formularios */
        font-family: Arial, sans-serif;
        color: #000;
        width: 100%;
    }

    .contact-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem; /* Reduce el espacio entre el formulario y el mapa */
        margin-bottom: 5px; /* Reduce aún más el espacio entre el formulario y el mapa */
    }

    /* Cambiar el color del texto "Formulario de contacto" */
    .contact-info h3 {
        color: #000; /* Letras negras */
    }

    /* Reducir la altura del apartado 'hola' a 1px y tamaño de la letra a 1px */
    #hola {
        height: 1px; /* Establece el alto del área del apartado a 1 píxel */
        width: 1px;  /* Establece el ancho del área del apartado a 1 píxel */
        padding: 1px; /* Espaciado dentro del apartado */
        margin: 1px; /* Margen fuera del apartado */
        font-size: 1px; /* Establece el tamaño de la fuente a 1 píxel */
        overflow: hidden; /* Evita que el contenido se muestre si sobrepasa ese espacio */
        text-align: center; /* Centra el texto */
    }

    /* Media queries para adaptabilidad en móviles */
    @media (max-width: 768px) {
        /* Asegura que la barra de navegación se adapte en dispositivos móviles */
        nav .menu {
            flex-direction: column;
            gap: 1.5rem;
            text-align: center;
        }

        /* Ajusta el tamaño de la fuente del header */
        .header-content h1 {
            font-size: 3rem; /* Ajusta tamaño de fuente en móviles */
        }

        .header-content p {
            font-size: 1.8rem; /* Ajusta tamaño de fuente en móviles */
            word-wrap: break-word; /* Ajusta las palabras largas para que se ajusten al contenedor */
            hyphens: auto; /* Permite la separación de palabras */
        }

        /* Mueve el texto más cerca de la barra de navegación en pantallas pequeñas */
        .header-content {
            top: 15%; /* Acomoda el texto aún más cerca de la barra de navegación en móviles */
        }

        /* Los servicios se muestran en una sola columna */
        .services {
            grid-template-columns: 1fr;
        }

        /* Ajustes para el formulario de contacto */
        .contact-container {
            flex-direction: column;
            align-items: center;
            margin-bottom: 2px; /* Reduce el margen inferior a casi nada en móviles */
        }

        .contact-info {
            margin-right: 0;
        }

        iframe {
            height: 300px; /* Ajusta el tamaño del iframe para que no ocupe demasiado espacio */
        }

        /* Ajustar el tamaño de la imagen del logo en móviles */
        nav .logo {
            max-height: 80px; /* Aumenta el tamaño del logo en móviles */
        }

        /* Ajuste específico para el texto "CMLegal: Abogacía y Consultoría" */
        .adios {
            font-size: 2.5rem; /* Ajusta el tamaño de la fuente en dispositivos móviles */
            text-align: center; /* Alinea el texto al centro */
            padding: 0 1rem; /* Agrega padding para evitar que el texto se pegue a los bordes */
            position: absolute;
            top: 1px; /* Coloca el texto muy cerca del área de 'hola' */
        }

        /* Asegura que el texto largo se vea correctamente en móviles */
        .header-content p {
            font-size: 1.5rem; /* Ajusta el tamaño de fuente de la descripción */
            line-height: 1.5; /* Mejora la legibilidad del párrafo */
            word-wrap: break-word; /* Ajusta las palabras largas para que se ajusten */
            padding: 0 1rem; /* Añadir un poco de padding para que no se pegue al borde */
        }
    }

    /* Otros ajustes */
    .logo {
        cursor: pointer;
    }

    /* Cambiar color de las letras de los apartados */
    .service h3, .service p, .section h2, .section p {
        color: #000; /* Letras negras */
    }

    /* Ajustar el tamaño del mapa de Google */
    iframe {
        width: 100%; /* Hacer que el mapa ocupe todo el ancho disponible */
        height: 500px; /* Aumenta la altura del mapa */
        border: none; /* Elimina el borde si lo tiene */
        border-radius: 10px; /* Bordes redondeados opcionales */
    }

    /* Cambiar color de las letras de 'Ubicación' */
    .mapa h3 {
        color: #000; /* Letras negras */
    }
  
</style>
