/*!
Theme Name: Pacha Child
Theme URI: http://underscores.me/
Author: Brian Pumacahua Castro
Author URI: http://instagram.com/brian.raw
Description: Pacha Raw Theme
* Template:   pacha
Version: 1.0.0
*/ 

/*==================== GOOGLE FONTS ====================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');


/*==================== VARIABLES CSS ====================*/
:root {
    /*========== Colors ==========*/
    --pacha-green: hsl(172.5deg 100% 12.55%);
    --pacha-yellow: hsl(39.67deg 74.09% 51.57%);
    /* Change favorite color */
    --hue-color: 172.5; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/

    /* HSL color mode */
    --first-color:          hsl(var(--hue-color), 69%, 61%);
    --first-color-second:   hsl(var(--hue-color), 69%, 61%);
    --first-color-alt:      hsl(var(--hue-color), 57%, 53%);
    --first-color-lighter:  hsl(var(--hue-color), 92%, 85%);
    --title-color:          hsl(var(--hue-color), 8%, 15%);
    --text-color:           hsl(var(--hue-color), 8%, 45%);
    --text-color-light:     hsl(var(--hue-color), 8%, 65%);
    --input-color:          hsl(var(--hue-color), 70%, 96%);
    --body-color:           hsl(var(--hue-color), 60%, 99%);
    --container-color:      #fff;
    --scroll-bar-color:     hsl(var(--hue-color), 12%, 90%);
    --scroll-thumb-color:   hsl(var(--hue-color), 12%, 80%); 

    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;

    /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
    --big-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;

    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;

    /*========== Margenes Bottom ==========*/
    /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
}

/* Font size for large devices */
@media screen and (min-width: 968px) {
    :root {
        --big-font-size: 3rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

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

html {
	scroll-behavior: smooth;
}

body, body.page {
	margin: 0;
	font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
}

body.show__menu {
    overflow:hidden;
}

main {
    transition: transform .3s;
    margin-top: var(--menu-height);
}

h1,h2,h3,h4, .h2 {
	color: var(--title-color);
    font-weight: var(--font-semi-bold);
}

.h2 {
    font-size:var(--h2-font-size);
}

ul {
	list-style: none;
	margin:0;
}

a {
	text-decoration: none;
}

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

figure {
    margin:0;
}

p, li {
    line-height:1.5;
}

strong {
    font-weight:500;
}

a,
a:visited {
	color: var(--title-color);
}

video {
  outline: none;
  background-color:var(--body-color);
}
        
video::-webkit-media-controls {
  opacity: 0;
  visibility:hidden;
}
        
video[autoplay] {
  display: block;
  cursor:pointer;
}

/*========== SCROLL BAR ==========*/
::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
    background-color:var(--scroll-bar-color);
    border-radius: .5rem;
}

::-webkit-scrollbar-thumb {
    background-color:var(--scroll-thumb-color);
    border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover {
    background-color:var(--text-color-light);
}

.nav__menu::-webkit-scrollbar {
    width:.25rem;
}

/*==================== LAYOUT ====================*/
.container {
	max-width: 1200px;
    margin-left: var(--mb-1-5);
    margin-right: var(--mb-1-5);
}

.section {
	padding: 2rem 0 4rem;
}

.section__alt {
    padding:4rem 0;
}

.grid{
	display: grid;
    gap: 1.5rem;
}

.flex {
    display:flex;
    gap:1.5rem;
}

.flex-col {
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.button, .button:visited,
input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    color: var(--body-color);
    background-color: var(--title-color);
    padding: calc(1rem - 2px) 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all .3s ease-in-out;
    border:2px solid var(--title-color);
    font-weight: var(--font-medium);
    user-select: none;
}

.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    color: var(--title-color);
    background-color: var(--body-color);
    border-color:var(--title-color);
}

/* For medium devices */
@media screen and (min-width: 767px) {
	.container {
		margin-left:auto;
		margin-right:auto;
	}
	
    .container__full {
        width: 80%; 
        max-width: 960px;
        margin: auto;
    }
	
	body {
		margin:0;
	}
	
	.section {
		padding: 6rem 0 2rem;
	}
	
	.container {
        width: 80%;
        max-width: 1080px;
    }
}

@media screen and (min-width: 767px) {
	.container {
		margin-left:auto;
		margin-right:auto;
	}
	
    .container__full {
        width: 80%; 
        max-width: 960px;
        margin: auto;
    }
	
	body {margin:0;}
	
	.section {padding: 6rem 0 2rem;}
	.section__alt {padding:4rem 0;} 
	
	.container {
        width: 80%;
        max-width: 1080px;
    }
	
	.footer__container {padding:0 1rem;}
	.header {
	    padding:0rem;
	}
}

/*******************************************/
#panorama .pnlm-preview-img {
    background-position: center bottom; 
}

