/* ==========================================================================
   1. ESTILOS GENERALES Y BASE
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: #0A0A0A;
    color: white;
    line-height: 1.4;
    overflow-x: hidden;
    font-size: 14px;
}

.container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 0;
}

/* ==========================================================================
   2. HEADER
   ========================================================================== */
.header {
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 0;
    align-items: center;
    margin-bottom: 2rem;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* ==========================================================================
   3. HERO - VERSIÓN PC (RESTAURADA)
   ========================================================================== */
.columns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 90px;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
}

.column {
    flex: 1;
    min-width: 280px;
    max-width: 50%;
    overflow: visible !important;
}

.text-column {
    flex: 1;
    min-width: 280px;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.image-column {
    flex: 1;
    min-width: 280px;
    max-width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible !important;
    position: relative;
}

.main-title {
    font-weight: 800;
    font-size: 2.2rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-transform: uppercase;
    margin-top: 0;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.subtitle {
    color: #CCCCCC;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    max-width: 500px;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ==========================================================================
   4. IMÁGENES - CONTENEDOR CON ALTURA DEFINIDA (RESTAURADO)
   ========================================================================== */
.image-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    padding: 25px 0;
    overflow: visible;
}

.main-image {
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 2;
    width: 120%;
    transform: rotate(-5deg) translate(-15px, -10px);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.30);
    transition: transform 0.8s ease-out;
}

.overlay-image {
    position: absolute;
    top: 70px;
    right: 5px;
    z-index: 3;
    width: 80%;
    transform: rotate(8deg);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.30);
    transition: transform 0.8s ease-out;
}

.reveal.active .main-image {
    transform: rotate(-5deg) translate(0, -5px);
}

.reveal.active .overlay-image {
    transform: rotate(8deg) translateX(5px);
}

/* ==========================================================================
   5. BOTÓN INSTAGRAM - COMPACTO Y ALINEADO A LA IZQUIERDA
   ========================================================================== */
.cta-button,
.btn-instagram {
    background-color: #0FFF95;
    color: #000;
    border-radius: 6px;
    padding: 0.6rem 1.4rem;
    font-weight: 700;
    border: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    width: fit-content;
    min-width: auto;
    max-width: 100%;
    white-space: nowrap;
    text-align: center;
}

.cta-button:hover,
.btn-instagram:hover {
    background-color: #0ad87b;
    transform: scale(1.05);
}

/* ==========================================================================
   6. RESTO DE SECCIONES
   ========================================================================== */
section {
    padding: 3rem 0;
}

.divider {
    border-top: 1px solid #00ff87;
    margin: 3rem auto;
    width: 97%;
}

/* ==========================================================================
   7. SECCIÓN CONCEPTO
   ========================================================================== */
.why-learnsy-background {
    margin-top: 90px;
    text-align: left;
    padding: 80px 20px;
    background: #f8f8f8;
    border-radius: 16px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.why-learnsy-background.active {
    opacity: 1;
    transform: translateY(0);
}

.why-learnsy-section {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 2rem;
}

.image-container-left {
    flex: 1;
    max-width: 45%;
    opacity: 0;
    transform: rotate(-5deg) translateX(-140px);
    transition: opacity 0.5s ease-out, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 20px 0;
    overflow: visible;
}

.why-learnsy-background.active .image-container-left {
    opacity: 1;
    transform: rotate(-5deg) translateX(-60px);
}

.learnsy-image {
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.30);
}

.text-container-right {
    flex: 1;
    max-width: 100%;
    text-align: left;
}

.main-title-learnsy {
    color: #0A0A0A;
    font-weight: 800;
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    margin-top: 10px;
    text-transform: uppercase;
}

.subtitle-learnsy {
    color: #2d2d2d;
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    margin-top: 20px;
}

/* ==========================================================================
   8. SECCIÓN PILARES
   ========================================================================== */
.pilares-zigzag {
    padding: 4rem 0;
    background-color: #0A0A0A;
}

.titulo-pilares-container {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 80px;
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.8s ease-out;
}

.titulo-pilares-container.active {
    opacity: 1;
    transform: translateY(0);
}

