/* ==========================================================================
   GUMA FESTIVAL 2026 — TEMA
   Carregado por último no _Layout para sobrescrever SiteDesktop/SiteMobile/header.
   Fonte de verdade do tema do evento. (es-mx, EUR)
   ========================================================================== */

/* ---------- Hero (Home) ----------

   Objetivo: hero COMPACTO (os valores de recarga aparecem logo abaixo, sem
   rolagem longa), com o TEXTO à esquerda visível e a arte (fundo.jpg) bem
   enquadrada — o logo "GUMA" fica centralizado/à direita.

   A altura é controlada por `min-height` em vh (não 16:9 cheio, que ocupava
   a tela inteira). `cover` + posição central mostram o miolo da arte.
*/

@media (min-width: 992px) {
    .navbar-header > button.navbar-brand picture > img, .navbar-header > button.navbar-brand picture > source {
        max-width: 57px;
    }

    main.content .container-fluid.destaque {
        /* altura equilibrada: arte visível + recarga logo abaixo */
        min-height: clamp(440px, 65vh, 620px);
        /* gradiente escurece só a ESQUERDA (onde fica o texto); o lado
           direito (logo "GUMA") fica vívido */
        background-image: linear-gradient(90deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .50) 34%, rgba(0, 0, 0, .12) 52%, rgba(0, 0, 0, 0) 70%), url('images/fundo.jpg');
        /* enquadra o logo (olho-flor + GUMA) na parte de cima da arte;
           corta limpo abaixo do logo (antes do "RECINTO FERIAL") */
        background-position: center, center 25%;
        background-size: cover, cover;
        background-repeat: no-repeat, no-repeat;
        position: relative; /* âncora para centralizar o texto na vertical */
    }

    /* esconde a miniatura de vídeo (coluna direita) para não cobrir a arte */
    main.content .container-fluid.destaque .row > .col-lg-6:last-child {
        display: none;
    }

    /* coluna de TEXTO (primeira): confinada à faixa escura da esquerda,
       sem invadir o logo. Largura em % acompanha a resolução. */
    main.content .container-fluid.destaque .row > .col-lg-6:first-child {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: 37%;
        max-width: 600px;
        padding-left: 40px;
        padding-right: 18px;
        /* centraliza o texto verticalmente na faixa */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* garante o texto branco e legível sobre a faixa escura à esquerda */
    main.content .container-fluid.destaque h1.titulo-evento,
    main.content .container-fluid.destaque p.texto-home {
        color: #fff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    }
}

/* ---------- Mobile / tablet estreito (<=991px) ----------
   Arte de fundo (cover) escurecida + texto branco sobreposto, largura cheia.
   A coluna de texto precisa ser FORÇADA a fluir (sem isso fica sem altura).
*/
@media (max-width: 991px) {
    .navbar-header > button.navbar-brand picture > img, .navbar-header > button.navbar-brand picture > source{
        max-width:81px;
    }

    main.content .container-fluid.destaque {
        /* overlay escuro por cima de toda a arte para legibilidade do texto */
        background-image: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)), url('images/fundo.jpg');
        background-position: center, center 25%;
        background-size: cover, cover;
        background-repeat: no-repeat, no-repeat;
        background-color: #2f2e2e;
        min-height: 340px; /* garante a arte mesmo se o texto colapsar */
        overflow: visible !important;
        padding: 18px 16px !important;
        display: block !important;
    }

    /* a .row do hero NÃO pode ser flex nem ter floats não-contidos */
    main.content .container-fluid.destaque .row {
        margin: 0 !important;
        display: block !important;
    }

    /* FORÇA a coluna de texto (primeira) a fluir com altura real (largura cheia).
       Usa :first-child (igual ao desktop) — o seletor por classes não casava. */
    main.content .container-fluid.destaque .row > .col-lg-6:first-child {
        display: block !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 1px !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* FORÇA os elementos de texto a renderizar (cobre display/height/font-size 0) */
    main.content .container-fluid.destaque h1.titulo-evento {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        color: #fff !important;
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin: 0 0 12px !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .7) !important;
    }

    main.content .container-fluid.destaque p.texto-home {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        color: #fff !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        margin: 0 0 10px !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .7) !important;
    }

    /* esconde a miniatura de vídeo */
    /*main.content .container-fluid.destaque .row > .col-lg-6:last-child {
        display: none !important;
    }*/

    /* #2: o bloco PRETO (.bloco-fundo-cinza, #0d0d0d) estava cobrindo o painel
       "Valor de la recarga". Limita a altura para cobrir só título + botões;
       o painel do valor + "Pague aquí" caem no fundo claro abaixo. */
    main.content .section-recarga .bloco-fundo-cinza {
        height: 350px !important;
    }
}

/* ==========================================================================
   GUMMA FESTIVAL — Benefícios + Reembolso (dentro do hero)
   Herdam a cor branca de .texto-home; só ajustes de lista/título/espaço.
   ========================================================================== */
.gu-hero-benef__titulo {
    text-transform: uppercase;
    margin-top: 14px;
    margin-bottom: 8px;
}

.gu-hero-benef__lista {
    list-style: none;
    padding-left: 0;
    margin: 0 0 10px;
}

.gu-hero-benef__lista li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
    line-height: 1.4;
}

