:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-e877b3c *//* Estilos generales */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    background-color: #fff; /* Fondo blanco principal */
    margin: 0;
}

/* Contenedor principal - ANCHO COMPLETO */
.form-container {
    width: 100%;
    max-width: 1280px; /* Un ancho máximo generoso, pero no infinito */
    margin: 0 auto;
    padding: 2rem 3rem; /* Espaciado interno */
    box-sizing: border-box; /* Importante para que el padding no desborde */
}

h2 {
    font-size: 22px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 30px;
    color: #222;
}

/* --- SISTEMA DE 12 COLUMNAS CON CSS GRID --- */
.form-grid-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px; /* Espacio entre filas y columnas */
    margin-bottom: 25px;
}

/* Clases para controlar cuántas columnas ocupa un campo */
.col-span-1 { grid-column: span 1; }  /* Super angosto */
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }  /* La mitad del ancho */
.col-span-12 { grid-column: span 12; } /* Ancho completo */

/* Estilos para grupos de formulario, etiquetas y campos */
.form-group {
    width: 100%;
}

label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #454545;
}

.required {
    color: #e53e3e;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db; /* Borde gris claro */
    border-radius: 6px;
    box-sizing: border-box; 
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, select:focus {
    border-color: #3b82f6; /* Borde azul al enfocar */
    outline: 0;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

input::placeholder {
    color: #9ca3af;
}

/* Campo de solo lectura */
input[readonly] {
    background-color: #f3f4f6; /* Fondo gris muy claro */
    cursor: not-allowed;
    border-color: #e5e7eb;
}

/* Estilos para el botón de envío */
.form-actions {
    text-align: center; /* Centra el botón */
    margin-top: 20px;
    padding-top: 20px;
}

.submit-btn {
    background-color: #3b82f6; /* Azul similar al de la imagen */
    color: white;
    border: none;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.submit-btn:hover {
    background-color: #2563eb;
}

.submit-btn:disabled {
    background-color: #9ca3af;
    cursor: wait;
}


/* Estilos de validación */
input.input-error,
select.input-error {
    border-color: #e53e3e;
}
input.input-error:focus,
select.input-error:focus {
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.25);
}

.error-message {
    color: #c53030;
    font-size: 13px;
    margin-top: 6px;
    min-height: 15px;
}

/* Mensaje de feedback final */
#form-feedback { margin-top: 15px; padding: 15px; border-radius: 6px; font-weight: 500; }
#form-feedback.success { background-color: #d1fae5; color: #065f46; }
#form-feedback.error { background-color: #fee2e2; color: #991b1b; }


/* --- DISEÑO RESPONSIVO PARA MÓVILES --- */
@media (max-width: 992px) {
    .form-container {
        padding: 1.5rem;
    }

    /* En pantallas medianas y pequeñas, todos los campos ocupan el ancho completo */
    .col-span-1,
    .col-span-5,
    .col-span-6,
    .col-span-12 {
        grid-column: span 12;
    }
}/* End custom CSS */