.pilares-title {
    color: #00ff87;
    font-weight: 800;
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.pilar-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    margin-bottom: 12rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

.pilar-card.active {
    opacity: 1;
    transform: translateY(0);
}

.pilar-card.reverse {
    flex-direction: row-reverse;
}

.pilar-img {
    flex: none;
    width: 580px;
    height: 580px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pilar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
}

.pilar-img img:hover {
    transform: scale(1.05);
}

.pilar-text {
    flex: 1;
    color: white;
}

.pilar-text h3 {
    color: #00ff87;
    font-weight: 800;
    font-size: 2.2rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.pilar-text p,
.subtitle-pilar {
    font-size: 1.1rem;
    color: #CCCCCC;
    line-height: 1.6;
}

.pilares-zigzag .pilar-card.last-pilar {
    margin-bottom: 2rem;
}

.profesor-item,
.curso-item {
    border-left: 3px solid #00ff87;
    padding-left: 16px;
    margin-bottom: 24px;
}

.materia {
    color: #f8f8f8;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.profesor {
    color: #9ca3af;
    font-size: 0.95rem;
    text-decoration: none;
    display: block;
    transition: color 0.2s ease;
}

.profesor:hover {
    color: #00ff87;
}

.curso-item .blanco {
    color: #f8f8f8;
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
}

/* ==========================================================================
   9. CARRUSEL - VERSIÓN PC
   ========================================================================== */
.equipo-section {
    margin-top: 100px;
    text-align: center;
    padding: 80px 0;
    background: #f8f8f8;
    border-radius: 24px;
    overflow: visible;
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

.equipo-section.active {
    opacity: 1;
    transform: translateY(0);
}

.equipo-title {
    color: #0A0A0A;
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 20px;
}

.equipo-gallery {
    overflow: visible;
    width: 100%;
    padding: 30px 0;
}

.equipo-track {
    display: flex;
    width: max-content;
    animation: seamlessLoop 35s linear infinite;
    gap: 0;
}

.equipo-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.equipo-link:hover {
    text-decoration: none !important;
}

.equipo-item {
    width: 320px;
    margin-right: 50px;
    flex-shrink: 0;
    position: relative;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    background-color: #1a1a1a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

.equipo-item img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
    display: block;
}

.equipo-text {
    padding: 28px 25px 35px 25px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: #dddddd;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    background-color: #1a1a1a;
    border-radius: 0 0 20px 20px;
}

.equipo-item:hover {
    transform: scale(1.06);
    box-shadow: 0 30px 65px rgba(0, 0, 0, 0.35);
    z-index: 10;
}

@keyframes seamlessLoop {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   10. SECCIÓN FINAL
   ========================================================================== */
.es-hora-de-cambiar-section {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

.es-hora-de-cambiar-section.active {
    opacity: 1;
    transform: translateY(0);
}

.cambiar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    max-width: 1150px;
    margin: 0 auto;
    padding: 6rem 20px;
}

.cambiar-text {
    flex: 1;
    max-width: 580px;
    text-align: left;
    position: relative;
}

.cambiar-text h2 {
    color: #00ff87;
    font-weight: 800;
    font-size: 3.2rem;
    margin-bottom: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cambiar-text p {
    font-size: 1.18rem;
    line-height: 1.65;
    color: #CCCCCC;
    margin-bottom: 1.5rem;
}

.cambiar-image {
    flex: 1;
    max-width: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cambiar-image img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.30);
    margin-bottom: 2rem;
}

.cambiar-image .cta-button,
.cambiar-image button,
.cambiar-image .cambiar-button {
    width: auto;
    padding: 0.65rem 2.1rem;
    font-size: 0.88rem;
    text-align: center;
    box-sizing: border-box;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.flecha-indicadora {
    position: absolute;
    width: 110px;
    height: auto;
    bottom: -15px;
    right: -30px;
    opacity: 0.8;
    animation: none;
    z-index: 5;
    pointer-events: none;
}

/* ==========================================================================
   11. CLASES DE UTILIDAD
   ========================================================================== */
.resaltar {
    color: #f89c1c;
    font-weight: 700;
    display: inline !important;
}

.verde {
    color: #00ff87;
    font-weight: 700;
}

.blanco {
    color: #f8f8f8;
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1.6;
    display: inline-block;
    letter-spacing: 0.3px;
}

.gris {
    color: #9ca3af;
    font-weight: 400;
    font-size: 17px;
    text-decoration: none;
    display: inline-block;
    padding-left: 12px;
}

/* ==========================================================================
   12. ANIMACIÓN REVEAL
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px) translateX(-15px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* ==========================================================================
   13. CONTROL DE VERSIONES PC / MÓVIL
   ========================================================================== */

/* Por defecto (PC): Mostrar versión PC, ocultar móvil */
.pc-version {
    display: flex !important;
}

.mobile-hero {
    display: none !important;
}

/* ==========================================================================
   14. MEDIA QUERIES - TABLET (768px - 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /* === PREVENIR SCROLL HORIZONTAL EN TABLET === */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .container {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 95% !important;
    }
    
    .columns,
    .why-learnsy-section,
    .pilares-zigzag,
    .cambiar-container {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .main-title {
        font-size: 1.8rem;
    }

    .subtitle {
        font-size: 1rem;
        max-width: 100%;
    }

    .image-container {
        max-width: 350px;
        padding: 20px 0;
    }

    .main-image {
        top: 25px;
        width: 115%;
        transform: rotate(-5deg) translate(-12px, -8px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    }

    .overlay-image {
        top: 60px;
        right: 8px;
        width: 78%;
        transform: rotate(8deg);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    }

    .pilar-img {
        width: 400px;
        height: 400px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    }

    .equipo-item {
        width: 280px;
        margin-right: 40px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    }

    .equipo-item img {
        height: 320px;
    }

    .equipo-text {
        min-height: 110px;
        font-size: 14px;
        padding: 20px 20px 28px;
    }

    .equipo-item:hover {
        box-shadow: 0 25px 55px rgba(0, 0, 0, 0.32);
    }

    .main-title-learnsy {
        font-size: 2.8rem;
    }

    .cambiar-text h2 {
        font-size: 2.8rem;
    }

    .cambiar-image img {
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    }

    .flecha-indicadora {
        display: none;
    }
}

/* ==========================================================================
   15. MEDIA QUERIES - MÓVIL (hasta 768px) - CON ANIMACIONES MANTENIDAS
   ========================================================================== */
@media (max-width: 768px) {
    /* === PREVENIR SCROLL HORIZONTAL EN MÓVIL === */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .container {
        overflow-x: hidden !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }
    
    .columns,
    .mobile-hero,
    .pc-version,
    .why-learnsy-section,
    .pilares-zigzag,
    .cambiar-container {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    /* Ocultar PC, mostrar móvil */
    .pc-version {
        display: none !important;
    }
    
    .mobile-hero {
        display: block !important;
    }
    
    /* Ocultar botón del header en móvil */
    .header .cta-button {
        display: none !important;
    }
    
    /* ======================================== */
    /* COLUMNAS - STACK EN MÓVIL */
    /* ======================================== */
    .columns {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: clamp(0.5rem, 2vh, 1.5rem) !important;
        margin-bottom: clamp(1.5rem, 4vh, 40px) !important;
        align-items: stretch !important;
        justify-content: center !important;
    }
    
    .column,
    .text-column,
    .image-column {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .text-column {
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .image-column {
        order: 2 !important;
    }
    
    .text-column .cta-button,
    .text-column .btn-instagram {
        order: 3 !important;
        margin-top: clamp(0.5rem, 2vh, 1.2rem) !important;
        align-self: flex-start !important;
        white-space: normal !important;
        display: inline-block !important;
        width: fit-content !important;
    }
    
    .main-title {
        font-size: clamp(1rem, 5vw, 1.6rem) !important;
        text-align: left !important;
    }
    
    .subtitle {
        font-size: clamp(0.75rem, 2.5vw, 0.95rem) !important;
        text-align: left !important;
    }
    
    .image-container {
        max-width: clamp(200px, 60vw, 300px) !important;
        aspect-ratio: 4/3 !important;
        padding: clamp(8px, 2vh, 16px) 0 !important;
        margin: 0 auto !important;
    }
    
    .main-image {
        top: clamp(8%, 2vh, 15%) !important;
        width: clamp(90%, 22vw, 115%) !important;
        transform: rotate(-5deg) translate(clamp(-3px, -0.8vw, -6px), clamp(-3px, -0.8vh, -6px)) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    }
    
    .overlay-image {
        top: clamp(18%, 4vh, 30%) !important;
        width: clamp(50%, 14vw, 75%) !important;
        transform: rotate(8deg) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    }
    
    .cta-button,
    .btn-instagram {
        font-size: clamp(0.6rem, 2vw, 0.75rem) !important;
        padding: clamp(0.3rem, 0.8vh, 0.5rem) clamp(0.6rem, 1.5vw, 1rem) !important;
        white-space: normal !important;
        display: inline-block !important;
        width: fit-content !important;
    }
    
    /* ======================================== */
    /* TEXTO - CON WORD WRAP FORZADO */
    /* ======================================== */
    
    .mobile-title {
        font-size: clamp(1rem, 5vw, 1.6rem) !important;
        text-align: left !important;
        margin: 0 !important;
        margin-bottom: 0.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
        display: block !important;
    }
    
    .mobile-subtitle {
        font-size: clamp(0.75rem, 2.5vw, 0.95rem) !important;
        text-align: left !important;
        margin: 0 !important;
        margin-bottom: 1.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
        display: block !important;
    }
    
    /* ======================================== */
    /* IMÁGENES MÓVIL - MANTENIENDO ANIMACIONES */
    /* ======================================== */
    .mobile-images {
        max-width: clamp(200px, 60vw, 300px) !important;
        aspect-ratio: 4/3 !important;
        margin: 0 auto !important;
        padding: clamp(8px, 2vh, 16px) 0 !important;
        position: relative !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    .mobile-main-image {
        position: absolute !important;
        top: clamp(8%, 2vh, 15%) !important;
        left: 0 !important;
        z-index: 2 !important;
        width: clamp(90%, 22vw, 115%) !important;
        transform: rotate(-5deg) translate(clamp(-3px, -0.8vw, -6px), clamp(-3px, -0.8vh, -6px)) !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.8s ease-out !important;
    }
    
    .mobile-overlay-image {
        position: absolute !important;
        top: clamp(18%, 4vh, 30%) !important;
        right: 0 !important;
        z-index: 3 !important;
        width: clamp(50%, 14vw, 75%) !important;
        transform: rotate(8deg) !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.8s ease-out !important;
    }
    
    .reveal.active .mobile-main-image {
        transform: rotate(-5deg) translate(0, -5px) !important;
    }
    
    .reveal.active .mobile-overlay-image {
        transform: rotate(8deg) translateX(5px) !important;
    }
    
    .mobile-btn {
        margin: 0 !important;
        margin-top: clamp(1.5rem, 6vh, 120px) !important;
        display: inline-block !important;
        align-self: flex-start !important;
        padding: clamp(0.3rem, 0.8vh, 0.5rem) clamp(0.6rem, 1.5vw, 1rem) !important;
        font-size: clamp(0.6rem, 2vw, 0.75rem) !important;
        white-space: normal !important;
        width: fit-content !important;
    }
    
    /* ======================================== */
    /* RESTO DE SECCIONES - CON ANIMACIONES */
    /* ======================================== */
    
    .why-learnsy-background {
        padding: 40px 15px !important;
        margin-top: 30px !important;
    }

    .why-learnsy-section {
        flex-direction: column !important;
        padding: 0 !important;
        gap: 1.5rem !important;
        align-items: center !important;
    }

    .image-container-left {
        max-width: 80% !important;
        margin-right: 0 !important;
        transform: rotate(0deg) translateX(0) !important;
        opacity: 0 !important;
        padding: 20px 0 !important;
        overflow: visible !important;
        transition: opacity 1.5s ease-out, transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .why-learnsy-background.active .image-container-left {
        opacity: 1 !important;
        transform: rotate(0deg) translateX(0) !important;
    }

    .learnsy-image {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
    }

    .text-container-right {
        max-width: 100% !important;
        text-align: left !important;
    }

    .main-title-learnsy {
        font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
        text-align: left !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .subtitle-learnsy {
        font-size: clamp(0.85rem, 2vw, 1rem) !important;
        text-align: left !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .titulo-pilares-container {
        margin-top: 60px !important;
        margin-bottom: 50px !important;
    }

    .pilares-title {
        font-size: clamp(1.3rem, 4vw, 1.8rem) !important;
        line-height: 1.3 !important;
        padding: 0 10px !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .pilar-card {
        flex-direction: column !important;
        gap: 1.5rem !important;
        margin-bottom: 5rem !important;
        padding: 0 1rem !important;
    }

    .pilar-card.reverse {
        flex-direction: column !important;
    }

    .pilar-img {
        width: 100% !important;
        max-width: clamp(220px, 60vw, 320px) !important;
        height: clamp(220px, 60vw, 320px) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
    }

    .pilar-text {
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .pilar-text h3 {
        font-size: clamp(1.3rem, 3.5vw, 1.8rem) !important;
        text-align: left !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .pilar-text p,
    .subtitle-pilar {
        font-size: clamp(0.85rem, 2vw, 1rem) !important;
        text-align: left !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .profesor-item,
    .curso-item {
        text-align: left !important;
        border-left: 3px solid #00ff87 !important;
        padding-left: 12px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .materia,
    .curso-item .blanco {
        font-size: clamp(0.85rem, 2vw, 1rem) !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .profesor {
        font-size: clamp(0.75rem, 1.8vw, 0.9rem) !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    /* ======================================== */
    /* CARRUSEL - MÓVIL CON ANIMACIÓN */
    /* ======================================== */
    .equipo-section {
        padding: 40px 0 !important;
        margin-top: 50px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .equipo-title {
        font-size: clamp(1.3rem, 4vw, 1.8rem) !important;
        margin-bottom: 30px !important;
        padding: 0 15px !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .equipo-gallery {
        padding: 20px 0 !important;
        overflow: hidden !important;
    }

    /* Mantener la animación del carrusel en móvil */
    .equipo-track {
        animation: seamlessLoop 25s linear infinite !important;
        overflow: visible !important;
    }

    .equipo-item {
        width: clamp(170px, 45vw, 240px) !important;
        margin-right: clamp(15px, 4vw, 30px) !important;
        border-radius: 16px !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease !important;
    }

    .equipo-item img {
        height: clamp(180px, 45vw, 260px) !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .equipo-text {
        min-height: clamp(70px, 15vh, 100px) !important;
        font-size: clamp(10px, 2.5vw, 13px) !important;
        padding: clamp(10px, 2vw, 18px) clamp(10px, 2vw, 16px) clamp(12px, 2.5vw, 22px) !important;
        border-radius: 0 0 16px 16px !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    /* Mantener hover en móvil (táctil) */
    .equipo-item:hover {
        transform: scale(1.04) !important;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.32) !important;
    }

    /* Link hover en móvil */
    .equipo-link:hover .equipo-item {
        transform: scale(1.04) !important;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.32) !important;
    }

    /* ======================================== */
    /* SECCIÓN FINAL - MÓVIL */
    /* ======================================== */
    .es-hora-de-cambiar-section {
        padding: 2rem 0 !important;
    }

    .cambiar-container {
        flex-direction: column !important;
        gap: 2rem !important;
        padding: 3rem 15px !important;
        text-align: left !important;
    }

    .cambiar-text {
        max-width: 100% !important;
        text-align: left !important;
        width: 100% !important;
    }

    .cambiar-text h2 {
        font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
        text-align: left !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .cambiar-text p {
        font-size: clamp(0.85rem, 2vw, 1rem) !important;
        text-align: left !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .cambiar-image {
        max-width: 100% !important;
    }

    .cambiar-image img {
        max-width: clamp(220px, 60vw, 320px) !important;
        margin-bottom: 1.5rem !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
    }

    .cambiar-image .cta-button,
    .cambiar-image .cambiar-button {
        padding: 0.5rem 1.5rem !important;
        font-size: 0.8rem !important;
        width: auto !important;
        display: inline-block !important;
        width: fit-content !important;
    }

    .flecha-indicadora {
        display: none !important;
    }
}

/* ==========================================================================
   16. iPHONE SE / 8 / 6/7/8 PLUS (375px - 414px)
   ========================================================================== */
@media (max-width: 480px) {
    /* === PREVENIR SCROLL HORIZONTAL EN IPHONE PEQUEÑO === */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .container {
        overflow-x: hidden !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
    }

    body {
        font-size: 12px !important;
    }

    .mobile-title {
        font-size: clamp(1rem, 4.5vw, 1.3rem) !important;
    }

    .mobile-subtitle {
        font-size: clamp(0.7rem, 2.2vw, 0.85rem) !important;
    }

    .mobile-images {
        max-width: clamp(180px, 65vw, 260px) !important;
        padding: clamp(8px, 2vh, 16px) 0 !important;
    }

    .mobile-main-image {
        top: clamp(10px, 2.5%, 20px) !important;
        width: clamp(95%, 22vw, 110%) !important;
        transform: rotate(-5deg) translate(clamp(-3px, -0.8vw, -6px), clamp(-3px, -0.8vh, -6px)) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.8s ease-out !important;
    }

    .mobile-overlay-image {
        top: clamp(18px, 5%, 45px) !important;
        right: 3px !important;
        width: clamp(55%, 16vw, 75%) !important;
        transform: rotate(8deg) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.8s ease-out !important;
    }

    .reveal.active .mobile-main-image {
        transform: rotate(-5deg) translate(0, -5px) !important;
    }
    
    .reveal.active .mobile-overlay-image {
        transform: rotate(8deg) translateX(5px) !important;
    }

    .mobile-btn {
        margin-top: clamp(1.5rem, 6vh, 140px) !important;
        padding: clamp(0.25rem, 0.8vh, 0.5rem) clamp(0.6rem, 1.5vw, 1rem) !important;
        font-size: clamp(0.6rem, 1.8vw, 0.75rem) !important;
    }

    .main-title-learnsy {
        font-size: clamp(1.3rem, 4vw, 1.8rem) !important;
    }

    .subtitle-learnsy {
        font-size: clamp(0.75rem, 2vw, 0.9rem) !important;
    }

    .pilares-title {
        font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
    }

    .pilar-img {
        max-width: clamp(180px, 55vw, 260px) !important;
        height: clamp(180px, 55vw, 260px) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
    }

    .pilar-text h3 {
        font-size: clamp(1.1rem, 3vw, 1.5rem) !important;
    }

    .equipo-title {
        font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
    }

    .equipo-item {
        width: clamp(140px, 40vw, 190px) !important;
        margin-right: clamp(12px, 3vw, 22px) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
    }

    .equipo-item img {
        height: clamp(150px, 40vw, 210px) !important;
    }

    .equipo-text {
        min-height: clamp(60px, 12vh, 85px) !important;
        font-size: clamp(9px, 2.2vw, 12px) !important;
        padding: clamp(8px, 1.5vw, 14px) clamp(8px, 1.5vw, 12px) clamp(10px, 2vw, 18px) !important;
    }

    .equipo-item:hover {
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.30) !important;
    }

    .cambiar-text h2 {
        font-size: clamp(1.3rem, 4vw, 1.8rem) !important;
    }

    .cambiar-text p {
        font-size: clamp(0.75rem, 2vw, 0.9rem) !important;
    }

    .cambiar-image img {
        max-width: clamp(180px, 55vw, 260px) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
    }

    .logo {
        font-size: clamp(1.1rem, 3vw, 1.4rem) !important;
    }

    .cta-button,
    .btn-instagram {
        font-size: clamp(0.6rem, 1.5vw, 0.75rem) !important;
        padding: clamp(0.25rem, 0.8vh, 0.4rem) clamp(0.6rem, 1.5vw, 1rem) !important;
        display: inline-block !important;
        width: fit-content !important;
    }
}

/* ==========================================================================
   17. iPHONE 12 / 13 / 14 / 15 (390px - 430px)
   ========================================================================== */
@media (min-width: 390px) and (max-width: 430px) {
    /* === PREVENIR SCROLL HORIZONTAL EN IPHONE 12/13/14/15 === */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .container {
        overflow-x: hidden !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
    }

    .mobile-title {
        font-size: clamp(1.2rem, 4.5vw, 1.5rem) !important;
    }

    .mobile-subtitle {
        font-size: clamp(0.8rem, 2.2vw, 0.95rem) !important;
    }

    .mobile-images {
        max-width: clamp(200px, 65vw, 290px) !important;
        padding: clamp(10px, 2vh, 18px) 0 !important;
    }

    .mobile-main-image {
        top: clamp(12px, 3%, 25px) !important;
        width: clamp(100%, 22vw, 115%) !important;
        transform: rotate(-5deg) translate(clamp(-4px, -0.8vw, -8px), clamp(-4px, -0.8vh, -8px)) !important;
        box-shadow: 0 15px 32px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.8s ease-out !important;
    }

    .mobile-overlay-image {
        top: clamp(20px, 5%, 50px) !important;
        right: 3px !important;
        width: clamp(55%, 16vw, 78%) !important;
        transform: rotate(8deg) !important;
        box-shadow: 0 15px 32px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.8s ease-out !important;
    }

    .reveal.active .mobile-main-image {
        transform: rotate(-5deg) translate(0, -5px) !important;
    }
    
    .reveal.active .mobile-overlay-image {
        transform: rotate(8deg) translateX(5px) !important;
    }

    .mobile-btn {
        margin-top: clamp(1.8rem, 7vh, 150px) !important;
        padding: clamp(0.3rem, 1vh, 0.5rem) clamp(0.7rem, 1.8vw, 1.1rem) !important;
        font-size: clamp(0.65rem, 2vw, 0.78rem) !important;
    }

    .main-title-learnsy {
        font-size: clamp(1.5rem, 4vw, 2rem) !important;
    }

    .subtitle-learnsy {
        font-size: clamp(0.8rem, 2vw, 0.95rem) !important;
    }

    .pilares-title {
        font-size: clamp(1.2rem, 3.5vw, 1.6rem) !important;
    }

    .pilar-img {
        max-width: clamp(200px, 55vw, 280px) !important;
        height: clamp(200px, 55vw, 280px) !important;
        box-shadow: 0 15px 32px rgba(0, 0, 0, 0.25) !important;
    }

    .pilar-text h3 {
        font-size: clamp(1.2rem, 3vw, 1.6rem) !important;
    }

    .equipo-title {
        font-size: clamp(1.2rem, 3.5vw, 1.6rem) !important;
    }

    .equipo-item {
        width: clamp(160px, 42vw, 210px) !important;
        margin-right: clamp(14px, 3vw, 26px) !important;
        box-shadow: 0 15px 32px rgba(0, 0, 0, 0.25) !important;
    }

    .equipo-item img {
        height: clamp(170px, 42vw, 240px) !important;
    }

    .equipo-text {
        min-height: clamp(65px, 13vh, 95px) !important;
        font-size: clamp(9.5px, 2.3vw, 12.5px) !important;
        padding: clamp(9px, 1.8vw, 16px) clamp(9px, 1.8vw, 14px) clamp(11px, 2.2vw, 20px) !important;
    }

    .cambiar-text h2 {
        font-size: clamp(1.4rem, 4vw, 1.9rem) !important;
    }

    .cambiar-text p {
        font-size: clamp(0.8rem, 2vw, 0.95rem) !important;
    }

    .cambiar-image img {
        max-width: clamp(200px, 55vw, 280px) !important;
        box-shadow: 0 15px 32px rgba(0, 0, 0, 0.25) !important;
    }

    .cta-button,
    .btn-instagram {
        display: inline-block !important;
        width: fit-content !important;
    }
}

/* ==========================================================================
   18. iPHONE 14 PRO MAX / 15 PRO MAX (430px - 450px)
   ========================================================================== */
@media (min-width: 430px) and (max-width: 460px) {
    /* === PREVENIR SCROLL HORIZONTAL EN IPHONE PRO MAX === */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .container {
        overflow-x: hidden !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
    }

    .mobile-title {
        font-size: clamp(1.3rem, 4.5vw, 1.6rem) !important;
    }

    .mobile-subtitle {
        font-size: clamp(0.85rem, 2.2vw, 1rem) !important;
    }

    .mobile-images {
        max-width: clamp(220px, 65vw, 310px) !important;
        padding: clamp(10px, 2vh, 20px) 0 !important;
    }

    .mobile-main-image {
        top: clamp(15px, 3%, 30px) !important;
        width: clamp(100%, 22vw, 115%) !important;
        transform: rotate(-5deg) translate(clamp(-4px, -0.8vw, -8px), clamp(-4px, -0.8vh, -8px)) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.8s ease-out !important;
    }

    .mobile-overlay-image {
        top: clamp(25px, 6%, 60px) !important;
        right: 5px !important;
        width: clamp(55%, 16vw, 78%) !important;
        transform: rotate(8deg) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.8s ease-out !important;
    }

    .reveal.active .mobile-main-image {
        transform: rotate(-5deg) translate(0, -5px) !important;
    }
    
    .reveal.active .mobile-overlay-image {
        transform: rotate(8deg) translateX(5px) !important;
    }

    .mobile-btn {
        margin-top: clamp(2rem, 7vh, 160px) !important;
        padding: clamp(0.3rem, 1vh, 0.5rem) clamp(0.8rem, 2vw, 1.2rem) !important;
        font-size: clamp(0.65rem, 2vw, 0.8rem) !important;
    }

    .cta-button,
    .btn-instagram {
        display: inline-block !important;
        width: fit-content !important;
    }
}

/* ==========================================================================
   19. MÓVIL MUY PEQUEÑO (< 360px - iPhone 4/5/SE antiguo)
   ========================================================================== */
@media (max-width: 380px) {
    /* === PREVENIR SCROLL HORIZONTAL EN MÓVIL MUY PEQUEÑO === */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .container {
        overflow-x: hidden !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
    }

    .mobile-title {
        font-size: clamp(0.85rem, 4vw, 1.1rem) !important;
    }

    .mobile-subtitle {
        font-size: clamp(0.65rem, 2vw, 0.8rem) !important;
    }

    .mobile-images {
        max-width: clamp(150px, 60vw, 210px) !important;
        padding: clamp(5px, 1.5vh, 12px) 0 !important;
    }

    .mobile-main-image {
        top: clamp(6px, 1.5%, 15px) !important;
        width: clamp(90%, 20vw, 110%) !important;
        transform: rotate(-5deg) translate(clamp(-2px, -0.5vw, -5px), clamp(-2px, -0.5vh, -5px)) !important;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.8s ease-out !important;
    }

    .mobile-overlay-image {
        top: clamp(12px, 3%, 35px) !important;
        right: 3px !important;
        width: clamp(50%, 14vw, 72%) !important;
        transform: rotate(8deg) !important;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.8s ease-out !important;
    }

    .reveal.active .mobile-main-image {
        transform: rotate(-5deg) translate(0, -5px) !important;
    }
    
    .reveal.active .mobile-overlay-image {
        transform: rotate(8deg) translateX(5px) !important;
    }

    .mobile-btn {
        margin-top: clamp(1rem, 5vh, 120px) !important;
        padding: clamp(0.2rem, 0.6vh, 0.35rem) clamp(0.5rem, 1.2vw, 0.8rem) !important;
        font-size: clamp(0.5rem, 1.5vw, 0.65rem) !important;
    }

    .equipo-item {
        width: clamp(120px, 35vw, 160px) !important;
        margin-right: clamp(10px, 2vw, 18px) !important;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25) !important;
    }

    .equipo-item img {
        height: clamp(130px, 35vw, 190px) !important;
    }

    .equipo-text {
        min-height: clamp(50px, 10vh, 75px) !important;
        font-size: clamp(8px, 2vw, 11px) !important;
        padding: clamp(6px, 1.2vw, 12px) clamp(6px, 1.2vw, 10px) clamp(8px, 1.5vw, 16px) !important;
    }

    .pilar-img {
        max-width: clamp(150px, 50vw, 220px) !important;
        height: clamp(150px, 50vw, 220px) !important;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25) !important;
    }

    .pilares-title {
        font-size: clamp(0.8rem, 3vw, 1.1rem) !important;
    }

    .image-container-left {
        max-width: 90% !important;
        padding: 10px 0 !important;
    }

    .main-title-learnsy {
        font-size: clamp(1.1rem, 3.5vw, 1.4rem) !important;
    }

    .subtitle-learnsy {
        font-size: clamp(0.65rem, 1.8vw, 0.8rem) !important;
    }

    .cambiar-text h2 {
        font-size: clamp(1.1rem, 3.5vw, 1.4rem) !important;
    }

    .cambiar-text p {
        font-size: clamp(0.65rem, 1.8vw, 0.8rem) !important;
    }

    .cambiar-image img {
        max-width: clamp(150px, 50vw, 220px) !important;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25) !important;
    }

    .logo {
        font-size: clamp(0.9rem, 2.5vw, 1.2rem) !important;
    }

    .cta-button,
    .btn-instagram {
        display: inline-block !important;
        width: fit-content !important;
    }
}

/* ==========================================================================
   20. MÓVIL GRANDE / TABLET PEQUEÑA (460px - 768px)
   ========================================================================== */
@media (min-width: 460px) and (max-width: 768px) {
    /* === PREVENIR SCROLL HORIZONTAL EN MÓVIL GRANDE === */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .container {
        overflow-x: hidden !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }

    .mobile-title {
        font-size: clamp(1.5rem, 4.5vw, 2rem) !important;
    }

    .mobile-subtitle {
        font-size: clamp(0.9rem, 2.2vw, 1.1rem) !important;
    }

    .mobile-images {
        max-width: clamp(280px, 65vw, 400px) !important;
        padding: clamp(15px, 2.5vh, 25px) 0 !important;
    }

    .mobile-main-image {
        top: clamp(20px, 4%, 35px) !important;
        width: clamp(100%, 22vw, 115%) !important;
        transform: rotate(-5deg) translate(clamp(-6px, -1vw, -12px), clamp(-6px, -1vh, -12px)) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.8s ease-out !important;
    }

    .mobile-overlay-image {
        top: clamp(35px, 8%, 75px) !important;
        right: 8px !important;
        width: clamp(55%, 16vw, 78%) !important;
        transform: rotate(8deg) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.8s ease-out !important;
    }

    .reveal.active .mobile-main-image {
        transform: rotate(-5deg) translate(0, -5px) !important;
    }
    
    .reveal.active .mobile-overlay-image {
        transform: rotate(8deg) translateX(5px) !important;
    }

    .mobile-btn {
        margin-top: clamp(2.5rem, 8vh, 180px) !important;
        padding: clamp(0.4rem, 1.2vh, 0.6rem) clamp(1rem, 2.5vw, 1.4rem) !important;
        font-size: clamp(0.7rem, 2vw, 0.9rem) !important;
    }

    .equipo-item {
        width: clamp(200px, 45vw, 280px) !important;
        margin-right: clamp(20px, 4vw, 35px) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
    }

    .equipo-item img {
        height: clamp(220px, 45vw, 310px) !important;
    }

    .equipo-text {
        min-height: clamp(80px, 15vh, 115px) !important;
        font-size: clamp(11px, 2.5vw, 14px) !important;
        padding: clamp(14px, 2.5vw, 22px) clamp(14px, 2.5vw, 20px) clamp(16px, 3vw, 28px) !important;
    }

    .equipo-item:hover {
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.32) !important;
    }

    .cta-button,
    .btn-instagram {
        display: inline-block !important;
        width: fit-content !important;
    }
}

/* ==========================================================================
   21. ESTILOS PARA LINKS DEL CARRUSEL
   ========================================================================== */
.equipo-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.equipo-link:hover {
    text-decoration: none !important;
}

/* ==========================================================================
   22. HOVER DEL CARRUSEL - VERSIÓN PC
   ========================================================================== */
.equipo-link:hover .equipo-item {
    transform: scale(1.06);
    box-shadow: 0 30px 65px rgba(0, 0, 0, 0.35) !important;
    z-index: 10;
}

/* ==========================================================================
   23. HOVER DEL CARRUSEL - VERSIÓN TABLET
   ========================================================================== */
@media (max-width: 1024px) {
    .equipo-link:hover .equipo-item {
        transform: scale(1.05) !important;
        box-shadow: 0 25px 55px rgba(0, 0, 0, 0.32) !important;
    }
}

/* ==========================================================================
   24. HOVER DEL CARRUSEL - VERSIÓN MÓVIL
   ========================================================================== */
@media (max-width: 768px) {
    .equipo-link:hover .equipo-item {
        transform: scale(1.04) !important;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.32) !important;
    }
}