/* =====================================================================
   ALTO DE LAS PORTADAS EN COMPUTADORA - TODO EL SITIO

   Esta hoja la carga BarraNavegacion.php, igual que movil.css. Iguala la
   foto de arriba de todo de cada pagina a la de Ubicacion: 600px de foto,
   apoyada justo debajo de la barra. Solo vale en computadora; en tablet
   y celular cada pagina sigue con su propio alto.

   Alcanza solo a las portadas marcadas con la clase "portada-pagina"
   (las 8 que se cambian desde el panel: Portadas). Hay paginas viejas que
   tambien usan #slider-wrapper y no se tocan.

   Para cambiar el alto de todas a la vez se toca --alto-portada. Ojo si
   se sube de 600: Servicios, Actividades y Ubicacion traen el alto de la
   foto escrito con !important en el atributo style, y a eso no le gana
   ninguna hoja; habria que tocarlo alla.

   Los selectores empiezan con "html body" a proposito: cada pagina trae
   su alto con !important en un <style> que aparece despues de esta hoja,
   y a igual peso gana el ultimo. Con un poco mas de peso gana esta.
   ===================================================================== */

@media (min-width: 992px) {

    :root { --alto-portada: 600px; }

    /* ---- La foto arranca justo debajo de la barra ----
       main.css deja 70px de relleno arriba del body y la barra mide 94:
       en Inicio, Cabanas y Servicios la foto quedaba con 24px tapados. */
    body:has(.portada-pagina) { padding-top: 0 !important; }

    /* Con el id adentro: Inicio y Cabanas fijan "#slider-wrapper { margin: 0
       !important }", y un id pesa mas que cualquier cantidad de clases. */
    html body #slider-wrapper.portada-pagina,
    html body div.portada-pagina {
        margin-top: var(--altura-navbar, 94px) !important;
    }

    /* ---- Portadas con carrusel ----
       --portada-aire-abajo es una franja extra debajo de la foto, para la
       pagina que la use (Ubicacion la tiene, bajo su degradado blanco). */
    html body #slider-wrapper.portada-pagina {
        height: calc(var(--alto-portada) + var(--portada-aire-abajo, 0px)) !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    html body #slider-wrapper.portada-pagina .bx-wrapper,
    html body #slider-wrapper.portada-pagina .bx-viewport,
    html body #slider-wrapper.portada-pagina .bxslider,
    html body #slider-wrapper.portada-pagina .bxslider li {
        height: var(--alto-portada) !important;
        max-height: var(--alto-portada) !important;
    }

    /* ---- Portadas de una sola foto (Reservas, Galeria, Guia) ---- */
    html body div.portada-pagina:not(#slider-wrapper) {
        height: var(--alto-portada) !important;
    }
}