/*
Theme Name: BUG BOX Theme
Template: hello-elementor
*/

html, body {
/*height: 100%;*/
overflow-x: hidden;}

[data-elementor-type="wp-page"] {
    position: relative;
    isolation: isolate;}

[data-elementor-type="wp-page"] > div {
z-index: 10;}

[data-elementor-type="wp-page"] > div.marcas-de-agua {
    z-index:1;}   
    
html.no-scroll, body.no-scroll {
overscroll-behavior: none;}

html.no-scroll {
scrollbar-color: #E6EEE9 #E6EEE9;    /* Firefox*/ }

html.no-scroll::-webkit-scrollbar-thumb {
    background-color: #E6EEE9 !important; }
    
header#site-header {
    margin-top: clamp(-96px, calc(-6.86px - 4.6429vw), -70px);}
    
.balanced {
    text-wrap: balance;}
    
.bolded,
.bolded * {
    font-weight: 700;}
    
.titulo-seccion {
    padding-bottom: 1em;
    font-weight: 600;}
    
.green {
    color: var(--e-global-color-39080e0);
    font-weight: 700;}
    
.larger-text {
    font-size: larger;}

.elementor-widget-button {
    margin-top: 1.5vw;}
    
.white-button .elementor-button {
    background-color: var(--e-global-color-a30afbc);
    color: var(--e-global-color-39080e0);
    border: 2px solid var(--e-global-color-a30afbc);}
    
.transparent-button .elementor-button {
    background-color: transparent;
    color: var(--e-global-color-39080e0);
    border: 2px solid var(--e-global-color-39080e0);}
    
.transparent-button .elementor-button svg {
    fill: var(--e-global-color-39080e0);}

.button-ikigai-white a,
.button-ikigai-green a {
    position: relative;}

/* SELLOS HEADER */

.sello-destino-header.beige { --c: #F7F0E5; }
.sello-destino-header.green { --c: #D6E3DA; }

.sello-destino-header{
  position: relative;
  isolation: isolate;
  overflow: visible;
  aspect-ratio: 1/1;
  --r: 35%;
  --overlap: 0.5;
  --d: calc(var(--r) * var(--overlap));
  background:
    radial-gradient(circle at 50% calc(50% - var(--d)), var(--c) 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at 50% calc(50% + var(--d)), var(--c) 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at calc(50% - var(--d)) 50%, var(--c) 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at calc(50% + var(--d)) 50%, var(--c) 0 var(--r), transparent calc(var(--r) + 1px));
  --shape-mask:
    radial-gradient(circle at 50% calc(50% - var(--d)), #fff 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at 50% calc(50% + var(--d)), #fff 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at calc(50% - var(--d)) 50%, #fff 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at calc(50% + var(--d)) 50%, #fff 0 var(--r), transparent calc(var(--r) + 1px));
  transition: filter .35s ease, transform .35s ease;
  will-change: filter;
}

.sello-destino-header:hover{
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.15));
  transform: translateY(-8px);
}

.sello-destino-header .pic-destino-header{
  opacity: 1;
  transition: opacity .35s ease;
}

.sello-destino-header::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background-position: var(--ov-x, 50%) var(--ov-y, 50%);
    background-size: cover;               /* <- preserves aspect ratio */
    background-repeat: no-repeat;
    -webkit-mask-image: var(--shape-mask);
            mask-image: var(--shape-mask);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100%;
    -webkit-mask-position: center;
            mask-position: center;
    opacity:0;
    transition: opacity 1s ease;
    pointer-events:none;
}
  

/* default images on each ::after (kept invisible until a hover group is active) */
#sello-header-01::after,
#sello-header-02::after,
#sello-header-03::after,
#sello-header-04::after {
    background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/transparente.webp"); }

/* HOVER 1 -> specific image per target */
#sellos-destino-header:has(#sello-header-01:hover) #sello-header-02::after{ opacity: 1; background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/cuadro-destinos-japon.webp"); }
#sellos-destino-header:has(#sello-header-01:hover) #sello-header-03::after{ opacity: 1; background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/viaje-a-japon.webp"); }
#sellos-destino-header:has(#sello-header-01:hover) #sello-header-04::after{ opacity: 1; background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/japon-iconos-back.webp"); }
#sellos-destino-header:has(#sello-header-01:hover) #sello-header-02 .pic-destino-header,
#sellos-destino-header:has(#sello-header-01:hover) #sello-header-03 .pic-destino-header,
#sellos-destino-header:has(#sello-header-01:hover) #sello-header-04 .pic-destino-header{ opacity: 0; visibility: hidden; pointer-events: none; }

/* HOVER 2 -> specific image per target */
#sellos-destino-header:has(#sello-header-02:hover) #sello-header-01::after{ opacity: 1; background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/cuadro-destinos-peru.webp"); }
#sellos-destino-header:has(#sello-header-02:hover) #sello-header-03::after{ opacity: 1; background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/peru-iconos-back.webp"); }
#sellos-destino-header:has(#sello-header-02:hover) #sello-header-04::after{ opacity: 1; background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/peru-cuadros-back-03.webp"); }
#sellos-destino-header:has(#sello-header-02:hover) #sello-header-01 .pic-destino-header,
#sellos-destino-header:has(#sello-header-02:hover) #sello-header-03 .pic-destino-header,
#sellos-destino-header:has(#sello-header-02:hover) #sello-header-04 .pic-destino-header{ opacity: 0; visibility: hidden; pointer-events: none; }

/* HOVER 3 -> specific image per target */
#sellos-destino-header:has(#sello-header-03:hover) #sello-header-01::after{ opacity: 1; background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/cuadro-destinos-vietnam.webp"); }
#sellos-destino-header:has(#sello-header-03:hover) #sello-header-02::after{ opacity: 1; background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/vietnam-iconos-back.webp"); }
#sellos-destino-header:has(#sello-header-03:hover) #sello-header-04::after{ opacity: 1; background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/vietnam-cuadros-back-large.webp"); }
#sellos-destino-header:has(#sello-header-03:hover) #sello-header-01 .pic-destino-header,
#sellos-destino-header:has(#sello-header-03:hover) #sello-header-02 .pic-destino-header,
#sellos-destino-header:has(#sello-header-03:hover) #sello-header-04 .pic-destino-header{ opacity: 0; visibility: hidden; pointer-events: none; }

/* HOVER 4 -> specific image per target */
#sellos-destino-header:has(#sello-header-04:hover) #sello-header-01::after{ opacity: 1; background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/cuadro-destinos-islandia.webp"); }
#sellos-destino-header:has(#sello-header-04:hover) #sello-header-02::after{ opacity: 1; background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/islandia-cuadros-back-large.webp"); }
#sellos-destino-header:has(#sello-header-04:hover) #sello-header-03::after{ opacity: 1; background-image: url("https://www.pasaporteikigai.com/wp-content/uploads/descubre-islandia.webp"); }
#sellos-destino-header:has(#sello-header-04:hover) #sello-header-01 .pic-destino-header,
#sellos-destino-header:has(#sello-header-04:hover) #sello-header-02 .pic-destino-header,
#sellos-destino-header:has(#sello-header-04:hover) #sello-header-03 .pic-destino-header{ opacity: 0; visibility: hidden; pointer-events: none; }


/*.sello-destino-header::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(circle at 50% calc(50% - var(--d)), var(--c) 0 var(--r), transparent calc(var(--r) + 1px)),
        radial-gradient(circle at 50% calc(50% + var(--d)), var(--c) 0 var(--r), transparent calc(var(--r) + 1px)),
        radial-gradient(circle at calc(50% - var(--d)) 50%, var(--c) 0 var(--r), transparent calc(var(--r) + 1px)),
        radial-gradient(circle at calc(50% + var(--d)) 50%, var(--c) 0 var(--r), transparent calc(var(--r) + 1px));
    filter: none;
    transition: filter .25s ease, transform .25s ease;}
      
.sello-destino-header:hover::before{
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
    transform: translateY(-1px);}*/

.cuadrado-destino {
    padding-inline: 2em;}
    
.destino-en-cuadro {
    transition: all 0.4s ease;}

/* HOME ANIMATION */

.anim-hero { position: relative; contain: layout paint;}

#home-hero-background {
    filter: brightness(0.5);
    -webkit-clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
            clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
    animation: revealFromBR 1.5s ease-out forwards;
    will-change: clip-path;}

