/* Ajuste del main para la imagen de fondo */
main {
    position: relative; /* Establece la posición relativa del elemento para permitir la colocación de otros elementos de manera absoluta dentro de él */
    margin-top: 100px; /* Añade un margen superior para que el contenido comience debajo del header */
    width: 100%; /* Ocupa todo el ancho disponible */
    min-height: 100vh; /* Asegura que tenga al menos la altura de la ventana */
    display: flex; /* Usa Flexbox para alinear el contenido dentro del main */
    justify-content: flex-end; /* Alinea el contenido hacia la derecha */
    overflow: hidden; /* Previene que el contenido sobresalga del contenedor, ocultando cualquier desbordamiento */
    font-family: var(--font-family-primary);
}


/* Contenedor de la imagen de fondo */
.background-image {
    position: absolute; /* Coloca la imagen de fondo de manera absoluta dentro del contenedor principal */
    top: 0; /* Coloca la imagen al inicio de la parte superior */
    left: 0; /* Coloca la imagen al inicio de la parte izquierda */
    width: 100%; /* Asegura que la imagen cubra todo el ancho del contenedor */
    height: 100%; /* Asegura que la imagen cubra todo el alto del contenedor */
    z-index: 1; /* Establece un valor z-index para que la imagen esté por debajo del formulario */
}

/* Ajustes para la imagen dentro del contenedor */
.background-image img {
    width: 100%; /* Hace que la imagen ocupe todo el ancho disponible */
    height: 100%; /* Hace que la imagen ocupe toda la altura del contenedor */
    object-fit: cover; /* Hace que la imagen cubra el área sin deformarse, cortando si es necesario */
    object-position: left center; /* Coloca la imagen comenzando desde el lado izquierdo y centrada verticalmente */
}

/* Contenedor del formulario */
.form-container {
    position: relative; /* Hace que el formulario esté en posición relativa, permitiendo que otros elementos como los iconos se posicionen dentro de él */
    z-index: 2; /* Establece un valor z-index para que el formulario esté por encima de la imagen de fondo */
    width: 100%; /* Hace que el formulario ocupe todo el ancho disponible */
    max-width: 400px; /* Limita el ancho máximo del formulario a 500px */
    max-height: 50vh; /* Asegura que tenga al menos la altura de la ventana */
    margin: 40px 60px; /* Añade márgenes a los lados y arriba/bajo del formulario */
    background: white; /* Aplica un fondo blanco con un 95% de opacidad para darle transparencia */
    padding: 40px; /* Añade espacio interno en todo el formulario */
    border-radius: 0px; /* Redondea las esquinas del formulario */
    backdrop-filter: blur(5px); /* Aplica un filtro de desenfoque en el fondo detrás del formulario */
}

/* Título del formulario */
.form-container h2 {
    text-align: center; /* Centra el título horizontalmente */
    margin-bottom: 30px; /* Añade un margen en la parte inferior del título */
    font-size: 20px; /* Establece un tamaño de fuente grande para el título */
    font-weight: 600; /* Aplica un peso de fuente semi-negrita */
}

/* Grupos de formulario */
.form-group {
    position: relative; /* Permite la posición absoluta de los iconos dentro de este grupo */
    margin-bottom:15px; /* Añade espacio en la parte inferior de cada grupo de formulario */
}

/* Iconos dentro de los grupos de formulario */
.form-group i {
    position: absolute; /* Posiciona los iconos de forma absoluta dentro de su grupo */
    left: 15px; /* Coloca los iconos 15px desde el borde izquierdo */
    top: 50%; /* Centra el icono verticalmente */
    transform: translateY(-50%); /* Ajusta el icono para que esté exactamente en el centro vertical */
    font-size: 1.2em; /* Aumenta ligeramente el tamaño de los iconos */
}

/* Campos de entrada (input y textarea) */
.form-group input,
.form-group textarea {
    width: 77%; /* Hace que los campos ocupen todo el ancho disponible */
    padding: 12px 45px; /* Añade relleno interno en los campos, especialmente en los lados */
    border-radius: 0px; /* Redondea las esquinas de los campos */
    font-size: 18px; /* Establece un tamaño de fuente de tamaño normal */
    transition: all 0.3s ease; /* Suaviza las transiciones de los cambios de estilo */
    outline: none; /* Elimina el contorno de enfoque predeterminado */
    font-family: var(--font-family-primary-light);
    background: transparent; /* Hace que el fondo sea transparente */
    border-bottom: 1px solid #c6c6c6; /* Agrega solo un borde inferior */
    
}

.form-group input{
    border-left: #e5e3e3;
    border-right: #e5e3e3;
    border-top: #e5e3e3;
}

/* Efecto al enfocar (hover y focus) */
.form-group input:focus,
.form-group textarea:focus {
    border-bottom: 1.5px solid #303030; /* Cambia el color del borde inferior al enfocar */
    outline: none; /* Asegura que no haya contornos adicionales */
}

/* Ajuste específico para el textarea */
.form-group textarea {
    padding-top: 15px; /* Añade un relleno superior mayor para los textareas */
    resize: none; /* Desactiva el redimensionamiento */
    min-height: 120px; /* Establece una altura mínima para el textarea */
    border: 1px solid #c6c6c6;
}

/* Ajustes para el icono dentro del textarea */
.form-group textarea + i {
    top: 10px; /* Ajusta la posición del icono dentro del textarea */
    transform: none; /* Elimina la transformación de centrado */
    font-family: var(--font-family-primary-light);
}