#panorama .pnlm-load-button {
    top: 50%;
    left: 50%;
    width: initial; 
    height: initial; 
    margin: initial; 
    background-color: rgb(35, 40, 41, .8);
    border-radius: .5rem;
    font-family: var(--brand-font);
    transform: translate(-50%, -50%);
    padding: 1.5rem 2.5rem;
    backdrop-filter: blur(2px);
    transition: .3s ease;
}

#panorama .pnlm-load-button:hover {
    background-color: var(--title-color);
}


/************ VIRTAL TOURS ************/
#panorama .pnlm-preview-img {
    background-position: center bottom; 
}

#panorama .pnlm-load-button {
    top: 50%;
    left: 50%;
    width: initial; 
    height: initial; 
    margin: initial; 
    background-color: rgb(35, 40, 41, .8);
    border-radius: .5rem;
    font-family: var(--brand-font);
    transform: translate(-50%, -50%);
    padding: 1.5rem 2.5rem;
    backdrop-filter: blur(2px);
    transition: .3s ease;
}

#panorama .pnlm-load-button:hover {
    background-color: var(--title-color);
}

main.page__virtual {
    margin-top:0;
}

/******* Pano Generals *******/
#panorama {
    width: 100vw;
    height: 100dvh;
    background-color: var(--body-color-dark);   
    overflow:hidden;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: auto;
    -o-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

.pnlm-load-box {
    display:none!important;
}

.pnlm-container {
    background:var(--pacha-green)!important; 
}

#panorama .pnlm-panorama-info {
    bottom: .5rem;
    background-color: rgb(35, 40, 41, .8);
    border-radius: 0 3px 3px 0;
    color: #fff;
    font-family: var(--brand-font);   
    padding-top: .15rem;
    user-select:none;
    pointer-events:none; 
    display:none!important;
}

.pnlm-render-container {
    transition: transform 1.5s ease-in-out;
}

.pnlm-render-container.transition {
    transform:scale(1.05)
}

.scene__title {
    font-family: var(--brand-font);
    margin: 0 0 0 1rem;
}


.popup__title {
    font-size: var(--h2-font-size);
    font-family: var(--brand-font);
    display:block;
    width:100%; 
}

/******* Pano Preview *******/
#panorama-preview {
    position: absolute;
    width: 100vw;
    height: 100dvh;
    top: 0;
    z-index: 1;
    background-color: var(--footer-color-dark);
    opacity:1;
    transition: opacity .5s ease;
    background-color: hsl(172.5deg 100% 6% / 100%);
}

#panorama-preview .preview--img img {
    object-fit: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    object-position: center;
}

.remove-preview #panorama-preview {
    opacity:0;
    visibilit:hidden;
    pointer-events:none;
}

/******* Button Init Tour *******/
#init-tour {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--footer-color-dark);
    display: grid;
/*    background-color: rgba(255,255,255,0.5);
    border-radius: 50%;
    height: 8rem;
    aspect-ratio: 1;
    place-content: center;*/
    cursor:pointer;
    transition: background-color .3s ease;
} 
/*
#init-tour:hover{ 
    background-color: rgba(255,255,255,0.75);
} 
*/
#init-tour svg {
   /* width:3.5rem; 
    height:3.5rem;
    transform: translateX(3px);*/
}


/******* Tor Controls *******/
.tour__controls.top {
    position:fixed;
    top:1.5rem;
    right:2.25rem;
}

.tour__controls--wrap {
    display:flex;
    gap:.85rem; 
}

.tour__controls .item {
    aspect-ratio: 1;
    border-radius: .35rem;
    cursor:pointer;
    display:grid;
    place-content:center;
    color: var(--body-color);
    position:relative;
}

.bottom__controls.tour__controls .item {
    width: 2.5rem;
}

