/******************************************************************************
 *      Web:            Villa de Ines                                         *
 *      Hoja:           responsive.css                                        *
 *      Descripcion:    Adaptacion responsive del layout fijo (96em).         *
 *                      Se carga DESPUES de main.css y solo sobreescribe      *
 *                      reglas dentro de media queries; el diseño desktop     *
 *                      permanece intacto por encima de 1000px.               *
 *****************************************************************************/

/* =========================================================== */
/* = TABLET Y MOVIL  (hasta 1000px) — apila columnas         = */
/* =========================================================== */
@media only screen and (max-width: 1000px) {

    /* Cajas y medias fluidas SOLO al apilar (no toca desktop) */
    *, *:before, *:after { box-sizing: border-box; }
    img { max-width: 100%; height: auto; }

    /* el diseño usa font:x-small (~10px) de base; en movil se queda
       pequeño, asi que subimos la base y todo escala en proporcion */
    body { border-top-width: 1em; font-size: 13px; }

    /* --- Estructura global: todo a ancho completo --- */
    #wrapper { width: auto; max-width: 100%; margin: 0 auto; }

    /* --- Cabecera: logo y menu apilados --- */
    #header { overflow: visible; }

    #logo,
    body.home #logo {
        float: none;
        width: auto;
        height: auto;
        padding: 1.2em 1.5em 1.5em;
        border: none;
        text-align: center;
    }
    #logo strong { height: auto; }
    #logo strong span { height: auto; line-height: 1.2em; }
    #logo strong a { font-size: 4.5em; line-height: 1em; }      /* desktop usa line-height:0 */
    #logo span.l { display: block; }

    /* Menu principal: barra horizontal que envuelve, sin las
       imagenes de cabecera ni el alto fijo de 20em */
    #main_menu,
    #main_menu.cl1, #main_menu.cl2, #main_menu.cl3, #main_menu.cl4,
    #main_menu.cl5, #main_menu.cl6, #main_menu.cl7, #main_menu.cl8,
    #main_menu.cl9 {
        margin: 0;
        height: auto;
        overflow: visible;
        background: none;
        display: flex;
        flex-wrap: wrap;
    }
    #main_menu li { float: none; width: auto; height: auto; flex: 1 1 33%; }
    #main_menu li a {
        position: static;
        font-size: 1.3em;
        height: 3em;
        line-height: 3em;
        border-bottom: 0.1em solid #FFF;
    }
    /* anula el padding/alto enorme del hover y del activo de desktop */
    #main_menu li a:hover, #main_menu li a:active,
    #main_menu li.active a:link, #main_menu li.active a:visited,
    #main_menu li.active a:hover, #main_menu li.active a:active {
        padding: 0;
        background-image: none;
    }

    /* --- Columnas principales apiladas --- */
    #sideA {
        float: none;
        width: auto;
        padding: 0 0 1em;
    }
    #sideA strong { position: static; margin: 0; display: block; padding: 1em 1.5em 0; }
    #sideA h1 {
        width: auto;
        height: auto;
        line-height: 1.1em;
        padding: 0.2em 0.6em 0.4em;
        border-top: none;
    }
    /* submenu de seccion como lista a ancho completo */
    #sideA ul { border-bottom: none; }

    #container { width: auto; margin: 0; overflow: visible; }

    #content {
        float: none;
        width: auto;
        padding: 2em 1.5em 3em;
    }
    /* h2/h3 usan margenes negativos calculados para el ancho fijo */
    #content h2 { margin-left: 0; margin-right: 0; padding-left: 1.6em; height: auto; line-height: 1.4em; }
    #content h3 { margin-right: 0; }
    #content div.pf,
    #content div.big_pf { margin-left: 0; margin-right: 0; padding-right: 0; }
    /* imagenes de contenido a ancho completo */
    #content div.pf img,
    #content div.big_pf img,
    #content p img {
        float: none;
        display: block;
        width: 100%;
        height: auto;
        margin: 0 0 1em;
    }
    #content div.big_pf p { float: none; width: auto; margin: 0; padding: 1em 0; }

    /* --- SideB (banners, fotos, facebook) a ancho completo --- */
    #sideB {
        float: none;
        width: auto;
        margin: 0 0 2em;
        padding: 0 1.5em;
    }
    /* banners del sidebar a ancho completo */
    #sideB div.museo a { width: 100%; }
    #sideB div.museo img { display: block; width: 100%; height: auto; }
    /* rejilla de fotos al azar: ocupa todo el ancho repartido en columnas */
    #sideB div.last_photos ul { width: auto; display: flex; flex-wrap: wrap; }
    #sideB .last_photos li { float: none; flex: 1 1 20%; padding: 0.1em; }
    #sideB .last_photos li a:link, #sideB .last_photos li a:visited,
    #sideB .last_photos li a:hover, #sideB .last_photos li a:active { width: 100%; height: auto; border: none; }
    #sideB .last_photos li a img,
    #sideB .last_photos li a:hover img, #sideB .last_photos li a:active img { width: 100%; height: auto; margin: 0; }
    #sideB div.follow iframe { max-width: 100%; }

    /* --- Pie: se elimina la maquetacion con margenes negativos --- */
    #footer {
        height: auto;
        border-top: none;
        margin: 0;
        padding: 2.5em 0;
    }
    #footer .center { width: auto; padding: 0 1.5em; }
    #footer #msg {
        float: none;
        width: auto;
        height: auto;
        margin: 1.5em 0 0;
        padding: 1.5em;
    }
    #footer ul { width: auto; padding: 0 0 1em; }

    /* Banda decorativa roja: estorba al apilar */
    #band { display: none; }

    /* ---- HOME ---- */
    body.home { background: #EFEEE0; }
    #home {
        min-width: 0;
        max-width: 100%;
        min-height: 0;
        margin: 0;
        overflow: visible;
    }
    #home strong {
        position: static;
        width: auto;
        margin: 0;
        left: auto;
        top: auto;
        font-size: 2.6em;
        line-height: 1.3em;
        padding: 0.6em 0.5em;
        text-align: center;
    }
    #home strong span { font-size: 1.6em; }
    /* el carrusel JS depende de anchos fijos: en movil mostramos
       las imagenes apiladas y ocultamos los controles */
    #home #carrusel_img { position: static; width: 100%; height: auto; }
    #home #carrusel_img li { float: none; width: 100%; }
    #home #carrusel_img li img { display: block; width: 100%; }
    #home span.l, #home span.r { display: none; }
    #carrusel { width: auto; height: auto; margin: 0; }
    #carrusel #pasos { width: auto; }
    #carrusel .paso { float: none; width: auto; }
    #carrusel .paso .label { width: auto; padding: 1.5em; text-align: left; }
    #carrusel span.mas, #carrusel span.menos { display: none; }

    /* ---- COMO LLEGAR (mapa) ---- */
    .como_llegar #content { width: auto; }
    #content_mapa { width: auto; padding: 2em 1.5em; }
    #content_mapa form {
        position: static;
        width: auto;
        height: auto;
        padding: 1.5em 0 0;
        border-left: none;
    }
    #content_mapa form input { float: none; width: 100%; }
    #map { width: 100%; margin: 1.5em 0 0; }

    /* ---- VISITA GUIADA (mapa con chinchetas absolutas) ---- */
    /* No reflota: permitimos scroll horizontal para que siga usable */
    body.visita #container { overflow-x: auto; }
    #visita { min-width: 50em; }
    .flag { position: relative; width: auto; margin: 1em 1.5em; top: auto; }
    .flag img { width: 100%; margin: 0 0 1em; }
    #view_streets { position: static; width: auto; margin: 1em 1.5em; }

    /* ---- GALERIA / PLAYER ---- */
    #content.player { padding: 0 1.5em 3em; }
    #content.player .dsc { float: none; width: auto; padding: 0; }
    #content.player dl { float: none; width: auto; }
    div#player { width: 100%; }
    #thumbs { width: 100%; }

    /* ---- LIBRO DE VISITAS ---- */
    .libro #container { width: auto; }
    .libro #content p.entradilla { float: none; width: auto; height: auto; padding: 2em 1.5em; }
    .libro #content span.trigger { float: none; width: auto; }
    .libro form,
    .contacto form { width: auto; margin: 0; }
    .libro form textarea,
    .contacto form textarea { width: 100%; }
    #libro { width: auto; }
    #libro li.firma { float: none; width: auto; }
}


/* =========================================================== */
/* = MOVIL  (hasta 600px) — un solo elemento de menu por fila = */
/* =========================================================== */
@media only screen and (max-width: 600px) {

    #main_menu li { flex: 1 1 50%; }
    #logo strong a { font-size: 3.6em; }

    #content { padding: 1.5em 1em 2.5em; }
    #sideB { padding: 0 1em; }

    /* listas de contenido y formularios mas compactos */
    .libro form input,
    .libro form label span,
    .contacto form input,
    .contacto form label span { font-size: 1.5em; }

    #visita { min-width: 40em; }
}