/* ============================================
   AMERICAN ACADEMY - STYLESHEET
   ============================================ */

/* --- RESET & BASE --- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* --- ANIMACIONES --- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Clases de animación */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-slide-up {
    animation: slideInUp 0.7s ease-out;
}

.fade-in-up {
    opacity: 0;
    animation: slideInUp 0.8s ease-out forwards;
}

.fade-in-left {
    opacity: 0;
    animation: slideInLeft 0.8s ease-out forwards;
}

.fade-in-right {
    opacity: 0;
    animation: slideInRight 0.8s ease-out forwards;
}

.scale-in {
    opacity: 0;
    animation: scaleIn 0.6s ease-out forwards;
}

/* Delays para elementos secuenciales */
.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

/* --- HERO SECTION --- */
.hero-section {
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 50%, #e5e7eb 100%);
    min-height: 90vh;
    display: flex;
    align-items: center;
}

/* --- ICONOS MEJORADOS --- */
.icon-container-enhanced {
    transition: all 0.3s ease;
}

.idioma-card:hover .icon-container-enhanced {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 74, 173, 0.3);
}

/* --- WHATSAPP FLOTANTE --- */
.whatsapp-float {
    animation: pulse-whatsapp 2s infinite;
}

@keyframes pulse-whatsapp {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(32, 176, 56, 0.7);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(32, 176, 56, 0);
    }
}

/* --- SCROLL TO TOP BUTTON --- */
.scroll-to-top {
    transition: opacity 0.3s ease-in-out;
}

.scroll-to-top.show {
    display: flex !important;
    opacity: 1 !important;
}

/* --- EFECTOS HOVER EN CARDS --- */
.idioma-card {
    transition: all 0.3s ease;
}

.program-card {
    transition: all 0.3s ease;
}

/* --- SMOOTH SCROLL --- */
.scroll-link {
    cursor: pointer;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .hero-section {
        min-height: auto;
        padding: 2rem 0;
    }
}

/* --- ANIMACIONES AL HACER SCROLL --- */
.fade-in-up,
.fade-in-left,
.fade-in-right,
.scale-in {
    opacity: 0;
}

.fade-in-up.visible,
.fade-in-left.visible,
.fade-in-right.visible,
.scale-in.visible {
    opacity: 1;
}

/* --- FORMAS DECORATIVAS --- */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Animaciones para bolas decorativas con diferentes posicionamientos */
@keyframes floatSlow {
    0%, 100% {
        transform: translate(-50%, -50%);
    }
    25% {
        transform: translate(-50%, -50%) translateY(-20px) scale(1.05);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-30px) scale(1.08);
    }
    75% {
        transform: translate(-50%, -50%) translateY(-20px) scale(1.05);
    }
}

@keyframes floatMedium {
    0%, 100% {
        transform: translateX(50%);
    }
    25% {
        transform: translateX(50%) translateY(-15px) scale(1.06);
    }
    50% {
        transform: translateX(50%) translateY(-35px) scale(1.1);
    }
    75% {
        transform: translateX(50%) translateY(-15px) scale(1.06);
    }
}

@keyframes floatFast {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    25% {
        transform: translateY(-12px) scale(1.04);
    }
    50% {
        transform: translateY(-25px) scale(1.08);
    }
    75% {
        transform: translateY(-12px) scale(1.04);
    }
}

@keyframes pulseSlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.2;
    }
}

@keyframes pulseSlowBottomRight {
    0%, 100% {
        transform: translate(50%, 50%) scale(1);
        opacity: 0.1;
    }
    50% {
        transform: translate(50%, 50%) scale(1.2);
        opacity: 0.2;
    }
}

@keyframes floatTopRight {
    0%, 100% {
        transform: translate(50%, -50%);
    }
    25% {
        transform: translate(50%, -50%) translateY(-18px) scale(1.05);
    }
    50% {
        transform: translate(50%, -50%) translateY(-30px) scale(1.09);
    }
    75% {
        transform: translate(50%, -50%) translateY(-18px) scale(1.05);
    }
}

@keyframes floatBottomLeft {
    0%, 100% {
        transform: translate(-50%, 50%);
    }
    25% {
        transform: translate(-50%, 50%) translateY(-15px) scale(1.04);
    }
    50% {
        transform: translate(-50%, 50%) translateY(-28px) scale(1.08);
    }
    75% {
        transform: translate(-50%, 50%) translateY(-15px) scale(1.04);
    }
}