.item .tooltip--icon {
    --tooltip-color:rgba(0, 64, 54, .65);
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--tooltip-color);
    padding: 4px 10px;
    border-radius: .35rem;
    opacity: 0;
    font-size: .6375rem;
    display: block;
    pointer-events:none;
    visibility:hidden;
    transition: .3s ease;
    user-select:none;
    width: max-content;
    text-align: center;
}

.bottom__controls .item .tooltip--icon {
    top:initial;
    bottom: calc(100% + 0.5rem);
}

.item .tooltip--icon:before {
    content: "";
    display: block;
    border: 10px solid transparent;
    border-bottom: 7px solid var(--tooltip-color);
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
}

.bottom__controls .item .tooltip--icon:before {
    border: 10px solid transparent;
    border-top: 7px solid var(--tooltip-color);
    bottom: -16px;
    top:initial;
    bottom: -16px;
}

.item:hover .tooltip--icon { 
    opacity:1;
    visibility:visible;
}

.tour__controls .item svg {
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5));
    transform: scale(0.85);
}

.tour__controls .item svg path {
    transition: .15s ease;
}

.item .dash { 
    opacity:0;
}

.item.muted .dash { 
    opacity:1;
}

.hide-hotspots .icon__hide .dash {
    opacity:1;
}

.pnlm-hotspot-base {
    transition: opacity .3s ease;
}

.hide-hotspots .pnlm-hotspot-base {
    opacity:0;
    pointer-events:none
}


/****** Footer Map ******/ 
.footer__map {
    position:fixed;
    bottom:.5rem;
    width:fit-content;
    right: 0;
}
    
.footer__map .wrap {
    display:flex;
    justify-content:flex-end;
    margin: 0 1.5rem;
    gap:5px;
    align-items:center;
}
    
    
.footer__map .wrap.bottom__controls {
    justify-content:space-between;
}
    
.control--bottom, .controls--right {
    display:flex;
}
    
.footer__map .wrap > * {
    font-size: .75rem;
    text-shadow: 0 0 2px rgba(0,0,0,.75);
    color:#fff;
    user-select:none;
}

.toggle__help, 
.toggle__help a {
    cursor:pointer;
    transition: color .3s ease;
    color:#fff;
}
    
.toggle__help:hover {
    color: var(--second-color);
    text-shadow:none;
}

#rotate-off {
    display:none;
}

.rotate #rotate-on { 
    display:none;
}

.rotate #rotate-off {
    display:grid;
}

.tour__controls .item#rotate-off svg path,
.tour__controls .item#rotate-on svg path{
    transform: scale(1.375);
    transform-origin: center left;
}

/****** Modal Help ******/ 
.help__modal {
    position:fixed;
    height:100dvh;
    width:100vw;
    top:0;
    left:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: .3s ease-out;
    transition-property: opacity, visibility;
    color: #fff;
    background-color: hsl(172.5deg 100% 6% / 95%);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    overflow:auto; 
}
    
