/* Variables CSS para una gestión más fácil de los colores */
:root {
    --color-primary-green: #2C5F2D; /* Verde oscuro del logo */
    --color-secondary-beige: #B89874; /* Beige/marrón del logo */
    --color-background-light: #FBFBF6; /* Un blanco roto/crema muy suave */
    --color-text-dark: #333333; /* Gris oscuro para texto general */
    --color-accent-blue-green: #8ECDCF; /* Azul verdoso claro para acentos (opcional, pero puede usarse en focos o bordes) */
    --color-border-light: #DDDDDD; /* Borde suave para inputs */
    --color-error: #D32F2F; /* Color para mensajes de error */
}

/* Reset básico y box-sizing para responsive */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif; /* Fuente principal para el cuerpo */
    line-height: 1.6;
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    display: flex; /* Para centrar el contenedor del formulario */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ocupa al menos el alto de la vista */
    padding: 20px; /* Espacio alrededor en pantallas grandes */
}

.container {
    background-color: #FFFFFF; /* Fondo blanco para el contenedor del formulario */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px; /* Ancho máximo para pantallas de escritorio */
    padding: 30px;
    text-align: center;
}

/* Estilos del encabezado */
.header {
    margin-bottom: 30px;
    display: flex; /* Usamos flexbox para centrar y alinear logo e imagen */
    flex-direction: column; /* Columna para que se apilen verticalmente */
    align-items: center; /* Centrar horizontalmente */
    justify-content: center; /* Centrar verticalmente si hay espacio */
}

.logo {
    max-width: 150px; /* Tamaño del logo */
    height: auto;
    margin-bottom: 10px; /* Este margen se mantiene */
}

.logo-text {
    font-family: 'Montserrat', sans-serif; /* Mismo tipo de letra que los títulos */
    color: var(--color-primary-green); /* Mismo color verde del logo */
    font-size: 1.4em; /* ¡CLAVE! Reducimos el tamaño de la fuente, antes 1.8em */
    font-weight: 700; /* Negrita para que resalte */
    margin-top: -30px; /* Margen negativo para acercar al logo */
    margin-bottom: 25px; /* Espacio entre el texto del logo y el título principal */
    display: block; /* Para que ocupe su propia línea */
}


.header h1 {
    font-family: 'Montserrat', sans-serif; /* Fuente para el título principal */
    color: var(--color-primary-green);
    font-size: 2.2em;
    margin-bottom: 10px;
}

.header p {
    color: var(--color-text-dark);
    font-size: 1.1em;
    margin-bottom: 20px;
}

/* Estilos del formulario */
.consult-form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre los grupos de formulario */
    text-align: left; /* Alinea el texto de las etiquetas a la izquierda */
}

.form-group {
    margin-bottom: 15px; /* Espacio entre grupos de formulario */
}

.form-group label {
    display: block; /* Cada label en su propia línea */
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--color-primary-green); /* Color del label */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    font-size: 1em;
    font-family: 'Roboto', sans-serif;
    color: var(--color-text-dark);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary-green); /* Color de borde al enfocar */
    box-shadow: 0 0 0 3px rgba(44, 95, 45, 0.2); /* Sutil sombra al enfocar */
    outline: none; /* Eliminar el contorno por defecto del navegador */
}

.form-group textarea {
    resize: vertical; /* Permite redimensionar verticalmente el textarea */
    min-height: 80px;
}

/* Estilos del botón de envío */
.submit-button {
    background-color: var(--color-primary-green); /* Verde principal para el botón */
    color: #FFFFFF; /* Texto blanco en el botón */
    padding: 15px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 20px;
    width: 100%; /* Botón al 100% de ancho */
}

.submit-button:hover {
    background-color: #3B7C3E; /* Un verde un poco más oscuro al pasar el ratón */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
}

.submit-button:active {
    transform: translateY(0);
}

/* Nota de privacidad */
.privacy-note {
    font-size: 0.85em;
    color: #777777;
    margin-top: 25px;
    text-align: center;
}

/* Media Queries para Responsive Design (Mobile-First) */

/* Para pantallas más pequeñas que 768px (tablets y móviles) */
@media (max-width: 768px) {
    .container {
        padding: 20px;
        margin: 10px; /* Pequeño margen en los lados para evitar que pegue al borde */
    }

    .logo {
        max-width: 120px; /* Ajuste para móviles */
    }

    .logo-text {
        font-size: 1.2em; /* ¡CLAVE! Reducimos el tamaño para móviles, antes 1.6em */
        margin-top: -20px; /* Ajuste para móviles */
        margin-bottom: 20px;
    }

    .header h1 {
        font-size: 1.8em; /* Tamaño de fuente más pequeño para títulos */
    }

    .header p {
        font-size: 1em;
    }

    .form-group label {
        font-size: 1em;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px 12px;
        font-size: 0.95em;
    }

    .submit-button {
        padding: 12px 20px;
        font-size: 1.1em;
    }
}

/* Para pantallas más pequeñas que 480px (móviles pequeños) */
@media (max-width: 480px) {
    .container {
        padding: 15px;
        border-radius: 5px;
    }

    .logo {
        max-width: 100px; /* Ajuste para móviles muy pequeños */
    }

    .logo-text {
        font-size: 1em; /* ¡CLAVE! Reducimos el tamaño para móviles muy pequeños, antes 1.4em */
        margin-top: -15px; /* Ajuste para móviles muy pequeños */
        margin-bottom: 15px;
    }

    .header h1 {
        font-size: 1.6em;
    }

    .header p {
        font-size: 0.9em;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 0.9em;
    }

    .submit-button {
        font-size: 1em;
        padding: 10px 15px;
    }

    .privacy-note {
        font-size: 0.75em;
    }
}

/* Estilos para el mensaje de éxito */
.form-success {
    background-color: #d4edda; /* Un verde muy claro */
    color: #155724; /* Un verde oscuro para el texto */
    border: 1px solid #c3e6cb; /* Borde verde claro */
    /* Puedes añadir box-shadow, padding extra, etc. */
}

/* Estilos para el mensaje de error general del formulario */
.form-error {
    background-color: #f8d7da; /* Un rojo muy claro */
    color: #721c24; /* Un rojo oscuro para el texto */
    border: 1px solid #f5c6cb; /* Borde rojo claro */
    /* Puedes añadir box-shadow, padding extra, etc. */
}

/* Estilos para el mensaje de error específico de campo */
.error-message {
    color: #dc3545; /* Rojo más oscuro para errores de validación */
    font-size: 0.85em;
    margin-top: 5px;
    display: block; /* Asegura que ocupe su propia línea */
}

/* Resaltar el campo con error */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
    border-color: #dc3545; /* Borde rojo */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Sombra suave roja */
}

/* Estilo básico para el botón cuando está deshabilitado */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #cccccc; /* Un color gris para deshabilitado */
    /* Asegúrate de que este estilo no entre en conflicto con otros estilos de botón */
}

/* Estilo para el mensaje de ayuda del botón deshabilitado */
.help-message {
    font-size: 0.9em;
    color: #6c757d; /* Un gris suave */
    margin-top: 10px;
    display: block; /* Asegura que ocupe su propia línea y se centre si es necesario */
    text-align: center;
}