.elementor-2029 .elementor-element.elementor-element-d22db18{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2029 .elementor-element.elementor-element-9c9530a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}/* Start custom CSS for hivepress-listing-search-form, class: .elementor-element-b97c682 *//* ==========================================================================
   BARRA DE BÚSQUEDA HIVEPRESS - DISEÑO PREMIUM + ALINEACIÓN PERFECTA
   ========================================================================== */

/* 1. Contenedor Principal (Estilo oscuro y Alineación en fila) */
.hp-form--listing-search {
    background: rgba(15, 15, 17, 0.85) !important; /* Fondo oscuro transparente */
    padding: 25px !important;
    border-radius: 15px !important;
    border: 1px solid #222 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    
    /* Obligamos a que todo esté en una línea recta y compartan altura */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 15px !important; /* Separación exacta entre cajas */
}

/* 2. Repartir el ancho equitativamente (33.3% para cada bloque) */
.hp-form--listing-search > div {
    flex: 1 !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important; /* Evita que se rompa si el texto es largo */
}

/* 3. Ajuste de ALTURA y ANCHO idéntico para campos y botón */
.hp-form--listing-search .hp-field,
.hp-form--listing-search button[type="submit"] {
    width: 100% !important;
    height: 60px !important; /* ESTA ES LA ALTURA CLAVE PARA TODOS */
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 4. Estilo de las cajas de texto (Location y Palabras Clave) */
.hp-form--listing-search .hp-field {
    background-color: #0a0a0a !important;
    border: 1px solid #333 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 0 20px !important; /* Ajustado para el texto bien centrado verticalmente */
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5) !important;
}

/* Brillo cian al dar clic para escribir en la caja */
.hp-form--listing-search .hp-field:focus {
    border-color: #00ffcc !important; 
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.3) !important;
    outline: none !important;
}

/* 5. EL BOTÓN: Borde rojo y base para el neón */
.hp-form--listing-search button[type="submit"] {
    position: relative !important;
    z-index: 1 !important;
    background-color: #000000 !important; /* Fondo negro */
    color: #ffffff !important; /* Letras blancas */
    border: 2px solid #ff0000 !important; /* BORDE ROJO REQUERIDO */
    border-radius: 8px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* 6. LA MAGIA: El Neón animado multicolor de fondo */
.hp-form--listing-search button[type="submit"]::before {
    content: "" !important;
    position: absolute !important;
    top: -5px !important;
    left: -5px !important;
    right: -5px !important;
    bottom: -5px !important;
    z-index: -1 !important;
    
    /* Mezcla de colores neón */
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000) !important;
    background-size: 400% !important;
    border-radius: 12px !important;
    filter: blur(12px) !important; 
    opacity: 0.8 !important;
    animation: resplandorNeonMulti 20s linear infinite !important;
}

/* Efecto al pasar el ratón por el botón */
.hp-form--listing-search button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    color: #ff0000 !important; /* Texto rojo al pasar el ratón */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5) !important;
}

/* 7. Motor de animación de los colores */
@keyframes resplandorNeonMulti {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* 8. Responsive: Para que no se aplaste feo en celulares */
@media (max-width: 768px) {
    .hp-form--listing-search {
        flex-direction: column !important; /* Los pone uno debajo del otro */
        padding: 20px !important;
    }
    .hp-form--listing-search .hp-field,
    .hp-form--listing-search button[type="submit"] {
        height: 55px !important; /* Altura un poco menor en móviles */
    }
}/* End custom CSS */
/* Start custom CSS *//* 1. Fondo base profundo y las rayas neon fijas */
body {
    background-color: #050505 !important;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 40px,
            rgba(0, 255, 204, 0.08) 40px, /* Rayas color cian muy sutiles */
            rgba(0, 255, 204, 0.08) 41px
        ) !important;
    background-attachment: fixed !important;
    position: relative;
    overflow-x: hidden; /* Evita que la luz genere scroll horizontal */
}

/* 2. Primera Luz Animada (Color Cian) */
body::before {
    content: "";
    position: fixed; /* Se queda quieta en la pantalla mientras haces scroll */
    top: -10%;
    left: -10%;
    width: 60vw;
    height: 60vh;
    background: radial-gradient(circle, rgba(0, 255, 204, 0.3) 0%, transparent 60%);
    filter: blur(90px); /* Este es el secreto: difumina el color para que parezca LUZ real */
    z-index: -1; /* Lo manda al fondo de todo */
    animation: respiracionLuz1 15s infinite alternate ease-in-out;
}

/* 3. Segunda Luz Animada (Color Morado/Violeta para contraste) */
body::after {
    content: "";
    position: fixed;
    bottom: -10%;
    right: -10%;
    width: 60vw;
    height: 60vh;
    background: radial-gradient(circle, rgba(148, 0, 211, 0.25) 0%, transparent 60%);
    filter: blur(100px);
    z-index: -1;
    animation: respiracionLuz2 20s infinite alternate-reverse ease-in-out;
}

/* 4. Animaciones para darle vida a la luz */
@keyframes respiracionLuz1 {
    0% { transform: translate(0, 0) scale(0.8); opacity: 0.5; }
    50% { transform: translate(15%, 10%) scale(1.2); opacity: 0.9; } /* La luz se hace más fuerte y se mueve */
    100% { transform: translate(-10%, 15%) scale(0.9); opacity: 0.6; }
}

@keyframes respiracionLuz2 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    50% { transform: translate(-15%, -15%) scale(1.3); opacity: 0.8; }
    100% { transform: translate(10%, -10%) scale(0.8); opacity: 0.5; }
}

/* 5. Transparencia obligatoria para Elementor */
.elementor-section, .elementor-container, .elementor-widget-wrap {
    background-color: transparent !important;
}/* End custom CSS */