.show.help__modal {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.section__help--wrap {
    display:grid;
    gap: 5rem 0;
}

.help__modal h2 {
    font-family:var(--brand-font);
    text-align:center;
    color:#fff;
    margin:2.5rem auto 1.75rem;
}

.help__modal .help--btn {
    position:absolute;
    top:1.5rem;
    right:1.5rem;
    display:grid;
    cursor:pointer;
    opacity:.65;
    transition: opacity .3s ease;
}

.help__modal .help--btn:hover {
    opacity:1;
}

.help__modal .help--btn .item .tooltip--icon {
    top:2.35rem;
}

.help__modal .help--btn svg {
    width:2rem;
    height:2rem;
}

@media screen and (min-width: 767px) { 
    .help__modal h2 {
        margin: 0rem auto 5rem; 
    }

    .section__help--wrap {
        grid-template-columns:1fr 1fr;
    } 
}



/****** Tour Instructions ******/ 
.tour__instructions {
    margin: 0 auto 0;
}

.tour__instructions ul {
    gap: 3rem;
}

.tour__instructions li {
    display:grid;
    gap: .5rem 1rem;
    grid-template-columns: 5rem 1fr
}

.tour__instructions .help_title {
    color:var(--body-color);
}

.tour__instructions .help_description {
    font-size:var(--small-font-size);
    margin-bottom: 0;
}

.tour__instructions .help_icon { 
    grid-row: 1 / 3;
    display: grid;
    place-content: center; 
}

.instruction__tooltip {
    position: relative;
    height: fit-content; 
    margin-left: -0.625rem;  
}

.instruction__tooltip .tooltip__text {
    position:relative;
    border-radius:3px; 
    text-align: center;
    background-color: rgba(255, 255, 255, .25); 
    font-size: var(--smaller-font-size);
    width: min-content;
    transform: scale(0.925);
    backdrop-filter: blur(0px);
    line-height: 1.25;
    padding: 9px 14px 7px 14px;
    cursor:pointer;
    user-select:none;
}

.instruction__tooltip .tooltip__text:before {
    backdrop-filter: blur(0px);
    content: '';
    display: block;
    position: absolute;
    top: calc(100% - 0px); 
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom: 0;
    border-top: 8px solid rgba(255, 255, 255, .175);
}

.instruction__tooltip svg {
    position: absolute;
    bottom: -0.75rem;
    right: calc(50% - 2.15rem);
    pointer-events: none;
}

@media screen and (min-width: 767px) { 
    .tour__instructions {
        margin: 0 auto 0;
        max-width: 26rem; 
    }
    
    .tour__instructions ul {
        gap:2rem;
    }
    
    .tour__instructions li {
        gap: .5rem 1.5rem;
    } 
}

/****** Tour Partners ******/
.tour__partners{
    display: grid; 
    place-content: center;   
    gap: 2rem 1.5rem;
}

.tour__partners .brands {
    display:flex;
    justify-content:center;
    gap:1.5rem 2rem;
    flex-wrap: wrap;
}

.tour__partners span {
    text-align: center;
    font-size: var(--smaller-font-size);
    margin-bottom: 0.5rem; 
}

.tour__partners svg {
     
    margin: auto; 
}

.tour__partners svg:hover {
    filter: brightness(1);
}

.tour__partners .letters__ccaijo {
    opacity:0;
}

.tour__partners svg:hover .letters__ccaijo {
    opacity:1;
}

@media screen and (min-width: 767px) {
    .tour__partners .brands {
        flex-direction:column;
    }
}

/****** PopUp ******/
.popup {
    position: absolute;
    background-color: rgba(255, 255, 255, .785);
    backdrop-filter: blur(3px);
    border-radius: 0.35rem;
    transition: var(--animation-smooth);
    width: max-content;
    max-width: 22.5rem;
    box-shadow: 0 -5.9px 2.7px hsl(var(--dropdown-shadow-color, 0deg 0% 0%) / 0.025), 0 -1.2px 6.9px hsl(var(--dropdown-shadow-color, 0deg 0% 0%) / 0.025), 0 8px 14.2px hsl(var(--dropdown-shadow-color, 0deg 0% 0%) / 0.05), 0 21.9px 29.2px hsl(var(--dropdown-shadow-color, 0deg 0% 0%) / 0.05), 0 49px 80px hsl(var(--dropdown-shadow-color, 0deg 0% 0%) / 0.07);
    font-size: var(--small-font-size);
    color: var(--title-color);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(calc(0% + 1rem)) translateY(-50%) scale(0.95);
    cursor:auto;
    padding:1rem;
}

.clicked .popup {
    opacity: 1;
    visibility: visible;
    transform:translateX(calc(-50% + 0rem)) translateY(calc(-100% - 2rem)) scale(1);
    pointer-events: auto;
}

.popup:before { 
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: 16px solid transparent;
    
    top: calc(100% + 6px);
    left: calc(-16px + 50%);
    transform: translate(0, -50%);
    border-bottom: 0;
    border-top: 12px solid rgba(255, 255, 255, .785);
    
    
    
}

.popup iframe {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 30rem;
    display: grid; 
}


@media screen and (min-width: 767px) { 
    .popup {
        max-width: 25rem;
    }
    
    .clicked .popup {
        transform: translateX(calc(0% + 2rem)) translateY(-50%) scale(1);  
    }
    
    .popup:before {
        top: calc(50% - 0px);
        left: -12px;
        transform: translateY(-50%);
        border-left: 0;
        border-right: 12px solid rgba(255, 255, 255, .785);
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
    }
    
}


.popup img {
    object-fit: cover;
    display: block; 
    /*aspect-ratio: 4/5;*/
    height: 100%;
    display: block;
}

/****** Tooltips ******/
.tooltip {
    border-radius: 3px;
    background-color: var(--pacha-green);
    color: #fff;
    text-align: center;
    max-width: 200px;
    padding: 5px 10px;
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50%;
    margin-bottom: 20px;
    opacity: 0;
    visibility:hidden;
    transition: .3s cubic-bezier(.6, 0, .4, 1);
    transition-property:opacity, visibility;
    font-size: var(--small-font-size);
    width:max-content;
    user-select:none;
}

.tooltip:before {
    content: '';
    display: block;
    position: absolute;
    top: calc(100% - 0px); 
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom: 0;
    border-top: 8px solid var(--pacha-green);
}


.clicked .tooltip { 
    opacity:1;
    visibility:visible;
}

.pnlm-scene .tooltip {
    --tt-bg-color: rgba(255,255,255,.25);
    --tt-bd-filter: blur(1px);
    opacity:1;
    visibility:visible;
    background-color:var(--tt-bg-color);
    backdrop-filter:var(--tt-bd-filter);
    color:var(--title-color);
    transition: all .3s ease;
}

.pnlm-scene .tooltip:before {
    border-top-color:var(--tt-bg-color);
    backdrop-filter:var(--tt-bd-filter);
    transition: all .3s ease;
}

.pnlm-scene .hotspot--icon:hover ~ .tooltip,
.pnlm-scene .tooltip:hover {
    --tt-bg-color: rgba(0,64,56,.75);
    color:#fff; 
}

.hotspot--icon:hover ~ .tooltip {
    opacity:1;
    visibility:visible;
    z-index:999;
}


.pnlm-info.with--popup.clicked  .tooltip {
    opacity:0;
    visibility:hidden; 
}

/****** HotSpots ******/
.pnlm-info.with--popup:hover .hotspot--icon,
.pnlm-info.with--popup .points__interactive circle { 
    cursor:pointer;
}

.pnlm-info.with--popup.clicked .hotspot--icon svg,
.pnlm-info.with--popup:hover .hotspot--icon svg {
    fill: rgba(255, 255, 255, .8);
} 

.pnlm-scene .hotspot--icon {
    cursor:pointer;
}

.pnlm-scene:hover .hotspot--icon svg,
.pnlm-scene .hotspot--icon:hover svg { 
    fill: rgba(0,64,56,.75);
}

.hotspot--icon { 
    width: 1.25rem;
    height: 1.25rem;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
}

.pnlm-hotspot-base.clicked {
    z-index:9; 
}

.hotspot--icon svg {
    transform: rotateX(40deg) scale(0.85); 
    overflow:visible;
}

.hotspot--icon svg {
    fill: rgba(255, 255, 255, .60);
}

.clicked .hotspot--icon svg {
    fill: rgba(255, 255, 255, .45);
}

.showing-side .hotspot--icon svg {
    fill: rgba(255, 255, 255, .85);
}

/****** Cursors ******/
.pnlm-hotspot-base.pnlm-pointer {
    cursor:default;
} 

.pnlm-info .points__interactive circle {
    cursor:default;
}

.pnlm-hotspot-base.pnlm-pointer.pnlm-scene,
.pnlm-info.with-popup .points__interactive circle {
    cursor:pointer;
}

/*Medias Querys*/

#toggle-fullscreen { display:none;}

@media screen and (min-width: 767px) {
    #toggle-compass { display:none;} 
    #toggle-fullscreen { display:grid;} 
}


/*** Animation ***/
.point {
  --scaler: 1;
  transform-origin: center;
}

.route__point.pulse,
.active--item .route__point { 
  animation: pulse 2s infinite ease;
  transform-origin: center;
}

.route__point.point__back.pulse,
.active--item .route__point.point__back {
  animation: pulsin 2s infinite ease;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes pulsin {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  70% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 1;
  }
}


/*MENU*/
.menu__pano {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    max-width: 15rem;
    transition: .65s cubic-bezier(0.6, 0.17, 0, 1.14);
    transform:translateX(calc(-100% - 1.5rem));
}

.menu__pano.visible {
    transform:translateX(0);
}

.menu__pano h1 {
    font-size: var(--h4-font-size);
    margin: .5rem 1.5rem .75rem 1.5rem;
}


.menu__pano--wrap {
    padding: .75rem 0;
    transition: .3s ease;
    border-radius: .35rem;
    box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
    -moz-box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
    -webkit-box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
    background-color: var(--body-color);
    opacity:0;
}

.visible .menu__pano--wrap {
    opacity:1;
}

.menu__pano ul {
    display: grid;
}

.menu__pano ul li {
    padding: .5rem .75rem .5rem 1.75rem;
    font-size: var(--small-font-size);
    transition: .3s ease-in-out;
    cursor: pointer;
    background-color: var(--body-color);
}

.menu__pano ul li:hover,
.menu__pano ul li.active:hover {
    color:var(--body-color); 
    background-color:var(--title-color); 
}

.menu__pano ul li.active {
    color:var(--title-color);
}


.menu__pano .toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 2rem;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    cursor: pointer;
    color: var(--text-color);
    opacity:.5;
}

