/* =========================
   EXPERIENCIAS PAGE STYLES
   ========================= */

/* Main page container */
.experiencias-page {
    min-height: 100vh;
    position: relative;
    background: #fff; /* Ensure next sections have a solid background */
}

/* Default background (before selection) */
/* .experiencias-page.bg-default {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* Region-specific backgrounds for Hero */
.experiencias-hero.bg-noa {
    background: linear-gradient(135deg, #924636 0%, #ba612c 50%, #e9a63d 100%);
}

.experiencias-hero.bg-litoral {
    background: linear-gradient(135deg, #607558 0%, #924636 50%, #085e68 100%);
}

.experiencias-hero.bg-cuyo {
    background: linear-gradient(135deg, #a36c2a 0%, #7d6b38 50%, #cbc4b3 100%);
}

.experiencias-hero.bg-patagonia {
    background: linear-gradient(135deg, #085e68 0%, #cbc4b3 50%, #43544c 100%);
}

.experiencias-hero.bg-buenosaires {
    background: linear-gradient(135deg, #07606b 0%, #05454d 100%);
}

.experiencias-hero.bg-default {
     background-image: url('../img/experiencias/diseno.webp');
     background-size: cover;
     background-position: center;
}

/* Hero Section */
.experiencias-hero {
    min-height: 100vh;
    padding-top: 50px; /* Space for the floating capsule navbar */
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Ensure shards don't spill out */
    transition: background 0.8s ease;
    z-index: 1; /* Create stacking context */
}

/* Map Container */
.map-container {
    position: relative;
}

.argentina-map-wrapper {
    max-width: 500px;
    margin: 0 auto;
    padding: 2rem;

    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.argentina-map-wrapper object {
    width: 100%;
    height: auto;
    display: block;
}

/* SVG Map Styles (applied via JavaScript to SVG elements) */
.argentina-map .destination-marker {
    cursor: pointer;
    transition: all 0.3s ease;
}

.argentina-map .destination-marker:hover {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

.argentina-map .flight-path {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2;
    fill: none;
    transition: stroke 0.3s ease;
}

.argentina-map .flight-path.active {
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 3;
}


/* Airplane Marker */
.map-airplane-icon-iguazu {
    position: absolute;
    top: 22%;
    /* Adjusted for "between BA and Iguazu" */
    right: 21%;
    /* Moved right to sit on line */
    width: 45px;
    z-index: 20;
    transform: rotate(-30deg);
    /* Pointing NE */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    pointer-events: none;
    /* Let clicks pass through to map */
    animation: floatPlane 3s ease-in-out infinite;
}

@keyframes floatPlane {

    0%,
    100% {
        transform: translateY(0) rotate(-30deg);
    }

    50% {
        transform: translateY(-5px) rotate(-30deg);
    }
}

/* Salta Airplane Marker */
.map-airplane-icon-salta {
    position: absolute;
    top: 22%;
    left: 49%;
    width: 45px;
    z-index: 20;
    transform: rotate(-70deg);
    /* Adjusted to point to Salta (NNW) */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    pointer-events: none;
    animation: floatPlaneSalta 3s ease-in-out infinite;
    animation-delay: 1.5s;
    /* Offset animation */
}

@keyframes floatPlaneSalta {

    0%,
    100% {
        transform: translateY(0) rotate(-70deg);
    }

    50% {
        transform: translateY(-8px) rotate(-70deg) translateX(-5px);

    }
}

/* Mendoza Airplane Marker */
.map-airplane-icon-mendoza {
    position: absolute;
    top: 35%;
    left: 48%;
    width: 45px;
    z-index: 20;
    transform: rotate(-125deg);
    /* Pointing West (Mendoza) */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    pointer-events: none;
    animation: floatPlaneMendoza 3s ease-in-out infinite;
    animation-delay: 0.8s;
    /* Offset animation */
}

@keyframes floatPlaneMendoza {

    0%,
    100% {
        transform: translateY(0) rotate(-125deg);
    }

    50% {
        transform: translateY(-5px) rotate(-125deg) translateX(-8px);
    }
}

/* Bariloche Airplane Marker */
.map-airplane-icon-bariloche {
    position: absolute;
    top: 46%;
    left: 35%;
    width: 45px;
    z-index: 20;
    transform: rotate(-160deg);
    /* Pointing SW (Bariloche) */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    pointer-events: none;
    animation: floatPlaneBariloche 3s ease-in-out infinite;
    animation-delay: 2.2s;
    /* Offset animation */
}

@keyframes floatPlaneBariloche {

    0%,
    100% {
        transform: translateY(0) rotate(-160deg);
    }

    50% {
        transform: translateY(-8px) rotate(-160deg) translateX(-5px);
    }
}

/* Calafate Airplane Marker */
.map-airplane-icon-calafate {
    position: absolute;
    top: 65%;
    left: 31%;
    width: 45px;
    z-index: 20;
    transform: rotate(-185deg);
    /* Pointing SSW (Calafate) */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    pointer-events: none;
    animation: floatPlaneCalafate 3s ease-in-out infinite;
    animation-delay: 2.9s;
    /* Offset animation */
}

@keyframes floatPlaneCalafate {

    0%,
    100% {
        transform: translateY(0) rotate(-185deg);
    }

    50% {
        transform: translateY(-8px) rotate(-185deg) translateX(-5px);
    }
}

/* Ushuaia Airplane Marker */
.map-airplane-icon-ushuaia {
    position: absolute;
    top: 75%;
    left: 40%;
    width: 45px;
    z-index: 20;
    transform: rotate(-210deg);
    /* Pointing South (Ushuaia) */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    pointer-events: none;
    animation: floatPlaneUshuaia 3s ease-in-out infinite;
    animation-delay: 3.5s;
    /* Offset animation */
}

@keyframes floatPlaneUshuaia {

    0%,
    100% {
        transform: translateY(0) rotate(-210deg);
    }

    50% {
        transform: translateY(-8px) rotate(-210deg) translateX(-5px);
    }
}

/* Madryn Airplane Marker */
.map-airplane-icon-madryn {
    position: absolute;
    top: 46%;
    left: 53%;
    width: 45px;
    z-index: 20;
    transform: rotate(-180deg);
    /* Pointing South (Madryn) */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    pointer-events: none;
    animation: floatPlaneMadryn 3s ease-in-out infinite;
    animation-delay: 2.5s;
    /* Offset animation */
}

@keyframes floatPlaneMadryn {

    0%,
    100% {
        transform: translateY(0) rotate(-180deg);
    }

    50% {
        transform: translateY(-8px) rotate(-180deg) translateX(-5px);
    }
}


@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Initial Message */

/* =========================
   PREMIUM EXPERIENCES SECTION
   ========================= */

#premium-experiences {
    padding-top: 120px !important;
    /* Fix navbar overlap */
    padding-bottom: 50px !important;
}

.premium-content-wrapper {
    min-height: 600px;
    /* Ensure consistent content height across all tabs */
}

.premium-tabs-container {
    background-color: transparent !important;
    border: 2px solid #487895;
    /* Matching typical light bg color darkness or slightly darker for visibility */
}

.premium-tab {
    cursor: pointer;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    /* Prevent layout shift */
    background-color: transparent;
    /* Explicitly remove default button background */
}

.premium-tab:hover:not(.active) {
    color: #fff !important;
}

.premium-tab.active {
    background-color: #487895 !important;
    color: #fff !important;
    border-color: #487895 !important;
    /* Current bg color (dark) becomes border */
}

.premium-main-img-wrapper {
    height: 630px !important;
    width: 100%;
}

.premium-sec-img-wrapper {
    height: 375px !important;
    width: 100%;
}

.premium-main-img-wrapper img,
.premium-sec-img-wrapper img {
    transition: transform 0.8s ease;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.premium-content-wrapper:hover .premium-main-img-wrapper img {
    transform: scale(1.05);
}

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

.letter-spacing-2 {
    letter-spacing: 2px;
}

.min-vh-50 {
    min-height: 50vh;
}

/* Animations */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

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

.initial-message {
    padding: 3rem 2rem;
}

/* Animation for flight path drawing */
@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

/* Smooth transitions for all interactive elements */
.experiencias-page * {
    transition-property: background, background-color, border-color, color, fill, stroke;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Override for specific animations that need different timing */
.experiencias-page .flight-path {
    transition-duration: 0.6s;
}

/* =========================
   NEW 3-CARD LAYOUT
   ========================= */

.experiences-new-layout {
    position: relative;
    height: 600px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-end;
    gap: 20px;
    padding-top: 50px;
    perspective: 1000px;
    /* For 3D flip */
}

.experience-card-new {
    position: relative;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* Initial state for animation */
    opacity: 0;
    transform: translateX(100px);
}

/* Card Sizes & Positioning based on user image */
/* Large Card: Top Right */
.card-large {
    width: 400px;
    height: 280px;
    z-index: 10;
    margin-bottom: 20px;
    cursor: pointer;
}

/* Small Cards: Below */
.card-small {
    width: 190px;
    height: 190px;
    z-index: 5;
}

/* Specific offsets/margins to match the staggered look */
.card-1 {
    margin-right: 20px;
    /* Spacing between small cards */
}

.card-2 {
    /* Rightmost small card */
    margin-right: 120px;
    /* Shift left as requested */
}

/* Inner Container for Flip */
.card-inner-new {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

/* Flip Effect on Large Card Hover */
.card-large:hover .card-inner-new {
    transform: rotateY(180deg);
}

/* Card Faces */
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 24px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}

.card-front-new {
    background-size: cover;
    background-position: center;
    /* border: 4px solid #fff; */
    /* White border as seen in image */
}

/* Back Face (Text) */
.card-back-new {
    background: #fff;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: #333;
}

.card-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #000;
}

.card-content p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
    margin-bottom: 1rem;
}

.card-content .badge {
    background-color: #000 !important;
    /* Premium black badge */
    font-weight: 500;
    letter-spacing: 1px;
    padding: 0.5em 1em;
}

/* Entrance Animation Class */
.animate-in .experience-card-new {
    animation: slideInRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animate-in .card-0 {
    animation-delay: 0.1s;
}

.animate-in .card-1 {
    animation-delay: 0.2s;
}

.animate-in .card-2 {
    animation-delay: 0.3s;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .experiences-new-layout {
        height: auto;
        justify-content: center;
        padding-bottom: 50px;
    }

    .card-large {
        width: 100%;
        max-width: 400px;
    }

    .card-small {
        width: 48%;
        max-width: 190px;
        height: 150px;
    }

    .card-1 {
        margin-right: 4%;
    }
}

.hero-background-shards {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* Ensure overlay to read text over images */
.hero-background-shards::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 10;
}

/* Ensure content sits above background */
.experiencias-hero .container {
    position: relative;
    z-index: 20;
}

.shard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Cada shard muestra una zona distinta para ver más de la imagen */
.shard-1 { background-position: 15% center; }
.shard-2 { background-position: 50% center; }
.shard-3 { background-position: 85% center; }

.shard-1 {
    clip-path: polygon(0 0, 50% 0, 35% 100%, 0 100%);
    z-index: 1;
}

.shard-2 {
    clip-path: polygon(45% 0, 85% 0, 70% 100%, 30% 100%);
    z-index: 2;
    filter: drop-shadow(-15px 0 10px rgba(0, 0, 0, 0.5));
}

.shard-3 {
    clip-path: polygon(80% 0, 100% 0, 100% 100%, 65% 100%);
    z-index: 3;
    filter: drop-shadow(-15px 0 10px rgba(0, 0, 0, 0.5));
}

/* Adjusted clip-paths for wider coverage on desktop */
@media (min-width: 1200px) {
    .shard-1 {
        clip-path: polygon(0 0, 40% 0, 30% 100%, 0 100%);
    }

    .shard-2 {
        clip-path: polygon(35% 0, 75% 0, 65% 100%, 25% 100%);
    }

    .shard-3 {
        clip-path: polygon(70% 0, 100% 0, 100% 100%, 60% 100%);
    }
}

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

/* =========================
   NEW 3-CARD LAYOUT
   ========================= */

.experiences-new-layout {
    position: relative;
    height: 600px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-end;
    gap: 20px;
    padding-top: 50px;
    perspective: 1000px;
    /* For 3D flip */
}

.experience-card-new {
    position: relative;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* Initial state for animation */
    opacity: 0;
    transform: translateX(100px);
}

/* Card Sizes & Positioning based on user image */
/* Large Card: Top Right */
.card-large {
    width: 400px;
    height: 280px;
    z-index: 10;
    margin-bottom: 20px;
    cursor: pointer;
}

/* Small Cards: Below */
.card-small {
    width: 190px;
    height: 190px;
    z-index: 5;
}

/* Specific offsets/margins to match the staggered look */
.card-1 {
    margin-right: 20px;
    /* Spacing between small cards */
}

/* Inner Container for Flip */
.card-inner-new {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

/* Flip Effect on Large Card Hover */
.card-large:hover .card-inner-new {
    transform: rotateY(180deg);
}

/* Card Faces */
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 24px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}

.card-front-new {
    background-size: cover;
    background-position: center;
    /* White border removed as requested */
}

/* Back Face (Text) */
.card-back-new {
    background: #fff;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: #333;
}

.card-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #000;
}

.card-content p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
    margin-bottom: 1rem;
}

.card-content .badge {
    background-color: #000 !important;
    /* Premium black badge */
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
    padding: 0.5em 1em;
}

/* Entrance Animation Class */
.animate-in .experience-card-new {
    animation: slideInRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animate-in .card-0 {
    animation-delay: 0.1s;
}

.animate-in .card-1 {
    animation-delay: 0.2s;
}

.animate-in .card-2 {
    animation-delay: 0.3s;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive adjustments */

/* Mobile: Phone (Portrait/Landscape) - Show only Large Image */
@media (max-width: 767px) {
    .experiences-new-layout {
        height: auto;
        display: block;
        /* Stack naturally */
        padding-bottom: 30px;
    }

    .card-large {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        /* Good proportion for mobile */
        margin-bottom: 0;
    }

    .card-small {
        display: none !important;
        /* Hide other 2 images */
    }
}

/* Tablet: iPad/Tablets (Portrait/Landscape) - Large Left, 2 Small Right Stacked */
@media (min-width: 768px) and (max-width: 1199px) {
    .experiences-new-layout {
        height: 450px;
        /* Fixed height to prevent collapse */
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 15px;
        padding-top: 0;
        justify-content: stretch;
    }

    .card-large {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
    }

    .card-small {
        width: 100%;
        height: 100%;
        max-width: none;
        display: block !important;
        /* Ensure they are visible in case hidden elsewhere */
    }

    .card-1 {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    .card-2 {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }
}

/* =========================
   DESTINATIONS INFO SECTION (REDESIGN)
   ========================= */

.destination-card {
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.destination-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.destination-card .card-img-top {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.destination-card img {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

.tracking-wider {
    letter-spacing: 0.15em;
}

.object-fit-cover {
    object-fit: cover;
}