@font-face {
    font-family: 'Circular Std';
    src: url('../assets/fonts/circular-std-medium-500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Goldine';
    src: url('../assets/fonts/Goldine-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@keyframes drawPath {
    from {
        stroke-dashoffset: 10000;
        fill: transparent;
    }
    70% {
        stroke-dashoffset: 0;
        fill: transparent;
    }
    to {
        stroke-dashoffset: 0;
        fill: #434141;
    }
}

:root {
    /* Colors */
    --light-blue: #CCE0EB;
    --dark-blue: #5D9EC0;
    --maroon: #434141;
    --white: #FFFFFF;
    --light-beige: #FEFBEF;
    --beige: #E9E2CC;
    
    /* Typography */
    --font-circular: 'Circular Std', sans-serif;
    --font-goldine: 'Goldine', serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    --space-5xl: 6rem;
    
    /* Other */
    --radius-sm: 0.63rem;
    --radius: 3rem;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --transition: 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-circular);
    background-color: var(--light-beige);
    color: var(--maroon);
}

header {
    background-color: var(--light-blue);
    padding: var(--space-lg) 0;
    text-align: center;

    p{
        font-family: var(--font-circular);
        font-size: var(--text-md);
        text-transform: uppercase;
        font-weight: 600;
    }
}

.hero {
    padding: var(--space-2xl) var(--space-lg);
    background: url('../assets/images/main-bg.jpg') no-repeat center center;
    background-size: cover;

    .container {
        max-width: 1390px;
        margin: 0 auto;

        .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-2xl);

            .logo{
                width: 100%;
                max-width: 272px;
                height: auto;

                img {
                    width: 100%;
                    height: auto;
                }
            }

            nav{
                display: flex;
                gap: var(--space-3xl);
                font-size: var(--text-lg);
                font-weight: 500;

                a {
                    position: relative;
                    text-decoration: none;
                    text-transform: uppercase;
                    color: inherit;

                    &.quote {
                        background-color: var(--dark-blue);
                        color: var(--white);
                        padding: var(--space-sm) var(--space-lg);
                        border-radius: var(--radius);
                        transition: background-color 0.3s ease, color 0.3s ease;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        left: 50%;
                        bottom: -5px;
                        width: 100%;
                        height: 2px;
                        background-color: var(--dark-blue);
                        transform: translateX(-50%) scaleX(0);
                        transition: transform 0.3s ease;
                    }

                    &:hover::after {
                        transform: translateX(-50%) scaleX(1);
                    }

                    &.quote {
                        &::after {
                            display: none;
                        }
                        &:hover{
                            background-color: var(--white);
                            color: var(--dark-blue);
                        }
                    }
                }
            }

            @media (max-width: 768px) {
                flex-direction: column;
                align-items: center;

                nav {
                    margin-top: var(--space-2xl);
                    font-size: var(--text-sm);
                    gap: var(--space-lg);
                }
            }

            @media (max-width: 480px) {
                nav {
                    font-size: var(--text-xs);
                    gap: var(--space-md);
                    a{
                        &.quote {
                            padding: var(--space-xs) var(--space-md);
                        }
                    }
                }
            }
        }

        h1 {
            font-family: var(--font-goldine);
            font-size: var(--text-5xl);
            color: var(--dark-blue);
            margin-top: var(--space-2xl);
            margin-bottom: var(--space-2xl);
            text-align: center;
            text-transform: uppercase;
            font-weight: 500;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-lg);
        }

        .services {
            max-width: 900px;
            margin: var(--space-2xl) auto 0;
            display: flex;
            justify-content: space-between;
            align-items: center;

            h2 {
                font-family: var(--font-goldine);
                font-size: var(--text-5xl);
                color: var(--dark-blue);
            }

            .pills-container {
                display: flex;
                flex-wrap: wrap;
                gap: var(--space-md);
                max-width: 550px;
                height: fit-content;

                .pill {
                    padding: var(--space-sm) var(--space-lg);
                    display: flex;
                    align-items: center;
                    width: fit-content;
                    background-color: var(--maroon);
                    color: var(--white);
                    border-radius: var(--radius);
                    font-size: var(--text-lg);
                    font-weight: 500;
                    text-transform: uppercase;
                    height: fit-content;
                }
            }
        }

        @media (max-width: 768px) {
            .services {
                flex-direction: column;
                align-items: center;
                gap: var(--space-lg);

                h2 {
                    text-align: center;
                }

                .pills-container {
                    justify-content: center;

                    .pill {
                        font-size: var(--text-sm);
                    }
                }
            }
        }
    }
}

