@font-face {
  font-family: 'Segoe UI';
  src: url('./fonts/segoe-ui-normal.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Segoe UI';
  src: url('./fonts/segoe-ui-semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Segoe UI';
  src: url('./fonts/segoe-ui-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Segoe UI';
  src: url('./fonts/segoe-ui-black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}



:root {
  --papel: #F5F1E8;     /* Washi Rice Paper */
  --tori: #CB4A4F;      /* Vermillion Torii gate */
  --sakura:#F5C9C9;     /* Sakura Pink */
  --carbon:#454545;     /* Takezumi */
  --mente:#4A5F8A;      /* Indigo */
  --negro:#000;
  --blanco: #FFF;
}

body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--carbon); font-size: 18px; font-weight: 400;}
h1,h2,h3,h4,h5 {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 900; letter-spacing: -0.1rem;}
h1 {font-size:64px;}
h2 {font-size: 48px;}
h3 {font-size: 36px;}
h4 {font-size: 32px;}
h5 {font-size: 26px; font-weight: 700;}
h6 {font-size: 22px; font-weight: 400;}
.desc {max-width: 1240px; margin: 0 auto 1rem;}
.home-sec {padding: 50px 0;}
/*
#guests-int, #shows, #tickets, #marcas {padding: 80px 0;}
#guests-nac, #shows, #tickets, #promos, #marcas {padding-bottom: 50px;}
*/
.sec-title {display: block; text-align: center; margin: 0 auto 50px; color: var(--mente);}
.cards-container, .buttons {display: flex; gap:30px; justify-content: center; max-width: 1280px; margin: 0 auto; padding: 2rem 0; flex-wrap: wrap; }
.wrap {flex-wrap: nowrap;}

/* Buttons */
.btn {display:flex; text-align: center; font-weight:600; padding: 14px 24px; color: var(--blanco); width: fit-content; align-items: center; }
.torii {background-color: var(--tori);}
.torii:hover, .sky:hover {background-color: var(--carbon)!important; color: var(--blanco)!important;}
.washi {background-color: var(--papel); border: 2px solid var(--tori); color: var(--tori);}
.washi:hover {background-color: var(--sakura)!important;color: var(--tori)!important; border-color: var(--sakura);}
.sky {background-color: var(--mente);}

/* icons 20 position */
[class^="ico-"] {display: block; width: 20px; height: 20px; margin-right: 5px; background: url(./images/icons-buttons-20.png) no-repeat;}
span.ico-flag {background-position-x: -21px;}
span.ico-happy {background-position-x: -41.5px;}
span.ico-cart {background-position-x: -63px;}
span.ico-ticket {background-position-x: -85px;}
span.ico-time {background-position-x: -123px;}

/* social icons */
.icons-social {display: flex; flex-direction: row; gap: 0.75rem; margin-right: 5px; margin-top: 1rem;}
.icons-social a::after {content:"";display: block; width: 25px; height: 25px;background: url(./images/icons-social-25.png) no-repeat; background-position-y: -24px;}
.icons-social a:hover::after {background-position-y: -75px;}
a.insta::after {background-position-x: -25px;}
a.tik::after {background-position-x: -50px; width: 23.2px;}
a.x::after {background-position-x: -72px;}
a.yt::after {background-position-x: -98px;}

/* General header styles*/
/*header { display: none;}*/
header nav {background-color: var(--tori);position: fixed; width: 100%; z-index: 1;}
.navbar {padding: 0;}
.navbar img {height: 40px;} 
.nav-link, .nav-link:visited, .nav-link:active, .nav-link:focus  {color: var(--papel);display: flex; flex-direction: row; align-items: center; font-size: 18px;}
.nav-link:hover {color: var(--blanco); text-decoration: underline;}
.navbar-nav .nav-link.active {color:var(--blanco);}
.navbar > div {justify-content: space-between;}
.navbar-collapse {flex-grow: unset; flex-basis:none;}

/* hero */
#hero {display: flex; height: calc(100vh ); min-height: 750px; justify-content: center; align-items: center; background-color: var(--papel);text-align: center;} 
#hero::before {content: ""; display: block; width: 100%; height: 100%; min-height: 750px; position: absolute; background:url(./images/waves.gif) center center;filter: opacity(15%);}
#brand {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; z-index: 1; }
#brand h1 {text-align: center; line-height: 0.75;}
#brand small {font-size: 1.75rem;font-weight: 400; letter-spacing: initial;}
/* Internacionales*/
#guests-int .cards-container {flex-wrap: wrap;}
.flip-card {background-color: transparent; width: 100%; max-width: 405px; height: 525px;
  perspective: 1000px; flex-shrink: 0; cursor: pointer;}
.flip-card-inner {position: relative; width: 100%; height: 100%; transition: transform 0.8s;
  transform-style: preserve-3d;}
.flip-card:hover .flip-card-inner {transform: rotateY(180deg);}
.flip-card-front, .flip-card-back {position: absolute; width: 100%; height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden; border: 1px solid var(--tori); border-radius: 10px;}
.flip-card-front {background:var(--sakura);color:var(--blanco);}
.flip-card-back {background:var(--papel); color:var(--carbon);transform: rotateY(180deg);}
.flip-card-back .guest-photo {filter: opacity(.1) grayscale(1) contrast(3) blur(1px);} 

.guest-photo {position: absolute; width: 100%; height: 100%; object-fit: cover; display: block;border-radius: 10px;}
.guest-name {position:absolute; bottom: 50px; padding: 0 20px; text-shadow: var(--tori) 1px 2px 2px;}
.guest-name h4 {margin-bottom: .25rem}
.guest-data {position:absolute; bottom: 10px; padding:20px;}
.guest-data h5 {color: var(--mente);}


.nac-card {display:block; background:var(--carbon);color:var(--blanco); width: 100%; max-width: 405px; height: 250px; position: relative; border: 1px solid var(--tori); border-radius: 10px;}
.nac-card .guest-photo {filter: opacity(.9);transition: all 1s ease;}
.nac-card .guest-name {bottom: 25px; transition: all 1s ease;}
.nac-card .icons-social {position: absolute; bottom: 10px; right: 10px;}
.nac-card .icons-social a::after {background-position-y: 0px;}
.nac-card .icons-social a:hover::after {background-position-y: -25px;}
.nac-data { opacity: 0; padding: 25px; position: absolute;}
.nac-card:hover .guest-name {bottom: -25px; opacity: 0; transition: all .5s ease; }
.nac-card:hover .guest-photo {filter: opacity(.5); transition: all .5s ease;}
.nac-card:hover .nac-data { opacity: 1; transition: all .5s ease; } 

#shows {background-color: var(--papel);}
.show-card {display:block; background:var(--carbon);color:var(--blanco); width: 100%; max-width: 290px; height: 200px; position: relative; border: 1px solid var(--tori); border-radius: 10px;}
.guest-name.show {bottom:25px;}
.guest-name.show h5 {margin-bottom:0;}

/* tickets */
#tickets .cards-container {align-items: center; margin-bottom: 1rem;}
.ticket-card {display:block; color:var(--blanco); width: 33%; max-width: 400px; min-height: 550px; position: relative; border-radius: 10px; text-align: center; padding: 50px 25px; transition: all .5s ease;}
.ticket img {max-width: 160px; margin-bottom: 2rem;}
#t-reg {background:var(--carbon);}
#t-vip {background:var(--tori);width:34%; max-width: 450px; min-height: 600px;}
#t-vip img {max-width: 187px;}
#t-ful {background:var(--mente);}
div.ticket-card:hover {transform: scale(1.05); transition: all .5s ease;}

/* promos */
.promo-card {display:block; background:var(--tori);color:var(--blanco); width: 100%; max-width: 405px; height: 300px; position: relative; border: 1px solid var(--tori); border-radius: 10px;}
.promo-name {position:absolute; bottom: 0px; padding: 10px 15px; background-color: var(--tori); width: 100%; border-radius:0 0 10px 10px; transition: all .5s ease;}
.promo-name h5 {margin-bottom: 0; font-weight: 900;}
.promo-name p {margin-bottom: 0;}
.promo-card:hover {background-color: var(--mente); border-color: var(--mente); transition: all .5s ease;}
.promo-card:hover .promo-name {background-color: var(--mente);  transition: all .5s ease;}

#marcas {background-color: var(--blanco);}

#footer {background-color: var(--sakura); padding: 50px 40px 10px; font-size: initial;}
#footer .cards-container {justify-content: space-between; gap: 2%; padding-bottom: .5rem;}
#footer a {text-decoration: none; display: block; color: var(--carbon);}
#footer a:hover {color: var(--tori);}
#footer .desc {font-size: 12px; text-align: center; border-top:1px solid var(--tori); padding-top: 1rem;}
.footer-col {display: flex;  flex-direction: column;}
.footer-col h5 {font-size:24px; font-weight: 900;}
#foot-brand {max-width:300px; justify-content: center; align-items: center;}
#foot-brand h5 {margin-bottom: 0;}
#foot-info {width: 350px;}
p.info {display: block; padding-left: 30px;position: relative;}
p.info::before {content:""; background-image: url(./images/icons-footer.png); display: block; height: 27px; position: absolute; left: 0px; margin-top: 3px;}
#p-date::before {width: 25px;}
#p-party::before {width: 22px; background-position-x:-26px; margin-left: 3px;}
#p-place::before {width: 20px; background-position-x:-48px; margin-left: 3px;}
#p-mail::before {width: 27px; background-position-x:-70px; margin-top: 0;}
#p-tel::before {width: 19px; background-position-x:-98px; margin-left: 3px; margin-top: 0;}

.single-invitados #page {background-color: var(--papel);}
article.invitados {max-width:1240px; margin: 80px auto; border: 1px solid var(--tori); background-color: var(--blanco); border-radius: 10px; padding: 30px;}


@media (max-width:1280px){
  section:not(.glide-slider){
    padding-right: 30px;
    padding-left: 30px;
  }
  .flip-card {max-width: 370px; height: 515px;}
}

@media (max-width:1175px){
  footer .cards-container {flex-wrap: wrap; padding: 0;}
  #foot-brand {max-width: unset !important; margin-bottom: 1.5rem;}
  .footer-col:nth-of-type(1) {flex-basis: 100%;flex-shrink: 0;}
}

@media (max-width:992px){
  h1 {font-size: 48px;}
  h2 {font-size: 42px;}
  h4 {font-size: 28px;}
  h6 {font-size: 20px;}
  .navbar-toggler[aria-expanded="true"] { margin-bottom: 15px;}
  .wrap {flex-wrap: wrap;}
  #brand img {width: 75%;}
  #tickets .cards-container {flex-direction: column;}
  .ticket-card {display: flex; width: 90% !important; max-width: unset!important; flex-direction: row; gap: 2rem; justify-content: center; align-items: center; min-height: unset !important;}
  .ticket-card img {width:70% !important; max-width:150px !important;}
  #t-reg {order: 1;}
  #t-vip {order: 3;}
  #t-ful {order: 2;}
  footer .cards-container {gap:30px;}
   #foot-brand {margin-bottom: 0;}
  }
  @media (max-width:665px){
    footer .cards-container {gap:30px; flex-direction: column;}
    .footer-col {width: 100%;align-items: center;}
    #foot-info {width: unset;}
    p.info {width: 255px;}
}

@media (max-width:550px){
  .ticket-card {flex-direction: column;}
  #t-vip img {max-width: 180px !important;} 
}


@media (max-width:460px){
  h1 {font-size: 36px;}
  h2 {font-size: 36px;}
  h4 {font-size: 26px;}
  .flip-card {height: 450px;}
  .nac-card {height: 300px;}
}


/* ==========================================================================
   GlideJS Slider Carousel Premium Styling
   ========================================================================== */

.glide-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 80px;
}

.glide-slider .glide {
    position: relative;
    width: 100%;
}

.glide-slider .glide__slides {
    margin: 0;
    padding: 0;
}

.glide-slider .glide__slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /*height: 550px;  Perfect height for home page sliders */
}

.glide__slide .glide-container {  
  position: relative;
  z-index: 2;
  display: flex;
  gap: 40px;
  flex-direction: row; 
  align-items: center;
  width: 100%; 
  max-width: 1240px;
  height: 100%;
  box-sizing: border-box;
}


.glide-slider .glide__slide img.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 6s ease-out;
    z-index: 1;
    pointer-events: none;
}

