/* =====================================================================
   AJUSTES PARA CELULAR - TODO EL SITIO

   Esta hoja la carga BarraNavegacion.php, que se incluye en todas las
   paginas, asi que lo que se escriba aca vale para el sitio entero.
   Solo contiene reglas de celular: en escritorio no cambia nada.
   ===================================================================== */

@media (max-width: 767px) {

    /* ---- Que nada se salga de la pantalla ----
       Varias secciones usan 100vw o corrimientos de la animacion de
       entrada. Si algo se pasa unos pixeles del borde, el celular deja
       arrastrar la pagina de costado y se ve una franja vacia. */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Ninguna imagen mas ancha que su lugar. */
    img, video, iframe { max-width: 100%; }

    /* ---- Aire en los costados ----
       El contenido pegado al borde se lee incomodo y se toca peor. */
    .container { padding-left: 18px; padding-right: 18px; }

    /* ---- Titulos ----
       Estos titulos traen el tamano escrito en el atributo style (42 y
       48px), pensado para escritorio: en un celular parten las palabras.
       Por eso hay que bajarlos con !important, uno por uno; los titulos
       que ya se resuelven por CSS no se tocan, cada pagina tiene el suyo
       ajustado. */
    .opiniones-google { padding: 50px 0 !important; }
    .opiniones-google h2 { font-size: 26px !important; }
    .seccion-cabanas-nueva h1 { font-size: 27px !important; }
    .seccion-cabanas-nueva > .container-fluid > p { font-size: 15px !important; }

    /* ---- Texto ----
       16px es el minimo comodo de lectura en pantalla chica, y ademas
       evita que iPhone haga zoom solo al tocar un campo. */
    body { font-size: 16px; }

    /* ---- Botones y enlaces con area de toque razonable ---- */
    .btn, button, input[type="submit"] { min-height: 46px; }

    /* ---- Formularios ----
       Con menos de 16px, iOS hace zoom al enfocar el campo y despues no
       vuelve al ancho original: la pagina queda corrida. */
    input, select, textarea { font-size: 16px !important; }

    /* ---- Pie de pagina ----
       Las tres columnas quedan una debajo de la otra: centradas y con
       aire entre ellas se leen mucho mejor que pegadas a la izquierda. */
    .pie .col2,
    .pie .col3 {
        text-align: center;
        margin-bottom: 26px;
    }
    /* Los links del menu no van en el pie: en celular repetian la barra
       de navegacion y alargaban el pie sin sumar nada. */
    .pie .col1 { display: none; }
    .pie .col2 {
        border: none !important;
        padding-top: 10px;
        padding-bottom: 4px;
    }
    .pie .col3 ul { padding-left: 0; }
    .pie .col3 ul li { display: inline-block; }
    .pie .col3 ul li a {
        width: 46px;
        height: 46px;
        line-height: 46px;
    }

    /* La onda decorativa del pie, mas baja: en celular ocupaba un tercio
       de la pantalla sin decir nada. */
    .pie-wave svg { height: 28px; }

    /* ---- Fotos de portada ----
       Igual que la de galeria: 250px de alto, la foto entera con 'cover'
       y apoyada justo debajo de la barra fija.

       Cada pagina trae el alto de escritorio (572, 600, 613, 650px)
       escrito con !important en el atributo style de la foto, y a eso no
       le gana ninguna hoja de estilos: el contenedor se achicaba pero la
       foto seguia midiendo lo mismo, asi que se veia recortada y muy
       ampliada. 'max-height' si le gana a 'height', por eso el tope va
       por ahi.

       'html body' sube la especificidad para ganarle a las reglas de cada
       pagina, que tambien usan !important y se cargan despues que esta. */
    html body #slider-wrapper {
        height: 250px !important;
        min-height: 0 !important;
        max-height: 250px !important;
        margin-top: var(--altura-navbar, 75px) !important;
        overflow: hidden !important;
    }
    html body #slider-wrapper .bx-wrapper,
    html body #slider-wrapper .bx-viewport,
    html body #slider-wrapper .bxslider,
    html body #slider-wrapper .bxslider li {
        height: 250px !important;
        max-height: 250px !important;
    }
    html body #slider-wrapper .bxslider li {
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
}

/* Pantallas muy chicas (iPhone SE y similares). */
@media (max-width: 380px) {
    .container { padding-left: 14px; padding-right: 14px; }
    .opiniones-google h2, .seccion-cabanas-nueva h1 { font-size: 24px !important; }
}