:root {
    --color-primary: #1B2740;
    --color-secondary: #A0D9D9;
    --color-details: #F2E205;
    --font-ppal: 'Montserrat', sans-serif;
    --font-title: 'Bruno Ace', sans-serif;
}

body {
    font-family: var(--font-ppal);
}

img {
    max-width: 100%;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    overflow: hidden;
}

main {
    min-height: 100vh;
    background-image: url("../img/bg-ppal.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.whatsapp-float {
    position: fixed;
    left: 24px;
    bottom: 24px;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    font-size: 24px;
    color: white;
    background: #25D366;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    z-index: 20;
}

    .whatsapp-float:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(0,0,0,.25);
        filter: saturate(1.1);
    }

    .whatsapp-float:active {
        transform: translateY(0);
    }

@media (prefers-color-scheme: dark) {
    .whatsapp-float {
        box-shadow: 0 8px 20px rgba(0,0,0,.5);
    }
}

.q-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.22);
    backdrop-filter: blur(2px);
    z-index: -1;
}

.q-panel {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(95vw, 1100px);
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    padding: clamp(16px, 2vw, 32px);
    overflow: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overscroll-behavior: contain;
}

@media (max-width: 768px) {
    .q-panel {
        width: 95vw;
        height: 90vh;
        border-radius: 16px;
    }
}

@supports (height: 100svh) {
    .q-panel {
        max-height: 90svh;
    }
}

.q-progress {
    height: 12px;
    border-radius: 9999px;
    background: #edf0f5;
    position: relative;
}

.q-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-details));
    border-radius: inherit;
    transition: width .45s ease;
    position: relative;
    will-change: width;
}

    .q-progress__bar::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -100%;
        margin-bottom: 6px;
        transform: translateX(50%);
        width: 28px;
        height: 28px;
        background: url("../img/logo_celeste.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        pointer-events: none;
    }

.q-steps {
    flex: 1;
    display: grid;
}

.q-step {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
}
    .q-step.is-active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

@media (prefers-reduced-motion: reduce) {
    .q-step {
        transition: none;
        transform: none;
    }
}

.q-title {
    text-align: center;
    margin: 8px 0 24px;
    font-weight: 700;
    font-size: clamp(22px,3.2vw,40px);
}

.q-form {
    display: grid;
    gap: 12px;
    width: min(720px,100%);
    margin: 0 auto;
}

.ac {
    position: relative;
}


.q-label {
    font-weight: 600;
    font-size: 14px;
    color: #394150;
}


.q-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e7eaef;
    font-size: 16px;
    background: #fff;
    color: #111;
    font-family: var(--font-ppal, 'Montserrat', sans-serif);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.ac-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: #f3f5f9;
    border: 1px solid #e1e6ef;
    border-radius: 16px;
    margin-top: 6px;
    padding: 6px 0;
    list-style: none;
    overflow: auto;
    font-family: var(--font-ppal, 'Montserrat', sans-serif);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    max-height: min(45svh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

    .q-input:disabled {
        background: #f5f7fb;
        color: #9aa3b2;
    }

    .q-input::placeholder {
        color: #9aa3b2;
    }

    .q-input:focus {
        border-color: #e7eaef; 
        box-shadow: 0 8px 24px rgba(0,0,0,.06);
    }

.ac-item {
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 12px;
}

    .ac-item:hover,
    .ac-item[aria-selected="true"] {
        background: #e7eaf1;
    }

.q-actions {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.q-btn {
    appearance: none;
    border-radius: 14px;
    padding: 14px 20px;
    font-weight: 600;
    border: 1px solid #e7eaef;
    background: #fff;
    color: var(--color-primary);
    transition: transform .15s ease, background-color .15s, color .15s, border-color .15s, opacity .15s;
}
    .q-btn[disabled] {
        cursor: not-allowed;
    }

    .q-btn:hover:not([disabled]) {
        transform: translateY(-1px);
    }

.q-btn--ghost {
    background: #fff;
}
    .q-btn--ghost[disabled] {
        background: #f3f5f9;
        border-color: #e4e8ef;
        color: #9aa3b2;
    }

.q-btn--primary {
    background: var(--color-primary);
    color: var(--color-details);
    border-color: var(--color-primary);
}

    .q-btn--primary[disabled] {
        background: #d9dde6;
        border-color: #d9dde6;
        color: #8a93a6;
    }

.q-choice {
    width: 100%;
    text-align: left;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid #e7eaef;
    background: #fff;
    font-size: 18px;
    transition: transform .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}

    .q-choice:hover,
    .q-choice:focus-visible {
        transform: scale(1.05);
    }

    .q-choice.is-selected,
    .q-choice[aria-pressed="true"] {
        background: var(--color-primary);
        color: var(--color-details);
        border-color: var(--color-primary);
    }


@media (max-width: 480px) {
    .q-title {
        font-size: clamp(18px, 6vw, 22px);
    }

    .q-label {
        font-size: 13px;
    }

    .q-input {
        font-size: 12.5px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .q-choice {
        font-size: 15px;
        padding: 14px 16px;
    }

    .q-btn {
        font-size: 15px;
        padding: 12px 16px;
    }
}

.q-choices {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    gap: 16px;
    width: min(720px,100%);
}

#step-distribuidora {
    display: grid !important;
    align-content: center;
    justify-items: center;
    min-block-size: 100%;
}

    #step-distribuidora .q-title {
        margin-top: 0;
    }

    #step-distribuidora .q-choices {
        width: min(720px, 100%);
    }

