@charset "UTF-8";
/* Estilos móviles y tablet. Todo va dentro de media queries: en escritorio (>=1220px) no se aplica nada */

@media (max-width: 1219px) {

/*base*/
body {overflow-x: hidden}
.centrado {width: auto; max-width: 100%; padding: 0}
.sombra {width: auto}

/*logo: estático y centrado arriba del todo*/
.logo {position: static; width: auto; height: auto; margin: 0; padding: 15px 10px; top: auto; box-sizing: border-box}
.logo img {max-width: 60%; height: auto !important; margin-top: 15px !important}
.logo > br {display: none}
.logo span {display: block; margin-top: 15px}

/*slider: fluido. Solo se tocan tamaños; posición y opacidad las controla el JS de Muse (fundido)*/
#slidertop {width: 100% !important; height: 40vw !important; max-height: 260px; overflow: hidden}
#slidertop .Container {width: 100% !important; height: 100% !important; overflow: hidden}
#slidertop .Container img {width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover}
.textotitular {max-width: none; left: 10px; right: 10px; bottom: 30px; font-size: 0.8em}
.Thumb {left: calc(100% - 105px); margin-top: calc(min(40vw, 260px) - 24px); margin-left: 0; margin-right: 10px}

/*menu: en filas, sin JS, enlaces táctiles*/
.fondomenu {width: auto; height: auto; padding: 0; overflow: visible}
.fondomenu > .menu {display: flex; flex-wrap: wrap; justify-content: center}
.fondomenu .menu a {display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; box-sizing: border-box}

/*texto*/
.zonatexto {width: auto}
.texto {width: auto; padding: 20px}
.texto img {max-width: 100%; height: auto}
.texto iframe {max-width: 100%}
.texto iframe[src*="google"] {width: 100% !important; height: 350px !important}

/*cajas flotantes con imagen (index, yoga-iyengar) y contenedor Foxyform: centradas, sin float*/
.texto div[style*="float:right"] {float: none !important; position: static !important; display: block; width: fit-content; max-width: 100%; margin: 0 auto 20px !important; overflow-x: auto}
.texto form, .texto form table {max-width: 100%}

/*tablas de horarios: scroll horizontal propio si no caben*/
.texto table {display: block; overflow-x: auto}

/*galería de centro: miniaturas en fila que se reparte (flex-wrap)*/
.texto table.vacia {overflow: visible}
.texto table.vacia tbody {display: flex; flex-wrap: wrap; justify-content: center}
.texto table.vacia tr {display: contents}
.texto table.vacia th {display: block; height: auto; padding: 6px}
.texto table.vacia th:empty {display: none}

/*zona lateral AEYI: bloque verde al final*/
.zonaenlaces {position: static; width: auto; height: auto !important; min-height: 0; margin: 0}
.enlaces {position: static; width: auto; top: auto; left: auto; padding: 20px}
.enlaces img {max-width: 100%; height: auto !important}
.enlaces div[style*="width:300px"] {width: auto !important; max-width: 100%}

}

@media (max-width: 600px) {

/*tipografía y tablas*/
h1 {font-size: 1.5em}
.texto {text-align: left}
td, th {padding: 6px 4px; font-size: 0.85em}
.texto table.vacia th {padding: 4px}

/*slider: sin puntos (el swipe de Muse sigue activo) y cita más pequeña*/
.Thumb {display: none}
.textotitular {font-size: 0.65em; padding: 4px 6px; bottom: 6px}

}