.gu-hero-benef__lista li::before {
    content: "•";
    position: absolute;
    left: 4px;
}

.gu-hero-benef__cta {
    font-weight: 700;
    margin-top: 12px;
}

.gu-hero-benef__nota {
    font-size: 0.85em;
    opacity: .85;
    margin-bottom: 4px;
}

/* ==========================================================================
   GUMMA FESTIVAL — Telas de autenticação (Login / Cadastro / etc.)
   Card translúcido sobre a arte para legibilidade do formulário + margens.
   .destaque-inicial só existe nas telas de auth (não afeta a Home).
   ========================================================================== */
.container-fluid.destaque .destaque-inicial {
    border-radius: 18px;
    max-width: 440px;
    margin: 40px auto;
    padding: 28px 22px;
    min-height: 0 !important; /* anula min-height legados que esticavam o card */
}

.login-view input[type=button].btn-block,
.login-view input[type=reset].btn-block,
.login-view input[type=submit].btn-block,
.login-view .btn.btn-default.call-register--link{
    margin-top: 25px;
}

/* filhos diretos (título / form / rodapé) usam a largura do card, sem offsets */
.container-fluid.destaque .destaque-inicial > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    left: 0;
    float: none;
    padding-left: 0;
    padding-right: 0;
}

/* título "Iniciar sesión" centralizado e legível */
.container-fluid.destaque .destaque-inicial .apresentacaoTela {
    color: #fff;
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 18px;
}

/* rodapé (Google / olvidé contraseña / cambiar correo) */
.container-fluid.destaque .destaque-inicial .apresentacaoFooter {
    margin-top: 16px;
    margin-bottom: 0 !important;
}

.container-fluid.destaque .destaque-inicial .apresentacaoFooter .link--forgot-password {
    color: #fff;
    text-decoration: underline;
}

/* mantém ENTRAR / REGISTRO lado a lado dentro do card em telas maiores */
@media (min-width: 480px) {
    .container-fluid.destaque .destaque-inicial .form--login-buttons .col-sm-6 {
        width: 50%;
        float: left;
        padding: 0 4px;
    }
}

/* ==========================================================================
   GUMMA FESTIVAL — Telas de auth/form: esmaltecar a ARTE INTEIRA
   Overlay uniforme sobre a fundo.jpg (em vez do gradiente lateral do hero),
   para o formulário ficar legível em qualquer ponto. Cobre Login (.destaque-inicial),
   Cadastro / Recuperar senha / Trocar e-mail e variantes (.panel--background).
   :has() não casa com a Home (que não tem esses wrappers), então não a afeta.
   ========================================================================== */
main.content .container-fluid.destaque:has(.destaque-inicial),
main.content .container-fluid.destaque:has(.panel--background) {
    background-image: linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .58)), url('images/fundo.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ==========================================================================
   GUMMA FESTIVAL — Foco dos links/botões da navbar
   Remove a "borda preta" (outline) que aparecia ao CLICAR nos links de
   navegação. Mantém o outline na navegação por TECLADO (Tab) via
   :focus-visible — acessibilidade preservada; só o clique de mouse fica limpo.
   ========================================================================== */
.navbar-link:focus:not(:focus-visible),
.navbar-brand:focus:not(:focus-visible),
.navbar-toggle:focus:not(:focus-visible),
.nav.navbar-nav > li > a:focus:not(:focus-visible),
.dropdown-lang a:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* ==========================================================================
   GUMMA FESTIVAL — Checkout logado (Home): cartão tokenizado x "Trocar"
   O width fixo de 240px apertava o conteúdo e o cartão (número + bandeira)
   sobrepunha o link "Trocar". Largura automática + espaçamento resolvem.
   ========================================================================== */
.Home .checkOut-PayPal > .card-data {
    width: auto;
    max-width: 340px;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 14px;
}

.Home .checkOut-PayPal > .card-data .card-data--cardInfo {
    gap: 10px;
}

.Home .checkOut-PayPal .changePaymentMethod {
    margin: 0;
    white-space: nowrap;
}

/* Mesmo ajuste no outro componente de recarga (TopUpCharger) */
.TopUpCharger .panel.panel-default .panel-footer .checkOut-PayPal .card-data {
    width: auto;
    max-width: 340px;
    flex-wrap: wrap;
    gap: 6px 14px;
    justify-content: flex-start;
    padding: 10px 14px;
}

.TopUpCharger .panel.panel-default .panel-footer .checkOut-PayPal .card-data .card-data--cardInfo {
    gap: 10px;
}

.TopUpCharger .panel.panel-default .panel-footer .checkOut-PayPal .changePaymentMethod {
    margin: 0;
    white-space: nowrap;
}

/* ==========================================================================
   GUMMA FESTIVAL — Guia "Cómo Funciona" (texto: Paso a Paso / Bonos / Reglas)
   ========================================================================== */
.gu-howworks {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 16px 24px;
    text-align: left;
}

.gu-howworks__titulo {
    font-size: 20px;
    font-weight: 700;
    color: #1b2a4a;
    text-transform: uppercase;
    margin: 24px 0 12px;
}

.gu-howworks__pasos,
.gu-howworks__lista {
    padding-left: 22px;
    margin: 0;
}

.gu-howworks__pasos li,
.gu-howworks__lista li {
    margin-bottom: 10px;
    line-height: 1.5;
}