/* =========================================================
   SUSSEX PROMO — estilos generales
   Tipografías: Aspira (solo menú principal) / Montserrat (resto)
   ========================================================= */

@font-face {
    font-family: 'Aspira';
    src: url('../fonts/Aspira-Bold.woff2') format('woff2'),
         url('../fonts/Aspira-Bold.woff') format('woff'),
         url('../fonts/Aspira-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy: #1f325d;
    --navy-dark: #142140;
    --navy-soft: #32406b;
    --red: #bc182b;
    --red-dark: #931220;
    --sky: #0a82b4;
    --gray-bg: #f4f5f7;
    --radius-lg: 26px;
    --radius-md: 16px;
    font-size: 16px;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--navy);
    background: #fff;
    margin: 0;
}

a { text-decoration: none; }
img { max-width: 100%; display: block; }

.container-xl { max-width: 1320px; }

h1, h2, h3, h4 {
    font-weight: 800;
    color: var(--navy);
}

.text-red { color: var(--red) !important; }
.text-sky { color: var(--sky) !important; }
.bg-navy { background-color: var(--navy) !important; }

.btn-sussex {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 16px 40px;
    font-size: 1.15rem;
    letter-spacing: .3px;
    transition: background .15s ease, transform .1s ease;
    box-shadow: 0 6px 18px rgba(188,24,43,.35);
}
.btn-sussex:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); }
.btn-sussex:disabled, .btn-sussex.disabled {
    background: #c7c9d1; box-shadow: none; cursor: not-allowed; transform: none;
}
.btn-sussex-outline {
    background: transparent;
    border: 2px solid var(--navy);
    color: var(--navy);
    border-radius: 999px;
    font-weight: 800;
    padding: 10px 28px;
}

/* ---------- HEADER ---------- */
header.site-header {
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 1030;
    overflow: visible;
}
header.site-header .navbar,
header.site-header .container-xl {
    overflow: visible;
}
header.site-header .navbar { padding-top: 0; padding-bottom: 0; }
header.site-header .container-xl {
    position: relative;
    min-height: 72px;
    display: flex;
    align-items: center;
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
}
header.site-header .navbar-brand {
    position: relative;
    z-index: 1040;
    padding: 0;
    margin: 0 1rem 0 0;
    line-height: 0;
    align-self: flex-start;
    /* el logo cuelga por debajo de la barra */
    margin-bottom: -58px;
}
header.site-header .navbar-brand img {
    height: 118px;
    width: auto;
    max-width: none;
    display: block;
}
@media (max-width: 991px) {
    header.site-header .container-xl { min-height: 64px; }
    header.site-header .navbar-brand { margin-bottom: -36px; }
    header.site-header .navbar-brand img { height: 88px; }
}
@media (max-width: 575px) {
    header.site-header .navbar-brand img { height: 76px; }
    header.site-header .navbar-brand { margin-bottom: -28px; }
}
header.site-header .nav-link {
    font-family: 'Aspira', 'Montserrat', sans-serif;
    font-weight: 700;
    color: #fff !important;
    font-size: 1rem;
    padding: .5rem 1rem !important;
    text-align: center;
    line-height: 1.15;
}
@media (min-width: 992px) {
    header.site-header .nav-link {
        font-size: .92rem;
        padding: .45rem .7rem !important;
    }
}
header.site-header .nav-link:hover,
header.site-header .nav-link.active { color: #bcd4ea !important; }

.user-icon-btn {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    border: none;
    padding: 6px;
    flex-shrink: 0;
}
.user-icon-btn img { width: 100%; height: 100%; object-fit: contain; }

.user-dropdown-menu {
    min-width: 220px;
    border-radius: var(--radius-md);
    border: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    padding: .5rem;
}
.user-dropdown-menu .user-name {
    font-weight: 800;
    color: var(--navy);
    padding: .5rem .75rem 0;
    font-size: .95rem;
}
.user-dropdown-menu .user-dni {
    color: #7c8296;
    font-size: .8rem;
    padding: 0 .75rem .5rem;
}

/* ---------- HERO ---------- */
.hero-wrap { position: relative; background: #fff; }
.hero-img-wrap {
    --hero-h: 80vh;
    position: relative;
    line-height: 0;
    height: var(--hero-h);
    overflow: hidden;
}
.hero-bg,
.hero-bg-img {
    display: block;
    width: 100%;
    height: 100%;
}
.hero-bg-img {
    object-fit: cover;
    object-position: center;
}
/* Imagen superior centrada (desk / mobile) */
.hero-fg {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 0;
}
.hero-fg-img {
    /* encaja en el hero sin recorte, priorizando alto ~45vh cuando hay espacio */
    height: auto;
    width: auto;
    max-height: min(45vh, 82%);
    max-width: min(92%, 100%);
    object-fit: contain;
    display: block;
    /* subir un poco respecto al centro, proporcional al alto del hero */
    transform: translateY(calc(var(--hero-h) * -0.07));
}
.hero-img-wrap::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 90px;
    background: #fff;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: scale(1.4);
    z-index: 1;
}
.hero-cta-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: -110px;
    z-index: 3;
}
.hero-cta-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    transform: translateY(-50%);
    transition: transform .15s ease;
}
.hero-cta-btn:hover { transform: translateY(calc(-50% - 2px)); }
.hero-cta-btn img {
    width: min(420px, 82vw);
    height: auto;
}