.love-letters {
    background-color: var(--maroon);
    color: var(--white);
    padding: var(--space-3xl) var(--space-lg);

    .container {
        position: relative;
        max-width: 1100px;
        margin: 0 auto;

        h2 {
            font-size: var(--text-xl);
            text-transform: uppercase;
        }

        .letters {
            position: relative;
            overflow: hidden;
        }

        .letter.active {
            position: relative;
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
        }

        .letter.prev {
            transform: translateX(-100px);
        }

        .letter {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-4xl);
            position: absolute;
            width: 100%;
            opacity: 0;
            transform: translateX(100px);
            transition: all 0.6s ease;
            pointer-events: none;

            .names {
                flex: 3;

                h3{
                    font-size: var(--text-3xl);
                }

                p{
                    font-size: var(--text-lg);
                    font-style: italic;
                }
            }

            .photo {
                width: 210px;
                height: 210px;
                border-radius: 50%;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 50%;
                }
            }

            .text {
                flex: 3;
                font-size: var(--text-lg);
                line-height: 1.5;
                font-size: var(--text-md);
            }

            @media (max-width: 970px) {
                gap: var(--space-lg);
                justify-content: center;

                .names, .text {
                    flex: 1;
                    text-align: center;
                }

                .photo {
                    display: block;
                    flex: initial;
                    width: 150px;
                    height: 150px;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
            }

            @media (max-width: 768px) {
                margin-top: var(--space-lg);
                flex-direction: column;
            }
        }
    }
}

.video-section {
    background-color: var(--beige);
    padding: var(--space-4xl) var(--space-lg);

    .container {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3xl);

        .video-container {
            border-radius: var(--radius);
            video {
                width: 100%;
                height: 100%;
                border-radius: var(--radius);
                object-fit: cover;
            }
        }

        h2{
            font-family: var(--font-goldine);
            font-size: var(--text-4xl);
            color: var(--maroon);
        }

        @media (max-width: 768px) {
            flex-direction: column-reverse;
            text-align: center;
            gap: var(--space-lg);

            .video-container {
                width: 100%;
                max-width: 600px;
                margin-bottom: var(--space-lg);
            }

            h2 {
                margin-bottom: var(--space-lg);
            }
        }
    }
}

.plans {
    padding: var(--space-4xl) var(--space-lg);

    .container {
        max-width: 1255px;
        margin: 0 auto;

        .plans-cards-container{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: var(--space-2xl);

            .plan-card {
                background-color: var(--beige);
                border-radius: var(--radius-sm);
                padding: var(--space-3xl);

                .plan-number{
                    display: block;
                    font-size: var(--text-base);
                    margin-bottom: var(--space-sm);
                }

                h3 {
                    font-family: var(--font-goldine);
                    font-size: var(--text-4xl);
                    margin-bottom: var(--space-md);
                    font-weight: 400;
                }

                p {
                    font-size: var(--text-md);
                    color: var(--maroon);
                }

                ul{
                    display: flex;
                    flex-direction: column;
                    gap: var(--space-lg);
                    li{
                        list-style: none;
                    }
                }

                &.blue {
                    position: relative;
                    background-color: var(--light-blue);
                    padding-top: var(--space-5xl);

                    .plan-card-callout {
                        position: absolute;
                        top: 30px;
                        left: 0;
                        background-color: var(--dark-blue);
                        color: var(--white);
                        padding: var(--space-md) var(--space-2xl);
                        padding-left: var(--space-3xl);
                        font-weight: bold;
                        border-top-right-radius: var(--radius);
                        border-bottom-right-radius: var(--radius);
                    }
                }

                &:nth-last-of-type(1) {
                    padding-top: var(--space-lg);
                }
            }
        }
    }

    .quote-cta{
        display: block;
        appearance: none;
        background-color: transparent;
        border: none;
        margin: 0 auto;
        a {
            margin: var(--space-3xl) auto 0;
            display: inline-block;
            background-color: var(--dark-blue);
            color: var(--white);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius);
            font-size: var(--text-2xl);
            text-decoration: none;
            text-transform: uppercase;
            font-weight: 700;
            transition: all 0.3s ease;

            &:hover {
                background-color: var(--white);
                color: var(--dark-blue);
                transform: scale(1.05);
            }
        }
    }
}

