/*
Theme Name: Plantilla_Base - Portada Glaciar
Description: Ajustes específicos de la portada y carrusel responsive.
Version: 2026.09.21
*/

/* ======================================================
   PORTADA: HERO / SLIDESHOW RESPONSIVE
   ====================================================== */
.home-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #111318;
    border-bottom: 5px solid #01879e;
}

/* El plugin usa un carrusel Bootstrap. Se fija una altura estable para
   evitar los grandes espacios negros cuando el medio es 1920 x 500. */
.home-hero .carousel,
.home-hero .carousel-inner,
.home-hero .carousel-inner > .item {
    width: 100%;
    height: calc(100vw * 0.2604167) !important;
    min-height: 300px !important;
    max-height: 500px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #111318 !important;
}

.home-hero .carousel-inner > .item {
    position: relative;
}

/* Imágenes y videos llenan el hero. En pantallas angostas se recortan
   lateralmente, manteniendo el centro de la toma visible. */
.home-hero .carousel-inner > .item > img,
.home-hero .carousel-inner > .item > a > img,
.home-hero .carousel-inner > .item > video,
.home-hero .carousel-inner > .item > a > video,
.home-hero .carousel-inner > .item video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Compatibilidad adicional si el plugin envuelve el video. */
.home-hero .carousel-inner > .item .video-js,
.home-hero .carousel-inner > .item .wp-video,
.home-hero .carousel-inner > .item .mejs-container,
.home-hero .carousel-inner > .item .mejs-inner,
.home-hero .carousel-inner > .item .mejs-mediaelement {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

.home-hero .carousel-inner > .item .wp-video video,
.home-hero .carousel-inner > .item .mejs-mediaelement video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Flechas más limpias y centradas. */
.home-hero .carousel-control {
    top: 0 !important;
    bottom: 0 !important;
    width: 10% !important;
    opacity: .88 !important;
    background-image: none !important;
    filter: none !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.7);
}

.home-hero .carousel-control:hover,
.home-hero .carousel-control:focus {
    opacity: 1 !important;
}

.home-hero .carousel-control .glyphicon-chevron-left,
.home-hero .carousel-control .glyphicon-chevron-right,
.home-hero .carousel-control .icon-prev,
.home-hero .carousel-control .icon-next {
    margin-top: -15px;
}

.home-hero .carousel-indicators {
    bottom: 12px;
}

/* ======================================================
   PORTADA: BIENVENIDA
   ====================================================== */
.home-intro {
    max-width: 1040px;
    padding-top: 58px;
    padding-bottom: 58px;
}

.home-intro h1 {
    margin: 0 auto 18px !important;
    font-size: 42px;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -.5px;
}

.home-intro .below-header {
    width: 92px;
    margin-top: 28px;
    margin-bottom: 30px;
    border-top: 2px solid rgba(255,255,255,.8) !important;
}

.home-intro-text {
    max-width: 980px;
    margin: 0 auto 16px;
    font-size: 18px;
    line-height: 1.72;
    color: #eef1f4;
}

/* ======================================================
   PORTADA: MÉTRICAS Y ÁREAS
   ====================================================== */
.glaciar-metrics {
    padding: 46px 0 36px !important;
    background-color: #24272e !important;
}

.areas {
    margin-top: 0 !important;
    padding-top: 34px !important;
    padding-bottom: 34px !important;
}

/* ======================================================
   TABLET
   ====================================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .home-hero .carousel,
    .home-hero .carousel-inner,
    .home-hero .carousel-inner > .item {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }

    .home-intro {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .home-intro h1 {
        font-size: 38px;
    }
}

/* ======================================================
   CELULARES
   ====================================================== */
@media (max-width: 767px) {
    .home-hero {
        border-bottom-width: 4px;
    }

    .home-hero .carousel,
    .home-hero .carousel-inner,
    .home-hero .carousel-inner > .item {
        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;
    }

    .home-hero .carousel-control {
        width: 13% !important;
    }

    .home-hero .carousel-control .glyphicon-chevron-left,
    .home-hero .carousel-control .glyphicon-chevron-right,
    .home-hero .carousel-control .icon-prev,
    .home-hero .carousel-control .icon-next {
        font-size: 28px;
    }

    .home-intro {
        padding: 42px 22px 38px;
    }

    .home-intro h1 {
        max-width: 520px;
        font-size: 32px;
        line-height: 1.12;
        letter-spacing: -.25px;
    }

    .home-intro .below-header {
        width: 74px;
        margin-top: 24px;
        margin-bottom: 26px;
    }

    .home-intro-text {
        margin-bottom: 15px;
        font-size: 16.5px;
        line-height: 1.62;
        text-align: left;
    }

    .glaciar-metrics {
        padding: 34px 0 24px !important;
    }

    .glaciar-metrics .col-xs-6 {
        min-height: 105px;
        margin-bottom: 14px !important;
    }

    .areas {
        padding-top: 28px !important;
    }

    /* WP Social Chat / QuadLayers: reduce el botón flotante para que
       interfiera menos con la lectura en pantallas pequeñas. */
    #qlwapp .qlwapp-toggle {
        padding: 9px 14px !important;
        min-height: 46px !important;
    }

    #qlwapp .qlwapp-text {
        font-size: 14px !important;
        line-height: 20px !important;
    }
}

@media (max-width: 420px) {
    .home-hero .carousel,
    .home-hero .carousel-inner,
    .home-hero .carousel-inner > .item {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }

    .home-intro {
        padding-left: 18px;
        padding-right: 18px;
    }

    .home-intro h1 {
        font-size: 30px;
    }
}

/* Usuarios que prefieren menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .home-hero .carousel-inner > .item {
        transition: none !important;
    }
}
/* ======================================================
   OCULTAR INDICADORES DEL CARRUSEL
   Se mantienen las flechas izquierda/derecha.
   ====================================================== */

.carousel-indicators {
    display: none !important;
}