@media (max-width: 767px) {
    .hero-img-wrap {
        --hero-h: auto;
        height: auto;
        min-height: 0;
    }
    .hero-bg,
    .hero-bg-img {
        height: auto;
    }
    .hero-bg-img {
        object-fit: contain;
        width: 100%;
    }
    .hero-fg-img {
        width: 80%;
        max-width: 80%;
        max-height: none;
        height: auto;
        transform: translateY(-12%);
    }
    .hero-img-wrap::after { height: 70px; transform: scale(1.55); }
    .hero-cta-wrap { margin-top: -76px; }
    .hero-cta-btn { transform: translateY(-50%); }
    .hero-cta-btn:hover { transform: translateY(calc(-50% - 2px)); }
    .hero-cta-btn img { width: min(300px, 86vw); }
}

/* ---------- PARTICIPAR (lote/hora) ---------- */
.participar-section { padding: 70px 0 40px; }
.participar-card {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.participar-card .producto-img {
    flex: 1 1 52%;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}
.participar-form-box {
    flex: 1 1 34%;
    max-width: 440px;
    min-width: 260px;
    position: relative;
    margin: 0 auto;
}
.participar-form-box h2 { font-size: 1.75rem; margin-bottom: 1.25rem; }
.participar-form-box h2 strong { display: block; color: var(--red); font-size: 1.15em; }

.form-select-sussex {
    border: 2px solid var(--navy);
    border-radius: 999px;
    padding: 14px 42px 14px 22px;
    font-weight: 700;
    color: var(--navy);
    width: 100%;
    margin-bottom: 1rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%231f325d' d='M3.2 5.6L8 10.4l4.8-4.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 16px 16px;
}
.form-select-sussex:focus {
    border-color: var(--navy);
    box-shadow: none;
}

.lote-inputs { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 1rem; }
.lote-inputs .form-control,
.codigo-soc-row .form-control {
    border: 2px solid var(--navy);
    border-radius: 999px;
    padding: 14px 22px;
    font-weight: 700;
    color: var(--navy);
    flex: 1;
    min-width: 180px;
}
.lote-inputs .form-control::placeholder,
.codigo-soc-row .form-control::placeholder { color: var(--navy); opacity: .55; text-transform: uppercase; }

.lote-inputs[hidden],
.codigo-soc-row[hidden] {
    display: none !important;
}

.codigo-soc-row { margin-bottom: 1rem; }
.codigo-soc-row .form-control {
    flex: none;
    width: 100%;
    min-width: 0;
}

.form-check-sussex { display: flex; align-items: flex-start; gap: 8px; margin-bottom: .5rem; font-size: .9rem; }
.form-check-sussex input { margin-top: 4px; accent-color: var(--sky); }
.form-check-sussex label { color: var(--navy); }

.locked-overlay-box { position: relative; }
.locked-overlay-box.is-locked .participar-lockable { opacity: .35; pointer-events: none; filter: grayscale(.3); }
.locked-note {
    display: none;
    align-items: center;
    gap: 12px;
    background: #fff6f2;
    border: 1.5px dashed var(--red);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-top: 14px;
    font-weight: 700;
    color: var(--navy);
}
.locked-overlay-box.is-locked .locked-note { display: flex; }
.locked-note svg { flex-shrink: 0; }
.locked-note button {
    margin-left: auto;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 20px;
    font-weight: 800;
    font-size: .85rem;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .participar-section { padding: 36px 16px 28px; }
    .participar-card {
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }
    .participar-card .producto-img {
        flex: none;
        max-width: 280px;
    }
    .participar-form-box {
        flex: none;
        width: 100%;
        max-width: 420px;
        min-width: 0;
        text-align: left;
    }
    .participar-form-box h2 {
        font-size: 1.35rem;
        text-align: center;
    }
    .participar-form-box h2 strong { color: var(--red); }
    /* En mobile el título va rojo arriba / navy abajo como en la muestra */
    .participar-form-box h2 {
        color: var(--red);
    }
    .participar-form-box h2 strong {
        color: var(--navy);
        font-size: 1em;
    }
    .form-select-sussex {
        padding: 12px 38px 12px 16px;
        font-size: .9rem;
        border-color: var(--sky);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%230a82b4' d='M3.2 5.6L8 10.4l4.8-4.8'/%3E%3C/svg%3E");
        background-position: right 14px center;
    }
    .lote-inputs { gap: 10px; flex-wrap: nowrap; }
    .lote-inputs .form-control,
    .codigo-soc-row .form-control {
        min-width: 0;
        padding: 12px 16px;
        font-size: .9rem;
        border-color: var(--sky);
    }
    .participar-form-box .btn-sussex {
        width: 100%;
        margin-top: 10px;
    }
    .locked-note {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .locked-note button { margin-left: 0; width: 100%; }
}

/* ---------- COMO PARTICIPAR ---------- */
.como-participar-section { padding: 50px 0; text-align: center; }
.como-participar-section h2 {
    font-size: 2.4rem;
    color: var(--navy);
    margin-bottom: 2rem;
}
.como-participar-picture { display: block; }
.como-participar-banner {
    display: block;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}
@media (max-width: 767px) {
    .como-participar-section { padding: 28px 16px 20px; }
    .como-participar-section h2 {
        font-size: 1.7rem;
        margin-bottom: 1.1rem;
    }
    .como-participar-banner { max-width: 420px; }
}

/* ---------- PREMIOS + fondo curvo hasta abajo ---------- */
.promo-bottom-wrap {
    --promo-cyan: #0e82b5;
    --promo-content-max: 980px;
    --promo-curve-h: 160px;
    /* ::before: un poco más arriba que top:1h */
    --promo-curve-top: calc(var(--promo-curve-h) * 0.3);
    background: var(--promo-cyan);
    position: relative;
    margin-top: 40px;
}
.premios-section {
    position: relative;
    /* sin z-index propio: permite intercalar imagen / curva / título ganadores */
    padding: 0 0 24px;
    text-align: center;
    /* blanco hasta el final de ::before; navy recién después (sin solaparse) */
    background: linear-gradient(
        to bottom,
        #fff 0,
        #fff calc(var(--promo-curve-top) + var(--promo-curve-h)),
        var(--navy) calc(var(--promo-curve-top) + var(--promo-curve-h))
    );
}
/* Curva 1: navy sube hacia el blanco; bajada ~1.5× su alto */
.premios-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--promo-curve-top);
    height: var(--promo-curve-h);
    background: var(--navy);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: scaleX(1.5);
    z-index: 0;
    pointer-events: none;
}
/* Curva 2: cian — debajo del título ganadores y de la imagen */
.premios-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--promo-curve-h) * -0.5);
    height: var(--promo-curve-h);
    background: var(--promo-cyan, #0e82b5);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: scaleX(1.5);
    z-index: 0;
    pointer-events: none;
}
.premios-banner {
    position: relative;
    z-index: 3; /* por encima de ganadores y de la curva */
    margin: calc(var(--promo-curve-top) - 36px) auto 0;
    max-width: calc(var(--promo-content-max) * 0.9);
    width: 100%;
}
.premios-picture {
    display: block;
    position: relative;
    z-index: 3;
}

