/**
 * contact.css - Hoja de Estilos para el Formulario de Contacto
 * Versión: ELITE 2.0 (Diseño de una columna, centrado y con placeholders)
 */

/* ============================================= */
/* 1. CONTENEDOR PRINCIPAL Y FONDO               */
/* ============================================= */
.contact-section-wrapper {
    position: relative;                  /* POSICIÓN: Necesario para la capa de superposición (overlay). */
    padding: 80px 20px;                  /* ESPACIADO: Interno vertical y horizontal. */
    background-image: url('../images/contact-background.webp'); /* IMAGEN: de fondo. */
    background-size: cover;              /* IMAGEN: Cubre todo el espacio sin deformarse. */
    background-position: center;         /* IMAGEN: Centrada. */
    background-attachment: fixed;        /* EFECTO: Parallax, el fondo no se mueve con el scroll. */
    min-height: 80vh;                    /* TAMAÑO: Altura mínima para asegurar que ocupe gran parte de la pantalla. */
    display: flex;                       /* LAYOUT: Para centrar el formulario verticalmente. */
    align-items: center;                 /* ALINEACIÓN: Vertical. */
}

.contact-section-wrapper::before {
    content: '';                         /* Requerido para que el pseudo-elemento se muestre. */
    position: absolute;                  /* POSICIÓN: Se superpone a la imagen de fondo. */
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(248, 249, 250, 0.92); /* COLOR: Capa semitransparente. */
    z-index: 1;                          /* CAPA: Se posiciona entre el fondo y el contenido. */
}

/* ============================================= */
/* 2. TARJETA DEL FORMULARIO                     */
/* ============================================= */
.contact-form-container {
    position: relative;                  /* POSICIÓN: Para que esté por encima del overlay. */
    z-index: 2;                          /* CAPA: Lo trae al frente. */
    max-width: 650px;                    /* ANCHO: Máximo del formulario. */
    margin: 0 auto;                      /* ALINEACIÓN: Centra la tarjeta del formulario en la página. */
    background-color: var(--color-white);/* COLOR: Fondo blanco. */
    padding: 40px;                       /* ESPACIADO: Interno. */
    border-radius: 12px;                 /* BORDE: Redondeado. */
    box-shadow: 0 15px 45px rgba(0,0,0,0.1); /* SOMBRA: Suave para efecto flotante. */
}

.contact-form-container h1 {
    font-size: 2rem;                     /* TAMAÑO: del título principal del formulario. */
    color: var(--color-primary);         /* COLOR: Azul oscuro. */
    text-align: center;                  /* ALINEACIÓN: Centrado. */
    margin-bottom: 10px;
}

.contact-form-container .form-intro {
    text-align: center;                  /* ALINEACIÓN: Centrada. */
    color: var(--color-text-light);      /* COLOR: Gris azulado. */
    margin-bottom: 30px;                 /* ESPACIADO: Inferior. */
    font-size: 1.1rem;                   /* TAMAÑO: Fuente. */
}

/* ============================================= */
/* 3. CAMPOS DEL FORMULARIO Y BOTÓN              */
/* ============================================= */
.form-group {
    margin-bottom: 20px;                 /* ESPACIADO: Entre cada campo. */
}

/* Oculta las etiquetas <label> pero las mantiene para accesibilidad de lectores de pantalla. */
.form-group label.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Estilo para todos los campos de entrada, selectores y áreas de texto. */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;                         /* ANCHO: Ocupa todo el ancho disponible. */
    padding: 15px 20px;                  /* ESPACIADO: Interno para más comodidad al escribir. */
    border: 1px solid #ddd;              /* BORDE: Sutil. */
    border-radius: 8px;                  /* BORDE: Ligeramente redondeado. */
    font-size: 1rem;                     /* TAMAÑO: de la fuente. */
    color: var(--color-text-dark);       /* COLOR: del texto que se escribe. */
    background-color: var(--color-background-light); /* COLOR: Fondo gris claro. */
    transition: all 0.3s ease;           /* ANIMACIÓN: Suave para todos los efectos. */
}

/* Estilo para el texto de marcador de posición (placeholder). */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999;                         /* COLOR: del texto del placeholder. */
}

/* Efecto al hacer foco (clic) en un campo. */
.form-group input:focus, .form-group textarea:focus {
    outline: none;                       /* Quita el contorno por defecto del navegador. */
    border-color: var(--color-primary);  /* COLOR: Borde azul al enfocar. */
    box-shadow: 0 0 8px rgba(54, 69, 142, 0.25); /* SOMBRA: Suave al enfocar. */
    background-color: var(--color-white);/* COLOR: Fondo blanco al escribir. */
}

.form-group textarea {
    min-height: 120px;                   /* TAMAÑO: Altura inicial del área de mensaje. */
    resize: vertical;                    /* PERMITE: Redimensionar solo verticalmente. */
}

/* Checkbox para solicitar demo. */
.form-group-checkbox {
    display: flex;                       /* LAYOUT: Para alinear el checkbox y el texto. */
    align-items: center;
    gap: 10px;                           /* ESPACIADO: Entre el checkbox y el texto. */
    margin: 25px 0;
}
.form-group-checkbox label {
    font-weight: 500;                    /* FUENTE: Grosor normal. */
    color: var(--color-text-light);
}

/* Botón de Enviar. */
.btn-submit {
    padding: 15px 30px;                  /* ESPACIADO: Botón con buena presencia. */
}

/* ============================================= */
/* 4. MENSAJES DE ÉXITO Y ERROR                  */
/* ============================================= */
.form-message-box { padding: 15px; margin-bottom: 20px; border-radius: 5px; font-weight: 500; }
.form-success { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; }
.form-error { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; }