/* 4. AJUSTE DE CONTENEDOR PARA MÓVIL */

@media only screen and (max-width: 1024px) {

    .qodef-mobile-header-inner {

        justify-content: flex-start !important;

    }

}





/* Recuperar el texto sin que flote raro */

.qodef-team-list .qodef-e-content {

    position: absolute !important;

    bottom: 0 !important;

    width: 100% !important;

}



.aceptacion-legal {

    margin-top: 15px;

    margin-bottom: 10px;

    color: #cccccc;

    font-size: 14px;

}

.aceptacion-legal a {

    color: #ffffff;

    text-decoration: underline;

}

.aceptacion-legal a:hover {

    color: #ff0000;

}



.grecaptcha-badge { 

    visibility: hidden; 

}



/* Dar estilo al campo select para que sea igual que los campos de texto */

.wpcf7 select {

    background-color: transparent !important;

    color: #ffffff !important;

    border: 1px solid #555555 !important; /* Ajusta este color si el borde de tus inputs es distinto */

    width: 100%;

    padding: 10px 15px;

    height: 45px; /* Altura estándar, ajústala si tus inputs son más altos */

    font-family: inherit;

    font-size: 16px;

    -webkit-appearance: none; /* Quita el estilo por defecto de Chrome/Safari */

    -moz-appearance: none; /* Quita el estilo por defecto de Firefox */

    appearance: none;

    border-radius: 0;

    cursor: pointer;

}



/* Colorear el fondo de las opciones al desplegar (para que no salgan blancas) */

.wpcf7 select option {

    background-color: #1a1a1a;

    color: #ffffff;

    padding: 10px;

}


/* OCULTAR "Elige una opción..." del desplegable una vez que haces clic */

.wpcf7 select option[value=""] {

    display: none;

}


/* ------------------------------------------------ */

/* ARREGLAR TÍTULOS ROTOS O CORTADOS EN MÓVIL       */

/* ------------------------------------------------ */

@media only screen and (max-width: 768px) {

    /* Apuntamos a los títulos grandes típicos de Elementor y Tristero */

    h1, h2, 

    .qodef-page-title, 

    .qodef-m-title,

    .elementor-heading-title {

        font-size: 32px !important; /* Baja este número si la palabra es muy larga y sigue sin caber */

        line-height: 1.2 !important;

        word-break: normal !important; /* Evita que la palabra se parta a lo bestia */

        overflow-wrap: break-word !important; /* Solo baja de línea si la palabra entera no cabe */

        hyphens: none !important; /* Desactiva los guiones automáticos */

    }

}


/* ================================================ */
/* FORZAR LA HAMBURGUESA A LA DERECHA               */
/* ================================================ */

.qodef-position-right,
.qodef-side-area-opener-wrapper,
a.qodef-side-area-opener {
    position: absolute !important;
    right: 5% !important; /* Manda el icono a la derecha */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Lo centra verticalmente perfecto */
}

/* Fija la barra superior móvil completa para que el menú baje con ella */
  
@media (max-width: 1024px) {
    #qodef-page-mobile-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        background-color: #000000 !important; 
/* Fondo negro para que no se transparente la web al bajar */
   }

    / Por si el tema fuerza el menú hacia arriba, le decimos que empiece justo debajo de la barra */
    #qodef-mobile-header-navigation {
        position: absolute !important; 
        top: 100% !important; 
        left: 0 !important;
        width: 100% !important;
        background-color: #000000 !important;
    }
}

/* EL CÓDIGO MODIFICADO: AHORA CON TAMAÑO CONTROLADO */
.qodef-team-list .qodef-e-inner, 
.qodef-team-list article,
.qodef-team-list .qodef-e-media-inner {
    height: 400px !important; /* Bajado de 550px a 400px */
    max-width: 300px !important; /* Limitamos el ancho para que no sea gigante */
    margin: 0 auto !important; /* Las centramos en su columna */
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
}

.qodef-team-list .qodef-e-media-inner img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Recuperar el texto y ajustarlo al nuevo tamaño */
.qodef-team-list .qodef-e-content {
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); /* Degradado para que se lea mejor el nombre */
    padding: 10px 0 !important;
}


/* =========================================
   AJUSTES CABECERA MÓVIL (EL ABISMO)
   - Ocultar logo Tristero
   - Hacer fondo transparente sobre el slider
========================================= */
@media only screen and (max-width: 1024px) {
    
    /* 1. OCULTAR EL LOGO POR DEFECTO DEL TEMA TRISTERO */
    .qodef-mobile-header-logo-link,
    .qodef-mobile-logo-wrapper {
        display: none !important;
    }

    /* 2. HACER LA BARRA NEGRA TRANSPARENTE Y SOBREPONERLA */
    #qodef-page-mobile-header,
    .qodef-mobile-header-inner {
        background-color: transparent !important;
        position: absolute !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 99999 !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
    
    /* 3. ASEGURAR QUE AL ABRIR EL MENÚ SÍ TENGA FONDO NEGRO (OPCIONAL) */
    /* Para que cuando desplieguen la hamburguesa, los enlaces se lean bien */
    .qodef-mobile-header-navigation {
        background-color: #000000 !important;
        top: 100% !important;
        position: absolute !important;
        width: 100% !important;
    }
}