/* Responsive Design for PROTADOM Index Page */

/* Extra Large Devices (1200px and up) */
@media screen and (max-width: 1600px) {
    .menubar, .contenido, .contenidoB, .contenidowi, .selectorcb, .auspiciadores, .lindestacadob, .mapai, .mapaframe, .footerpro {
        width: 100%;
        max-width: 1600px;
    }
    
    .apartadocont, .apartado {
        width: 100%;
        max-width: 1200px;
    }
    
    .apartadob {
        width: 100%;
        max-width: 1400px;
    }
}

/* Large Devices (992px to 1199px) */
@media screen and (max-width: 1199px) {
    .menubar {
        width: 100%;
        height: auto;
        min-height: 120px;
        padding: 10px 0;
    }
    
    .menubaritem {
        display: block;
        width: 100%;
        margin: 5px auto;
        text-align: center;
        left: 0;
        top: 0;
        padding: 10px;
    }
    
    .slidepri {
        width: 100%;
        height: 400px;
    }
    
    .contenido, .contenidoB, .contenidowi, .selectorcb, .auspiciadores, .footerpro {
        width: 100%;
    }
    
    .apartadocont, .apartado {
        width: 100%;
        max-width: 992px;
        height: auto;
        min-height: 400px;
    }
    
    .apartadob {
        width: 100%;
        max-width: 992px;
        height: auto;
        min-height: 600px;
    }
    
    .apartadotxt {
        width: 90%;
        left: 5%;
        right: 5%;
    }
    
    .ap1img, .ap2img, .ap3img, .ap4img, .ap5img {
        position: relative;
        width: 45%;
        max-width: 300px;
        height: auto;
        margin: 10px;
        display: inline-block;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }
    
    .ap1imgI, .ap2imgI, .ap3imgI, .ap4imgI, .ap5imgI {
        width: 100%;
        height: auto;
        position: relative;
        left: 0;
        top: 0;
        transform: none;
    }
    
    .ttselecv {
        font-size: 36px;
        width: 90%;
        left: 5%;
    }
    
    .itemselector0 {
        width: 120px;
        font-size: 18px;
        margin: 5px;
    }
    
    .apbimg, .apbimg2, .apbimg3, .apbimg4 {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        text-align: center;
        margin: 20px 0;
    }
    
    .apbimg img, .apbimg2 img, .apbimg3 img, .apbimg4 img {
        max-width: 90%;
        height: auto;
    }
    
    .apbtitulo {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        text-align: center;
        font-size: 36px;
        margin: 20px 0;
    }
    
    .apbdesc {
        position: relative;
        width: 90%;
        left: 5%;
        top: 0;
        margin-bottom: 20px;
    }
    
    .logospot {
        width: 45%;
        margin: 10px 2%;
        left: 0;
        top: 0;
    }
    
    .mapaframe {
        width: 100%;
        height: 300px;
    }
    
    .contacto {
        width: 90%;
        left: 5%;
        font-size: 24px;
    }
}

/* Medium Devices (768px to 991px) */
@media screen and (max-width: 991px) {
    .menubar {
        height: auto;
        min-height: 100px;
    }
    
    .menubaritem {
        font-size: 16px;
        padding: 8px;
    }
    
    .textomenubaritem {
        font-size: 16px;
    }
    
    .slidepri {
        height: 350px;
    }
    
    .apartado {
        height: auto;
        min-height: 350px;
        margin-bottom: 30px;
    }
    
    .apartadob {
        height: auto;
        min-height: 500px;
    }
    
    .apartadotxt {
        top: 20px;
    }
    
    .txttituloap0 {
        font-size: 24px;
    }
    
    .txtp1ap1, .txtp2ap1, .txtp1ap2, .txtp2ap2, .txtp1ap3, .txtp1ap4, .txtp2ap4, .txtp1ap5, .txtp2ap5 {
        font-size: 16px;
        position: relative;
        top: 0;
        margin: 10px 0;
    }
    
    .ttselecv {
        font-size: 28px;
    }
    
    .itemselector0 {
        width: 100px;
        font-size: 16px;
    }
    
    .apbtitulo {
        font-size: 28px;
    }
    
    .apbdesca {
        font-size: 18px;
    }
    
    .apbdescb, .apbdescc {
        font-size: 16px;
    }
    
    .txtauspiciadores {
        font-size: 32px;
    }
    
    .logospot {
        width: 90%;
        margin: 10px auto;
        display: block;
        left: 0;
        top: 0;
    }
    
    .footerpro {
        height: auto;
        min-height: 200px;
    }
    
    .contacto {
        font-size: 20px;
        margin: 10px 0;
    }
}