.menu__pano .toggle:hover {
    color:var(--title-color);
    opacity:1;
}

.menu__pano .toggle svg {
    width: 20px;
}

 
/*odal*/
.modal__close svg {
    transition: var(--animation-primary);
    transform: rotate(0deg);  
}
    
.modal__close:hover svg {
    transition: var(--animation-primary);
    transform: rotate(90deg);
}
 
.border-static-x {
    height: 1px;
    width: 100%;
    background-color: #9fa1a339;
    flex-shrink: 0;
    transition: background-color var(--animation-primary);
}
 
.lightbox-bottom, .lightbox-top {
    display:grid;
}


.modal__person {
    position: absolute;
    bottom: 2.5rem;
    right: 0;
    background-color:var(--body-color);
    border-radius:0.35rem;
    opacity:0;
    visibility:hidden;
    transition: var(--animation-smooth);
        width: 100%;
    max-width: 30rem;
    box-shadow: 0 -5.9px 2.7px hsl(var(--dropdown-shadow-color,0deg 0% 0%) / 0.025),
                0 -1.2px 6.9px hsl(var(--dropdown-shadow-color,0deg 0% 0%) / 0.025),
                0 8px 14.2px hsl(var(--dropdown-shadow-color,0deg 0% 0%) / 0.05),
                0 21.9px 29.2px hsl(var(--dropdown-shadow-color,0deg 0% 0%) / 0.05),
                0 49px 80px hsl(var(--dropdown-shadow-color,0deg 0% 0%) / 0.07);
    transform: translateY(4em) scale(0.95);
    padding: 1.75rem 0;
    z-index:3;
    pointer-events: all;
    font-size: var(--small-font-size);
}
    