.international {
    padding: var(--space-4xl) var(--space-lg);

    .container {
        max-width: 620px;
        margin: 0 auto;

        h2{
            margin-top: var(--space-lg);
            text-transform: uppercase;
            font-family: var(--font-goldine);
            font-size: var(--text-5xl);
            color: var(--dark-blue);
            text-align: center;
            font-weight: 400;
        }

        .animated-svg {
            width: 100%;
            max-width: 617px;
            height: auto;
            margin-bottom: 40px;
        }

        .animated-svg path {
            stroke: #434141;
            stroke-width: 1;
            fill: transparent;
            stroke-dasharray: 10000;
            stroke-dashoffset: 10000;
        }

        .animated-svg.animated path {
            animation: drawPath 10s ease-in-out forwards;
        }
        /* Different animation delays for multiple paths if needed */
        .animated-svg path:nth-child(1) {
            animation-delay: 0s;
        }

        .cta {
            display: block;
            appearance: none;
            background-color: transparent;
            border: none;
            margin: 0 auto;
            a {
                margin: var(--space-lg) auto 0;
                display: inline-block;
                background-color: var(--maroon);
                color: var(--white);
                padding: var(--space-sm) var(--space-md);
                border-radius: var(--radius);
                font-size: var(--text-2xl);
                text-decoration: none;
                text-transform: uppercase;
                font-weight: 700;
                transition: all 0.3s ease;

                &:hover {
                    background-color: var(--white);
                    color: var(--maroon);
                    transform: scale(1.05);
                }
            }
        }
    }
}

footer{
    background-color: var(--maroon);
    padding: var(--space-5xl);

    .container{
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .footer-info{
            display: flex;
            gap: var(--space-3xl);
            color: var(--white);
            font-size: var(--text-sm);
            line-height: 1.5;

            a{
                color: var(--white);
                text-decoration: none;
            }

            .contact {
                display: flex;
                flex-direction: column;
            }
        }

        .footer-logo {
            width: 100%;
            max-width: 260px;
            height: auto;

            img {
                width: 100%;
                height: auto;
            }
        }

        
    }
    .footer-copyright {
        margin: var(--space-3xl) auto 0;

        img {
            display: block;
            margin: 0 auto;
            width: 230px;
            height: auto;
        }
    }
    @media (max-width: 768px) {
        padding: var(--space-3xl);
        .container{
            flex-direction: column;
            align-items: center;
            gap: var(--space-lg);
    
            .footer-info {
                text-align: center;
                flex-direction: column;
                align-items: center;
                gap: var(--space-md);
            }
        }
    }
}

/* ========================================
   CUSTOM VIDEO CONTROLS STYLES
   ======================================== */

.video-container {
    position: relative;
    overflow: hidden;
}

.custom-video-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 10;
}

.custom-video-controls.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.video-control-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(67, 65, 65, 0.9);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.video-control-btn:hover {
    background: rgba(93, 158, 192, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.video-control-btn:active {
    transform: scale(0.95);
}

.video-control-btn svg {
    width: 20px;
    height: 20px;
    transition: all 0.2s ease;
}

.video-control-btn:hover svg {
    transform: scale(1.1);
}

/* Efecto ripple en los botones */
.video-control-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.video-control-btn:active::before {
    width: 40px;
    height: 40px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .custom-video-controls {
        bottom: 15px;
        right: 15px;
        gap: 8px;
    }

    .video-control-btn {
        width: 44px;
        height: 44px;
    }

    .video-control-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .custom-video-controls {
        bottom: 10px;
        right: 10px;
        gap: 6px;
    }

    .video-control-btn {
        width: 40px;
        height: 40px;
    }

    .video-control-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Focus states para accesibilidad */
.video-control-btn:focus {
    outline: 2px solid var(--dark-blue);
    outline-offset: 2px;
}

/* Reducir movimiento para usuarios con preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .custom-video-controls,
    .video-control-btn,
    .animated-svg {
        transition: none;
    }
    
    .video-control-btn:hover {
        transform: none;
    }
    
    .animated-svg:hover {
        transform: none;
    }
}

/* ========================================
   LOADING STATES
   ======================================== */

.video-control-btn.loading {
    pointer-events: none;
    opacity: 0.6;
}

.video-control-btn.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   TOOLTIP STYLES (OPCIONAL)
   ======================================== */

.video-control-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    margin-bottom: 8px;
    opacity: 0;
    animation: fadeInTooltip 0.3s ease forwards;
}

@keyframes fadeInTooltip {
    to {
        opacity: 1;
    }
}

/* ========================================
   LOVE LETTERS SLIDER
   ======================================== */

.slider-arrows {
    position: absolute;
    top: -30px;
    right: 0;
    display: flex;
    gap: var(--space-sm);
    z-index: 10;
}

.slider-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.slider-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: var(--white);
}

.slider-btn svg {
    width: 20px;
    height: 20px;
}

.slider-dots {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-2xl);
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--white);
}