/* Botón de envío */
.btn-submit {
    width: 30%; /* Hace que el botón ocupe todo el ancho disponible */
    padding: 8px; /* Añade un relleno interno al botón */
    background-color: #303030; /* Establece un color de fondo para el botón */
    color: #e5e3e3; /* Establece el color del texto en blanco */
    border: none; /* Elimina el borde predeterminado del botón */
    border-radius: 0px; /* Redondea las esquinas del botón */
    font-size: 18px; /* Aumenta ligeramente el tamaño de la fuente del botón */
    cursor: pointer; /* Cambia el cursor a una mano cuando se pasa por encima del botón */
    transition: all 0.3s ease; /* Suaviza las transiciones de los cambios de estilo */
    display: flex; /* Usa Flexbox para alinear los elementos dentro del botón */
    justify-content: center; /* Centra los elementos dentro del botón horizontalmente */
    align-items: center; /* Centra los elementos dentro del botón verticalmente */
    gap: 10px; /* Añade un espacio entre los iconos y el texto dentro del botón */
}

/* Efecto hover en el botón de envío */
.btn-submit:hover {
    background-color: #303030; /* Cambia el color de fondo a un azul más oscuro cuando el puntero está sobre el botón */
    transform: scale(1.1);
}

/* Estilos responsive para pantallas pequeñas */
@media (min-width: 1366px) and (max-width: 1919px) {
    
    main {
        position: relative; /* Establece la posición relativa del elemento para permitir la colocación de otros elementos de manera absoluta dentro de él */
        margin-top: 90px; /* Añade un margen superior para que el contenido comience debajo del header */
    }
    /* Contenedor del formulario */
    .form-container {
        position: relative; /* Hace que el formulario esté en posición relativa, permitiendo que otros elementos como los iconos se posicionen dentro de él */
        z-index: 2; /* Establece un valor z-index para que el formulario esté por encima de la imagen de fondo */
        width: 80%; /* Hace que el formulario ocupe todo el ancho disponible */
        max-width: 350px; /* Limita el ancho máximo del formulario a 500px */
        max-height: 60vh; /* Asegura que tenga al menos la altura de la ventana */
        margin: 40px 60px; /* Añade márgenes a los lados y arriba/bajo del formulario */
        padding: 40px; /* Añade espacio interno en todo el formulario */
        border-radius: 0px; /* Redondea las esquinas del formulario */
        backdrop-filter: blur(5px); /* Aplica un filtro de desenfoque en el fondo detrás del formulario */
    }

    

    /* Grupos de formulario */
    .form-group {
        position: relative; /* Permite la posición absoluta de los iconos dentro de este grupo */
        margin-bottom:15px; /* Añade espacio en la parte inferior de cada grupo de formulario */
    }

    /* Iconos dentro de los grupos de formulario */
    .form-group i {
        position: absolute; /* Posiciona los iconos de forma absoluta dentro de su grupo */
        left: 15px; /* Coloca los iconos 15px desde el borde izquierdo */
        top: 50%; /* Centra el icono verticalmente */
        transform: translateY(-50%); /* Ajusta el icono para que esté exactamente en el centro vertical */
        font-size: 1em; /* Aumenta ligeramente el tamaño de los iconos */
    }

    /* Campos de entrada (input y textarea) */
    .form-group input,
    .form-group textarea {
        width: 77%; /* Hace que los campos ocupen todo el ancho disponible */
        padding: 12px 45px; /* Añade relleno interno en los campos, especialmente en los lados */
        border-radius: 0px; /* Redondea las esquinas de los campos */
        font-size: 16px; /* Establece un tamaño de fuente de tamaño normal */
    }

    .btn-submit {
        
        font-size: 16px; /* Aumenta ligeramente el tamaño de la fuente del botón */
        }
}


/* Estilos para pantallas extra pequeñas */
@media (max-width: 480px) {

    .background-image img {
        width: 100%; /* Hace que la imagen ocupe todo el ancho disponible */
        height: 100%; /* Hace que la imagen ocupe toda la altura del contenedor */
    }

    .form-container {
        background-color: transparent;
        margin: 30px; /* Reduce el margen del formulario en pantallas más pequeñas */
        padding: 20px; /* Reduce el relleno del formulario en pantallas más pequeñas */
        max-width: 400px; /* Limita el ancho máximo del formulario a 500px */
        max-height:55vh; /* Asegura que tenga al menos la altura de la ventana */
    }

    .form-group input,
    .form-group textarea {
        width: 65%; /* Hace que los campos ocupen el 100% del ancho disponible */
        align-items: center;
        background-color: transparent;
        color: #e5e3e3;
    }

    .form-group input::placeholder, .form-group textarea::placeholder{
        color: #e5e3e3; /* Cambia el color a gris claro */
    }

    
    /* Iconos dentro de los grupos de formulario */
    .form-group i {
        font-size: 1em; /* Ajusta el tamaño de los iconos para que se adapten mejor en pantallas pequeñas */
        color: #f2f2f2; /* Establece un color gris oscuro para los iconos */
    }

    .btn-submit {
        font-size: 16px; /* Ajusta el tamaño del botón en pantallas pequeñas */
        background-color: #e5e3e3;
        color: #303030;
        width: 40%; /* Hace que el botón ocupe todo el ancho disponible */
        padding: 8px; /* Añade un relleno interno al botón */
    }

    .form-container h2 {
    color: #f2f2f2;
    }
}