/* ============================= */
/*  ESTILOS RESPONSIVE TABLETS   */
/* ============================= */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Ajustar logo */
    .logo {
        width: 260px;
        margin-top: 10px;
    }

    /* Botones más grandes y centrados */
    .btn {
        flex: 1 1 45%;
        max-width: 220px;
        padding: 16px 12px;
        font-size: 16px;
    }

    .btn img {
        width: 32px;
        height: 32px;
    }

    /* Ajustar pizarra de noticias */
    .contenedor-pizarra {
        height: 380px;
    }

    .imagen-pizarra {
        width: 120%;
    }

    .contenedor-texto {
        justify-content: center;
        left: 10%;
        top: 40%;
    }

    .titulo-noticia,
    .texto-pizarra {
        width: 50%;
        position: relative;
        left: 30px;
        font-size: 1.4rem;
    }

    .noticia {
        margin: 5px;
        position: relative;
    }

    /* Texto más equilibrado */
    .texto-pizarra {
        font-size: 1.1rem;
    }

    /* Ajustar franja arcoiris */
    .rainbow-bar {
        height: 48px;
    }

    /* ==== SECCIÓN DIRECTORA ==== */
    .seccion-directora {
        padding: 40px 6%;
    }

    .contenedor-directora {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .imagen-directora {
        width: 300px;
    }

    .columna-texto {
        column-count: 1;
        /* se lee mejor en tablet */
        width: 90%;
    }

    .columna-texto h3 {
        font-size: 1.3em;
        text-align: center;
    }

    .columna-texto p {
        font-size: 1.05rem;
        line-height: 1.4;
    }

    /* === Reels === */
    .reels {
        padding: 0 80px;
    }

    /* ==== GALERÍA ==== */
    .contenedor-galeria {
        flex-direction: column;
        padding: 20px;
    }

    .bloques-galeria {
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .bloque {
        width: 90%;
        max-width: 600px;
    }

    .bloque h2 {
        font-size: 1.2em;
        text-align: center;
    }

    .grid-fotos {
        width: 93%;
        max-width: 400px;
        gap: 6px;
    }

    .grid-fotos img {
        height: 45px;
    }

    /* ==== MODAL ==== */
    .modal-contenido {
        max-width: 90%;
        max-height: 80%;
    }

    .cerrar {
        top: 20px;
        right: 20px;
        font-size: 1.6em;
    }

    .flecha {
        font-size: 2em;
    }

    /* ==== NIVELES ==== */
    .semicirculo {
        width: 480px;
        height: 240px;
    }

    #niveles .nivel {
        font-size: 1.6rem;
    }

    #niveles .n1,
    #niveles .n2,
    #niveles .n3,
    #niveles .n4 {
        width: 90px;
    }

    .n2,
    .n3 {
        top: 50px !important;
    }

    .n1,
    .n4 {
        top: 155px !important;
    }

    /* ==== TALLERES ==== */
    /* Contenedor más reducido */
    .carousel-talleres-wrapper {
        max-width: 95%;
        margin: 30px auto;
    }

    /* Ajuste del contenido */
    .carousel-talleres-container {
        padding: 20px 30px;
    }

    /* Imagen más compacta */
    .carousel-talleres-image {
        max-height: 200px;
        margin-bottom: 15px;
    }

    /* Texto más equilibrado */
    .carousel-talleres-content h2 {
        font-size: 1.4rem;
    }

    .carousel-talleres-content p {
        font-size: 1rem;
        line-height: 1.4;
    }

    /* Botones más pequeños y cercanos */
    .carousel-talleres-button {
        width: 30px;
        height: 30px;
        font-size: 1.3rem;
    }

    .carousel-talleres-button.left {
        left: 5px;
    }

    .carousel-talleres-button.right {
        right: 5px;
    }

    /* ==== CONTACTANOS ==== */
    #contactos h2 {
        font-size: 2rem;
    }

    #form-contacto {
        max-width: 90%;
        padding: 20px;
    }

    .form-group input,
    .form-group textarea {
        width: 95%;
        font-size: 0.95rem;
    }

    #form-contacto button {
        padding: 10px 25px;
        font-size: 0.95rem;
    }

    /* ==== FOOTER ==== */
    .footer-container {
        margin: 0px 10px;
    }

    .footer-column h4 {
        font-size: 1rem;
    }

    .footer-column p {
        font-size: 0.9rem;
    }

    .footer-icon {
        width: 30px;
        height: 30px;
    }

    .footer-bottom {
        font-size: 0.85rem;
    }

    /* ==== BOTÓN WHATSAPP ==== */
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 50px;
        right: 50px;
    }

    .whatsapp-float img {
        width: 32px;
        height: 32px;
    }
}