/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 31 2025 | 10:13:29 */
/* -------------------------------------- */
/* 1. Contenedor y Centrado (Opcional) */
/* -------------------------------------- */
.wpcf7 {
    max-width: 1000px; /* Limita el ancho para centrarlo bien */
    margin: 0 auto; /* Centra el formulario en la página */
    padding: 20px;
    background-color: #f9f9f9; /* Un fondo muy ligero para destacarlo */
    border-radius: 5px;
}

.wpcf7-form {
	width:100% !important;
    background-color: #ffffff;
    border: 3px solid #000000;
    box-shadow: 0px 6px 10px 6px rgba(0,0,0,0.5);
    padding: 2em;
    overflow: none !important;
	font-family: 'Montserrat' !important;
}

/* -------------------------------------- */
/* 2. Estilo de los Campos (Inputs y Textarea) */
/* -------------------------------------- */
/* Aplica a campos de texto, email y textarea */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd; /* Borde gris claro y sutil */
    border-radius: 3px;
    box-shadow: none; /* Eliminar sombras para un look plano/minimalista */
    transition: border-color 0.3s ease;
    font-size: 16px;
    box-sizing: border-box; /* Asegura que el padding no cambie el ancho total */
}

/* Efecto al enfocar (hover/focus) */
.wpcf7 input:not([type="submit"]):focus,
.wpcf7 textarea:focus {
    border-color: #333; /* Borde más oscuro al seleccionar */
    outline: none; /* Eliminar el borde de enfoque por defecto del navegador */
}

/* -------------------------------------- */
/* 3. Estilo de las Etiquetas (Labels) */
/* -------------------------------------- */
.wpcf7 label {
    display: block; /* Asegura que la etiqueta esté en su propia línea */
    margin-bottom: 5px;
    font-weight: 600; /* Ligeramente más negrita */
    color: #333;
    font-size: 14px;
    text-transform: uppercase; /* Opcional: Mayúsculas para un look más limpio */
    letter-spacing: 0.5px;
}

/* -------------------------------------- */
/* 4. Estilo del Botón de Enviar (Submit) */
/* -------------------------------------- */
.wpcf7 input[type="submit"] {
    display: inline-block; /* Permite centrarlo si el contenedor es más grande */
    padding: 12px 30px;
    background-color: #333; /* Fondo oscuro (color principal minimalista) */
    color: white; /* Texto blanco */
    border: none;
    border-radius: 3px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Efecto al pasar el ratón (Hover) en el botón */
.wpcf7 input[type="submit"]:hover {
    background-color: #555; /* Ligeramente más claro al hacer hover */
}

/* -------------------------------------- */
/* 5. Mensajes de Estado (Éxito, Error) */
/* -------------------------------------- */
.wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 1em;
    border: 2px solid;
}

/* Mensaje de éxito */
div.wpcf7-response-output.wpcf7-mail-sent-ok {
    border-color: #4CAF50;
    background-color: #e8f5e9;
    color: #388e3c;
}

/* Mensaje de error (no enviado) */
div.wpcf7-response-output.wpcf7-mail-sent-ng,
div.wpcf7-response-output.wpcf7-validation-errors {
    border-color: #F44336;
    background-color: #ffebee;
    color: #d32f2f;
}

/* -------------------------------------- */
/* Estilo para los campos en línea (Flexbox) */
/* -------------------------------------- */

/* 1. Contenedor principal: Activa Flexbox */
.campos-en-linea {
    display: flex; /* Pone todos los hijos (campo-columna) en línea */
    gap: 20px; /* Espacio entre las columnas */
    margin-bottom: 20px;
}

/* 2. Columnas individuales: Ocupan el mismo ancho */
.campo-columna {
    flex: 1; /* Hace que cada columna ocupe una parte igual del espacio (1/3) */
}

/* 3. Asegurar que los inputs dentro de esas columnas ocupen el 100% de su columna */
.campo-columna .wpcf7-form-control {
    width: 100%;
}

/* -------------------------------------- */
/* Arreglo para Móviles (Responsive) */
/* -------------------------------------- */
@media (max-width: 768px) {
    .campos-en-linea {
        flex-direction: column; /* Apila los campos en pantallas pequeñas */
        gap: 0; 
    }
}