/* Contenedor principal */
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--color-fondo-container-3);
        border-radius: 15px;
        box-shadow: 0 4px 15px var(--color-box-shadow-1);
        padding: 20px 30px;
        margin-top: 10%;
        width: 75%;
        animation: pop-in 0.8s ease-out;
    }

    .container h1 {
        margin-top: 1.5rem;
        margin-bottom: 2.5rem;
    }

    .container h2 {
        margin-top: 5%;
        margin-bottom: 20px;
    }

    /* Introducción de la pagina de contacto */
    #intro {
        max-width: 95%;
        margin: 15px 0;
    }

    #intro p {
        font-size: 1.15rem;
        margin-bottom: 2rem;
        text-align: left;
    }

    /* Lista de desordenada */
    #intro ul{
        padding-left: 2rem;
        list-style-type: none;
    }

    #intro ul li {
        padding-left: 2rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23fb887d' class='icon icon-tabler icons-tabler-filled icon-tabler-disc'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m0 7.66a1 1 0 0 0 -1 1a4 4 0 0 1 -4 4a1 1 0 0 0 0 2a6 6 0 0 0 6 -6a1 1 0 0 0 -1 -1m-5 -1a2 2 0 0 0 -1.995 1.85l-.005 .15a2 2 0 1 0 2 -2m0 -4a6 6 0 0 0 -6 6a1 1 0 0 0 2 0a4 4 0 0 1 4 -4a1 1 0 0 0 0 -2' /%3E%3C/svg%3E");
        background-position: 0 0;
        background-size: 1.6rem 1.6rem;
        background-repeat: no-repeat;
    }

    /* Contenedor del formulario */
    .form-container {
        width: 95%;
        max-width: 95%;
        margin-bottom: 4%;
    }

    .form-container form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        justify-items: center;
        align-items: center;
        gap: 30px;
        padding: 30px;
        background-color: var(--color-fondo-container-1);
        border-radius: 20px;
        box-shadow: 0 4px 15px var(--color-box-shadow-1);
        align-items: center;
    }

    /* Campos de los formularios */
    .campo {
        width: 90%;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .campo label {
        padding-bottom: 15px;
    }

    [name="campo-empresa"] {
        display: none;
    }

    #campo-correo {
        grid-column-start: 1;
        grid-row-start: 2;
    }

    #campo-categoria {
        grid-column-start: 1;
        grid-row-start: 3;
    }

    #campo-asunto {
        grid-column-start: 2;
        grid-row-start: 1;
    }

    #campo-mensaje {
        grid-row: span 2 / span 2;
        grid-column-start: 2;
        grid-row-start: 2;
        height: 100%;
    }

    .campo-enviar {
        grid-column: span 2 / span 2;
        grid-row-start: 4;
    }

    /* Inputs y textarea del formulario */
    input[type="text"], input[type="email"], textarea, select {
        width: 100%;
        padding: 8px 10px;
        box-sizing: border-box;
        border: 1px solid var(--color-borde-form);
        border-radius: 4px;
        background-color: var(--color-fondo-container-1);
        font-size: 15px;
        font-family: Arial, sans-serif;
    }

    /*input[type="text"]:hover, input[type="email"]:hover, textarea:hover, select:hover {
        border-color: var(--color-primario);
        box-shadow: 0 0 0 3px var(--color-box-shadow-2);
    }*/

    input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus {
        border: 2px solid var(--color-primario);
        outline: none;
    }

    textarea {
        height: 80%;
        resize: none;
    }

    .mensaje-error {
        color: var(--color-error);
        margin-top: 5px;
    }

    .campo-error {
        border: 2px solid var(--color-error) !important;
        outline: none;
    }

    #form-feedback {
        grid-column: span 2 / span 2;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        font-size: 1.1rem;
        font-weight: bold;
    }

    .feedback-error {
        color: var(--color-error);
    }

    .feedback-loading {
        color: var(--color-primario);
    }

    .feedback-success {
        color: var(--color-succes);
    }

    /* Añadir algo de aire al final del scroll de las paginas */
    .scroll-buffer {
        visibility: hidden;
        height: 5%;
        width: 100%;
    }


    /****************************************************************************************/
    /* Responsive para tablets */
    @media (min-width: 768px) and (max-width: 1024px) {
        .container {
            width: 90%;
            margin-top: 0px;
        }
    }
    /****************************************************************************************/


    /****************************************************************************************/
    /* Responsive para móviles */
    @media (max-width: 767px) {
        /* Contenedor principal */
        .container {
            width: auto;
            scale: none;
            margin-top: 0px;
        }

        .container h1 {
            margin: 0px;
        }

        /* Introducción de la pagina de contacto */
        #intro {
            margin-top: 30px;
        }

        #intro p {
            font-size: 1.1rem;
        }

        #intro ul {
            padding-left: 0px;
        }

        /* Contenedor del formulario */
        .form-container form {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            column-gap: 0px;
            padding: 30px 20px;
        }

        #campo-correo,
        #campo-categoria,
        #campo-asunto,
        #campo-mensaje,
        .campo-enviar {
            grid-column: 1 / -1;
            grid-row: auto;
        }

        .campo {
            width: 100%;
            flex-direction: column; /* Para que label y input vayan en columna */
            align-items: flex-start;
        }

        textarea {
            height: auto;
            resize: vertical;
        }
    }
    /****************************************************************************************/