/* =========================================================
   CASINO METÁLICO CLARO - CAPA FINAL GLOBAL
   Archivo: /assets/css/casino-final.css
   Objetivo: acercar todo el sitio a la maqueta premium:
   azul metálico claro + tarjetas casino + textos legibles.
========================================================= */

:root {
    --casino-navy: #07162d;
    --casino-navy-2: #0c2e58;
    --casino-blue: #123f73;
    --casino-blue-soft: #dbe9f7;
    --casino-sky: #eff6ff;
    --casino-gold: #f6c556;
    --casino-gold-2: #d99f27;
    --casino-cream: #fff4c8;
    --casino-text: #081b3b;
    --casino-muted: #5f718b;
    --casino-line: rgba(217,159,39,.34);
    --casino-shadow: 0 26px 68px rgba(7, 26, 61, .20);
}

/* Base general */
body {
    color: var(--casino-text) !important;
    background:
        radial-gradient(circle at 20% -10%, rgba(255,255,255,.9), transparent 28%),
        radial-gradient(circle at 86% 3%, rgba(24,211,211,.15), transparent 30%),
        linear-gradient(180deg, #edf5fd 0%, #ffffff 46%, #e6f1fb 100%) !important;
}

main {
    background: transparent !important;
}

.container {
    width: min(1280px, calc(100% - 42px)) !important;
}

.section,
.section.alt,
.section.white,
.campaigns-public,
.games-page,
.ticket-page,
.contact-hero,
.jyg-page,
.scratch-page {
    color: var(--casino-text) !important;
}

/* Header más parecido a casino premium claro/dorado */
.site-header {
    background:
        linear-gradient(180deg, #07101f 0%, #08172d 100%) !important;
    border-bottom: 1px solid rgba(246,197,86,.42) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,.24) !important;
}

.topbar {
    background:
        linear-gradient(90deg, #07101f 0%, #0c2e58 38%, #1557ff 68%, #18d3d3 100%) !important;
    border-bottom: 1px solid rgba(246,197,86,.28) !important;
}

.topbar-inner span {
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.20);
}

.nav-menu a:not(.btn) {
    color: rgba(255,255,255,.88) !important;
}

.nav-menu a:not(.btn):hover {
    color: var(--casino-gold) !important;
}

.nav-menu a:not(.btn)::after {
    background: linear-gradient(90deg, var(--casino-gold), #fff4c8, var(--casino-gold-2)) !important;
}

.brand-ticket,
.sidebar-logo,
.footer-logo-ticket {
    background:
        radial-gradient(circle at left center, #07101f 0 13px, transparent 14px),
        radial-gradient(circle at right center, #07101f 0 13px, transparent 14px),
        linear-gradient(135deg, #fffdf4 0%, #eef8ff 45%, #fff2c8 100%) !important;
    border: 2px solid rgba(246,197,86,.82) !important;
    box-shadow:
        0 0 24px rgba(246,197,86,.24),
        0 18px 42px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.brand-ticket::before {
    background: linear-gradient(135deg, rgba(246,197,86,.90), rgba(255,255,255,.70), rgba(217,159,39,.92)) !important;
}

.nav-cta,
.btn-primary,
.btn-gold,
.footer-casino-cta,
.raffle-card-modern .btn-primary,
.folio-actions .btn-primary,
.folio-actions .btn-gold {
    background: linear-gradient(135deg, #fff0af 0%, #f6c556 42%, #d99f27 100%) !important;
    color: #211500 !important;
    border: 1px solid rgba(255,255,255,.44) !important;
    box-shadow:
        0 0 28px rgba(246,197,86,.22),
        0 18px 36px rgba(0,0,0,.18) !important;
}

/* Cabeceras y textos comunes */
.section-kicker,
.games-kicker,
.badge-soft,
.eyebrow,
.folio-badge,
.game-card-badge,
.scratch-kicker,
.jyg-section-kicker,
.hero-badge,
.form-mini-kicker {
    color: #906006 !important;
    background: linear-gradient(135deg, rgba(255,249,229,.98), rgba(255,237,176,.92)) !important;
    border: 1px solid rgba(217,159,39,.46) !important;
    box-shadow: 0 0 18px rgba(246,197,86,.13) !important;
}

.section-title,
.section-head h1,
.games-head h2,
.games-hero h1,
.campaigns-hero h1,
.ticket-page h1,
.contact-head h1,
.jyg-hero h1,
.jyg-panel h2 {
    color: var(--casino-text) !important;
    text-shadow: 0 3px 0 rgba(255,255,255,.60), 0 18px 34px rgba(7,26,61,.08) !important;
}

.section-sub,
.games-head p,
.campaigns-hero p,
.ticket-page .section-sub,
.contact-head p,
.jyg-hero p {
    color: var(--casino-muted) !important;
    font-weight: 750 !important;
}

/* HOME / HERO */
.home-banner-section {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 14% 12%, rgba(255,255,255,.95), transparent 28%),
        radial-gradient(circle at 86% 8%, rgba(24,211,211,.18), transparent 31%),
        radial-gradient(circle at 48% 98%, rgba(246,197,86,.16), transparent 43%),
        linear-gradient(180deg, #dbe8f6 0%, #c1d3e7 49%, #e7f1fa 100%) !important;
}

.home-banner-section::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: .42 !important;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.66) 1px, transparent 1.6px),
        linear-gradient(rgba(21,87,255,.050) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21,87,255,.040) 1px, transparent 1px) !important;
    background-size: 42px 42px, 66px 66px, 66px 66px !important;
    mask-image: linear-gradient(180deg, #000 0%, transparent 80%) !important;
}

.home-main-title {
    padding-top: 26px !important;
    margin-bottom: 26px !important;
}

.home-title-image-wrap {
    width: min(840px, 94vw) !important;
}

.home-title-image {
    filter:
        drop-shadow(0 0 16px rgba(246,197,86,.30))
        drop-shadow(0 22px 40px rgba(7,26,61,.22)) !important;
}

/* Carrusel principal */
.folio-banner {
    border-radius: 42px !important;
    border: 1px solid rgba(246,197,86,.68) !important;
    background:
        radial-gradient(circle at 82% 18%, rgba(24,211,211,.16), transparent 32%),
        radial-gradient(circle at 18% 8%, rgba(255,255,255,.09), transparent 32%),
        linear-gradient(135deg, #103765 0%, #174c80 45%, #0b2850 100%) !important;
    box-shadow:
        0 34px 80px rgba(7,26,61,.30),
        0 0 0 1px rgba(255,255,255,.10),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.folio-banner::before,
.folio-banner::after {
    background: #dbe8f6 !important;
    border: 1px solid rgba(246,197,86,.56) !important;
}

.folio-banner-topline,
.games-hero-card::before,
.game-card::before,
.footer-casino-card::before {
    background: linear-gradient(90deg, #1557ff 0%, #18d3d3 35%, #f6c556 68%, #d99f27 100%) !important;
    box-shadow: 0 0 24px rgba(246,197,86,.26) !important;
}

.folio-copy h2 {
    color: #ffffff !important;
    text-shadow: 0 4px 0 rgba(0,0,0,.16), 0 20px 34px rgba(0,0,0,.28) !important;
}

.folio-copy h2 span,
.folio-copy h2 strong {
    color: var(--casino-gold) !important;
}

.folio-copy p {
    color: rgba(233,242,255,.88) !important;
}

.folio-media-card {
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08)) !important;
    border: 1px solid rgba(246,197,86,.46) !important;
    box-shadow: 0 24px 58px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.folio-footer {
    background: rgba(6,18,40,.46) !important;
    border-top: 1px dashed rgba(246,197,86,.25) !important;
}

.folio-trust-item {
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.055)) !important;
    border: 1px solid rgba(246,197,86,.26) !important;
    color: rgba(232,240,255,.88) !important;
}

.folio-trust-item strong {
    color: #ffffff !important;
}

.folio-trust-item span {
    color: rgba(220,234,250,.78) !important;
}

.folio-arrow {
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(246,197,86,.30) !important;
    color: #10264a !important;
}

/* Productos activos */
.active-section,
.section.alt.active-section,
.campaigns-public {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.88), transparent 30%),
        radial-gradient(circle at 82% 6%, rgba(24,211,211,.18), transparent 30%),
        linear-gradient(180deg, #e7f1fb 0%, #c9dbed 100%) !important;
    color: var(--casino-text) !important;
}

.active-section::before,
.campaigns-public::before {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1.5px),
        linear-gradient(90deg, rgba(21,87,255,.05) 1px, transparent 1px) !important;
    background-size: 48px 48px, 70px 70px !important;
    opacity: .48 !important;
}

.active-section .section-title,
.active-section .section-sub,
.campaigns-public .section-title,
.campaigns-public .section-sub,
.campaigns-public h1,
.campaigns-public p {
    color: var(--casino-text) !important;
}

.raffle-card-modern,
.campaign-card,
.game-card,
.prize-card,
.card,
.form-card {
    border: 1px solid rgba(246,197,86,.34) !important;
    box-shadow: 0 24px 54px rgba(7,26,61,.18) !important;
}

.raffle-card-modern,
.campaign-card,
.product-card {
    background:
        radial-gradient(circle at 50% 0%, rgba(246,197,86,.12), transparent 34%),
        linear-gradient(180deg, #103765 0%, #071326 100%) !important;
    color: #ffffff !important;
}

.raffle-card-modern h3,
.campaign-card h3,
.product-card h3 {
    color: #ffffff !important;
}

.raffle-card-modern p,
.campaign-card p,
.product-card p {
    color: rgba(222,235,252,.80) !important;
}

.raffle-card-modern .raffle-meta,
.campaign-card .raffle-meta,
.raffle-benefits span {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(246,197,86,.28) !important;
    color: rgba(232,240,255,.84) !important;
}

/* Evita textos blancos sobre tarjetas blancas */
.why-section,
.section.white,
.section.alt:not(.active-section),
.games-page,
.contact-hero,
.ticket-page,
.jyg-page {
    background:
        radial-gradient(circle at 88% 0%, rgba(24,211,211,.11), transparent 28%),
        radial-gradient(circle at 10% 0%, rgba(246,197,86,.10), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #edf5fb 100%) !important;
    color: var(--casino-text) !important;
}

.why-card,
.step,
.steps-modern .step,
.games-mini-trust span,
.jyg-panel,
.contact-info-card,
.contact-form-card,
.form-card,
.summary-card,
.prize-showcase-card,
.purchase-card,
.ticket-grid-card,
.scratch-panel {
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.94)) !important;
    color: var(--casino-text) !important;
    border: 1px solid rgba(217,159,39,.26) !important;
    box-shadow: 0 18px 42px rgba(7,26,61,.10) !important;
}

.why-card h3,
.why-card p,
.step h3,
.step p,
.steps-modern .step h3,
.steps-modern .step p,
.jyg-panel h2,
.jyg-panel p,
.contact-info-card h2,
.contact-info-card p,
.contact-form-card h2,
.contact-form-card label,
.form-card h1,
.form-card h2,
.form-card p,
.summary-card,
.summary-card span,
.summary-card strong {
    color: var(--casino-text) !important;
}

.why-card p,
.step p,
.steps-modern .step p,
.jyg-panel p,
.contact-info-card p,
.form-card p {
    color: var(--casino-muted) !important;
}

/* Cómo funciona en home: azul premium pero más legible */
.section.white .steps-modern .step,
.home-how .step,
.steps-modern .step {
    color: var(--casino-text) !important;
}

.section.white:has(.steps-modern),
.how-section,
.home-how-section {
    background:
        radial-gradient(circle at 92% 0%, rgba(24,211,211,.13), transparent 28%),
        radial-gradient(circle at 8% 100%, rgba(246,197,86,.14), transparent 32%),
        linear-gradient(180deg, #123f73 0%, #0a2b55 100%) !important;
}

.section.white:has(.steps-modern) .section-title,
.section.white:has(.steps-modern) .section-sub,
.how-section .section-title,
.how-section .section-sub {
    color: #ffffff !important;
}

.section.white:has(.steps-modern) .steps-modern .step {
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important;
    color: #ffffff !important;
    border-color: rgba(246,197,86,.34) !important;
}

.section.white:has(.steps-modern) .steps-modern .step h3 {
    color: #ffffff !important;
}

.section.white:has(.steps-modern) .steps-modern .step p {
    color: rgba(226,238,255,.80) !important;
}

/* Formularios */
input,
select,
textarea,
.jyg-field input,
.scratch-field input,
.contact-form-card input,
.contact-form-card textarea,
.contact-form-card select {
    background: #ffffff !important;
    color: var(--casino-text) !important;
    border: 1px solid rgba(188,207,230,.95) !important;
}

input::placeholder,
textarea::placeholder {
    color: #8a9ab0 !important;
}

/* Página juegos */
.games-hero-card {
    background:
        radial-gradient(circle at 78% 18%, rgba(24,211,211,.14), transparent 34%),
        radial-gradient(circle at 18% 78%, rgba(246,197,86,.13), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,247,255,.94)) !important;
    border-color: rgba(217,159,39,.26) !important;
}

.games-hero h1,
.games-head h2,
.game-card-body h3,
.game-card h3 {
    color: var(--casino-text) !important;
}

.games-hero p,
.games-head p,
.game-card-body p,
.game-card p {
    color: var(--casino-muted) !important;
}

/* Páginas de juego: mantienen estética casino pero legible */
.jyg-page,
.scratch-page {
    background:
        radial-gradient(circle at 86% 5%, rgba(24,211,211,.13), transparent 30%),
        radial-gradient(circle at 12% 0%, rgba(246,197,86,.15), transparent 28%),
        linear-gradient(180deg, #eaf3fb 0%, #ffffff 100%) !important;
}

.jyg-panel,
.scratch-panel {
    border-radius: 30px !important;
}

.game-card-grid .card-item,
.memory-card,
.scratch-card-shell {
    box-shadow: 0 22px 48px rgba(7,26,61,.22) !important;
}

/* Contacto */
.contact-hero {
    padding-top: 66px !important;
}

.contact-layout {
    align-items: stretch !important;
}

.contact-info-item,
.contact-alert {
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(217,159,39,.20) !important;
    color: var(--casino-text) !important;
}

.contact-info-item strong,
.contact-info-item a {
    color: var(--casino-text) !important;
}

.contact-alert p {
    color: var(--casino-muted) !important;
}

/* Sorteo detalle */
.prize-showcase-card,
.purchase-card,
.summary-card {
    border-radius: 30px !important;
}

.prize-showcase-card {
    background:
        radial-gradient(circle at 80% 10%, rgba(24,211,211,.12), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(236,246,255,.92)) !important;
}

/* Footer nuevo/claro premium */
.site-footer.footer-casino-v2,
.site-footer {
    background:
        radial-gradient(circle at 12% 0%, rgba(246,197,86,.12), transparent 28%),
        radial-gradient(circle at 82% 0%, rgba(24,211,211,.10), transparent 30%),
        linear-gradient(180deg, #123f73 0%, #0a2548 48%, #061326 100%) !important;
    border-top: 1px solid rgba(246,197,86,.36) !important;
    color: rgba(232,240,255,.82) !important;
}

.footer-casino-card {
    background:
        radial-gradient(circle at 20% 0%, rgba(246,197,86,.12), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
    border: 1px solid rgba(246,197,86,.32) !important;
    box-shadow: 0 24px 54px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.footer-casino-col h4 {
    color: var(--casino-gold) !important;
}

.footer-casino-col a,
.footer-casino-brand p,
.footer-mini-note,
.footer-bottom-modern {
    color: rgba(232,240,255,.80) !important;
}

.footer-casino-col a:hover,
.footer-bottom-modern a {
    color: var(--casino-gold) !important;
}

/* Admin: se mantiene funcional, solo mejora contraste */
.admin-layout {
    background:
        linear-gradient(180deg, #edf5fd 0%, #f8fbff 100%) !important;
}

.admin-main {
    background:
        radial-gradient(circle at 86% 0%, rgba(24,211,211,.10), transparent 30%),
        linear-gradient(180deg, #edf5fd 0%, #f8fbff 100%) !important;
}

.sidebar {
    background:
        radial-gradient(circle at 20% 0%, rgba(246,197,86,.10), transparent 28%),
        linear-gradient(180deg, #07162d 0%, #061326 100%) !important;
    border-right: 1px solid rgba(246,197,86,.22) !important;
}

.admin-card,
.kpi,
.admin-filter-card {
    background: #ffffff !important;
    color: var(--casino-text) !important;
    border: 1px solid rgba(217,159,39,.20) !important;
    box-shadow: 0 18px 42px rgba(7,26,61,.10) !important;
}

.admin-table th,
.admin-table td {
    color: var(--casino-text) !important;
}

/* Responsive */
@media (max-width: 760px) {
    .topbar {
        display: none !important;
    }

    .navbar {
        height: 76px !important;
    }

    .brand-ticket {
        min-width: 170px !important;
        height: 58px !important;
        padding: 8px 16px !important;
    }

    .brand-ticket img {
        height: 42px !important;
        max-width: 150px !important;
    }

    .home-main-title {
        padding-top: 16px !important;
        margin-bottom: 18px !important;
    }

    .folio-banner {
        border-radius: 28px !important;
    }

    .folio-copy h2 {
        font-size: clamp(30px, 9vw, 42px) !important;
    }

    .active-section,
    .section.alt.active-section,
    .campaigns-public {
        background: linear-gradient(180deg, #e7f1fb 0%, #d2e2f1 100%) !important;
    }

    .raffle-grid,
    .raffle-grid-modern,
    .campaign-grid,
    .games-grid,
    .why-grid,
    .steps-modern {
        grid-template-columns: 1fr !important;
    }

    .footer-casino-main {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================================
   QUITAR MARCO / CONTORNO DORADO DEL LOGO
   Solo elimina el contenedor decorativo, no cambia el logo.
========================================================= */

/* Logo del navbar */
.brand-ticket {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.brand-ticket::before,
.brand-ticket::after {
    display: none !important;
}

.brand-ticket img {
    height: 54px !important;
    max-width: 220px !important;
    filter: none !important;
}

/* Logo del footer */
.footer-fix-logo,
.footer-logo-ticket {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: auto !important;
    width: auto !important;
    max-width: 280px !important;
    min-height: auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.footer-fix-logo::before,
.footer-fix-logo::after,
.footer-logo-ticket::before,
.footer-logo-ticket::after {
    display: none !important;
}

.footer-fix-logo img,
.footer-logo-ticket img {
    width: 220px !important;
    max-width: 100% !important;
    filter: none !important;
}
/* =========================================================
   FIX TEXTOS TARJETAS PÚBLICAS - CAMPAÑAS / PRODUCTOS
   Corrige textos oscuros sobre fondo oscuro
========================================================= */

.campaign-card,
.product-card,
.raffle-card,
.sorteo-card,
.publication-card {
    color: #ffffff !important;
}

.campaign-card h1,
.campaign-card h2,
.campaign-card h3,
.campaign-card h4,
.product-card h1,
.product-card h2,
.product-card h3,
.product-card h4,
.raffle-card h1,
.raffle-card h2,
.raffle-card h3,
.raffle-card h4,
.sorteo-card h1,
.sorteo-card h2,
.sorteo-card h3,
.sorteo-card h4,
.publication-card h1,
.publication-card h2,
.publication-card h3,
.publication-card h4 {
    color: #ffffff !important;
}

.campaign-card p,
.product-card p,
.raffle-card p,
.sorteo-card p,
.publication-card p {
    color: rgba(255, 255, 255, .78) !important;
}

.campaign-card .card-description,
.product-card .card-description,
.raffle-card .card-description,
.sorteo-card .card-description,
.publication-card .card-description,
.campaign-card .description,
.product-card .description,
.raffle-card .description,
.sorteo-card .description,
.publication-card .description {
    color: rgba(255, 255, 255, .78) !important;
}

.campaign-card .feature,
.product-card .feature,
.raffle-card .feature,
.sorteo-card .feature,
.publication-card .feature {
    color: #fff4d6 !important;
}

.campaign-card .feature span,
.product-card .feature span,
.raffle-card .feature span,
.sorteo-card .feature span,
.publication-card .feature span {
    color: #fff4d6 !important;
}
.campaign-card .campaign-description,
.product-card .campaign-description,
.raffle-card .campaign-description,
.sorteo-card .campaign-description {
    color: rgba(255, 255, 255, .82) !important;
}