:root {
  /* Paleta base (ajústala según el mockup) */
  --brand-pink: #ef7f8c;
  --brand-red: #e15b64;
  --brand-blue: #2a5b86;
  --brand-navy: #2E3567;
  --brand-cyan: #4fb2c6;
  --brand-sky: #7bc4e0;
  --brand-orange: #ea8756;
  --brand-yellow: #ffcc66;
  --brand-sand: #d59a81;
  --brand-green: #3aa86b;
  --brand-purple: #6a3f66;
  --stone: #f4efe9;
  --dark: #1b1b1b;

  /* Tokens de tema */
  --primary: var(--brand-cyan);
  /*--primary: var(--brand-pink);*/
  --secondary: var(--brand-pink);
  /*--secondary: var(--brand-blue);*/
  --accent: var(--brand-yellow);
  --surface: #ffffff;
  --muted: #6c757d;

  /* Tipografía */
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-alt: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --weight-black: 900;


        --hdr-radius: 12px;
        --hdr-height: 72px;           /* desktop navbar height */
        --hdr-height-mobile: 64px;    /* mobile navbar height */
        --hdr-shadow: 0 6px 18px rgba(0,0,0,.06);

        /* Color tokens taking frame2.css palette into account */
        --hdr-primary: var(--primary, #ef7f8c);
        --hdr-dark-text: #16181b;
        --hdr-muted: #6c757d;

        --hdr-light-bg: #ffffff;
        --hdr-light-border: #e1e4ea;
        --hdr-light-link: #20263a;
        --hdr-light-link-active: var(--hdr-primary);

        --hdr-dark-bg: #233357;       /* azul marino del mock */
        --hdr-dark-arc: #1e2b47;      /* arco interior */
        --hdr-dark-border: rgba(255,255,255,.08);
        --hdr-dark-link: rgba(255,255,255,.95);
        --hdr-dark-link-active: #7bc4e0; /* sky accent from frame palette */

    }


/* Variantes de tema rápidas (cambia variables sin tocar componentes) */
.theme-pink { --primary: var(--brand-pink); --secondary: var(--brand-blue); --accent: var(--brand-yellow); }
.theme-blue { --primary: var(--brand-blue); --secondary: var(--brand-cyan); --accent: var(--brand-orange); }
.theme-green { --primary: var(--brand-green); --secondary: var(--brand-blue); --accent: var(--brand-yellow); }
.theme-purple { --primary: var(--brand-purple); --secondary: var(--brand-sky); --accent: var(--brand-orange); }

/* Base (mobile‑first) */
html { scroll-behavior: smooth; }
body {
  background-color: var(--surface);
  color: var(--dark);
  font-family: var(--font-sans);
  line-height: 1.45;
}

/* Enlaces */
a { color: var(--primary); }
a:hover { color: color-mix(in srgb, var(--primary) 85%, black); }

/* Utilidades */
.fw-black { font-weight: var(--weight-black); }
.text-accent { color: var(--accent) !important; }
.bg-accent { background-color: var(--accent) !important; }
.rounded-xxl { border-radius: 1.25rem; }
.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.object-fit-cover { object-fit: cover; }



/* Header + Navbar (Bootstrap 5) */
.header-top { position: relative; z-index: 2; padding-top: .5rem; }
.navbar { --bs-navbar-padding-y: .5rem; }
.navbar-brand { padding: 0; }
.logo-img, .logo-img-dark { height: 145px; max-height:145px;}
body.theme-light .logo-img-dark { display: none; }
body.theme-dark .logo-img { display: none; }



.navbar-nav .nav-link {
  color: var(--dark) !important;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--primary) !important; }

.navbar-toggler { border-color: var(--primary); }
.navbar-toggler:focus { box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, transparent); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(239,127,140,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* Carousel / Sliders */
.carousel .carousel-indicators [data-bs-target] { background-color: var(--primary); }
.carousel .carousel-control-next-icon, .carousel .carousel-control-prev-icon {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.carousel-caption {
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));
  border-radius: 10px;
  padding: .75rem 1rem;
}

