/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 20 2026 | 16:39:51 */
/* ====================================== */
/* 1. CONTENEDOR Y ESTRUCTURA BASE (AJUSTADO PARA EL DEGRADADO) */
/* ====================================== */
/* El .wpcf7 ya tiene un padding y un max-width, lo mantenemos */
.wpcf7 {
    max-width: 1100px; 
    margin: 0 auto;
    padding: 20px;
    background-color: transparent; /* Opcional: si el área exterior es blanca, lo mantenemos transparente */
}

.wpcf7-form {
    width: 100% !important;
    
    /* --- APLICACIÓN DEL DEGRADADO DE FONDO (INVERTIDO) --- */
    /* Ahora va de #330000 (casi negro) a la izquierda, a #B20000 (rojo oscuro) a la derecha */
    background: linear-gradient(to right, #330000 0%, #B20000 100%); 
    
    border: none;
    border-radius: 10px;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.4);
    padding: 3em;
    overflow: hidden !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* ====================================== */
/* 2. ESTILO DE LOS CAMPOS (INPUTS Y TEXTAREA) - AJUSTADOS PARA FONDO OSCURO */
/* ====================================== */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpcf7 textarea {
    width: 100%;
    padding: 14px 15px; /* Más padding para los campos */
    margin-bottom: 20px;
    /* Fondo blanco para los campos para que contrasten bien con el degradado */
    background-color: rgba(255, 255, 255, 0.95); /* Blanco ligeramente transparente */
    border: 1px solid #eee; /* Borde muy sutil */
    border-radius: 6px; 
    box-shadow: none; 
    transition: all 0.3s ease; /* Transición para color de fondo y borde */
    font-size: 16px;
    box-sizing: border-box;
    color: #333; /* Texto oscuro en el campo para legibilidad */
}

/* Efecto al enfocar (FOCUS) - Mantenemos el ROJO corporativo */
.wpcf7 input:not([type="submit"]):focus,
.wpcf7 textarea:focus {
    background-color: white; /* Fondo completamente blanco al enfocar */
    border-color: #FF6666; /* Un rojo más claro para destacar sobre el rojo oscuro del fondo */
    box-shadow: 0 0 8px rgba(255, 102, 102, 0.6); /* Sombra con el rojo claro */
    outline: none;
}

/* Placeholder text (texto gris dentro del campo) */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #999;
}

/* ====================================== */
/* 3. ESTILO DE LAS ETIQUETAS (Labels) - AJUSTADAS PARA FONDO OSCURO */
/* ====================================== */
.wpcf7 label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    /* Color blanco para que se lea sobre el fondo oscuro */
    color: #ffffff; 
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.8px; /* Un poco más de espacio entre letras */
}

/* ====================================== */
/* 4. ESTILO DEL BOTÓN DE ENVIAR (ROJO OVALADO) - Mantiene su estilo distintivo */
/* ====================================== */
.wpcf7 input[type="submit"] {
    display: inline-block; 
    background-color: #ffffff; 
    color: #CC0000; /* ROJO corporativo */
    padding: 15px 35px; 
    border-radius: 999px; 
    border: 2px solid #CC0000; 
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 16px;
    margin-top: 20px; /* Un poco de margen superior para separarlo */
}

/* Efecto al pasar el ratón (Hover) en el botón */
.wpcf7 input[type="submit"]:hover {
    background-color: #CC0000; 
    color: white; 
    box-shadow: 0px 6px 15px rgba(204, 0, 0, 0.4); 
}

/* ====================================== */
/* 5. MENSAJES DE ESTADO (Éxito, Error) - Ajustados para fondo oscuro */
/* ====================================== */
.wpcf7-response-output {
    margin: 2em 0 1em;
    padding: 1.2em;
    font-size: 15px;
    font-weight: 600;
    border: none !important; 
    border-radius: 5px;
    text-align: center; /* Centramos los mensajes */
}

/* Mensaje de éxito */
div.wpcf7-response-output.wpcf7-mail-sent-ok {
    background-color: #d4edda; /* Fondo verde claro */
    color: #155724; /* Texto verde oscuro */
}

/* Mensaje de error (Validación o No Enviado) */
div.wpcf7-response-output.wpcf7-mail-sent-ng,
div.wpcf7-response-output.wpcf7-validation-errors {
    background-color: #f8d7da; /* Fondo rojo claro */
    color: #721c24; /* Texto rojo oscuro */
}

/* Mensaje de campo requerido (error) - Rojo para contraste */
.wpcf7-not-valid-tip {
    color: #FFCCCC; /* Un rojo muy claro para que se vea sobre el fondo oscuro */
    font-size: 13px;
    display: block; 
    margin-top: 5px;
}

/* ====================================== */
/* 6. CAMPOS EN LÍNEA (FLEXBOX) */
/* ====================================== */
.campos-en-linea {
    display: flex;
    gap: 20px; 
    margin-bottom: 20px;
}
.campo-columna {
    flex: 1;
}
.campo-columna .wpcf7-form-control {
    width: 100%;
}
/* ====================================== */
/* 7. AJUSTES ESPECÍFICOS PARA MÓVIL (CONTACT FORM) */
/* ====================================== */
@media (max-width: 767px) {
    
    /* 1. Maximizamos el ancho del formulario reduciendo el padding interno */
    .wpcf7 {
        padding: 10px !important; /* Menos margen exterior */
    }

    .wpcf7-form {
        padding: 1.5em 1.2em !important; /* Reducimos de 3em a 1.2em para ganar anchura real */
    }

    /* 2. Inputs menos "gordos" (reducimos padding vertical) */
    .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
        padding: 8px 12px !important; /* Antes 14px, ahora 8px para que sean más finos */
        margin-bottom: 15px !important;
        font-size: 15px !important;
    }

    /* 3. El Área de Mensaje (Textarea) mucho menos alta */
    .wpcf7 textarea {
        padding: 10px 12px !important;
        height: 120px !important; /* Altura controlada para que no ocupe toda la pantalla */
        margin-bottom: 15px !important;
    }

    /* 4. Etiquetas más compactas */
    .wpcf7 label {
        font-size: 12px !important;
        margin-bottom: 3px !important;
    }

    /* 5. El botón de enviar más proporcionado al móvil */
    .wpcf7 input[type="submit"] {
        width: 100% !important; /* El botón ocupa todo el ancho en móvil para facilitar el clic */
        padding: 12px 20px !important;
        font-size: 15px !important;
        margin-top: 10px !important;
    }
}