/* CONTENEDOR GENERAL */
.buscador-hero{
    width:100%;
    max-width:430px;
    margin:0 auto;
}

/* CAJA DEL BUSCADOR */
.buscador-hero .wp-block-search__inside-wrapper{
    display:flex !important;
    align-items:center !important;
    background:#ffffff !important;
    border:1px solid rgba(255,255,255,0.18) !important;
    border-radius:16px !important;
    min-height:52px !important;
    padding:0 16px !important;
    box-shadow:0 6px 18px rgba(0,0,0,0.14) !important;
    gap:10px !important;
    transition:box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

/* HOVER DEL CUADRO */
.buscador-hero .wp-block-search__inside-wrapper:hover{
    border-color:#00C0F3 !important;
    box-shadow:0 0 0 2px rgba(0,192,243,0.18), 0 8px 22px rgba(0,0,0,0.18) !important;
}

/* FOCUS DEL CUADRO */
.buscador-hero .wp-block-search__inside-wrapper:focus-within{
    border-color:#00C0F3 !important;
    box-shadow:0 0 0 3px rgba(0,192,243,0.28), 0 8px 22px rgba(0,0,0,0.18) !important;
}

/* BOTÓN CON LUPA */
.buscador-hero .wp-block-search__button{
    order:-1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    color:#2b5c9a !important;
    padding:0 !important;
    margin:0 !important;
    min-width:auto !important;
    width:20px !important;
    height:20px !important;
    transition:color 0.25s ease !important;
}

/* HOVER Y FOCUS DE LA LUPA */
.buscador-hero .wp-block-search__button:hover,
.buscador-hero .wp-block-search__button:focus,
.buscador-hero .wp-block-search__button:active{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    color:#00C0F3 !important;
}

/* ICONO */
.buscador-hero .wp-block-search__button svg{
    width:18px !important;
    height:18px !important;
    fill:currentColor !important;
}

/* INPUT */
.buscador-hero .wp-block-search__input{
    flex:1 1 auto !important;
    border:none !important;
    outline:none !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
    min-width:0 !important;
    font-size:0.98rem !important;
    color:#4f4560 !important;
    line-height:1.4 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}

/* PLACEHOLDER */
.buscador-hero .wp-block-search__input::placeholder{
    color:#6f6578 !important;
    opacity:1 !important;
}

/* EVITAR EL COLOR AZUL/GRIS DE CHROME AUTOFILL */
.buscador-hero .wp-block-search__input:-webkit-autofill,
.buscador-hero .wp-block-search__input:-webkit-autofill:hover,
.buscador-hero .wp-block-search__input:-webkit-autofill:focus,
.buscador-hero .wp-block-search__input:-webkit-autofill:active{
    -webkit-box-shadow:0 0 0 1000px #ffffff inset !important;
    box-shadow:0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color:#4f4560 !important;
    caret-color:#4f4560 !important;
    border:none !important;
    transition:background-color 9999s ease-in-out 0s !important;
}

/* X DEL SEARCH */
.buscador-hero input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance:none !important;
    appearance:none !important;
    height:16px !important;
    width:16px !important;
    cursor:pointer !important;
    border-radius:50% !important;
    background:
        linear-gradient(45deg, transparent 43%, #7a7186 43%, #7a7186 57%, transparent 57%),
        linear-gradient(-45deg, transparent 43%, #7a7186 43%, #7a7186 57%, transparent 57%);
    opacity:0.9 !important;
}

/* Ocultar la X cuando el input está vacío */
.buscador-hero input[type="search"]:placeholder-shown::-webkit-search-cancel-button {
    display: none !important;
}

/* HOVER DE LA X */
.buscador-hero input[type="search"]::-webkit-search-cancel-button:hover{
    background:
        linear-gradient(45deg, transparent 43%, #00C0F3 43%, #00C0F3 57%, transparent 57%),
        linear-gradient(-45deg, transparent 43%, #00C0F3 43%, #00C0F3 57%, transparent 57%);
    opacity:1 !important;
}

/* ESTADOS DEL BOTÓN DE BÚSQUEDA */
.buscador-hero .wp-block-search__button:hover,
.buscador-hero .wp-block-search__button:focus,
.buscador-hero .wp-block-search__button:active{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    color:#00A7D4 !important;
}

/* QUITAR SOMBRAS EXTRAÑAS DEL NAVEGADOR */
.buscador-hero .wp-block-search__input:focus{
    outline:none !important;
    box-shadow:none !important;
}

/* RESPONSIVE */
@media (max-width: 768px){
    .buscador-hero{
        max-width:100%;
    }

    .buscador-hero .wp-block-search__inside-wrapper{
        min-height:48px !important;
        border-radius:14px !important;
        padding:0 14px !important;
    }

    .buscador-hero .wp-block-search__input{
        font-size:0.94rem !important;
    }

    .buscador-hero .wp-block-search__button svg{
        width:17px !important;
        height:17px !important;
    }
}