/*
 * Adaptación a móvil y tablet.
 * Solo se aplica en pantallas más estrechas que la web original (1000px),
 * así que en escritorio todo se ve igual que antes.
 * Muchos estilos de las páginas están escritos dentro del HTML (style="..."),
 * por eso aquí hace falta !important para poder sobrescribirlos.
 */
/*
 * Pie siempre abajo (en todos los tamaños de pantalla).
 * Las páginas tenían alturas fijas de 1000px y márgenes a mano para colocar el pie;
 * aquí la página crece con su contenido y, si es corta, el pie baja hasta el final de la ventana.
 */
html,
body {
    height: auto !important;
    min-height: 100%;
}

#contenedor {
    height: auto !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#contenedor > * {
    flex-shrink: 0;
}

/* el bloque de contenido mide lo que mida su contenido */
#contenedor > #panelDos {
    height: auto !important;
}

/* estos separadores solo servían para empujar el pie */
#contenedor > .clear {
    display: none;
}

#contenedor > #pie {
    margin-top: auto !important;
}

/* texto algo más grande y con más interlineado (era de 12px muy apretado) */
.texto p,
.texto2 p,
.one p,
ul.metodos,
ul.lista {
    font-size: 13px !important;
    line-height: 20px !important;
}

/* aire entre el contenido y el pie */
#contenedor > #panelSocial,
#contenedor > #panelFoto {
    margin-bottom: 30px !important;
}

@media (max-width: 1020px) {

    html,
    body {
        height: auto !important;
    }

    body {
        font-size: 15px;
    }

    /* Todos los bloques pasan a ocupar el ancho disponible, uno debajo de otro */
    #contenedor,
    #contenedor div {
        width: auto !important;
        max-width: 100%;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: static !important;
    }

    #contenedor {
        min-height: 100vh;
    }

    #contenedor img {
        max-width: 100%;
        height: auto;
    }

    /* Cabecera */
    #cabecera {
        padding: 12px 16px 0;
    }

    #cabecera img {
        height: auto;
        width: 420px;
    }

    /* Menú: los botones se reparten en varias filas */
    #panelUno {
        padding: 12px 12px 4px !important;
    }

    #panelUno ul li {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    #panelUno a {
        font-size: 14px !important;
    }

    /* Contenido */
    #panelDos,
    #panelSocial,
    #panelFoto,
    #panelDireccion,
    #contenedor > #titulo,
    #contenedor > #resultados {
        padding: 0 16px !important;
    }

    #contenedor h1 {
        margin-left: 0 !important;
        margin-top: 24px;
        text-align: center;
        font-size: 20px !important;
    }

    #contenedor hr {
        width: 100% !important;
        max-width: 500px;
        margin: 8px auto 0 !important;
    }

    #contenedor #foto {
        margin: 16px auto !important;
        text-align: center;
    }

    .texto p,
    .texto2 p,
    .one p,
    #texto p,
    #texto2 p,
    #texto3 p,
    #texto4 p,
    #resultados p {
        font-size: 15px !important;
        line-height: 1.55 !important;
        text-align: left !important;
    }

    #panelDos ul.lista {
        text-align: left;
        padding-left: 20px;
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    #panelDos ul.lista li {
        margin-bottom: 6px;
    }

    img.linguaskill-logo {
        margin: 0 !important;
    }

    .clear {
        height: 24px !important;
    }

    /* Portada: carrusel de fotos y logos */
    #panelDos iframe[src="wowslider.html"] {
        width: 100% !important;
        max-width: 600px !important;
        height: auto !important;
        aspect-ratio: 2 / 1;
    }

    #panelFoto {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 24px;
        padding: 16px !important;
    }

    #panelFoto #izq,
    #panelFoto #der {
        padding: 0 !important;
    }

    /* Los dos logos, uno al lado del otro */
    #panelFoto {
        flex-wrap: nowrap;
        gap: 16px;
    }

    #panelFoto #izq {
        flex: 0 1 220px;
    }

    #panelFoto #izq img {
        width: 100% !important;
    }

    #panelFoto #der {
        flex: 0 0 auto;
    }

    #panelFoto #der img {
        width: 96px !important;
    }

    /* Lista de métodos en Clases de inglés */
    ul.metodos {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    /* Mapa de contacto */
    #panelDos iframe[src*="google.com/maps"] {
        width: 100%;
        height: 320px;
    }

    /* Pie */
    #pie {
        padding: 16px;
    }

    #pie p {
        padding-top: 0;
        font-size: 13px;
        line-height: 1.5;
    }
}

/* En móvil los botones de redes ocupan dos filas */
@media (max-width: 560px) {
    #panelSocial iframe[src="botones.html"] {
        height: 120px !important;
    }

    #cabecera img {
        width: 100%;
    }
}

/* Móvil: el menú pasa a ser una fila de pestañas que se desliza de lado */
@media (max-width: 700px) {
    #panelUno {
        padding: 8px 0 0 !important;
        border-bottom: 1px solid #e2e2e2;
    }

    #panelUno ul li {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 8px;
        /* difuminado a la derecha para que se note que hay más pestañas */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }

    #panelUno ul li::-webkit-scrollbar {
        display: none;
    }

    /* hueco al final para que la última pestaña no quede bajo el difuminado */
    #panelUno ul li::after {
        content: "";
        flex: 0 0 24px;
    }

    #panelUno a {
        flex: 0 0 auto;
        background-image: none !important;
        padding: 12px 14px 10px !important;
        color: #666666 !important;
        font-size: 15px !important;
        white-space: nowrap;
        border-bottom: 3px solid transparent;
        top: 0 !important;
    }

    #panelUno a.botonInicio { --tab: #7ea300; }
    #panelUno a.botonQuienes { --tab: #e22092; }
    #panelUno a.botonIngles { --tab: #2981e4; }
    #panelUno a.botonIdiomas { --tab: #e62727; }
    #panelUno a.botonApoyo { --tab: #ff5c00; }
    #panelUno a.botonTalleres { --tab: #f0a000; }

    #panelUno a[aria-current="page"],
    #panelUno a:hover {
        color: var(--tab) !important;
        border-bottom-color: var(--tab);
    }
}