/* responsive.css - Alacena para Niños (mobile-first sobre la plantilla original)
   Se carga DESPUES de styles.css. Corrige anchos fijos que desbordaban en celular. */

/* Ajustes base: solo pantallas de tableta y celular (el escritorio queda igual que antes) */
@media only screen and (max-width: 959px) {
    *, *:before, *:after { box-sizing: border-box; }
    img, video, canvas, svg { max-width: 100%; height: auto; }
    iframe { max-width: 100%; }
    audio { max-width: 100%; }

    /* Logo: nunca más ancho que la pantalla */
    #kids_header #kids_logo_block { float: none; display: block; max-width: 100%; margin: 0 0 10px; }
    #kids_logo_text, #kids_logo_text img { display: block; max-width: 100%; height: auto; }

    /* Botón "subir": dentro de la pantalla */
    #kids-back-top { right: 8px; }

}

/* Contenedores de la plantilla: fluidos en celular y tableta */
@media only screen and (max-width: 959px) {
    .l-page-width, .l-page-width.no-padding, .content-container {
        width: auto !important;
        max-width: 100%;
    }
    .l-page-width { padding-left: 12px; padding-right: 12px; }
    .l-page-width.no-padding { padding-left: 0; padding-right: 0; }
    #kids_middle_container, #kids_header, .bg-level-1, .content-container { max-width: 100%; }
}

/* Galería de recursos: tarjetas a todo el ancho en celular */
@media only screen and (max-width: 767px) {
    .gallery-item, .isotope-item, #gallery li, .isotope .isotope-item { width: 100% !important; max-width: 100% !important; position: relative !important; left: 0 !important; top: auto !important; float: none !important; }
    #gallery, .isotope { height: auto !important; }
    .border-shadow, .border-shadow.alignleft, .gallery-image, .gallery-text { max-width: 100%; }
    .border-shadow.alignleft { float: none; display: block; }
    figure { max-width: 100%; margin-left: 0; margin-right: 0; }
    .gallery-text { overflow-wrap: anywhere; }
    .vp { width: 100%; }
    /* pie de pagina y bloques de texto no se salen */
    table { max-width: 100%; display: block; overflow-x: auto; }
    pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
}