/* =============================================================
   BINGO LAS VEGAS – ESTILOS GLOBALES DEL SITIO
   Se cargan en todas las páginas. Contienen:
     1. Tokens de color del sitio (verde de sala).
     2. Titulares sobre vídeo (.blv-video-hero / .blv-video-copy).
     3. Página "Trabaja con nosotros" (.blv-careers).
     4. Superficies del navegador (selección de texto).
   ============================================================= */

:root {
    --blv-green: #052000;
    --blv-green-deep: #031400;
    --blv-green-ink: #020d00;
    --blv-gold: #fdb314;
    --blv-fuchsia: #ce0046;
    --blv-fuchsia-hover: #a80039;
    --blv-white: #ffffff;
    --blv-muted: rgba(255, 255, 255, 0.72);
    --blv-font-display: 'Libre Bodoni', Georgia, serif;
    --blv-font-body: 'Open Sans', sans-serif;
    --blv-font-script: 'Yellowtail', 'Libre Bodoni', cursive;
    --blv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Rejilla de la web: un solo ancho de contenido y un solo margen
       lateral para cabecera, heroes, secciones y pie. */
    --blv-container: 1240px;
    --blv-gutter: clamp(20px, 4vw, 56px);
}

/* Iconos Phosphor en línea (blv_be_icon). */
.blv-ph {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}

/* Sección de Elementor alineada a la rejilla de la web (clase CSS en
   el contenedor de la sección). */
.blv-section {
    padding-inline: max(var(--blv-gutter), calc((100% - var(--blv-container)) / 2)) !important;
}

::selection {
    background: var(--blv-gold);
    color: var(--blv-green-deep);
}

/* -------------------------------------------------------------
   2. TITULARES SOBRE VÍDEO
   El contenedor del vídeo lleva .blv-video-hero y el bloque de
   texto .blv-video-copy (clases CSS avanzadas de Elementor).
   ------------------------------------------------------------- */

.blv-video-copy {
    position: relative;
    isolation: isolate;
}

/* Halo oscuro detrás del texto: da lectura sobre cualquier fotograma
   sin oscurecer todo el vídeo. */
.blv-video-copy::before {
    content: '';
    position: absolute;
    inset: -18% -12%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(3, 20, 0, 0.62), rgba(3, 20, 0, 0.34) 55%, rgba(3, 20, 0, 0) 100%);
    pointer-events: none;
}

.blv-video-copy--left::before {
    inset: -16% -30% -16% -18%;
    background: radial-gradient(closest-side at 40% 50%, rgba(3, 20, 0, 0.66), rgba(3, 20, 0, 0.36) 58%, rgba(3, 20, 0, 0) 100%);
}

/* Línea manuscrita ("Bienvenido a"): el rótulo de bienvenida del
   cartel de Las Vegas, en oro y encendido como un neón. */
.blv-video-hero .blv-video-script,
.blv-video-hero .e-paragraph-base {
    margin: 0 0 -0.12em !important;
    color: var(--blv-gold) !important;
    font-family: var(--blv-font-script) !important;
    font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transform: rotate(-5deg) translateX(-0.6em);
    transform-origin: left center;
    text-shadow:
        0 1px 1px rgba(3, 20, 0, 0.6),
        0 4px 14px rgba(3, 20, 0, 0.55),
        0 2px 22px rgba(253, 179, 20, 0.45) !important;
}

/* Titular principal en Libre Bodoni: sombra en capas para que
   "flote" sobre el vídeo sin el borde duro de una sombra plana. */
.blv-video-hero .e-heading-base,
.blv-video-hero .blv-video-title,
.blv-video-hero .blv-video-title .elementor-heading-title {
    margin: 0 !important;
    color: var(--blv-white) !important;
    font-family: var(--blv-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    text-wrap: balance;
    text-shadow:
        0 1px 1px rgba(3, 20, 0, 0.55),
        0 6px 16px rgba(3, 20, 0, 0.55),
        0 18px 48px rgba(3, 20, 0, 0.65) !important;
}

.blv-video-hero .e-heading-base,
.blv-video-hero .blv-video-title--xl {
    margin-bottom: 30px !important;
    font-size: clamp(3.25rem, 1.6rem + 5.6vw, 6rem) !important;
    line-height: 1.06 !important;
}

.blv-video-hero .blv-video-title--lg .elementor-heading-title {
    font-size: clamp(2.125rem, 1.3rem + 2.6vw, 3.75rem) !important;
    line-height: 1.14 !important;
}

/* Filete fucsia bajo el titular, el mismo del sistema (Partidas especiales). */
.blv-video-hero .e-heading-base::after,
.blv-video-hero .blv-video-title--xl::after,
.blv-video-hero .blv-video-title--lg .elementor-heading-title::after {
    content: '';
    display: block;
    width: 112px;
    height: 4px;
    margin: 0.32em auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff2a73 0%, var(--blv-fuchsia) 52%, #8e0031 100%);
    box-shadow: 0 6px 18px rgba(206, 0, 70, 0.4);
}

.blv-video-hero .blv-video-title--lg .elementor-heading-title::after {
    margin: 0.4em 0 0;
}

.blv-video-hero .blv-video-lead,
.blv-video-hero .blv-video-lead p {
    max-width: 58ch;
    color: var(--blv-white) !important;
    font-family: var(--blv-font-body) !important;
    font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem) !important;
    line-height: 1.6 !important;
    text-shadow:
        0 1px 2px rgba(3, 20, 0, 0.7),
        0 4px 18px rgba(3, 20, 0, 0.6) !important;
}