/* Small Devices (576px to 767px) */
@media screen and (max-width: 767px) {
    .menubar {
        height: auto;
        min-height: 80px;
        border-radius: 10px 10px 0px 0px;
    }
    
    .menubaritem {
        font-size: 14px;
        padding: 6px;
        margin: 2px;
    }
    
    .textomenubaritem {
        font-size: 14px;
    }
    
    .fawi {
        display: block;
        margin: 0 auto 5px;
    }
    
    .slidepri {
        height: 300px;
    }
    
    .apartado {
        height: auto;
        min-height: 300px;
        margin-bottom: 20px;
    }
    
    .apartadob {
        height: auto;
        min-height: 400px;
    }
    
    .ap1img, .ap2img, .ap3img, .ap4img, .ap5img {
        width: 90%;
        max-width: 250px;
        display: block;
        margin: 10px auto;
    }
    
    .apartadotxt {
        width: 95%;
        left: 2.5%;
        right: 2.5%;
    }
    
    .txttituloap0 {
        font-size: 20px;
    }
    
    .txtp1ap1, .txtp2ap1, .txtp1ap2, .txtp2ap2, .txtp1ap3, .txtp1ap4, .txtp2ap4, .txtp1ap5, .txtp2ap5 {
        font-size: 14px;
    }
    
    .ttselecv {
        font-size: 24px;
        text-align: center;
    }
    
    .itemselector0 {
        width: 80px;
        font-size: 14px;
        padding: 3px;
    }
    
    .apbtitulo {
        font-size: 24px;
    }
    
    .apbdesca {
        font-size: 16px;
    }
    
    .apbdescb, .apbdescc {
        font-size: 14px;
    }
    
    .txtauspiciadores {
        font-size: 28px;
    }
    
    .logospot {
        width: 90%;
        margin: 5px auto;
    }
    
    .mapaframe {
        height: 250px;
    }
    
    .contacto {
        font-size: 18px;
    }
}

/* Extra Small Devices (575px and down) */
@media screen and (max-width: 575px) {
    .menubar {
        height: auto;
        min-height: 60px;
    }
    
    .menubaritem {
        font-size: 12px;
        padding: 4px;
    }
    
    .textomenubaritem {
        font-size: 12px;
    }
    
    .slidepri {
        height: 250px;
    }
    
    .apartado {
        height: auto;
        min-height: 250px;
        margin-bottom: 15px;
    }
    
    .apartadob {
        height: auto;
        min-height: 350px;
    }
    
    .ap1img, .ap2img, .ap3img, .ap4img, .ap5img {
        width: 95%;
        max-width: 200px;
    }
    
    .apartadotxt {
        width: 98%;
        left: 1%;
        right: 1%;
    }
    
    .txttituloap0 {
        font-size: 18px;
    }
    
    .txtp1ap1, .txtp2ap1, .txtp1ap2, .txtp2ap2, .txtp1ap3, .txtp1ap4, .txtp2ap4, .txtp1ap5, .txtp2ap5 {
        font-size: 12px;
    }
    
    .ttselecv {
        font-size: 20px;
    }
    
    .itemselector0 {
        width: 60px;
        font-size: 12px;
        padding: 2px;
    }
    
    .apbtitulo {
        font-size: 20px;
    }
    
    .apbdesca {
        font-size: 14px;
    }
    
    .apbdescb, .apbdescc {
        font-size: 12px;
    }
    
    .txtauspiciadores {
        font-size: 24px;
    }
    
    .logospot {
        width: 95%;
        margin: 3px auto;
    }
    
    .mapaframe {
        height: 200px;
    }
    
    .contacto {
        font-size: 16px;
        width: 95%;
        left: 2.5%;
    }
    
    .footerpro {
        height: auto;
        min-height: 150px;
    }
}

/* Landscape orientation adjustments */
@media screen and (max-width: 991px) and (orientation: landscape) {
    .menubar {
        min-height: 60px;
    }
    
    .menubaritem {
        display: inline-block;
        width: auto;
        margin: 2px 5px;
    }
    
    .slidepri {
        height: 300px;
    }
    
    .apartado {
        min-height: 250px;
    }
    
    .apartadob {
        min-height: 350px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .ap1imgI, .ap2imgI, .ap3imgI, .ap4imgI, .ap5imgI,
    .apbimg img, .apbimg2 img, .apbimg3 img, .apbimg4 img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    .menubar, .selectorcb {
        display: none;
    }
    
    .contenido, .contenidoB, .contenidowi {
        background: white !important;
        color: black !important;
    }
    
    .apartado, .apartadob {
        page-break-inside: avoid;
        background: white !important;
        color: black !important;
    }
}