@media (max-width: 1024px) {

    /* SECCION HERO */
    .hero {
        height: 150vh;
    }

    .hero h1 {
        font-size: 3rem;
        transition: all 0.3s ease;
    }

    .hero img {
        width: 60%;
    }

    .hero p {
        font-size: 1.8rem;
    }

    /* SECCION HISTORIA */
    .about-section {
        padding: 80px;
    }

    /* Columna Imagen */
    .about-image {
        position: relative;
    }

    .about-image img {
        width: 80%;
    }

    .image-experience-badge {
        bottom: -20px;
        right: 8vw;
    }

    /* GALERIA */
    .main-viewer {
        grid-template-columns: 1fr 1.5fr; /* Reducimos un poco el espacio del texto */
        padding: 25px;
        gap: 20px;
    }

    .viewer-text h2 {
        font-size: 2.2rem; /* Título un poco más pequeño */
    }

    .viewer-image img {
        height: 350px; /* Reducimos altura para que quepa mejor */
    }

    /* TIENDA */
    .main-view {
        max-width: 400px;
        height: 400px; /* Ajuste proporcional */
    }
}

@media (max-width: 768px) {

    /* SECCION HERO */
    .hero {
        height: 120vh;
        width: 100%;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero img {
        width: 60%;
    }

    .hero p {
        font-size: 1.5rem;
    }

    /* SECCION HISTORIA */
    .about-section {
        padding: 50px;
    }

    .about-container {
        grid-template-columns: 1fr;
    }

    /* Columna Imagen */
    .about-image {
        order: 2;
        position: relative;
    }

    .about-image img {
        width: 60%;
    }

    .image-experience-badge {
        bottom: -20px;
        right: 32vw;
    }

    /* GALERIA */
    .gallery-page {
        padding: 100px 20px 30px; /* Menos padding lateral */
    }

    /* Cambio a una sola columna: Texto arriba, Imagen abajo */
    .main-viewer {
        grid-template-columns: 1fr; 
        text-align: center;
        padding: 20px;
    }

    .viewer-text h2 {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .viewer-image img {
        height: 300px; /* Altura optimizada para tablets */
    }

    /* Ajuste del carrusel de miniaturas */
    .carousel-container {
        flex-direction: row; /* Mantenemos la tira horizontal */
        margin-top: 15px;
    }

    .thumb {
        min-width: 100px;
        height: 70px;
    }

    /* TIENDA */
    .shop-page {
        padding: 80px 15px;
    }

    /* Botones de navegación en dos filas o más */
    .shop-nav {
        gap: 8px;
        padding: 0 10px;
    }

    .cat-btn {
        padding: 8px 15px;
        font-size: 0.75rem;
        flex: 1 1 30%; /* Ayuda a que se acomoden en filas proporcionalmente */
        min-width: 100px;
    }

    /* Proporción vertical de la imagen principal (~40vh) */
    .main-view {
        width: 90%;
        max-width: 350px;
        height: 40vh; /* Ocupa el 40% del alto de la pantalla */
        margin-bottom: 15px;
    }

    /* Talles: quitamos el aspecto de "caja de botón" pesada */
    .size-selector {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }

    .size-btn {
        background: transparent; /* Más liviano visualmente */
        border: none;
        border-bottom: 2px solid #333;
        padding: 10px 15px;
        font-size: 0.9rem;
    }

    .size-btn.selected {
        background: transparent;
        border-bottom-color: #d32f2f;
        color: #d32f2f;
    }

    /* Botón de reserva más chico y proporcionado */
    .reserve-btn {
        width: 70%; /* Ocupa el 70% del ancho */
        font-size: 1rem;
        padding: 12px 20px;
    }

}

@media (max-width: 480px) {

    /* SECCION HERO */
    .hero {
        height: 100vh;
    }

    .hero h1 {
        font-size: 1.6rem;
    }

    .hero img {
        width: 70%;
    }

    .hero p {
        font-size: 1.2rem;
    }


    /* SECCION HISTORIA */
    .about-section {
        padding: 30px;
    }

    .about-container {
        grid-template-columns: 1fr;
    }

    /* Ajuste de la medalla de experiencia para que no tape todo */
    .image-experience-badge {
        position: relative;
        bottom: 16.5vw;
        right: -10vw;
        padding: 10px;
        margin: 20px auto 0;
        width: fit-content;
    }

    .image-experience-badge span {
        font-size: 1rem;
    }

    .about-text h2 {
        font-size: 1.8rem;
    }

    .about-image img {
        width: 70%;
        box-shadow: 10px 10px 0px var(--primary-red);
        /* Sombra más chica */
    }

/* SECCION DISCIPLINAS */
    .grid-container{
        padding: 10px;
    }

    /* SECCION HORARIOS */
    .schedule-table td {
        font-size: 0.85rem;
        padding: 15px 5px;
    }

    .practical-info {
        padding: 50px 10px;
    }

    .section-header h2 {
        font-size: 1.4rem;
    }

    /* GALERIA */
    .gallery-header h1 {
        font-size: 1.8rem;
    }

    /* Filtros en varias líneas si no entran */
    .gallery-filters {
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-btn {
        padding: 6px 15px;
        font-size: 0.8rem;
    }

    .viewer-text h2 {
        font-size: 1.5rem;
    }

    .viewer-image img {
        height: 220px; /* Imagen más pequeña para que no ocupe toda la pantalla */
    }

    /* Flechas del carrusel más pequeñas para ganar espacio */
    .nav-arrow {
        padding: 10px;
    }

    .thumb {
        min-width: 80px;
        height: 60px;
    }

    /* Espaciado del texto descriptivo si lo tienes */
    .viewer-text p {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* TIENDA */
.shop-logo {
        height: 120px; /* Reducimos el logo para ganar espacio arriba */
        margin-bottom: 20px;
    }

    /* Categorías más compactas */
    .cat-btn {
        padding: 6px 10px;
        font-size: 0.7rem;
        flex: 1 1 40%;
    }

    /* Imagen principal en móvil */
    .main-view {
        height: 35vh; /* Un poco menos para que quepa el botón de abajo sin scroll */
    }

    /* Miniaturas de colores más pequeñas */
    .options-grid img {
        width: 50px;
        height: 50px;
    }

    /* Botón de reserva */
    .reserve-btn {
        width: 85%; /* Un poco más ancho en pantallas muy pequeñas para facilitar el clic */
        font-size: 0.9rem;
        margin-top: 10px;
    }

    /* Selector de talles más minimalista */
    .size-btn {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

}