@font-face {
    font-family: 'Qeinsha';
    src: url('../font/Free-Qeinsha-Font/Qeinsha.ttf');
    font-display: swap;
}

@font-face {
    font-family: 'Qeinsha Italic';
    src: url('../font/Free-Qeinsha-Font/Qeinsha Italic.ttf');
    font-display: swap;
}

:root {
    --gold: #d4a14a;
    --rule: rgba(255, 255, 255, .55);
    --blue-bg: #0d1b2a;
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s ease, transform .8s ease
}

.reveal.visible {
    opacity: 1;
    transform: none
}

body {
    margin: 0;
    font-family: 'Qeinsha', serif;
    background-color: var(--blue-bg);
    color: #fff;
}

h2,
h3 {
    font-family: 'Qeinsha', serif;
    color: #d4af37;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
}

.title {
    font-family: 'Qeinsha', serif;
    font-size: 6rem;
}

@media screen and (max-width: 768px) {
    .title {
        font-size: 4.5rem;
    }
}

/* === HERO (primera sección con imagen de fondo) === */
.hero {
    background: url('../img/back.png') center/cover no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    text-align: center;
}

.hero .hero-mark {
    display: block;
    margin: 0 auto 24px;
    width: min(600px, 92%);
    height: auto;
}

.meta-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
    margin: 22px auto 30px;
}

.block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rule {
    height: 1px;
    width: 100%;
    max-width: 210px;
    background: var(--rule);
}

.label {
    font-size: 18px;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.date-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    min-width: 100px;
}

.month,
.year {
    font-size: 18px;
    letter-spacing: .38em;
    text-transform: uppercase;
    opacity: .95;
}

.day {
    font-size: clamp(40px, 9vw, 76px);
    font-weight: 800;
    line-height: .85;
    margin: 8px 0;
}

.venue {
    margin-top: 8px;
    line-height: 1.6;
    font-size: 16px;
}

.venue .name {
    display: block;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-size: 18px;
}

.footer {
    margin: 30px auto 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .95;
}

.footer img {
    height: 35px;
    width: auto;
}

/********COUNTDOWN*********/
.countdown {
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: center;
    margin: 28px auto 0;
    flex-wrap: wrap
}

.pill {
    min-width: 110px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(212, 175, 55, .35);
    box-shadow: inset 0 0 24px rgba(212, 175, 55, .08);
    padding: 14px 16px;
    text-align: center
}

.pill strong {
    display: block;
    font-size: 1.9rem;
    letter-spacing: .02em;
    color: var(--gold)
}

.pill span {
    font-size: .8rem;
    opacity: .8
}

.cta-row {
    margin-top: 34px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap
}

.btn {
    appearance: none;
    border: none;
    cursor: pointer;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 700;
    letter-spacing: .3px
}

.btn-gold {
    background: var(--gold-grad);
    color: #1a1a1a;
    box-shadow: 0 12px 30px rgba(212, 175, 55, .35)
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid rgba(212, 175, 55, .4)
}

/**********COUNTDOWN***********/

/* === PROGRAMA === */
#programa {
    padding: 60px 0;
}

#programa h2 {
    text-align: center;
    margin-bottom: 12px;
    color: var(--gold);
}

#programa p {
    text-align: center;
    margin-bottom: 28px;
    font-size: 15px;
    opacity: .9;
}

.timeline {
    display: grid;
    gap: 18px;
}

.slot {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    align-items: center;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(212, 175, 55, .18);
    border-radius: 12px;
    padding: 16px 18px;
}

.slot time {
    font-weight: 700;
    color: var(--gold);
}

.slot .name {
    font-weight: 600;
}

/* Responsive */
@media (max-width:768px) {
    .meta-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .slot {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .slot time {
        order: -1;
    }
}

/************ CARNET *************/
section {
    padding: 5rem 10%;
    position: relative;
}

.ornament {
    width: 80px;
    margin: 2rem auto;
    border-top: 2px solid #d4af37;
    border-bottom: 2px solid #d4af37;
    height: 6px;
}

.carnet {
    display: flex;
    justify-content: center;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
    flex-direction: column;
    /* Apila los elementos en columna */
    text-align: center;
    /* Centra el texto */
    min-height: 100vh;
    /* Para que quede centrado en pantalla */
}

#carnet p {
    color: #000000;
    font-size: 17px;
    text-align: justify;
    text-transform: none;
}

#carnet h5 {
    font-size: 20px;
}

.fw-bold {
    font-weight: 700 !important;

}

.precios {
    font-size: 15px;
}

.btn.btn-ir-registro {
    background-color: #d4af37;
    border: 1px solid #d4af37;
    color: white;
    width: 100%;
    border-radius: 5px;
}