.q-subtitle {
    text-align: center;
    margin: 0 0 20px;
    font-weight: 600;
    font-size: clamp(16px,2.2vw,28px);
    color: #394150;
    max-width: min(900px,100%);
}

/* Center Step 3 like Step 2 */
#step-propiedad {
    display: grid !important;
    align-content: center;
    justify-items: center;
    min-block-size: 100%;
}

    #step-propiedad .q-title {
        margin-top: 0;
    }

    #step-propiedad .q-choices {
        width: min(720px,100%);
    }

#step-forma .q-choices {
    overflow: visible; /* allow hover scale */
    padding-inline: 10px; /* small buffer for scale */
    box-sizing: border-box; /* padding doesn't grow width */
    margin: 0 auto; /* center again */
    /* remove any earlier: margin-inline:-10px; contain:paint; */
}
/* isolates hover scale; no extra scroll */
#step-forma .q-choice {
    padding-left: 112px; /* room for thumbnail */
    background-repeat: no-repeat;
    background-position: 16px 50%;
    background-size: 84px 60px; /* contained; never affects layout */
}
    /* keep image when selected (avoid resetting background-image) */
    #step-forma .q-choice.is-selected,
    #step-forma .q-choice[aria-pressed="true"] {
        background-color: var(--color-primary);
        color: var(--color-details);
        border-color: var(--color-primary);
    }

@media (max-width: 480px) {
    /* Step 5 only */
    #step-forma .q-choices {
        gap: 12px
    }

    #step-forma .q-choice {
        padding: 12px 14px 12px 84px; /* smaller box + room for thumb */
        font-size: 15px;
    }

    #step-forma .q-choice {
        background-size: 60px 44px; /* shrink image */
        background-position: 12px 50%;
    }
        /* avoid height bump on tap that can cause vertical scroll */
        #step-forma .q-choice:hover,
        #step-forma .q-choice:focus-visible {
            transform: none
        }
}

@media (hover:none), (pointer:coarse) {
    .is-brave .q-panel {
        min-height: 100svh;
    }
    /* or 100dvh */
}

#step-boleta {
    display: grid !important;
    align-content: center;
    justify-items: center;
    min-block-size: 100%;
}

    #step-boleta .q-title {
        margin-top: 0;
        text-align: center;
    }

    #step-boleta .q-input {
        width: min(420px,100%); /* not full width */
        justify-self: center; /* center the element */
    }

#step-horario {
    display: grid !important;
    align-content: center;
    justify-items: center;
    min-block-size: 100%;
}

    #step-horario .q-title {
        margin-top: 0;
    }

    #step-horario .q-choices {
        width: min(600px,100%);
    }

#step-temporada {
    display: grid !important;
    align-content: center;
    justify-items: center;
    min-block-size: 100%;
}

    #step-temporada .q-title {
        margin-top: 0;
    }

    #step-temporada .q-choices {
        width: min(600px,100%);
    }

#step-contacto {
    display: grid !important;
    align-content: center;
    justify-items: center;
    min-block-size: 100%;
}

    #step-contacto .q-title {
        margin-top: 0;
        text-align: center;
    }

    #step-contacto .contact-input {
        width: min(640px,100%);
        position: relative;
        margin: 12px 0;
    }

        #step-contacto .contact-input .q-input {
            width: 100%;
            padding-left: 56px; /* room for the icon */
            border: 1px solid #e7eaef;
            border-radius: 14px;
        }

        /* the icon matches the input’s height and stays on the left */
        #step-contacto .contact-input .icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            height: calc(100% - 20px); /* fills the control vertically */
            width: auto;
            pointer-events: none;
        }

#step-loading {
    display: grid !important;
    align-content: center;
    justify-items: center;
    min-block-size: 100%;
}

    #step-loading .q-title {
        margin: 0 0 16px;
        text-align: center;
    }

.q-spinner {
    inline-size: 80px;
    block-size: 80px;
    border-radius: 50%;
    background: linear-gradient(#1B2740, #F2E205); /* azul → amarillo */
    animation: qspin 1s linear infinite;
    position: relative;
}

    .q-spinner::before {
        content: "";
        position: absolute;
        inset: 10px;
        background: #fff;
        border-radius: 50%;
    }

@keyframes qspin {
    to {
        transform: rotate(360deg)
    }
}

#step-presentacion {
    text-align: center;
    align-content: center;
}

    #step-presentacion .q-title {
        color: var(--color--details, var(--color-details));
    }

    #step-presentacion .q-subtitle {
        text-align: center;
        font-weight: 550;
        font-size: clamp(16px,1.8vw,28px);
        color: #394150;     
        margin: 0 auto 20px; /* center the block */
        text-align: center; /* keep centered text */
    }

.q-actions.q-actions--center {
    display: flex; /* ensures centering works */
    justify-content: center;
    gap: 12px;
}