.popup__close--btn {
    position: absolute; 
    top: 16px;
    right: 16px;
    opacity: .5;
    display: grid;
    place-content: center;
    cursor: pointer;
    color:#fff;
    transition: opacity var(--animation-primary);
} 

.popup__close--btn:hover {
    opacity:.85;
}

.popup__close--btn svg {
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5)); 
}


/**********************************/
/*List Card Tour*/
.products {
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 3rem 3.125rem;
}

.embla__config {
    --gap: 3.125rem;
    --count: 1;
}

.experience__gallery.embla__config {
    --count:1;
    --gap:0rem;
}

.embla {
    position:relative;
    overflow: hidden;
    height:100%;
}

.products.embla__container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / var(--count)) - ((var(--gap) * (var(--count) - 1)) / var(--count)));
    grid-column-gap: calc(var(--gap)); 
    grid-template-columns: initial;
}

.embla__slide {
    
}

.embla__viewport {
    height: 100%;
}

@media (min-width: 650px) {
  .embla__config {
        --count: 2;
  }
  
  .embla.count-2:not(.embla--fade) .embla__button {
        opacity:0;
        visibility:hidden;
        pointer-events:none; 
    } 
}

@media (min-width: 1155px) {
    .embla__config {
        --count: 3;
    }
    
    .embla.count-3:not(.embla--fade) .embla__button {
        opacity:0;
        visibility:hidden;
        pointer-events:none; 
    }
    
}

.products__upsells h2 {
    font-size:var(--h1-font-size);
    margin-bottom: 0;
}

