/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 06 2026 | 02:21:32 */
/* ==============================================================
   Contact Form 7 - Diseño Premium (Efecto Tarjeta Flotante - Más Ancho)
   ============================================================== */

/* Contenedor principal - FORZADO AL ANCHO MÁXIMO */
.dm-contact-form {
    width: 100% !important; /* Obliga a tomar todo el espacio de la columna */
    max-width: 950px !important; /* Un límite mucho más ancho */
    margin: 40px auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 16px; 
    
    border: 1px solid #e5e7eb;
    border-top: 6px solid #2563eb; 
    
    box-shadow: 
        0 20px 40px -10px rgba(0, 0, 0, 0.12), 
        0 8px 16px -4px rgba(0, 0, 0, 0.06);
        
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}
    
    /* Borde sutil y línea de acento superior azul */
    border: 1px solid #e5e7eb;
    border-top: 6px solid #2563eb; 
    
    /* Sombra en capas para un efecto 3D muy elegante */
    box-shadow: 
        0 20px 40px -10px rgba(0, 0, 0, 0.12), 
        0 8px 16px -4px rgba(0, 0, 0, 0.06);
        
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

.dm-contact-form * {
    box-sizing: border-box;
}

/* Sistema de filas y columnas (Flexbox) */
.dm-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.dm-field {
    margin-bottom: 24px;
}

.dm-field.full {
    width: 100%;
}

.dm-field.half {
    flex: 1 1 calc(50% - 10px);
}

/* Estilos de las etiquetas (Labels) */
.dm-field label {
    display: block;
    font-weight: 600;
    font-size: 14.5px;
    color: #374151;
    margin-bottom: 6px !important;
}

/* Asterisco de campo obligatorio */
.dm-field label span {
    color: #ef4444; 
    margin-left: 3px;
}

/* Solución para las etiquetas span que genera Contact Form 7 */
.dm-contact-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Estilos de Inputs y Textarea */
.dm-contact-form input[type="text"],
.dm-contact-form input[type="tel"],
.dm-contact-form input[type="email"],
.dm-contact-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #f3f4f6; 
    border-radius: 8px;
    background-color: #f8fafc; 
    font-size: 15px;
    color: #111827;
    transition: all 0.3s ease;
}

/* Altura específica para el área de mensaje */
.dm-contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* Estado Activo (Al hacer clic en un campo) */
.dm-contact-form input[type="text"]:focus,
.dm-contact-form input[type="tel"]:focus,
.dm-contact-form input[type="email"]:focus,
.dm-contact-form textarea:focus {
    border-color: #2563eb; 
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    outline: none;
}

/* Ajuste específico para el campo Captcha */
.dm-field.captcha input[type="text"] {
    max-width: 120px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
}

/* ==============================================================
   BOTÓN: Moderno con Doble Tonalidad (Gradiente Azul)
   ============================================================== */
.dm-submit {
    margin-top: 15px;
}

.dm-contact-form input[type="submit"] {
    width: 100%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #ffffff;
    padding: 16px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 6px 15px -3px rgba(29, 78, 216, 0.4);
    transition: all 0.3s ease;
}

/* Efecto al pasar el cursor (Hover) */
.dm-contact-form input[type="submit"]:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: 0 8px 20px -4px rgba(29, 78, 216, 0.5);
    transform: translateY(-2px); 
}

/* Efecto al hacer clic (Active) */
.dm-contact-form input[type="submit"]:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px -2px rgba(29, 78, 216, 0.4);
}

/* ==============================================================
   Corrección estricta de espacios fantasmas (Auto-P) de CF7
   ============================================================== */
.dm-contact-form br {
    display: none !important;
}

.dm-contact-form p {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==============================================================
   Diseño Responsive (Móviles)
   ============================================================== */
@media (max-width: 600px) {
    .dm-contact-form {
        width: 92%; 
        padding: 30px 20px;
        margin: 20px auto; 
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    }
    
    .dm-row {
        flex-direction: column;
        gap: 0;
    }
    
    .dm-field.half {
        flex: 1 1 100%;
        width: 100%;
    }
}