/* Momento de entrada: el rótulo se "enciende" de izquierda a derecha
   y el titular sube enfocándose. Solo una vez, al cargar. */
@media (prefers-reduced-motion: no-preference) {
    .blv-video-hero .blv-video-script,
    .blv-video-hero .e-paragraph-base {
        animation: blvNeonOn 1.5s var(--blv-ease-out) 0.25s both;
    }

    .blv-video-hero .e-heading-base,
    .blv-video-hero .blv-video-title--xl,
    .blv-video-hero .blv-video-title--lg .elementor-heading-title {
        animation: blvTitleIn 1.1s var(--blv-ease-out) 0.1s both;
    }

    .blv-video-hero .e-heading-base::after,
    .blv-video-hero .blv-video-title--xl::after,
    .blv-video-hero .blv-video-title--lg .elementor-heading-title::after {
        animation: blvRuleIn 0.9s var(--blv-ease-out) 0.75s both;
    }
}

@keyframes blvNeonOn {
    0% {
        clip-path: inset(-20% 100% -20% -10%);
        opacity: 0.2;
    }
    55% {
        clip-path: inset(-20% -10% -20% -10%);
        opacity: 1;
    }
    62% { opacity: 0.55; }
    68% { opacity: 1; }
    74% { opacity: 0.8; }
    100% {
        clip-path: inset(-20% -10% -20% -10%);
        opacity: 1;
    }
}

@keyframes blvTitleIn {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes blvRuleIn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (max-width: 767px) {
    .blv-video-hero .blv-video-script,
    .blv-video-hero .e-paragraph-base {
        transform: rotate(-5deg) translateX(-0.3em);
    }

    .blv-video-copy::before {
        inset: -10% -6%;
    }

    .blv-video-copy--left::before {
        inset: -8% -8%;
        background: radial-gradient(closest-side, rgba(3, 20, 0, 0.66), rgba(3, 20, 0, 0.4) 60%, rgba(3, 20, 0, 0) 100%);
    }
}

/* -------------------------------------------------------------
   3. TRABAJA CON NOSOTROS
   ------------------------------------------------------------- */

.blv-careers-intro .blv-careers-title .elementor-heading-title {
    color: var(--blv-white) !important;
    font-family: var(--blv-font-display) !important;
    font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.01em !important;
    text-wrap: balance;
}

.blv-careers-intro .blv-careers-title .elementor-heading-title::after {
    content: '';
    display: block;
    width: 112px;
    height: 4px;
    margin-top: 0.5em;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff2a73 0%, var(--blv-fuchsia) 52%, #8e0031 100%);
    box-shadow: 0 6px 18px rgba(206, 0, 70, 0.32);
}

.blv-careers-intro .blv-careers-lead p {
    margin: 0 0 1em !important;
    color: var(--blv-white) !important;
    font-family: var(--blv-font-display) !important;
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) !important;
    line-height: 1.35 !important;
}

