:root{
    --trumpeter-navy:   #304458; /* fondo principal (azul noche) */
    --trumpeter-dark:   #08111E; /* secciones oscuras / footer */
    --trumpeter-gold:   #B4783C; /* acentos, botones */
    --trumpeter-light:  #FFFFFF; /* texto sobre fondo oscuro */
    --trumpeter-muted:  #C9CED4; /* texto secundario */
    /* Dorado más claro SOLO para TEXTO: el dorado base (#B4783C) sobre fondos
       oscuros queda con contraste bajo (~3:1). Este tono más claro alcanza ~4.5:1
       (AA) sobre navy/dark. Usar #B4783C solo en bordes, fondos y acentos no textuales. */
    --trumpeter-gold-text: #D9A35E; /* dorado legible para textos */
}

/* Reset / base */
body{
    font-family: 'Montserrat', sans-serif;
    /* Fondo oscuro (azul noche) con texto claro para el tema premium */
    background-color: var(--trumpeter-navy);
    color: var(--trumpeter-light);
    margin: 0;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Títulos y logo en serif clásica (estilo Trajan/Cinzel) */
h1,h2,h3{
    font-family: 'Cinzel', serif;
    font-weight: 700;
}

/* Claims / lemas en itálica serif elegante */
.claim{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
}

/* HERO (ahora solo texto: ver .hero-text-section) */

/* Texto principal debajo del KV */
.hero-text-section{
    padding: 2.2rem 1rem;
    background: transparent;
    /* Texto claro sobre el fondo navy del body */
    color: var(--trumpeter-light);
    text-align: center;
}

/* Logo de la marca en el hero (imagen). Se adapta al ancho sin pasar de 360px. */
.hero-logo{
    max-width: 360px;
    width: 80%;
    height: auto;
    margin-bottom: 1rem;
}

/* Logo de la marca en el footer (más chico). */
.footer-logo{
    max-width: 220px;
    width: 60%;
    height: auto;
}

.hero-text-section .display-6 {
    font-size: 2.2rem;
    color: var(--trumpeter-light);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.hero-text-section .lead {
    font-size: 1.2rem;
    /* Texto secundario tenue */
    color: var(--trumpeter-muted);
    font-weight: 400;
    margin-top: .5rem;
}

/* BANNER PLAZO */
.participation-banner{
    /* Sutil tinte dorado sobre fondo oscuro */
    background: linear-gradient(90deg, rgba(180,120,60,0.18), rgba(180,120,60,0.08));
    border-top: 1px solid rgba(180,120,60,0.25);
    border-bottom: 1px solid rgba(180,120,60,0.15);
    padding: .9rem 1rem;
    color: var(--trumpeter-light);
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
}

/* BRINDIS */
.brindis-section{
    /* Acento dorado de fondo con texto claro */
    background: var(--trumpeter-gold);
    color: var(--trumpeter-light);
    padding: 2.4rem 1rem;
    text-align: center;
}

.brindis-section h2{
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: .5rem;
}

.brindis-section h3{
    font-size: 1.4rem;
    font-weight: 300;
    margin: 0;
}

/* CÓMO PARTICIPAR */
.como-participar-section{
    /* Antes era blanco; ahora sección oscura profunda */
    background-color: var(--trumpeter-dark);
    padding: 2.5rem 1rem;
}

.como-participar-section h2{
    color: var(--trumpeter-light);
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.step{
    border-radius: 12px;
    /* Tarjeta ligeramente más clara que el fondo dark para que destaque */
    background: var(--trumpeter-navy);
    padding: 1.5rem 1rem;
    min-height: 200px;
    height: 100%;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    border: 1px solid rgba(180,120,60,0.25);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.step:hover{
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(180,120,60,0.55);
}

.step-icon{
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(180,120,60,0.25) 0%, rgba(180,120,60,0.12) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: all 0.3s ease;
}

.step:hover .step-icon{
    background: linear-gradient(135deg, rgba(180,120,60,0.35) 0%, rgba(180,120,60,0.2) 100%);
    transform: scale(1.1);
}

.step-icon i{
    font-size: 1.8rem;
    /* Dorado de texto legible (no el dorado base que tiene contraste bajo) */
    color: var(--trumpeter-gold-text);
    transition: all 0.3s ease;
}

.step:hover .step-icon i{
    transform: rotate(-5deg);
}

.step h5{
    color: var(--trumpeter-light);
    font-weight: 600;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

.step p{
    color: var(--trumpeter-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Imagen de producto (botella): va sobre un recuadro claro para que la foto
   (que viene con fondo blanco) se vea intencional y la botella resalte. */
.producto-imagen{
    background: #ffffff;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.producto-img{
    height: 200px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* PREMIOS */
.premios-section{
    /* Antes beige claro; ahora fondo navy del tema oscuro */
    background: var(--trumpeter-navy);
    padding: 3rem 1rem;
}

.premios-section h2{
    color: var(--trumpeter-light);
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    font-weight: 700;
}

.premio-card{
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(180,120,60,0.25);
    /* Tarjeta en tono oscuro profundo para contrastar con el navy */
    background: var(--trumpeter-dark);
    /* Texto claro por defecto: Bootstrap pinta el texto de las .card en un gris
       oscuro, que sería ilegible sobre este fondo oscuro. Forzamos color claro
       para que cualquier texto dentro de la tarjeta (incluido un <p> simple) se vea. */
    color: var(--trumpeter-light);
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
    transition: all 0.4s ease;
    max-width: 800px;
    margin: 0 auto;
}

.premio-card:hover{
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    transform: translateY(-5px);
}

/* Nota: la definición de .premio-imagen-container vive en la sección
   "CARRUSEL INTERNO DE PREMIOS" más abajo (definición única y coherente). */

.premio-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.premio-card:hover .premio-img {
    transform: scale(1.05);
}

.card-body {
    padding: 2rem;
    text-align: center;
}

.card-title {
    color: var(--trumpeter-light);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.card-text {
    color: var(--trumpeter-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

.card-text strong {
    /* Dorado de texto legible sobre el fondo oscuro de la tarjeta */
    color: var(--trumpeter-gold-text);
    font-weight: 600;
}

.text-muted {
    /* Detalle dorado en notas pequeñas (dorado de texto legible) */
    color: var(--trumpeter-gold-text) !important;
    font-size: 0.9rem;
    font-weight: 500;
    font-style: italic;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(180,120,60,0.3);
}

/* FORMULARIO */
.formulario-section{
    /* Degradado oscuro entre navy y dark */
    background: linear-gradient(135deg, var(--trumpeter-navy) 0%, var(--trumpeter-dark) 100%);
    padding: 3rem 1rem;
    border-top: 1px solid rgba(180,120,60,0.25);
    border-bottom: 1px solid rgba(180,120,60,0.25);
}

.formulario-section h2{
    color: var(--trumpeter-light);
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 700;
}

.form-container{
    max-width: 600px;
}

.input-group{
    margin-bottom: 1.5rem;
    position: relative;
}

.input-group-text{
    background: rgba(180,120,60,0.15);
    border: 1.5px solid rgba(180,120,60,0.35);
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding: 0.75rem 1rem;
    color: var(--trumpeter-gold);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-control{
    border: 1.5px solid rgba(180,120,60,0.35);
    border-left: none;
    border-radius: 0 10px 10px 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    /* Campo oscuro con texto claro */
    background: var(--trumpeter-dark);
    color: var(--trumpeter-light);
}

.form-control:focus,
.form-control:focus + .input-group-text{
    border-color: var(--trumpeter-gold);
    box-shadow: 0 0 0 3px rgba(180,120,60,0.25);
    background: var(--trumpeter-dark);
}

.form-control::placeholder{
    /* El placeholder debe verse MÁS tenue que el texto que escribe el usuario,
       para que se entienda que es solo una guía y no un dato ya cargado.
       Fijamos también -webkit-text-fill-color porque .form-control la fuerza a
       claro y, sin esto, el placeholder se vería tan fuerte como el texto real.
       opacity:1 evita que Firefox lo baje todavía más por su cuenta. */
    color: rgba(255, 255, 255, 0.4);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
    opacity: 1;
}

/* IMPORTANTE — legibilidad del texto que escribe el usuario.
   Bootstrap pinta el texto de los campos en un gris oscuro por defecto, que
   sobre nuestro fondo oscuro queda casi invisible. Forzamos el color CLARO en
   todos los estados (reposo, foco, hover) para que SIEMPRE se lea bien.
   Usamos también -webkit-text-fill-color porque algunos navegadores (WebKit)
   lo priorizan por encima de 'color'. El caret (cursor) va en dorado claro. */
.form-control,
.form-control:focus,
.form-control:hover,
.form-select{
    color: var(--trumpeter-light) !important;
    -webkit-text-fill-color: var(--trumpeter-light);
    caret-color: var(--trumpeter-gold-text);
}

/* Autocompletado del navegador (Chrome/Safari): por defecto pone fondo claro y
   texto oscuro. Lo forzamos a fondo oscuro con texto claro para que combine. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--trumpeter-light);
    -webkit-box-shadow: 0 0 0 1000px var(--trumpeter-dark) inset;
    caret-color: var(--trumpeter-light);
}

/* Input de archivo (foto de factura).
   Por defecto el navegador pinta un botón "Choose File" blanco que desentona
   con el tema oscuro. Lo igualamos al resto de inputs: fondo oscuro y
   texto claro/muted para que el "Sin archivo / No file chosen" se lea bien. */
.form-control[type="file"]{
    background: var(--trumpeter-dark);
    /* Color del texto "Sin archivo seleccionado": claro/muted, legible */
    color: var(--trumpeter-muted);
    border: 1.5px solid rgba(180,120,60,0.35);
    border-left: none;
    /* Centramos verticalmente el contenido respecto al ícono del input-group */
    display: flex;
    align-items: center;
}

/* Botón interno del selector de archivo.
   Usamos los DOS selectores por compatibilidad: el estándar
   (::file-selector-button) y el de WebKit/Chromium/Safari
   (::-webkit-file-upload-button). Le damos look dorado tipo "btn". */
.form-control[type="file"]::file-selector-button,
.form-control[type="file"]::-webkit-file-upload-button{
    background: var(--trumpeter-gold);
    color: var(--trumpeter-dark);
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.9rem;
    margin-right: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover sutil del botón: aclaramos un poco el dorado al tono de texto */
.form-control[type="file"]::file-selector-button:hover,
.form-control[type="file"]::-webkit-file-upload-button:hover{
    background: var(--trumpeter-gold-text);
}

/* Checkbox */
.form-check{
    margin: 2rem 0;
    /* Usamos flex centrado para alinear casilla + label en una fila,
       sin depender del margin negativo que Bootstrap aplica por defecto */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    background: rgba(180,120,60,0.1);
    border-radius: 8px;
    border: 1px solid rgba(180,120,60,0.25);
}

.form-check-input{
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.2em;
    border: 2px solid var(--trumpeter-muted);
}

.form-check-input:checked{
    background-color: var(--trumpeter-gold);
    border-color: var(--trumpeter-gold);
}

.form-check-input:focus{
    box-shadow: 0 0 0 2px rgba(180,120,60,0.4);
}

/* Neutralizamos el float negativo que Bootstrap aplica al checkbox
   (float:left; margin-left:-1.5em), que hacía que la casilla se saliera
   del recuadro por la izquierda. Lo hacemos por clase (NO por id) para que
   no se rompa si vuelve a cambiar el id del campo (acepta_bases, etc.). */
.form-check .form-check-input{
    float: none;
    margin-left: 0;
    margin-right: 0.5em;
    vertical-align: middle;
}

.form-check-label{
    color: var(--trumpeter-light);
    font-size: 0.95rem;
    font-weight: 500;
}

.text-gold{
    /* Enlace dorado: usamos el dorado de texto legible (AA) */
    color: var(--trumpeter-gold-text) !important;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.text-gold:hover{
    /* En hover aclaramos a blanco (no a oscuro) para mantener contraste */
    color: var(--trumpeter-light) !important;
    text-decoration: underline;
}

.form-text{
    color: var(--trumpeter-muted) !important;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    font-style: italic;
}

/* BOTONES */
.btn-gold{
    /* Gradiente dorado: cobre base hacia un tono más claro */
    background: linear-gradient(135deg, var(--trumpeter-gold) 0%, #C79055 100%);
    /* Texto OSCURO sobre el gradiente dorado: el blanco daba ~2.5:1 (ilegible) */
    color: var(--trumpeter-dark);
    border: 2px solid var(--trumpeter-gold);
    border-radius: 8px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(180,120,60,0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-gold:hover{
    background: transparent;
    /* En hover el fondo es transparente (se ve el oscuro): usamos dorado de texto legible */
    color: var(--trumpeter-gold-text);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(180,120,60,0.55);
}

.btn-outline-gold{
    /* Borde claro sobre fondo oscuro para que sea visible */
    border: 2px solid var(--trumpeter-light);
    color: var(--trumpeter-light);
    background: transparent;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-outline-gold:hover{
    border-color: var(--trumpeter-gold);
    color: var(--trumpeter-gold);
    transform: translateY(-2px);
}

/* FOCUS VISIBLE (accesibilidad con teclado)
   Cuando se navega con Tab, mostramos un contorno claro y bien visible en
   botones y enlaces interactivos para que se vea cuál tiene el foco.
   :focus-visible solo aparece con teclado, no al hacer clic con el mouse. */
.btn-gold:focus-visible,
.btn-outline-gold:focus-visible,
.text-gold:focus-visible,
.social-btn:focus-visible,
.btn-close:focus-visible,
.age-gate__box .btn:focus-visible{
    outline: 2px solid var(--trumpeter-light);
    outline-offset: 2px;
}

/* Footer */
.footer{
    background: var(--trumpeter-dark);
    color: var(--trumpeter-light);
    padding: 2rem 1rem;
    text-align:center;
}

.footer img{
    max-width: 140px;
    margin-bottom: .8rem;
}

.good-luck{
    color: var(--trumpeter-gold);
    font-weight:600;
}

/* Redes sociales */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.social-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--trumpeter-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--trumpeter-light);
    font-size: 1.25rem;
    transition: all 0.35s ease;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.social-btn i {
    transition: transform 0.35s ease;
}

.social-btn:hover {
    transform: scale(1.15);
    /* Gradiente dorado en hover (cobre hacia tono más claro) */
    background: linear-gradient(135deg, #C79055 0%, var(--trumpeter-gold) 100%);
    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}

.social-btn:hover i {
    transform: rotate(-45deg);
}

/* MODAL */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow: hidden;
    /* Modal oscuro coherente con el tema */
    background: var(--trumpeter-navy);
    color: var(--trumpeter-light);
}

.modal-header {
    /* Cabecera oscura profunda */
    background: linear-gradient(135deg, var(--trumpeter-dark) 0%, var(--trumpeter-navy) 100%);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(180,120,60,0.25);
}

.modal-title {
    color: var(--trumpeter-light);
    font-weight: 700;
    font-size: 1.4rem;
}

.btn-close {
    /* Ícono de cierre en blanco para verse sobre la cabecera oscura */
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.modal-body {
    padding: 2rem;
    color: var(--trumpeter-muted);
    line-height: 1.6;
}

.modal-body h6 {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--trumpeter-light);
}

.modal-body p {
    margin-bottom: 1rem;
}

.modal-body strong {
    color: var(--trumpeter-light);
}

/* Tabla de productos dentro del modal.
   Por defecto Bootstrap pinta las tablas con fondo blanco y texto negro, lo que
   crea un bloque blanco dentro del modal oscuro. Aquí la dejamos transparente,
   con texto claro y bordes dorados, para que combine con el tema oscuro. */
.modal-body .table {
    color: var(--trumpeter-light);
    --bs-table-bg: transparent;
    --bs-table-color: var(--trumpeter-light);
    border-color: rgba(180,120,60,0.4);
}

.modal-body .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--trumpeter-light);
    border-color: rgba(180,120,60,0.4);
}

.modal-footer {
    padding: 1.5rem 2rem;
    /* Pie del modal en tono oscuro profundo */
    background: var(--trumpeter-dark);
    border-top: 1px solid rgba(180,120,60,0.25);
}

.modal.fade .modal-content {
    transform: scale(0.9);
    transition: all 0.3s ease;
}

.modal.show .modal-content {
    transform: scale(1);
}

/* RESPONSIVE UNIFICADO */
@media (max-width: 768px) {
    .hero-text-section .display-6 {
        font-size: 1.8rem;
    }

    .hero-text-section .lead {
        font-size: 1.1rem;
    }

    .participation-banner {
        font-size: 1rem;
        padding: 0.7rem 1rem;
    }

    .brindis-section h2 {
        font-size: 1.5rem;
    }

    .brindis-section h3 {
        font-size: 1.2rem;
    }

    .step{
        height: auto;
        min-height: 160px;
        padding: 1.2rem 0.8rem;
    }

    .step-icon{
        width: 70px;
        height: 70px;
    }

    .step-icon i{
        font-size: 1.6rem;
    }

    .premios-section {
        padding: 2rem 1rem;
    }

    .premios-section h2 {
        font-size: 1.7rem;
        margin-bottom: 1.5rem;
    }

    .premio-imagen-container {
        height: 200px;
    }

    .card-body {
        padding: 1.5rem;
    }

    .card-title {
        font-size: 1.3rem;
    }

    .card-text {
        font-size: 0.95rem;
    }

    .formulario-section{
        padding: 2rem 1rem;
    }

    .formulario-section h2{
        font-size: 1.7rem;
    }

    .form-check{
        padding: 0.8rem;
        text-align: left;
    }

    .btn-gold,
    .btn-outline-gold{
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
        width: 100%;
    }
}


/* === CARRUSEL INTERNO DE PREMIOS === */
/* Definición única de .premio-imagen-container (antes estaba duplicada arriba). */
.premio-imagen-container {
    width: 100%;
    position: relative;
    border-radius: 20px 0 0;
    overflow: hidden;
}

.premio-imagen-container img {
    object-fit: contain;
    height: 100%;
    width: 100%;
    transition: transform 1.2s ease, opacity 1.2s ease;
}

/* Fade suave */
.carousel-fade .carousel-item {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 1s;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
    opacity: 1;
    transform: none;
}

/* Controles laterales */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* Fondo oscuro semitransparente (azul noche) para los controles */
    background-color: rgba(8, 17, 30, 0.75);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    background-size: 60%;
    transition: all 0.3s ease;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: var(--trumpeter-gold);
    transform: scale(1.05);
}

/* Indicadores */
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* Indicador inactivo: claro tenue para verse sobre fondo oscuro */
    background-color: rgba(201, 206, 212, 0.4);
    transition: all 0.3s ease;
}

.carousel-indicators .active {
    background-color: var(--trumpeter-gold);
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 768px) {
    .premio-imagen-container {
        height: 200px;
    }
}


/* === GATE DE EDAD (verificación de mayoría de edad) ===
   El overlay arranca oculto (display:none) y el JS lo muestra cuando hace falta. */

/* Overlay del gate de edad (oculto por defecto; el JS lo muestra) */
.age-gate{ display:none; position:fixed; inset:0; z-index:9999; background:var(--trumpeter-dark); padding:20px; overflow-y:auto; }
.age-gate__box{ max-width:480px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:var(--trumpeter-light); }
.age-gate__brand{ color:var(--trumpeter-gold); letter-spacing:4px; margin-bottom:24px; }
.age-gate__reject{ display:none; margin-top:24px; }