.btn.btn-ir-registro:hover {
    background-color: transparent;
    border: 2px solid #d4af37;
    color: #d4af37;
    width: 100%;
    border-radius: 5px;
}

.ticket {
    border-radius: 4px;
    display: inline-block;
    max-width: 450px;
    text-align: left;
    width: 100%;
    font-size: 17px;
}

.ticket.dark {
    background-color: #d4af37;
    color: white;
}

.ticket.light {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.ticket.light .ticket-body {
    border-color: #d4af37;
}

.ticket-head {
    background-position: center;
    background-size: cover;
    border-radius: 4px 4px 0 0;
    color: #ffffff;
    height: 140px;
    position: relative;
}

.ticket-head .from-to {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-size: 24px;
    font-weight: 600;
    width: 100%;
    z-index: 2;
}

.ticket-head .icon {
    display: inline-block;
    margin: 0 40px;
    transform: rotate(135deg) translate(25%, 25%);
}

.ticket-body {
    border-bottom: 1px dashed white;
    padding: 15px 45px;
    position: relative;
}

.ticket-body p {
    color: #A2A2A2;
    font-size: 12px;
}

.ticket-body .flight-info {
    margin-top: 15px;
}

.ticket-body .flight-date {
    font-size: 12px;
    margin-top: 15px;
}

.ticket-body:before,
.ticket-body:after {
    background: transparent;
    border-radius: 100%;
    content: "";
    height: 15px;
    position: absolute;
    top: 100%;
    width: 20px;
}

.ticket-body:before {
    left: 0;
    transform: translate(-70%, -45%);
}

.ticket-body:after {
    right: 0;
    transform: translate(70%, -45%);
}

.barcode {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 1px 0 0 1px,
        5px 0 0 1px,
        10px 0 0 1px,
        11px 0 0 1px,
        15px 0 0 1px,
        18px 0 0 1px,
        22px 0 0 1px,
        23px 0 0 1px,
        26px 0 0 1px,
        30px 0 0 1px,
        35px 0 0 1px,
        37px 0 0 1px,
        41px 0 0 1px,
        44px 0 0 1px,
        47px 0 0 1px,
        51px 0 0 1px,
        56px 0 0 1px,
        59px 0 0 1px,
        64px 0 0 1px,
        68px 0 0 1px,
        72px 0 0 1px,
        74px 0 0 1px,
        77px 0 0 1px,
        81px 0 0 1px,
        85px 0 0 1px,
        88px 0 0 1px,
        92px 0 0 1px,
        95px 0 0 1px,
        96px 0 0 1px,
        97px 0 0 1px,
        101px 0 0 1px,
        105px 0 0 1px,
        109px 0 0 1px,
        110px 0 0 1px,
        113px 0 0 1px,
        116px 0 0 1px,
        120px 0 0 1px,
        123px 0 0 1px,
        127px 0 0 1px,
        130px 0 0 1px,
        131px 0 0 1px,
        134px 0 0 1px,
        135px 0 0 1px,
        138px 0 0 1px,
        141px 0 0 1px,
        144px 0 0 1px,
        147px 0 0 1px,
        148px 0 0 1px,
        151px 0 0 1px,
        155px 0 0 1px,
        158px 0 0 1px,
        162px 0 0 1px,
        165px 0 0 1px,
        168px 0 0 1px,
        173px 0 0 1px,
        176px 0 0 1px,
        177px 0 0 1px,
        180px 0 0 1px;
    display: inline-block;
    height: 30px;
    margin-right: 85px;
    margin-top: 25px;
    transform: translateX(-90px);
    width: 0;
}

.disclaimer {
    color: #A2A2A2;
    font-family: "Qeinsha, serif";
    font-size: 14px;
    font-style: italic;
    line-height: 1.25;
    padding: 15px 25px;
    text-transform: none;
}

.layer {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    background-color: #d4af37;
    border-radius: 4px 4px 0 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

/************ CARNET **************/

.programa,
.carnet,
.artista,
.hotel,
.premio,
.recinto,
.vestimenta,
.patrocinadores {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 12px;
    padding: 2rem;
    margin: 0 3rem 3rem 3rem;
    backdrop-filter: blur(4px);
}



/**********footer**********/

footer a {
    text-decoration: none;
    color: #ffffff;
}

footer a i {
    color: #ffffff;
    font-size: 20px;
    padding: 0 5px;
}
@media screen and (max-width:811px){
    .carnet{
        min-height: auto;
    }
}

@media screen and (max-width:500px) {
    .ticket-body{
        padding: 15px 20px;
    }

    .programa,
    .carnet,
    .artista,
    .hotel,
    .recinto,
    .premio,
    .vestimenta,
    .patrocinadores{
        padding: 1rem;
        margin: 0 1rem 1rem 1rem;
    }
}