.blv-careers-intro .blv-careers-text p {
    max-width: 60ch;
    margin: 0 0 1em !important;
    color: var(--blv-muted) !important;
    font-family: var(--blv-font-body) !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

.blv-careers-intro .blv-careers-text p:last-child {
    margin-bottom: 0 !important;
    color: var(--blv-white) !important;
}

/* Tarjeta del formulario: misma superficie que los bloques de Dónde Estamos. */
.blv-careers-form,
.blv-form-card {
    background: var(--blv-green-deep) !important;
    border: 1px solid rgba(253, 179, 20, 0.22) !important;
    border-radius: 4px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.blv-form-card .elementor-field-type-upload .elementor-field,
.blv-careers-form .elementor-field-type-upload .elementor-field {
    padding: 14px !important;
    border: 1px dashed rgba(253, 179, 20, 0.5) !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--blv-white) !important;
    font-family: var(--blv-font-body) !important;
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.blv-careers-form .elementor-field-type-upload .elementor-field:hover,
.blv-careers-form .elementor-field-type-upload .elementor-field:focus-visible,
.blv-form-card .elementor-field-type-upload .elementor-field:hover,
.blv-form-card .elementor-field-type-upload .elementor-field:focus-visible {
    border-color: var(--blv-gold) !important;
    background: rgba(253, 179, 20, 0.06) !important;
}

.blv-form-card .elementor-field-type-upload .elementor-field::file-selector-button,
.blv-careers-form .elementor-field-type-upload .elementor-field::file-selector-button {
    margin-right: 14px;
    padding: 10px 16px;
    border: 0;
    border-radius: 4px;
    background: var(--blv-gold);
    color: var(--blv-green-deep);
    font-family: var(--blv-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.blv-form-card .elementor-field-type-acceptance a,
.blv-careers-form .elementor-field-type-acceptance a {
    color: var(--blv-gold) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.blv-careers-form .blv-careers-legal p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.75rem !important;
    line-height: 1.55 !important;
}

/* -------------------------------------------------------------
   4. FORMULARIOS (Contacto, Trabaja con nosotros)
   Tarjeta .blv-form-card / .blv-careers-form alrededor del widget
   de formulario de Elementor: mismos campos, foco y botón en toda
   la web, ganen o no los estilos propios de cada widget.
   ------------------------------------------------------------- */

:is(.blv-form-card, .blv-careers-form) .elementor-field-group > label,
:is(.blv-form-card, .blv-careers-form) .elementor-field-label {
    color: var(--blv-gold) !important;
    font-family: var(--blv-font-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}

:is(.blv-form-card, .blv-careers-form) .elementor-field-group:not(.elementor-field-type-upload):not(.elementor-field-type-acceptance) .elementor-field {
    min-height: 48px;
    padding: 10px 2px !important;
    border-width: 0 0 2px !important;
    border-style: solid !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--blv-white) !important;
    font-family: var(--blv-font-body) !important;
    font-size: 16px !important;
    caret-color: var(--blv-gold);
    box-shadow: none !important;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

:is(.blv-form-card, .blv-careers-form) textarea.elementor-field {
    min-height: 120px;
    resize: vertical;
}

:is(.blv-form-card, .blv-careers-form) .elementor-field::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1;
}

:is(.blv-form-card, .blv-careers-form) .elementor-field-group:not(.elementor-field-type-upload):not(.elementor-field-type-acceptance) .elementor-field:hover {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

:is(.blv-form-card, .blv-careers-form) .elementor-field-group:not(.elementor-field-type-upload):not(.elementor-field-type-acceptance) .elementor-field:focus {
    border-color: var(--blv-gold) !important;
    background: rgba(253, 179, 20, 0.05) !important;
    outline: none;
}

:is(.blv-form-card, .blv-careers-form) .elementor-field-type-acceptance .elementor-field-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--blv-muted);
    font-size: 14px;
    line-height: 1.5;
}

:is(.blv-form-card, .blv-careers-form) .elementor-field-type-acceptance input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--blv-gold);
}

:is(.blv-form-card, .blv-careers-form) .elementor-field-type-submit,
:is(.blv-form-card, .blv-careers-form) .e-form__buttons {
    flex-basis: 100% !important;
    max-width: 100% !important;
}

:is(.blv-form-card, .blv-careers-form) .elementor-field-type-submit .elementor-button {
    width: 100%;
    min-height: 54px;
    border-radius: 4px !important;
    background: var(--blv-fuchsia) !important;
    color: var(--blv-white) !important;
    font-family: var(--blv-font-body) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    box-shadow: 0 14px 30px -12px rgba(206, 0, 70, 0.75);
    transition: background-color 0.25s ease, transform 0.35s var(--blv-ease-out);
}

:is(.blv-form-card, .blv-careers-form) .elementor-field-type-submit .elementor-button:hover {
    background: var(--blv-fuchsia-hover) !important;
    transform: translateY(-2px);
}

:is(.blv-form-card, .blv-careers-form) .elementor-field-type-submit .elementor-button:focus-visible {
    outline: 2px solid var(--blv-gold);
    outline-offset: 3px;
}

:is(.blv-form-card, .blv-careers-form) .elementor-message {
    margin-top: 14px;
    font-size: 15px;
}

:is(.blv-form-card, .blv-careers-form) .elementor-message-success {
    color: var(--blv-white) !important;
}

:is(.blv-form-card, .blv-careers-form) .elementor-message-danger,
:is(.blv-form-card, .blv-careers-form) .elementor-error .elementor-field + .elementor-message,
:is(.blv-form-card, .blv-careers-form) span.elementor-message.elementor-help-inline {
    color: var(--blv-gold) !important;
}

/* Titular de sección junto a un formulario. */
.blv-section-title .elementor-heading-title {
    color: var(--blv-white) !important;
    font-family: var(--blv-font-display) !important;
    font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.01em !important;
}

.blv-section-title .elementor-heading-title::after {
    content: '';
    display: block;
    width: 112px;
    height: 4px;
    margin-top: 0.45em;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff2a73 0%, var(--blv-fuchsia) 52%, #8e0031 100%);
    box-shadow: 0 6px 18px rgba(206, 0, 70, 0.32);
}