/* Secciones y títulos */
.section-title {
  font-weight: var(--weight-black);
  letter-spacing: 1px;
  color: var(--primary);
  text-align: center;
  text-transform: uppercase;
}
.pill-badge {
  display: inline-block;
  background-color: var(--secondary);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* Tarjetas de artistas */
.artist-card { background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; }
.artist-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.artist-card .media { border-radius: 10px; overflow: hidden; }

/* CTA y formulario */
.cta-reserve { background-color: var(--secondary); color: #fff; border-radius: 14px; padding: 18px 22px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.rounded-input { border-radius: 999px !important; padding-left: 18px; }

/* Galería */
.gallery img { width: 100%; height: 320px; object-fit: cover; border-radius: 12px; }

/* Footer */
footer small { color: var(--muted); }

/* Mejoras para >= md */
/*@media (min-width: 768px) {*/
  /*.logo-img { height: 156px; }*/
  /*.frame-tiles::before { background-size: 50px 160px, 50px 180px, 50px 140px, 50px 120px; }*/
  /*.strip-tiles { height: 28px; background-size: 100% 28px; }*/
  /*.hero .decor-top { height: 140px; }*/
/*}*/

/* Mejoras para >= lg */
@media (min-width: 992px) {
  .gallery img { height: 360px; }
}



/* --------------------------
   Modo Día
--------------------------- */
body.theme-light {
    background: #ffffff;
    color: #0b1b4b;
}

body.theme-light .logo-day {
    display: inline-block;
}

body.theme-light .logo-night {
    display: none;
}

body.theme-light .nav-link {
    color: #0b1b4b;
}

body.theme-light .dates-day {
    display: inline;
    color: #d93b62;
}

body.theme-light .dates-night {
    display: none;
}

/*body.theme-light .sun-btn {*/
/*    background-image: url("/images/2025/sun-icon.svg");*/
/*}*/

.day-btn, .night-btn{text-indent: -9999px; outline:none;}

.theme-light .day-btn{display: none; visibility: hidden; }
.theme-dark .night-btn{display: none;  visibility: hidden; }

/* --------------------------
   Modo Noche
--------------------------- */
body.theme-dark {
    background: #0b1b4b;
    color: #ffffff;
}

body.theme-dark .logo-day {
    display: none;
}

body.theme-dark .logo-night {
    display: inline-block;
}

body.theme-dark .nav-link {
    color: #ffffff;
}

body.theme-dark .dates-day {
    display: none;
}

body.theme-dark .dates-night {
    display: inline;
}




.hero-graphic {
    position: relative;
    overflow: hidden;
    background-image: url("/images/2025/base-pattern.png");
    /*background-image: url("/images/2025/ducks.png");*/
    min-height: 260px;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}

.theme-dark .hero-graphic {
    background-image: url("/images/2025/base-pattern_dark.png");

}

    @media (max-width: 576px) {
    .hero-graphic {
        background-size: 100%;
    }
}
@media (min-width: 1000px) {
    .hero-graphic {
        background-size: 70%;
    }
}
@media (min-width: 1386px) {
    .hero-graphic {
        background-size: 60%;
    }
}

.main-navbar li, .main-navbar li a {
    /*font-family: "Rubik Spray Paint", system-ui;*/
    font-family: "Rubik Mono One", monospace;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase; text-decoration: none;
}

.text-blue{
    color: var(--brand-navy)!important;
}

.text-spray{
    /*font-family: "Rubik Spray Paint", system-ui;*/
    font-family: "Rubik Mono One", monospace;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--brand-red);
    line-height: 1.2em;
}
.text-spray small{
    font-size: .65em;
    line-height: 0.8em;
}

body.theme-dark .text-spray{
    color: #fffefe;
}
body.theme-dark .text-blue{
    color: #fffefe!important;
}



.date-badge {
    /*font-family: "Rubik Spray Paint", system-ui;*/
    font-family: "Rubik Mono One", monospace;
    font-weight: 800;
    font-style: normal;
    font-size: 2.10rem;
    text-transform: uppercase; text-decoration: none;
    color: var(--brand-red);
    text-align: right!important;
    line-height: 1;
}
.date-badge small { display: block; color: var(--primary); }

body.theme-light .main-navbar li, body.theme-light .main-navbar li a {color: var(--brand-navy);}
body.theme-dark .main-navbar li, body.theme-dark .main-navbar li a, body.theme-dark .date-badge {color: #fffefe; }


@media (max-width: 768px) {
    .main-navbar li, .main-navbar li a{
        font-size: 0.8rem;
    }
    .date-badge {  font-size: 1.65rem;}
    .sun-btn {
        width: 90px;
        height: 90px;
    }
}

.bg-video-media{
    width: 100%;
}

#artistas{
    background-color: var(--brand-cyan);
    padding: 0.3rem 0 1.4rem 0;
}
#djs{
    background-color: var(--brand-pink);
    padding: 0.3rem 0 1.4rem 0;
}

@media (max-width: 768px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* display 3 */
@media (min-width: 768px) {

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(33.333%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-33.333%);
    }
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
    transform: translateX(0);
}