@media (max-width: 767px) {
    .promo-bottom-wrap {
        --promo-curve-h: 110px;
        --promo-curve-top: calc(var(--promo-curve-h) * 0.22);
        margin-top: 24px;
    }
    .premios-section {
        padding: 0 0 8px;
    }
    .premios-section::before { transform: scaleX(1.65); }
    .premios-section::after {
        bottom: calc(var(--promo-curve-h) * -0.35);
        transform: scaleX(1.65);
        z-index: 0;
    }
    .premios-picture {
        position: relative;
        z-index: 3;
        display: block;
    }
    .premios-banner {
        margin: calc(var(--promo-curve-top) - 18px) auto -48px;
        max-width: 440px;
        padding: 0 12px;
        position: relative;
        z-index: 3;
    }
}

/* ---------- GANADORES ---------- */
.ganadores-section {
    position: relative;
    z-index: 1; /* por encima de la curva ::after, debajo del banner */
    background: transparent;
    color: #fff;
    padding: calc(var(--promo-curve-h) * 0.25 + 12px) 0 50px;
}
.ganadores-section .container-xl {
    position: relative;
    z-index: 2;
    max-width: var(--promo-content-max);
}
.ganadores-section h2 { color: #fff; font-size: 2.4rem; margin-bottom: 2rem; }
.ganadores-list .item {
    background: #fff;
    color: var(--red);
    border-radius: 999px;
    padding: 14px 26px;
    margin-bottom: 14px;
    font-weight: 800;
}
.ganadores-list .item span {
    display: block;
    font-weight: 500;
    color: var(--navy);
    font-size: .85rem;
}
.ganadores-photo { border-radius: var(--radius-lg); overflow: hidden; }

@media (max-width: 767px) {
    .ganadores-section {
        z-index: 1;
        padding: 56px 16px 36px; /* espacio para premio-mobile sobre la curva */
    }
    .ganadores-section h2 {
        font-size: 1.85rem;
        margin-bottom: 1.25rem;
    }
    .ganadores-grid { --bs-gutter-y: 1.25rem; }
    .ganadores-list {
        max-height: 260px;
        overflow-y: auto;
        padding-right: 8px;
        margin-bottom: 8px;
        scrollbar-width: thin;
        scrollbar-color: #5ec4e8 transparent;
    }
    .ganadores-list::-webkit-scrollbar { width: 6px; }
    .ganadores-list::-webkit-scrollbar-thumb {
        background: #5ec4e8;
        border-radius: 999px;
    }
    .ganadores-list .item {
        border-radius: 18px;
        text-align: center;
        padding: 12px 18px;
        margin-bottom: 10px;
        text-transform: uppercase;
    }
    .ganadores-photo {
        border-radius: 18px;
        max-width: 420px;
        margin: 0 auto;
    }
    body.page-home footer.site-footer {
        padding: 16px 14px 22px;
        font-size: .68rem;
    }
}

/* ---------- FOOTER ---------- */
footer.site-footer {
    background: var(--navy-dark);
    color: #b9c1d6;
    font-size: .75rem;
    text-align: center;
    padding: 22px 18px;
    line-height: 1.5;
}
body.page-home footer.site-footer {
    background: #0e82b5;
    color: rgba(255,255,255,.9);
}
footer.site-footer a { color: #fff; text-decoration: underline; }

/* ---------- BASES Y CONDICIONES (página) ---------- */
body.page-bases {
    background: var(--navy);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.page-bases .bases-page {
    flex: 1 0 auto;
    background: var(--navy);
    padding-bottom: 40px;
}
.bases-hero {
    background: transparent;
    color: #fff;
    padding: 72px 0 28px;
    text-align: center;
}
.bases-hero h1 {
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .02em;
    margin: 0;
}
.bases-content {
    background: #fff;
    border-radius: 28px;
    box-shadow: none;
    padding: 48px 56px;
    margin: 0 auto 40px;
    max-width: 1100px;
    position: relative;
    z-index: 2;
    font-size: .95rem;
    line-height: 1.75;
    color: #1a1a1a;
    text-transform: uppercase;
    font-weight: 600;
}
.bases-content p { margin-bottom: 1.25rem; }
.bases-content p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
    .bases-content { padding: 28px 22px; border-radius: 22px; }
    .bases-hero { padding: 56px 0 22px; }
}
body.page-bases footer.site-footer {
    background: transparent;
    color: rgba(255,255,255,.78);
    margin-top: auto;
    flex-shrink: 0;
}

/* ---------- PREGUNTAS FRECUENTES ---------- */
body.page-faq {
    background: var(--navy);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.page-faq .faq-page {
    flex: 1 0 auto;
    background:
        radial-gradient(ellipse 80% 55% at 50% 42%, #2a4578 0%, var(--navy) 70%);
    padding-bottom: 48px;
}
.faq-hero {
    color: #fff;
    padding: 56px 0 28px;
    text-align: center;
}
.faq-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .04em;
    margin: 0;
}
.faq-list {
    max-width: 920px;
    margin: 0 auto;
    max-height: min(62vh, 640px);
    overflow-y: auto;
    padding: 4px 22px 12px 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--navy-dark) rgba(255,255,255,.45);
}
.faq-list::-webkit-scrollbar { width: 7px; }
.faq-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.38);
    border-radius: 999px;
}
.faq-list::-webkit-scrollbar-thumb {
    background: var(--navy-dark);
    border-radius: 999px;
}
.faq-item { margin-bottom: 14px; }
.faq-item:last-child { margin-bottom: 0; }
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--sky);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 13px 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.faq-question:hover { background: #2789a0; }
.faq-question:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.faq-icon {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #1f325e
}
.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 2px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.faq-icon::before { width: 12px; height: 2px; }
.faq-icon::after { width: 2px; height: 12px; }
.faq-item.is-open .faq-icon::after { opacity: 0; }
.faq-question-text { flex: 1; }
.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-panel-inner { overflow: hidden; }
.faq-answer {
    background: #fff;
    border-radius: 22px;
    margin-top: 10px;
    padding: 22px 32px;
    color: #1a1a1a;
    text-align: left;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.55;
}
.faq-answer a { color: var(--navy); font-weight: 800; text-decoration: underline; }
.faq-answer p { margin: 0 0 .75rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul,
.faq-answer ol {
    margin: 0 0 .75rem;
    padding-left: 1.3rem;
    text-align: left;
}
.faq-answer ul:last-child,
.faq-answer ol:last-child { margin-bottom: 0; }
.faq-answer li { margin-bottom: .35rem; }
body.page-faq footer.site-footer {
    background: transparent;
    color: rgba(255,255,255,.78);
    margin-top: auto;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .faq-hero { padding: 40px 0 20px; }
    .faq-list {
        max-height: none;
        padding-right: 4px;
    }
    .faq-question {
        font-size: .88rem;
        padding: 12px 16px;
        gap: 12px;
    }
    .faq-answer { padding: 18px 18px; border-radius: 18px; }
}

/* Evita que Bootstrap achique el fondo al abrir modales (padding por scrollbar) */
body.modal-open,
.modal-open header.site-header,
.modal {
    padding-right: 0 !important;
}
/* El scroll del viewport vive en <html>: se bloquea ahí mientras hay modal */
html.has-modal,
html.has-modal body {
    overflow: hidden;
}

/* =========================================================
   MODALES (login / registro / popups de resultado)
   ========================================================= */
.modal-sussex .modal-dialog {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.modal-sussex .modal-content {
    border-radius: var(--radius-lg);
    border: none;
    padding: 40px 36px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
}
.modal-sussex.modal-registro .modal-dialog { max-width: 620px; }

.modal-sussex .modal-close-x {
    position: absolute;
    top: 16px; right: 20px;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #9aa1b5;
    line-height: 1;
}
.modal-sussex .brand-badge {
    display: inline-block;
    margin: -76px auto 18px;
    border-radius: 50% 50% 6px 6px / 60% 60% 6px 6px;
    padding: 18px 34px;
}
.modal-sussex .brand-badge img { height: 60px; }

.modal-sussex h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 1.2rem;
}
.modal-sussex .modal-subtitle { color: #6c7286; margin-top: -.8rem; margin-bottom: 1.2rem; font-size: .95rem; }

.modal-sussex .form-control, .modal-sussex .form-select {
    border: 2px solid var(--navy);
    border-radius: 999px;
    padding: 12px 20px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 14px;
    width: 100%;
}
.modal-sussex .form-row-2 { display: flex; gap: 12px; }
.modal-sussex .form-row-2 .form-control,
.modal-sussex .form-row-2 .form-select { flex: 1; min-width: 0; }

.modal-sussex .form-error {
    background: #fdeceb;
    color: var(--red-dark);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 14px;
    display: none;
}
.modal-sussex .form-error.show { display: block; }

.modal-sussex .link-switch { color: var(--red); font-weight: 700; }
.modal-sussex .helper-text { font-size: .8rem; color: #9aa1b5; margin: -6px 0 10px; text-align: left; }

.modal-backdrop.backdrop-navy { background-color: var(--navy-dark); opacity: .88 !important; }

.modal-result .result-icon { font-size: 3.2rem; margin-bottom: 6px; }
.modal-result.is-error h3 { color: var(--navy); }

.modal-premio .modal-dialog { max-width: 440px; }
.modal-premio .modal-content {
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}
.modal-premio .modal-close-x {
    top: 8px;
    right: 8px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.45);
    z-index: 2;
}
.modal-premio img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

@media (max-width: 575px) {
    .modal-sussex .modal-dialog,
    .modal-sussex.modal-registro .modal-dialog {
        --bs-modal-margin: 0.75rem;
        max-width: calc(100% - 1.5rem);
        width: calc(100% - 1.5rem);
    }
    .modal-sussex .modal-content { padding: 32px 22px; }
    .modal-sussex .form-row-2 { flex-direction: column; gap: 0; }
}

/* ---------- Loading spinner en botones ---------- */
.btn-sussex .spinner-border { width: 1rem; height: 1rem; margin-right: 8px; display: none; }
.btn-sussex.is-loading .spinner-border { display: inline-block; }
.btn-sussex.is-loading .btn-text { opacity: .85; }

/* ---------- Fade-up al cargar / scrollear ---------- */
.fade-up {
    opacity: 0;
    transform: translate3d(0, 72px, 0);
    transition:
        opacity .85s cubic-bezier(.22, 1, .36, 1),
        transform .85s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--fade-delay, 0ms);
    will-change: opacity, transform;
}
.fade-up.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
    .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}