@font-face {
    font-family: "Artisan Roman Std Regular";
    src: local("Artisan Roman Std Regular"),
         local("Artisan Roman Std"),
         url("../fonts/Artisan-Roman-Std-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --gold: #d6b36a;
    --gold-light: #f5dda2;
    --black: #020304;
    --cream: #f3ede1;
    --ink: #2a2740;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at center top,
            #17130d 0%,
            #050606 35%,
            #010202 75%
        );
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
}

/*
|--------------------------------------------------------------------------
| CONTENEDOR PRINCIPAL
|--------------------------------------------------------------------------
*/

.page {
    display: flex;
    justify-content: center;

    padding: 20px;
}

/*
|--------------------------------------------------------------------------
| CONTENEDOR DE LA INVITACIÓN (imagen + menú)
|--------------------------------------------------------------------------
*/

.card.card-default {
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.card.card-default .card-body {
    padding: 0;
}

.invitation-wrap {
    width: min(100%, 900px);

    background-color: var(--cream);

    border-radius: 10px;
    overflow: hidden;

    box-shadow:
        0 0 0 1px rgba(214, 179, 106, .35),
        0 25px 80px rgba(0, 0, 0, .85);
}

/*
|--------------------------------------------------------------------------
| INVITACIÓN (solo la imagen, sin nada superpuesto)
|--------------------------------------------------------------------------
*/

.invitation {
    width: 100%;

    aspect-ratio: 1086 / 1390;

    background-image: url("../images/img_fondo.jpeg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    display: block;
}

/*
|--------------------------------------------------------------------------
| PANEL DE RESULTADO (registro exitoso + QR)
|
| Mismo fondo/borde/marco dorado que el resto de la invitación, para que
| las imágenes (logo, QR, texto) se integren sin bordes visibles.
|--------------------------------------------------------------------------
*/

.result-panel {
    /* background-color: var(--cream);

    border: 1px solid rgba(214, 179, 106, .35);

    box-shadow:
        0 0 0 1px rgba(214, 179, 106, .22),
        0 25px 80px rgba(0, 0, 0, .85); */

    background-image: url("../images/degradado.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: 30px 20px;
    border-radius: 4px;
}

/*
|--------------------------------------------------------------------------
| MENÚ DE GENERACIONES
|
| Panel independiente debajo de la imagen: nunca tapa el arte y su
| altura depende solo de su propio contenido.
|--------------------------------------------------------------------------
*/

.generation-menu {
    padding: 18px 2% 26px;
    background-image: url("../images/degradado.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background:
        linear-gradient(
            180deg,
            #f7dfae 0%,
            #f0d29a 100%
        );

    border-top: 1px solid rgba(153, 106, 24, .25); */
}

/*
|--------------------------------------------------------------------------
| TÍTULO DEL MENÚ
|--------------------------------------------------------------------------
*/

.menu-title {
    text-align: center;

    margin-bottom: 13px;

    color: var(--ink);

    font-family: "Artisan Roman Std Regular", Georgia, serif;
    font-weight: 700;

    font-size: clamp(
        .65rem,
        1.4vw,
        1.1rem
    );

    letter-spacing: .2em;

    text-transform: uppercase;
}

/*
|--------------------------------------------------------------------------
| BOTONES
|--------------------------------------------------------------------------
*/

.generation-link {
    --generation-color: #2a2740;
    --generation-color-rgb: 42, 39, 64;

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 55px;

    padding: 9px 14px;

    color: var(--generation-color) !important;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;

    font-family: "Artisan Roman Std Regular", Georgia, serif;
    font-weight: 600;

    font-size: clamp( .95rem, 6.3vw, 1.3rem );

    letter-spacing: .12em;

    background-color: #fff;

    border: 2px solid rgba(var(--generation-color-rgb), .55);

    border-radius: 10px;

    box-shadow:
        0 4px 12px
        rgba(var(--generation-color-rgb), .18);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}

.generation-link[data-id="1"] {
    --generation-color: #17b6c4;
    --generation-color-rgb: 23, 182, 196;
}

.generation-link[data-id="2"] {
    --generation-color: #e2a416;
    --generation-color-rgb: 226, 164, 22;
}

.generation-link[data-id="3"] {
    --generation-color: #9b4fe0;
    --generation-color-rgb: 155, 79, 224;
}

.generation-link[data-id="4"] {
    --generation-color: #ff2f87;
    --generation-color-rgb: 255, 47, 135;
}

.generation-link[data-id="5"] {
    --generation-color: #1f5fd6;
    --generation-color-rgb: 31, 95, 214;
}

.generation-link[data-id="6"] {
    --generation-color: #ff6fae;
    --generation-color-rgb: 255, 111, 174;
}

/*
|--------------------------------------------------------------------------
| DESTELLOS DECORATIVOS
|--------------------------------------------------------------------------
*/



/*
|--------------------------------------------------------------------------
| HOVER
|--------------------------------------------------------------------------
*/

.generation-link:hover,
.generation-link:focus-visible {
    color: var(--generation-color);

    transform: translateY(-3px);

    border-color: var(--generation-color);

    background-color: rgba(var(--generation-color-rgb), .08);

    box-shadow:
        0 0 18px
        rgba(var(--generation-color-rgb), .35),

        0 9px 22px
        rgba(var(--generation-color-rgb), .25);
}

.generation-link:active {
    transform: translateY(-1px);
}

.section-title {
    border-left: 3px solid #e72934;
    padding-left: 10px;
    margin-bottom: 20px;
    color: #000000;
    font-weight: bold;
    font-size: 16px;
}

.gradient-text {
    background: linear-gradient(
        135deg, 
        #ff0055 0%,    /* Rosa intenso/fucsia del inicio */
        #bd00ff 35%,   /* Violeta vibrante */
        #7a00ff 60%,   /* Azul violáceo profundo */
        #00bfff 85%,   /* Destello azul claro */
        #ff6a00 100%   /* Toque naranja final */
    );
    
    /* Truco CSS para aplicar el degradado solo al texto */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    
    /* Ajuste de espaciado para dar fuerza visual */
    letter-spacing: -2px; 
}

/*
|--------------------------------------------------------------------------
| TABLET / MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .page {
        padding: 0;
    }

    .generation-menu {
        padding: 14px 5% 20px;
    }

    .generation-menu .row {
        margin: -4px;
    }

    .generation-menu .row > [class*="col-"] {
        padding: 4px;
    }

    .menu-title {
        margin-bottom: 9px;

        letter-spacing: .2em;
    }

    .generation-link {
        min-height: 48px;

        font-size: .86rem;
    }

    #frm-registro center,
    .frm-registro-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 12px;
    }

    #frm-registro center .btn,
    .frm-registro-actions .btn {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        margin-right: 0 !important;
    }
}

/*
|--------------------------------------------------------------------------
| MÓVILES PEQUEÑOS
|--------------------------------------------------------------------------
*/

@media (max-width: 400px) {

    .generation-link {
        min-height: 44px;

        padding: 7px 8px;

        font-size: .78rem;
    }
}

/*
|--------------------------------------------------------------------------
| FORMULARIO DE REGISTRO
|--------------------------------------------------------------------------
*/

#frm-registro {
    padding: 24px;

    /* background-color: #000; */
    background-image: url('../images/degradado.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* color: #f2f2f2; */
    text-align: left;
}

.input-group-text{
    background-color: #fff !important;
}

#frm-registro p {
    color: #6c6c6c;
}

#frm-registro .form-label {
    color: #6c6c6c;
}

#frm-registro .form-control {
    /* background-color: #e6e6e6; */
    border-color: #d2d2d2;
    color: #222;
}

#frm-registro .form-control::placeholder {
    color: #6b6b6b;
    opacity: 1;
}

#frm-registro .form-control:focus {
    background-color: #f4f4f4;
    border-color: #d6b36a;
    box-shadow: 0 0 0 0.15rem rgba(214, 179, 106, 0.35);
}

#save-status {
    background-color: #000;
    color: #89662c;
    padding: 12px;
    border-radius: 4px;
}

.frm-registro-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    margin: 1.5rem auto 0;
}

.frm-registro-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: 200px;
    white-space: nowrap;
    font-size: revert-layer;
}