@keyframes floatBottomRight {
    0%, 100% {
        transform: translate(50%, 50%);
    }
    25% {
        transform: translate(50%, 50%) translateY(-20px) scale(1.06);
    }
    50% {
        transform: translate(50%, 50%) translateY(-35px) scale(1.12);
    }
    75% {
        transform: translate(50%, 50%) translateY(-20px) scale(1.06);
    }
}

.animate-float-slow {
    animation: floatSlow 10s ease-in-out infinite;
}

.animate-float-medium {
    animation: floatMedium 8s ease-in-out infinite;
    animation-delay: 1.5s;
}

.animate-float-fast {
    animation: floatFast 6s ease-in-out infinite;
    animation-delay: 0.8s;
}

.animate-pulse-slow {
    animation: pulseSlow 9s ease-in-out infinite;
    animation-delay: 2s;
}

.animate-pulse-slow-bottom-right {
    animation: pulseSlowBottomRight 9s ease-in-out infinite;
    animation-delay: 1s;
}

.animate-float-top-right {
    animation: floatTopRight 8.5s ease-in-out infinite;
    animation-delay: 1s;
}

.animate-float-bottom-left {
    animation: floatBottomLeft 9.5s ease-in-out infinite;
    animation-delay: 0.5s;
}

.animate-float-bottom-right {
    animation: floatBottomRight 10.5s ease-in-out infinite;
    animation-delay: 2.5s;
}

.hero-section > div > div:first-child {
    animation: float 6s ease-in-out infinite;
}

/* --- MENU MOBILE --- */
#mobile-menu {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* --- TRANSICIONES SUAVES --- */
* {
    transition: color 0.3s ease, background-color 0.3s ease;
}

button,
a {
    transition: all 0.3s ease;
}

/* --- CUSTOM SCROLLBAR --- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #004AAD;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #F13434;
}

/* --- TYPEWRITER EFFECT --- */
.typewriter-text {
    display: inline;
    position: relative;
}

.typewriter-text::after {
    content: '|';
    display: inline;
    margin-left: 2px;
    animation: blink 0.7s infinite;
    font-weight: 400;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* Colores para cada idioma/programa */
.typewriter-text.ingles-adultos {
    color: #004AAD;
}

.typewriter-text.ingles-adulto-mayor {
    color: #20B038;
}

.typewriter-text.ingles-kids {
    color: #FFE221;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.typewriter-text.ingles-children {
    color: #F13434;
}

.typewriter-text.frances {
    color: #F13434;
}

.typewriter-text.portugues {
    color: #20B038;
}

.typewriter-text.aleman {
    color: #004AAD;
}

.typewriter-text.japones {
    color: #F13434;
}

.typewriter-text.italiano {
    color: #20B038;
}

/* ===================================
   ESTILOS PARA SWIPER CARRUSELES
   =================================== */
.swiper {
    padding: 20px 0;
    overflow: hidden;
}

.swiper-wrapper {
    align-items: stretch;
}

.swiper-slide {
    height: auto;
    display: flex;
}

.swiper-slide > div {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.swiper-button-next,
.swiper-button-prev {
    color: white !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 24px;
}

.swiper-pagination-bullet {
    background: white;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: white;
    opacity: 1;
}

/* Ajustes para sección de beneficios */
.benefits-swiper {
    overflow: hidden;
}

/* Ajustes para sección de idiomas */
.languages-swiper {
    overflow: hidden;
}

.languages-swiper .swiper-button-next,
.languages-swiper .swiper-button-prev {
    color: #004AAD !important;
}

.languages-swiper .swiper-pagination-bullet {
    background: #004AAD;
    opacity: 0.5;
}

.languages-swiper .swiper-pagination-bullet-active {
    background: #004AAD;
    opacity: 1;
}

/* Ajustes para sección de programas */
.programs-swiper {
    overflow: hidden;
}

.programs-swiper .swiper-button-next,
.programs-swiper .swiper-button-prev {
    color: #004AAD !important;
}

.programs-swiper .swiper-pagination-bullet {
    background: #004AAD;
    opacity: 0.5;
}

.programs-swiper .swiper-pagination-bullet-active {
    background: #004AAD;
    opacity: 1;
}

/* Ajustes para sección de áreas */
.areas-swiper {
    overflow: hidden;
}

.areas-swiper .swiper-button-next,
.areas-swiper .swiper-button-prev {
    color: #004AAD !important;
}

.areas-swiper .swiper-pagination-bullet {
    background: #004AAD;
    opacity: 0.5;
}

.areas-swiper .swiper-pagination-bullet-active {
    background: #004AAD;
    opacity: 1;
}