/* Responsive Design para ejecutivos.html */

/* Corrección de responsividad para pantallas medianas (1200px - 1600px) */
@media screen and (min-width: 1200px) and (max-width: 1600px) {
    .menubar, 
    .miembros0, 
    .acerca0,
    .contmiembros, 
    .contacerca0,
    .galeriab,
    .galeriaintcont,
    .menugaleria,
    .menugaleriav,
    .menugaleriaf,
    .mapai, 
    .mapaframe, 
    .lindestacadob {
        width: 100% !important;
        max-width: 1600px;
    }
    
    .miembrosfd, .acercafd {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .textm0, .textac0 {
        position: relative !important;
        width: 90% !important;
        max-width: 1060px !important;
        margin: 0 auto !important;
        top: 50px !important;
        
    }
    
    .contmiembros, .contacerca0 {
        height: auto !important;
        padding: 3rem 2rem !important;
        display: block !important;
        text-align: center !important;
    }
    
    .acercaapartados0 {
        width: 100% !important;
        max-width: 1000px !important;
        margin: 0 auto !important;
    }
    
    .visiontt {
        left: 0 !important;
        top: 0 !important;
        text-align: center !important;
        width: 100% !important;
        position: relative !important;
    }
    
    .texvision {
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 1rem auto 0 auto !important;
        position: relative !important;
    }
    
    .titulolistadomi {
        width: 100% !important;
        max-width: 600px;
        margin: 0 auto 3rem auto !important;
        position: relative !important;
        top: 0 !important;
    }
    
    .card {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin: 1.5rem !important;
        display: inline-block !important;
        vertical-align: top !important;
    }

    /* Galería - Responsivo medianas */
    .menugaleria, .menugaleriav, .menugaleriaf {
        height: auto !important;
        padding: 2rem 1rem !important;
        text-align: center !important;
    }
    
    .slectorg, .slectorv {
        left: 0 !important;
        top: 0 !important;
        margin: 10px !important;
        display: inline-block !important;
    }
}

/* Responsive para menubar - Mantener una sola línea hasta 590px */
@media screen and (max-width: 1199px) {
    .menubar {
        width: 100% !important;
        max-width: 1199px;
        margin: auto;
        padding: 0.5rem;
        box-sizing: border-box;
        height: 120px !important; /* Mantener alto inicial */
        display: flex !important;
        align-items: flex-end;
        justify-content: center;
    }
    
    .menubaritem {
        margin: 0.25rem;
        min-width: 120px;
        top: 10px !important;
        left: 10px !important;
        position: relative !important;
    }
    
    .textomenubaritem {
        font-size: 16px !important;
    }
    
    .fawi {
        font-size: 1.1rem;
    }
}

@media screen and (max-width: 991px) {
    .menubar {
        width: 100% !important;
        max-width: 991px;
        padding: 0.5rem;
        height: 120px !important; /* Mantener alto inicial */
        display: flex !important;
        align-items: flex-end;
        justify-content: center;
    }
    
    .menubaritem {
        min-width: 100px;
        padding: 0.5rem;
        top: 10px !important;
        left: 5px !important;
        margin: 0.25rem;
        position: relative !important;
    }
    
    .textomenubaritem {
        font-size: 14px !important;
    }
    
    .fawi {
        font-size: 1rem;
    }
    
    /* NO MODIFICAR logoprotaM - Mantener intacto */
}

@media screen and (max-width: 770px) {
    .menubar {
        width: 100% !important;
        max-width: 770px;
        padding: 0.5rem;
        height: 120px !important; /* Mantener alto inicial */
        display: flex !important;
        align-items: flex-end;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .menubaritem {
        min-width: 80px;
        padding: 0.4rem;
        top: 10px !important;
        left: 5px !important;
        margin: 0.2rem;
        position: relative !important;
    }
    
    .textomenubaritem {
        font-size: 12px !important;
    }
    
    .fawi {
        font-size: 0.9rem;
    }
    
    /* NO MODIFICAR logoprotaM - Mantener intacto */
    
    /* Responsive para logo - logorpota128 */
    .logorpota128 {
        width: 350px !important;
    }
    
    .logorpota128 .txt1 {
        font-size: 20px !important;
        width: 325px !important;
    }
    
    .logorpota128 .txt2 {
        font-size: 8px !important;
        width: 325px !important;
    }
}

@media screen and (max-width: 590px) {
    .menubar {
        width: 100% !important;
        max-width: 590px;
        padding: 0.5rem;
        height: 120px !important; /* Mantener alto inicial */
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    
    /* Ocultar menú items originales */
    .menubaritem {
        display: none !important;
    }
    
    /* Menú hamburguesa */
    .menu-toggle {
        display: block !important;
        position: absolute;
        top: 60px;
        right: 5px;
        z-index: 1000;
        background: rgba(197, 179, 110, 0.9);
        border: none;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .menu-toggle:hover {
        background: #c5b36e;
        transform: scale(1.05);
    }
    
    .menu-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background: #131313;
        margin: 5px 0;
        transition: all 0.3s ease;
        border-radius: 2px;
    }
    
    /* Menú móvil */
    .mobile-menu {
        display: none;
        position: absolute;
        top: 120px;
        left: 0;
        width: 100%;
        background: rgba(27, 27, 27, 0.95);
        backdrop-filter: blur(10px);
        z-index: 999;
        flex-direction: column;
        align-items: center;
        padding: 1rem 0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    
    .mobile-menu.active {
        display: flex !important;
    }
    
    .mobile-menu .menubaritem {
        display: flex !important;
        width: 200px;
        max-width: 280px;
        background: rgba(197, 179, 110, 0.1);
        border-radius: 10px;
        top: 0 !important;
        left: 0 !important;
        position: relative !important;
        transition: all 0.3s ease;
    }
    
    .mobile-menu .menubaritem:hover {
        background: rgba(197, 179, 110, 0.2);
        transform: translateY(-2px);
    }
    
    .mobile-menu .textomenubaritem {
        font-size: 14px !important;
        position: relative !important;
        top: 0 !important;
        color: #BF9E6E;
        margin-left: 1rem;
    }
    
    .mobile-menu .fawi {
        font-size: 1.2rem;
        position: relative !important;
        top: 0 !important;
        color: #BF9E6E;
    }
    
    /* Animación hamburguesa a X */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}

@media screen and (max-width: 480px) {
    .menubar {
        height: 120px !important; /* Mantener alto inicial */
    }
    
    .menu-toggle {
        top: 60px;
        right: 5px;
        padding: 8px;
    }
    
    .menu-toggle span {
        width: 20px;
        height: 2px;
        margin: 4px 0;
    }
    
    .mobile-menu {
        top: 120px;
    }
    
    .mobile-menu .menubaritem {
        padding: 0.8rem;
    }
    
    .mobile-menu .textomenubaritem {
        font-size: 13px !important;
    }
    
    .mobile-menu .fawi {
        font-size: 1.1rem;
    }
    
    /* Responsive para logo - logorpota128 */
    .logorpota128 {
        width: 350px !important;
    }
    
    .logorpota128 .txt1 {
        font-size: 20px !important;
        width: 325px !important;
    }
    
    .logorpota128 .txt2 {
        font-size: 8px !important;
        width: 325px !important;
    }
}

/* Ocultar menú hamburguesa en pantallas grandes */
@media screen and (min-width: 591px) {
    .menu-toggle {
        display: none !important;
    }
    
    .mobile-menu {
        display: none !important;
    }
}

/* Responsive para mapa - mapai y mapaframe */
@media screen and (max-width: 1199px) {
    .mapai, .mapaframe {
        width: 100% !important;
        max-width: 1199px;
        height: 350px !important;
        margin: auto;
        box-sizing: border-box;
    }
    
    .lindestacadob {
        width: 100% !important;
        max-width: 1199px;
        margin: auto;
    }
}

@media screen and (max-width: 991px) {
    .mapai, .mapaframe {
        width: 100% !important;
        max-width: 991px;
        height: 300px !important;
        margin: auto;
    }
    
    .lindestacadob {
        width: 100% !important;
        max-width: 991px;
        margin: auto;
    }
}

@media screen and (max-width: 770px) {
    .mapai, .mapaframe {
        width: 100% !important;
        max-width: 770px;
        height: 280px !important;
        margin: auto;
        border-radius: 10px;
        overflow: hidden;
    }
    
    .lindestacadob {
        width: 100% !important;
        max-width: 770px;
        margin: auto;
    }
}

@media screen and (max-width: 590px) {
    .mapai, .mapaframe {
        width: 100% !important;
        max-width: 590px;
        height: 250px !important;
        margin: auto;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .lindestacadob {
        width: 100% !important;
        max-width: 590px;
        margin: auto;
    }
}

@media screen and (max-width: 480px) {
    .mapai, .mapaframe {
        width: 100% !important;
        max-width: 480px;
        height: 220px !important;
        margin: auto;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .lindestacadob {
        width: 100% !important;
        max-width: 480px;
        margin: auto;
    }
}

@media screen and (max-width: 375px) {
    .mapai, .mapaframe {
        width: 100% !important;
        max-width: 375px;
        height: 200px !important;
        margin: auto;
        border-radius: 6px;
        overflow: hidden;
    }
    
    .lindestacadob {
        width: 100% !important;
        max-width: 375px;
        margin: auto;
    }
}

/* Responsive para miembros0 - Corregido para imagen responsive */
@media screen and (max-width: 1199px) {
    .miembros0 {
        width: 100% !important;
        max-width: 1199px;
        height: auto !important;
        min-height: 400px;
        padding: 2rem;
        box-sizing: border-box;
        margin: auto;
        overflow: hidden;
    }
    
    .miembrosfd {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        max-height: 400px;
        object-fit: cover;
        border-radius: 10px;
        margin-bottom: 1.5rem;
    }
    
    .textm0 {
        position: relative !important;
        margin: 1rem auto;
        width: 90% !important;
        max-width: 900px;
        height: auto;
        text-align: justify;
        font-size: 20px !important;
        top: 0 !important;
        padding: 20px;
        border-radius: 20px 0px 20px 0px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 991px) {
    .miembros0 {
        width: 100% !important;
        max-width: 991px;
        padding: 1.5rem;
        min-height: 350px;
    }
    
    .miembrosfd {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        max-height: 350px;
        margin-bottom: 1rem;
    }
    
    .textm0 {
        font-size: 18px !important;
        padding: 15px;
        width: 95% !important;
    }
}

@media screen and (max-width: 770px) {
    .miembros0 {
        width: 100% !important;
        max-width: 770px;
        padding: 1rem;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .miembrosfd {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100%;
        height: 250px !important;
        max-height: 250px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    
    .textm0 {
        font-size: 16px !important;
        line-height: 1.4;
        padding: 15px;
        width: 100% !important;
        border-radius: 15px 0px 15px 0px;
    }
}

@media screen and (max-width: 575px) {
    .miembros0 {
        padding: 0.75rem;
        min-height: 280px;
    }
    
    .miembrosfd {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 200px !important;
        max-height: 200px;
    }
    
    .textm0 {
        font-size: 14px !important;
        padding: 12px;
        line-height: 1.3;
    }
}

/* Responsive para contmiembros - Corregido para cards a partir de 770px */
@media screen and (max-width: 1199px) {
    .contmiembros {
        width: 100% !important;
        max-width: 1199px;
        height: auto !important;
        min-height: auto;
        padding: 2rem;
        margin: auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .titulolistadomi h1 {
        font-size: 24px;
        margin-bottom: 2rem;
    }
    
    .card {
        position: relative !important;
        width: 280px !important;
        height: 380px !important;
        margin: 1rem;
        left: 0 !important;
        display: inline-block;
        vertical-align: top;
    }
}

@media screen and (max-width: 991px) {
    .contmiembros {
        width: 100% !important;
        max-width: 991px;
        padding: 1.5rem;
    }
    
    .titulolistadomi h1 {
        font-size: 22px;
        margin-bottom: 1.5rem;
    }
    
    .card {
        width: 260px !important;
        height: 360px !important;
        margin: 0.75rem;
    }
    
    .description h3 {
        font-size: 16px !important;
    }
    
    .description h4 {
        font-size: 14px !important;
    }
    
    .description p {
        font-size: 13px !important;
    }
}

@media screen and (max-width: 770px) {
    .contmiembros {
        width: 100% !important;
        max-width: 770px;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .titulolistadomi {
        text-align: center;
        margin-bottom: 2rem;
        width: 100%;
    }
    
    .titulolistadomi h1 {
        font-size: 20px;
    }
    
    .card {
        width: 100% !important;
        max-width: 320px;
        height: 340px !important;
        margin: 0.5rem 0;
        left: 0 !important;
        display: block;
    }
    
    .card .head {
        height: 100px !important;
    }
    
    .card .head .circle {
        width: 200px !important;
        height: 200px !important;
    }
    
    .card .head .img {
        width: 120px !important;
        height: 120px !important;
    }
    
    .card .description {
        height: 160px !important;
        padding: 20px 15px 10px 15px;
    }
    
    .description h3 {
        font-size: 14px !important;
        margin-bottom: 5px;
    }
    
    .description h4 {
        font-size: 13px !important;
        margin-bottom: 5px;
    }
    
    .description p {
        font-size: 12px !important;
        margin-top: 8px;
    }
    
    .card .contact {
        height: 60px !important;
    }
    
    .card .contact a {
        font-size: 12px;
        padding: 4px 15px;
    }
}

@media screen and (max-width: 575px) {
    .contmiembros {
        padding: 0.75rem;
    }
    
    .titulolistadomi h1 {
        font-size: 18px;
    }
    
    .card {
        max-width: 280px;
        height: 320px !important;
        padding: 0.5rem;
    }
    
    .card .head {
        height: 90px !important;
    }
    
    .card .head .circle {
        width: 180px !important;
        height: 180px !important;
    }
    
    .card .head .img {
        width: 100px !important;
        height: 100px !important;
    }
    
    .card .description {
        height: 150px !important;
        padding: 15px 10px 8px 10px;
    }
    
    .description h3 {
        font-size: 13px !important;
    }
    
    .description h4 {
        font-size: 12px !important;
    }
    
    .description p {
        font-size: 11px !important;
    }
    
    .card .contact {
        height: 50px !important;
    }
    
    .card .contact a {
        font-size: 11px;
        padding: 3px 12px;
    }
}

/* Media queries adicionales para la responsividad de acerca.html en móviles y tablets */
@media screen and (max-width: 1199px) {
    .acerca0 {
        width: 100% !important;
        height: auto !important;
        min-height: 400px;
        padding: 2rem;
        box-sizing: border-box;
        margin: auto;
        overflow: hidden;
    }
    .acercafd {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 400px;
        object-fit: cover;
    }
    .textac0 {
        position: relative !important;
        margin: 1rem auto;
        width: 90% !important;
        max-width: 900px;
        font-size: 20px !important;
        top: 0 !important;
        padding: 20px;
        box-sizing: border-box;
    }
    .contacerca0 {
        width: 100% !important;
        height: auto !important;
        padding: 1.5rem !important;
    }
    .acercaapartados0 {
        width: 100% !important;
        height: auto !important;
    }
    .visiontt {
        position: relative !important;
        font-size: 32px !important;
        left: 0 !important;
        top: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }
    .texvision {
        position: relative !important;
        font-size: 18px !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        text-align: justify !important;
    }
}

@media screen and (max-width: 991px) {
    .textac0 { font-size: 18px !important; }
    .texvision { font-size: 16px !important; }
}

@media screen and (max-width: 770px) {
    .acerca0 { min-height: 300px; }
    .acercafd { height: 250px !important; }
    .textac0 { font-size: 16px !important; }
}

@media screen and (max-width: 575px) {
    .acerca0 { min-height: 280px; }
    .acercafd { height: 200px !important; }
    .textac0 { font-size: 14px !important; }
    .visiontt { font-size: 24px !important; }
    .texvision { font-size: 14px !important; }
}