/*
Theme Name: WAG Theme
Theme URI:
Author: Kintsugi LAB
Author URI:
Description: World Aviation Group theme
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wag-theme
Tags:
*/

/* WordPress FSE Color Classes - From theme.json */
.has-primary-background-color {
    background-color: #00275C !important;
}

/* Text color fallbacks (en caso de que Global Styles no inyecte las clases) */
.has-primary-color {
    color: #00275C !important;
}
.has-secondary-color {
    color: #009FEE !important;
}
.has-tertiary-color {
    color: #EE4266 !important;
}
.has-primary-dark-color {
    color: #001737 !important;
}
.has-secondary-light-color {
    color: #94D3F2 !important;
}
.has-black-color {
    color: #000000 !important;
}
.has-white-color {
    color: #ffffff !important;
}

.has-main-gradient-gradient-background {
    background: linear-gradient(180deg, #00275C 19.82%, #001737 100%) !important;
}

.has-tertiary-background-color {
    background-color: #EE4266 !important;
}

/* WAG Custom gradient classes for Tailwind */
.from-wag-primary {
    --tw-gradient-from: #00275C;
    --tw-gradient-to: #00275C00;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-wag-primary-dark {
    --tw-gradient-to: #001737;
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* WAG CTA Button Styles */
.wp-block-button__link {
    border-radius: 8px !important;
    padding: 8px 24px !important;
}

/* Override WordPress default button padding and radius */
.wp-element-button {
    border-radius: 8px !important;
    padding: 8px 24px !important;
}

/* Star Animation Keyframes */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

/* Generic Animation Classes */
.star-animation {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.star-animation.animate {
    opacity: 1 !important;
}

/* Star-specific animations based on position */
[data-scroll-animation="stars"] .star-animation:nth-child(1).animate {
    animation: fadeInLeft 0.6s ease-out forwards;
}

[data-scroll-animation="stars"] .star-animation:nth-child(2).animate {
    animation: fadeInLeft 0.6s ease-out forwards;
}

[data-scroll-animation="stars"] .star-animation:nth-child(3).animate {
    animation: fadeInUp 0.6s ease-out forwards;
}

[data-scroll-animation="stars"] .star-animation:nth-child(4).animate {
    animation: fadeInRight 0.6s ease-out forwards;
}

[data-scroll-animation="stars"] .star-animation:nth-child(5).animate {
    animation: fadeInRight 0.6s ease-out forwards;
}

/* Generic animation classes for other elements */
.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-down {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animation trigger classes */
.fade-in-left.animate,
.fade-in-right.animate,
.fade-in-up.animate,
.fade-in-down.animate {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* Course selector specific animations */
[data-scroll-animation="course-selector"] .curso-item.animate {
    opacity: 1 !important;
}

[data-scroll-animation="indicators"] .indicator.animate {
    opacity: 1 !important;
}

/* Force Exo font on course selector items */
.curso-item .font-exo {
    font-family: var(--font-exo) !important;
}

.curso-item p {
    font-family: var(--font-exo) !important;
}

/* Smooth background transitions for formacion section */
.formacion-bg {
    transition: opacity 0.5s ease-in-out !important;
}

/* Ensure smooth transitions for all course content */
.curso-description {
    transition: opacity 0.3s ease-in-out;
}

.curso-button {
    transition: all 0.3s ease-in-out;
}

/* Scrollbar personalizado moderno para el texto de cursos */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 0;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Estilos para el overlay de cursos */
#curso-overlay {
    backdrop-filter: blur(8px);
}

#curso-panel {
    will-change: transform;
}

/* Tabs del overlay */
.curso-tab {
    position: relative;
    padding-bottom: 4px;
    transition: all 0.3s ease;
}

.curso-tab.active {
    color: white !important;
}

.curso-tab:not(.active) {
    opacity: 0.7;
}

.curso-tab:not(.active):hover {
    opacity: 1;
}

/* Contenido de tabs */
.curso-tab-content {
    animation: fadeIn 0.4s ease-in-out;
}

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

/* Contenedor de texto con altura fija */
.curso-text-container {
    position: relative;
}

/* Gradiente fade-out sutil en la parte inferior cuando hay scroll */
.curso-text-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(transparent, rgba(0, 39, 92, 0.1));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.curso-text-container.has-scroll::after {
    opacity: 1;
}

/* ========================== */
/* EXPERIENCIAS DE VUELO      */
/* ========================== */

.experiencias-vuelo-section {
    position: relative;
    padding: 4rem 0;
}

.experiencias-section {
    width: 100%;
}

.experiencias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.experiencia-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.experiencia-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.experiencia-card__media {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.experiencia-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.experiencia-card:hover .experiencia-card__image {
    transform: scale(1.05);
}

.experiencia-card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.badge--popular {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    color: white;
}

.badge--premium {
    background: linear-gradient(135deg, #667EEA, #764BA2);
    color: white;
}

.experiencia-card__content {
    padding: 1.5rem;
}

.experiencia-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.experiencia-card__title {
    font-family: 'Exo 2', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #00275C;
    margin: 0;
}

.experiencia-card__price {
    text-align: right;
}

.price-from {
    display: block;
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.price-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #EE4266;
}

.experiencia-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.experiencia-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.875rem;
    color: #333;
}

.experiencia-features .icon {
    font-size: 1.25rem;
}

.experiencia-card__description {
    margin: 1rem 0;
    color: #666;
    font-size: 0.875rem;
    line-height: 1.5;
}

.experiencia-card__actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.experiencia-card__actions button {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-family: 'Exo 2', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #00275C;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.125rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.experiencias-cta {
    margin-top: 4rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f5f5f5, #ffffff);
    border-radius: 16px;
    text-align: center;
}

.cta-text {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: #333;
}

/* Overlay de configuración */
#flight-experience-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

#flight-experience-overlay.hidden {
    display: none !important;
}

#flight-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

/* Responsive */
@media (max-width: 768px) {
    .experiencias-grid {
        grid-template-columns: 1fr;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .experiencia-card__actions {
        flex-direction: column;
    }
}

/* Estilos para el slider de testimonios - Diseño fluido y responsive */
.testimonials-slider {
    position: relative;
    width: 100%;
}

.testimonial-container {
    position: relative;
    width: 100%;
}

.testimonial-viewport {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.testimonial-track {
    display: flex;
    width: 300%; /* Se ajustará dinámicamente por JS */
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.testimonial-slide {
    flex: 0 0 auto;
    width: 33.333%; /* Se ajustará dinámicamente por JS */
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

/* Navegación de testimonios - Responsive */
.testimonial-nav {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (min-width: 1024px) {
    .testimonial-nav {
        width: 3rem;
        height: 3rem;
    }
}

.testimonial-nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.testimonial-nav:active {
    transform: scale(0.95);
}

.testimonial-nav svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: white;
}

@media (min-width: 1024px) {
    .testimonial-nav svg {
        width: 2rem;
        height: 2rem;
    }
}

/* Indicadores de testimonios */
.testimonial-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.testimonial-dot {
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.testimonial-dot:hover {
    transform: scale(1.2);
}

/* Estilos para el contenido del testimonio */
.testimonial-slide > div {
    width: 100%;
    max-width: 100%;
}

.testimonial-slide .flex {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

/* Responsive para testimonios */
@media (max-width: 768px) {
    .testimonial-slide .flex {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .testimonial-slide .max-w-\[480px\] {
        max-width: 100%;
    }

    .testimonial-viewport {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 640px) {
    .testimonial-viewport {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .testimonial-nav {
        width: 2rem;
        height: 2rem;
    }

    .testimonial-nav svg {
        width: 1rem;
        height: 1rem;
    }
}