/* Abonos / Pricing */
.pass-card { border: 1px solid #FFF; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.08); }

.pack-basic .card-header{background-color: #fff;color:#5eb1d8;}
.pack-basic .card-header .text-spray{color:#5eb1d8!important;}
.pack-basic .card-body{
    background:#5eb1d8;
    color:#fff!important;
    padding: 2.5rem 1rem;}
.pack-basic .card-body .text-spray{color:#fff!important; font-size: 1.2rem;}

.pack-upper .card-header{background-color: #fff;color:#d47782;}
.pack-upper .card-header .text-spray{color:#d47782!important;}

.pack-upper .card-body{background-color:#d47782;color:#fff!important; padding: 2.5rem 1rem;}
.pack-upper .card-body .text-spray{color:#fff!important; font-size: 1.2rem;}



/*.pass-card.basic .card-header { background: var(--brand-sky); color: #fff; }*/
/*.pass-card.zupper .card-header { background: var(--primary); color: #fff; }*/
/*.pass-card .card-body { background: linear-gradient(180deg, #fff, #f8fafc); }*/
/*.pass-card ul li::marker { color: var(--secondary); }*/


.card {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    /*background: #fff;*/
    transition: all 0.1s ease;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    overflow: hidden
}

.card:hover {
    color: #fff;
    transform: scale(1.150);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 5px 10px
}


@keyframes day2night {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100;
        from {transform: rotateY(45deg);}
        to {transform: rotateY(225deg);}
    }
    /*from {*/
    /*    transform: rotate3d(0, 0, 0, 0deg);*/
    /*}*/
    /*to {*/
    /*    transform: rotate3d(0, 1, 0, 360deg);*/
    /*}*/
}

body {
    animation: day2night 0.8s linear;
}
.counter{
    /*width: fit-content;*/
    width: 130px;
    height: fit-content;
    inline-size: fit-content;
    block-size: fit-content;
    max-width: 200px;
}
.counter-title{
    /*font-family: "Rubik Spray Paint", system-ui;*/
    font-family: "Rubik Mono One", monospace;
    color:var(--brand-cyan)
}

.count-number{
    /*font-family: "Rubik Spray Paint", system-ui;*/
    font-family: "Rubik Mono One", monospace;
    background-image: url("/images/2025/counter.png");
    background-size: contain;
    background-repeat: repeat-x;
    /*padding-right: 3px;*/
    /*padding-left: 3px;*/
    background-position: 0 0;
    letter-spacing: 2px;
}
.theme-dark .counter-title{
    color:#fdbd4c;
}
.theme-dark .count-number{
    color:var(--brand-navy);
}
.rounded-circle{border-radius: 5%!important;}


/* --visible define cuántas cards mostramos en desktop; cambiamos con media queries */
:root {
    --visible: 1; /* mobile: 1 */
    --gap: 1rem;  /* gap entre cards */
}

/* Contenedor viewport */
.cards-carousel {
    --pad: 0.5rem;
}
.card{
    border-radius: 1.5rem;

}
/* Track flex */
.cards-track {
    gap: var(--gap);
    scroll-behavior: smooth;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.25rem; /* para evitar que footer se corte en algunos navegadores */
}

/* Cada item actúa como "slide" */
.card-item {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
    max-width: calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
    box-sizing: border-box;
}

.card-footer {
    margin:10px;
    border-top: 2px solid #EFEAEA;
    background-image:url('/images/2025/playback.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    height:40px
}
/* Ajustes visuales */
.cards-track::-webkit-scrollbar { display: none; }
.card img { object-fit: cover; height: 200px; width: 100%; }
@media (min-width: 768px) {
    /* en md+ mostramos 3 por fila (o las que quepan) */
    :root { --visible: 3; }
    .card img { height: 220px; }
}
@media (min-width: 1200px) {
    /* en xl+ mostramos 4 por fila (opcional) */
    :root { --visible: 4; }
    .card img { height: 240px; }
}

/* Botones: ligeramente transparentes sobre el carousel */
.carousel-control-prev,
.carousel-control-next {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    opacity: 0.95;
}
@keyframes pulsaqui
{
    0%   {height:110px;}
    10% {height: 110px;}
    50% {height: 120px;}
    75% {height: 130px;}
    90% {height: 120px;}
    100% {height: 110px;}
}
@-webkit-keyframes pulsaqui
{
    0%   {height:110px;}
    10% {height: 110px;}
    50% {height: 120px;}
    75% {height: 130px;}
    90% {height: 120px;}
    100% {height: 110px;}
}

/*@keyframes arrow*/
/*{*/
/*    0%   {bottom:0;}*/
/*    75% {bottom:30px;}*/
/*    100% {bottom:0;}*/
/*}*/
/*@-webkit-keyframes arrow*/
/*{*/
/*    0%   {bottom:0;}*/
/*    75% {bottom:30px;}*/
/*    100% {bottom:0;}*/
/*}*/
/* Botón sol/luna */
.sun-btn {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    background: url("/images/2025/sun-icon.svg") center/contain no-repeat;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.4s ease;
    z-index: 20;

    animation-name:pulsaqui;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:normal;
    animation-play-state:running;
    -webkit-animation-name:pulsaqui;
    -webkit-animation-duration:1s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -webkit-animation-play-state:running;

}

body.theme-light .sun-btn {
    background-image: url("/images/2025/sun-icon.svg");
}
body.theme-light .sun-btn:hover {
    background-image: url("/images/2025/sun-icon_hover.svg");
}
body.theme-dark .sun-btn {
    background-image: url("/images/2025/moon-icon.svg");
}
body.theme-dark .sun-btn:hover {
    background-image: url("/images/2025/moon-icon_hover.svg");
}



.sun-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}
@media (max-width: 740px) {
    @keyframes pulsaqui
    {
        0%   {height:75px;}
        10% {height: 75px;}
        50% {height: 85px;}
        75% {height: 105px;}
        90% {height: 85px;}
        100% {height: 70px;}
    }
    @-webkit-keyframes pulsaqui
    {
        0%   {height:75px;}
        10% {height: 75px;}
        50% {height: 85px;}
        75% {height: 105px;}
        90% {height: 85px;}
        100% {height: 70px;}
    }
    .sun-btn {
        top:60%;
        width: 85px; height: 85px;}
}
@media (max-width: 470px) {
    @keyframes pulsaqui
    {
        0%   {height:75px;}
        10% {height: 75px;}
        50% {height: 85px;}
        75% {height: 105px;}
        90% {height: 85px;}
        100% {height: 70px;}
    }
    @-webkit-keyframes pulsaqui
    {
        0%   {height:75px;}
        10% {height: 75px;}
        50% {height: 85px;}
        75% {height: 105px;}
        90% {height: 85px;}
        100% {height: 70px;}
    }

    .sun-btn {
        top:60%;
        width: 90px; height: 90px;}
}
@media (max-width: 390px) {
    @keyframes pulsaqui
    {
        0%   {height:75px;}
        10% {height: 75px;}
        50% {height: 85px;}
        75% {height: 105px;}
        90% {height: 85px;}
        100% {height: 70px;}
    }
    @-webkit-keyframes pulsaqui
    {
        0%   {height:75px;}
        10% {height: 75px;}
        50% {height: 85px;}
        75% {height: 105px;}
        90% {height: 85px;}
        100% {height: 70px;}
    }
    .sun-btn {
        top:70%;
        width: 60px; height: 60px;}
}




.cards-track img.card-img-top{
    height: 100%!important;
    min-height: 200px;
    max-height: 450px;
    object-fit: scale-down;
}

.date-badge h6{
    font-size: 0.8rem;
}

.sun-btn-pill {
    /*position: relative;*/
    /*top: 80%;*/
    /*left: 80%;*/
    /*transform: translate(-50%, -50%);*/
    width: 120px;
    height: 40px;
    background: url("/images/2025/sun-icon-pill.png");
    /*background: url("/images/2025/sun-icon-pill.png") center/contain no-repeat;*/
    border: none;
    cursor: pointer;
    /*transition: transform 0.3s ease, background 0.4s ease;*/
    z-index: 20;

    float: right;
    background-position-x: right;
    background-position-y: center;
    background-size: 70%;
    background-repeat: no-repeat;
    padding: 0;
    ;
    /*animation-name:pulsaqui;*/
    /*animation-duration:1s;*/
    /*animation-timing-function:linear;*/
    /*animation-delay:0s;*/
    /*animation-iteration-count:infinite;*/
    /*animation-direction:normal;*/
    /*animation-play-state:running;*/
    /*-webkit-animation-name:pulsaqui;*/
    /*-webkit-animation-duration:1s;*/
    /*-webkit-animation-timing-function:linear;*/
    /*-webkit-animation-delay:0s;*/
    /*-webkit-animation-iteration-count:infinite;*/
    /*-webkit-animation-direction:normal;*/
    /*-webkit-animation-play-state:running;*/

}

body.theme-light .sun-btn-pill {
    background-image: url("/images/2025/sun-icon-pill.png");
}
body.theme-light .sun-btn-pill:hover {
    background-image: url("/images/2025/sun-icon_hover-pill.png");
}
body.theme-dark .sun-btn-pill {
    background-image: url("/images/2025/moon-icon-pill.png");
}
body.theme-dark .sun-btn-pill:hover {
    background-image: url("/images/2025/moon-icon_hover-pill.png");
}
.sun-btn-pill:hover {
    /*transform: translate(-50%, -50%) scale(1.1);*/
}

.date-badge {
    background-image: url("/images/2025/arrow_sun.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    padding-right:20%;
}