.el-1, .el-2, .el-3, .el-4, .el-5 {
    opacity: 0;
    transform: translate3d(0,0,0);
    transition: none !important;
    will-change: transform, opacity;}

.el-1 { transform-origin: left bottom !important;}


/* MEDIA QUERIES */

@media (min-width: 769px) and (max-width:1025px) {
    .destino-en-cuadro-home {
        aspect-ratio: 16/12;}
}

@media (max-width:768px) {

    .mob-balanced {
        text-wrap: balance;}
        
    .seccion-regular,
    .seccion-extra-padding {
        padding-block: 2.5em;}
              
    .destino-en-cuadro-home {
        aspect-ratio: 16/7;
        overflow: hidden;}

    .cuadrado-destino {
        padding: 2px;}

}
  
/* HOVERS */

@media (min-width:1026px) {
    
    .seccion-regular {
    padding-block: 5em;}
    
    .seccion-extra-padding {
    padding-block: 7.5em;}

    .button-ikigai-white span::before {
        position: absolute;
        left: 8px;
        top: 4px;
        width: 2vw;
        height: 2vw;
        content: '';
        background: url('https://www.pasaporteikigai.com/wp-content/uploads/logo-button-white.webp');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 100;
        opacity: 0;
        transition: opacity 0.4s ease;
        transform-origin: center center;
        animation: spin-button 4s linear infinite;}
        
    .button-ikigai-green span::before {
        position: absolute;
        left: 8px;
        top: 4px;
        width: 40px;
        height: 40px;
        content: '';
        background: url('https://www.pasaporteikigai.com/wp-content/uploads/logo-button-green.webp');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 100;
        opacity: 0;
        transition: opacity 0.4s ease;
        transform-origin: center center;
        animation: spin-button 4s linear infinite;}
    
    .button-ikigai-white:hover span,
    .button-ikigai-green:hover span {
        font-family: parlare;}
    
    .button-ikigai-white a:hover,
    .button-ikigai-green a:hover {
        padding-left: 8%;}
    
    .button-ikigai-white a:hover span::before,
    .button-ikigai-green a:hover span::before {
        opacity: 1;}

    .destino-en-cuadro,
    .destino-en-cuadro-home {
        aspect-ratio: 16/8;
        overflow: hidden;
        transition: all 0.4s ease;}

    .foto-destino {
        transition: all 0.4s ease;}
    
    .cuadro-destinos:has(.destino-en-cuadro:hover) .destino-en-cuadro:not(:hover) .foto-destino,
    .cuadro-destinos-home:has(.destino-en-cuadro-home:hover) .destino-en-cuadro-home:not(:hover) .foto-destino {
        opacity: 0.5;}
        
    #site-header .destino-en-cuadro {
        aspect-ratio: 16/6;}

    .destino-en-cuadro:hover .sello img,
    .destino-en-cuadro-home:hover .sello img {
        animation: wiggle 0.5s ease-in-out infinite;}

    /* MARCAS DE AGUA */

    .marcas-de-agua {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 100vh;}

    .container-marca-de-agua {
        height: 10px;
        flex: 1;}

    .container-acuarela {
        height: 100%;
        opacity: 0;
        transform:scale(0);
        transition: opacity 0.2s ease, transform 1s ease-in;}

    .container-acuarela.left {
        transform-origin: left center;}

    .container-acuarela.right {
        transform-origin: right center;}

    .container-acuarela.grow-in {
        opacity: 1;
        transform: scale(1);}
}
  
/* ANIMATIONS */

@keyframes revealFromBR {
    from {
    -webkit-clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
            clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);}
    to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
}

@keyframes spin-button {
    to { rotate: 1turn; }
}

@keyframes wiggle {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(3deg); }
    50%  { transform: rotate(-3deg); }
    75%  { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

/* HANDWRITTEN */

.handwritten , .handwritten * {
    font-family: parlare, sans-serif!important;}

.handwritten {
    display: inline-block;
    font-family: parlare, sans-serif!important;
    font-weight: 400;
    color: var(--e-global-color-39080e0);}
    
.handwritten.white {
    color: var(--e-global-color-a30afbc);}

.handwritten-tit-destino {
    margin-right: 10%;}

/* MEDIA QUERIES */

@media (max-width:770px) {
     
    .handwritten-mob {
        font-size: 40px;
        margin-inline: 48px 50px!important;}
        
    .handwritten-mob-zero {
        font-size: 40px;
        margin-inline: 0px 8px!important;}

}

.iconito {
opacity: 0.75;
filter: brightness(0.8);}