/* Arrow controls styling */
.glide-slider .glide__arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 5;
    padding: 0 40px;
}

.glide-slider .glide__arrow {
  color: var(--tori);
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  font-size: 30px;
  box-shadow: none;
/*    background: rgba(12, 18, 24, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 0;*/
}

.glide-slider .glide__arrow:hover {
  color:var(--carbon);
/*    background: var(--tori);
    border-color: var(--tori);
    box-shadow: 0 0 20px rgba(203, 74, 79, 0.6);*/
}

/* Navigation bullets styling */
.glide-slider .glide__bullets {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 5;
}

.glide-slider .glide__bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.glide-slider .glide__bullet:hover {
    background: rgba(255, 255, 255, 0.7);
}

.glide-slider .glide__bullet--active {
    background: var(--tori);
    transform: scale(1.35);
    box-shadow: 0 0 12px rgba(203, 74, 79, 0.8);
}

.glide-slider .glide__play-pause {
    position: absolute;
    bottom: 25px;
    right: 40px;
    background: rgba(12, 18, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--blanco);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    padding: 0;
}

.glide-slider .glide__play-pause:hover {
    background: var(--tori);
    border-color: var(--tori);
    transform: scale(1.1);
}

/* Responsive adjustments */

@media (max-width:1250px){
  .glide-slider {margin: 0;}
  .glide-slider .glide__arrow {color: var(--blanco);}
}

@media (max-width: 992px) {
    .glide-slider .glide__slide {
        height: auto;
    }
    .glide__slide .glide-container {
        flex-direction: column;
        gap: 30px;
    }
    .glide-slider .glide__slide .slide-image img {
        height: auto;
    }
    .glide-slider .glide__arrows {
        padding: 0 20px;
    }
    .glide-slider .glide__arrow {
        width: 46px;
        height: 46px;
        font-size: 16px;
    }
}

@media (max-width: 576px) {

    .glide-slider .glide__arrows {
        display: none; /* Hide arrows on mobile for clean touch interface */
    }
    .glide-slider .glide__bullets {
        bottom: 15px;
    }
    .glide-slider .glide__slide .slide-image img {
        max-width: 180px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .glide-slider .glide__slide .slide-text h2 {
        font-size: 24px;
    }
    .glide-slider .glide__play-pause {
        bottom: 12px;
        right: 20px;
        width: 32px;
        height: 32px;
    }
}

/* Responsive Slide Images with Picture tag */
.glide-container .slide-picture {
    display: block;
    width: 100%;
}

.glide-container .slide-img {
    display: block;
    width: 100%;
    height: auto;
}