.embla__button { 
    position: absolute;  
    top: 50%;
    transform:translateY(-50%);
    width: calc((100% / var(--count)) - ((var(--gap)*(var(--count) - 1)) / var(--count))); 
    display: grid;
    align-content: center;
    pointer-events: none;
}

.embla:has(.products) .embla__button {
    top: 0;
    aspect-ratio: 4 / 5;
    transform:translateY(0);
}

.embla__button.btn__prev {left:0;justify-content: start;}
.embla__button.btn__next {right:0;justify-content: end;}

.embla__button.btn__prev button,
.embla__button.btn__next button {
    transition: 0.4s cubic-bezier(.75, 0, .25, 1);
}

.embla__button.btn__prev button {transform-origin:left;}
.embla__button.btn__next button {transform-origin:right;}


.embla__button.btn__prev button[disabled],
.embla__button.btn__next button[disabled] {
    scale:0;
    pointer-events: none;
    visibility: hidden;
}



.embla__button button {
    cursor: pointer;
    pointer-events: auto;
    width: 2.25rem;
    aspect-ratio: 1;
    border: none;
    display: grid; 
    place-content: center;
    transition: .3s ease;
    border-radius: 50%;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
    color: var(--text-color-light);
    transition: .3s ease;
    opacity:.6;
}

.embla__button button:hover {
    opacity:.895; 
}

/*Gallery product*/
.experience__gallery .embla__button button {
    color:var(--body-color);
}

.experience__gallery .embla__button button:hover {
    opacity:.895;
}

.experience__gallery .embla__button {
    /*margin:0 .625rem;*/
}

ul.embla__container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / var(--count)) - ((var(--gap)*(var(--count) - 1)) / var(--count)));
    grid-column-gap: calc(var(--gap));
    grid-template-columns: initial;
    margin:0;
    padding:0;
}


/***********************/
.loader {
  position: fixed;
  inset: 0;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader-content {
  width: 250px;
  text-align: center;
  color: #fff;
  font-family: sans-serif;
}

.loader-bar {
  margin-top: 10px;
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  overflow: hidden;
}

#loader-progress {
  height: 100%;
  width: 0%;
  background: #fff;
  transition: width 0.2s ease;
}

.header__logo svg {
    overflow:visible;
} 

.header__logo svg path { 
    -webkit-animation: fadeLtr 2s cubic-bezier(0.39, 0.575, 0.565, 1) both; 
            animation: fadeLtr 2s cubic-bezier(0.39, 0.575, 0.565, 1) both; 
    -webkit-animation-delay: calc((var(--index) - 1) * 0.1266667s); 
            animation-delay: calc((var(--index) - 1) * 0.1266667s); 
} 

@-webkit-keyframes fadeLtr {
    0% {
        -webkit-filter: blur(4px);
                filter: blur(4px);
        opacity: 0;
        -webkit-transform: translate3d(0, calc((-50 + (var(--index) * 5)) * 1%), 0);
           -moz-transform: translate3d(0, calc((-50 + (var(--index) * 5)) * 1%), 0);
                transform: translate3d(0, calc((-50 + (var(--index) * 5)) * 1%), 0);
    }
    100% {
        -webkit-filter: blur(0px); 
                filter: blur(0px);
        opacity: 1;
        -webkit-transform: translate3d(0, 0%, 0);
           -moz-transform: translate3d(0, 0%, 0);
                transform: translate3d(0, 0%, 0);
    }
}

@keyframes fadeLtr {
    0% {
        -webkit-filter: blur(4px);
                filter: blur(4px);
        opacity: 0;
        -webkit-transform: translate3d(0, calc((-50 + (var(--index) * 5)) * 1%), 0);
           -moz-transform: translate3d(0, calc((-50 + (var(--index) * 5)) * 1%), 0);
                transform: translate3d(0, calc((-50 + (var(--index) * 5)) * 1%), 0);
    } 
    100% {
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 1;
        -webkit-transform: translate3d(0, 0%, 0);
           -moz-transform: translate3d(0, 0%, 0);
                transform: translate3d(0, 0%, 0);
    }
}

#init-tour .play__icon {
    display: grid;
    place-content: center; 
    color: var(--pacha-yellow);
}

#init-tour .play__icon svg {
    width:30px; 
    height:30px;
    opacity:.35;
    transition:.3s ease;
}

#init-tour:hover .play__icon svg {
    opacity:1; 
}