/* ==========================================================================
   RED DISEÑO SECCIÓN CONTACTO INTEGRADA (DARK MODE)
   ========================================================================== */

/* Fondo base de la sección basado en tu captura */
.section-contacto-dark {
    background: var(--azul-tecnologico);
}

/* Contenedor Translúcido de Cristal (Glassmorphism) */
.contacto-glass-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Títulos y Detalles */
.letter-spacing-1 {
    letter-spacing: 1px;
}

.linea-dinamica-centro {
    width: 60px;
    height: 3px;
    background: var(--primary); /* O el color principal de tu marca */
    margin: 12px auto 0 auto;
    border-radius: 2px;
}

/* Inputs Oscuros Estilizados */
.form-dark-input {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Placeholder en gris claro sutil */
.form-dark-input::placeholder {
    color: var(--plata)!important;
    font-size: 14px;
}

/* Opciones del Select (Para que se lean correctamente en fondo oscuro) */
.form-dark-input option {
    background-color: var(--gray) !important;
    color: #ffffff !important;
}

/* Estados Focus (Cuando el usuario escribe) */
.form-dark-input:focus {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--primary, #275da3) !important; /* Brilla con el color corporativo */
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, #275da3) 15%, transparent) !important;
    outline: none;
}

/* Botón Enviar Premium Integrado */
.btn-enviar-premium {
    background: var(--primary);
    border: none;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
    padding: 10px 35px;
    transition: all 0.3s ease;
}

.btn-enviar-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary, #275da3) 30%, transparent) !important;
    opacity: 0.95;
}

.btn-enviar-premium:active {
    transform: translateY(0);
}

/* Patrón de puntos en la esquina inferior derecha */
.pattern-dots-corner {
    position: absolute;

    z-index: 1; /* Por detrás de las tarjetas */

    
    /* Genera una matriz de puntos perfectos usando gradientes CSS */
    background-image: radial-gradient(rgba(39, 93, 163, 0.25) 2px, transparent 2px);
    background-size: 20px 20px;
    
    /* Un ligero difuminado en los bordes para que no termine de golpe */
    mask-image: radial-gradient(circle at bottom right, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at bottom right, black 40%, transparent 80%);
    
    pointer-events: none; /* Evita que interfiera con los clics */


    bottom: -40px; /* Lo bajas un poco más */
    right: -30px;  /* Lo pegas un poco más al borde */
    width: 320px;  /* Subes de 260px a 320px para que abarque más terreno hacia arriba */
    height: 280px; /* Subes de 220px a 280px */
    opacity: 0.45; /* MANTÉN la opacidad aquí, está en el punto perfecto */
}

/* Opcional: Asegurar que tus tarjetas queden por encima del patrón */
.container {
    position: relative;
    z-index: 2;
}

.bg-hueso {
    background-color: #f8f9fa; 
    overflow: hidden; /* Evita que el patrón rompa el ancho en móviles */
}