/* Monsterwin site theme: palette, type, frames and components. Loaded after style.css on every page. One solid page colour everywhere: no section bands, no glow, no texture. */
@font-face{font-family:Montserrat;src:url(/fonts/montserrat.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Cinzel;src:url(/fonts/cinzel.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
html:root{--color-dark:6 20 27;--color-surface:12 34 43;--color-accent:23 63 73;--color-cta:242 138 0;--color-cta-hover:255 190 77;
--mw-bg:#06141b;--mw-panel:#0b2029;--mw-teal:#173f49;--mw-gold:#c9a26b;--mw-gold-line:rgba(201,162,107,.45);--mw-gold-text:#f2c98f;--mw-cream:#fff3c6;--mw-text:#e6eaec;--mw-soft:#c9d1d5;--mw-muted:#aab5bb;--mw-ink:#2a1405;--mw-red-1:#9a3a28;--mw-red-2:#5c1d13;--mw-orange-1:#ffc04f;--mw-orange-2:#f39200;
--mw-corner-tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg transform='rotate%280 8 8%29'%3E%3Cpath d='M1.5 15V6.5L6.5 1.5H15' stroke='%23c9a26b' stroke-width='1.2'/%3E%3Crect x='4.2' y='4.2' width='3.2' height='3.2' transform='rotate%2845 5.8 5.8%29' fill='%23c9a26b'/%3E%3C/g%3E%3C/svg%3E");--mw-corner-tr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg transform='rotate%2890 8 8%29'%3E%3Cpath d='M1.5 15V6.5L6.5 1.5H15' stroke='%23c9a26b' stroke-width='1.2'/%3E%3Crect x='4.2' y='4.2' width='3.2' height='3.2' transform='rotate%2845 5.8 5.8%29' fill='%23c9a26b'/%3E%3C/g%3E%3C/svg%3E");--mw-corner-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg transform='rotate%28180 8 8%29'%3E%3Cpath d='M1.5 15V6.5L6.5 1.5H15' stroke='%23c9a26b' stroke-width='1.2'/%3E%3Crect x='4.2' y='4.2' width='3.2' height='3.2' transform='rotate%2845 5.8 5.8%29' fill='%23c9a26b'/%3E%3C/g%3E%3C/svg%3E");--mw-corner-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg transform='rotate%28270 8 8%29'%3E%3Cpath d='M1.5 15V6.5L6.5 1.5H15' stroke='%23c9a26b' stroke-width='1.2'/%3E%3Crect x='4.2' y='4.2' width='3.2' height='3.2' transform='rotate%2845 5.8 5.8%29' fill='%23c9a26b'/%3E%3C/g%3E%3C/svg%3E");--mw-divider:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='12' viewBox='0 0 220 12' fill='none'%3E%3Cpath d='M0 6.5H92M128 6.5H220' stroke='%23c9a26b' stroke-opacity='.7'/%3E%3Crect x='104.5' y='1' width='8' height='8' transform='rotate%2845 108.5 5%29' stroke='%23c9a26b' fill='%2306141b'/%3E%3Crect x='94' y='4' width='4' height='4' transform='rotate%2845 96 6%29' fill='%23c9a26b'/%3E%3Crect x='119' y='4' width='4' height='4' transform='rotate%2845 121 6%29' fill='%23c9a26b'/%3E%3C/svg%3E")}
html body{font-family:Montserrat,system-ui,sans-serif;font-weight:500;color:var(--mw-text);background:var(--mw-bg)}
:focus-visible{outline:2px solid var(--mw-orange-1);outline-offset:3px}

/* Type */
h1,h2,footer h2{font-family:Cinzel,Georgia,serif;letter-spacing:.02em}
h1{color:var(--mw-cream);font-weight:800}
main h2.text-3xl{color:var(--mw-gold-text);font-weight:700}
main h2.text-3xl::after{content:"";display:block;width:220px;max-width:70%;height:12px;margin:.6rem auto 0;background:var(--mw-divider) center/contain no-repeat}
main h3,main h4.text-sm{letter-spacing:.01em}
main h3{color:#f6ecd9}
.text-gray-300{color:var(--mw-soft)}
.text-gray-400{color:var(--mw-muted)}
.text-gray-500{color:#a0abb1}
.text-gray-600{color:#98a3a9}
.text-brand-cta,.hover\:text-brand-cta:hover{color:#ffba74}

/* Panels and cards: thin gold frame with corner flourishes */
.glass{background-color:var(--mw-bg);border:1px solid var(--mw-gold-line);border-radius:4px;-webkit-backdrop-filter:none;backdrop-filter:none;
background-image:var(--mw-corner-tl),var(--mw-corner-tr),var(--mw-corner-br),var(--mw-corner-bl);
background-position:left 3px top 3px,right 3px top 3px,right 3px bottom 3px,left 3px bottom 3px;background-repeat:no-repeat;background-size:16px 16px}
.glass.group{position:relative}
.glass.group::after{content:"";position:absolute;inset:4px;border:1px solid rgba(201,162,107,.6);border-radius:2px;pointer-events:none;z-index:2}
.hover\:border-brand-cta\/30:hover{border-color:rgba(242,201,143,.8)}
.rounded-xl,.rounded-2xl,.rounded-3xl{border-radius:4px}
.animate-float{animation:none!important;background-color:var(--mw-bg)!important;border:1px solid var(--mw-gold)!important;border-radius:6px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
background-image:var(--mw-corner-tl),var(--mw-corner-tr),var(--mw-corner-br),var(--mw-corner-bl)!important;background-position:left 5px top 5px,right 5px top 5px,right 5px bottom 5px,left 5px bottom 5px!important;background-repeat:no-repeat!important;background-size:16px 16px!important;box-shadow:0 0 0 4px var(--mw-bg),0 0 0 5px var(--mw-gold-line)}
section.bg-brand-surface\/30{background-color:transparent}

/* Badges and labels */
.bg-brand-cta{background-color:#8f3426}
.bg-brand-cta.text-white,.bg-brand-cta .text-white{color:var(--mw-cream)}
.inline-block.rounded-full.bg-brand-cta\/20{border-radius:3px;border:1px solid var(--mw-gold-line);background-color:var(--mw-bg);color:#ffd59e;text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}
span.glass.rounded-full{border-radius:3px}

/* Diamond icon frames for the emoji icons of the cards */
.glass>.text-4xl.mb-4{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;font-size:1.75rem}
.glass>.text-4xl.mb-4::before{content:"";position:absolute;inset:.6rem;z-index:-1;transform:rotate(45deg);border:1px solid var(--mw-gold);background:var(--mw-bg);box-shadow:0 0 0 3px var(--mw-bg),0 0 0 4px var(--mw-gold-line)}

/* Buttons: primary orange, secondary dark red, both framed in gold */
button.rounded-full,a.rounded-full{border-radius:4px}
button.gradient-cta,a.gradient-cta{background:linear-gradient(180deg,var(--mw-orange-1) 0%,var(--mw-orange-2) 100%);color:var(--mw-ink);text-transform:uppercase;letter-spacing:.05em;font-weight:800;border:1px solid #ffd894;box-shadow:0 0 0 2px var(--mw-bg),0 0 0 3px var(--mw-gold);text-shadow:0 1px 0 rgba(255,236,190,.45)}
button.gradient-cta:hover,a.gradient-cta:hover{opacity:1;filter:brightness(1.07)}
button.border-white\/30,a.border-white\/30{background:linear-gradient(180deg,var(--mw-red-1) 0%,var(--mw-red-2) 100%);color:var(--mw-cream);border:1px solid var(--mw-gold);text-transform:uppercase;letter-spacing:.05em;font-weight:700;box-shadow:0 0 0 2px var(--mw-bg),0 0 0 3px var(--mw-gold-line)}
button.border-white\/30:hover,a.border-white\/30:hover{color:#fff;filter:brightness(1.12);background-color:transparent}
#providersToggle{color:#ffba74;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--mw-gold-line);padding-bottom:2px}

/* Header */
header.glass{background-color:var(--mw-bg);background-image:none;border:0;border-bottom:1px solid var(--mw-gold-line);border-radius:0;box-shadow:0 1px 0 rgba(201,162,107,.15),0 6px 18px rgba(0,0,0,.35)}
header nav a{text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem;font-weight:600;color:#d4dadd}
header nav a:hover{color:var(--mw-gold-text)}
#mobileMenu{border-top-color:var(--mw-gold-line)}

/* Sticky offer banner */
#stickyBanner{box-shadow:0 -1px 0 var(--mw-gold),0 -6px 18px rgba(0,0,0,.4);color:var(--mw-ink)}
#stickyBanner button{background:var(--mw-bg);color:var(--mw-gold-text);border:1px solid var(--mw-gold);border-radius:4px;text-transform:uppercase;letter-spacing:.05em}
#stickyBanner button:hover{background:#0b2029}

/* Footer */
footer{background-color:var(--mw-bg);border-top:1px solid var(--mw-gold-line)}
footer h2{color:var(--mw-gold-text)}
footer ul a{color:#b9c3c8}
footer ul a:hover{color:var(--mw-gold-text)}
footer .text-gray-500{color:#a0abb1}
footer .text-gray-600{color:#98a3a9}
footer .border-white\/5,footer.border-white\/5{border-color:rgba(201,162,107,.22)}

/* FAQ */
details.glass summary{color:#f3ead8}
details.glass[open]{border-color:var(--mw-gold)}

@media (prefers-reduced-motion:reduce){.animate-pulse{animation:none}}

/* Small framed chips keep smaller corners */
span.glass{background-size:9px 9px;background-position:left 2px top 2px,right 2px top 2px,right 2px bottom 2px,left 2px bottom 2px}
/* Four promotion cards: two per row on tablets, four per row on wide screens */
@media (min-width:768px){#promociones .grid.md\:grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){#promociones .grid.md\:grid-cols-3{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Panel title: H2 inside a framed panel on inner pages */
main .glass>h2.text-2xl{font-family:Cinzel,Georgia,serif;color:var(--mw-gold-text);font-weight:700;letter-spacing:.02em}

/* Text link inside running copy */
main p a.text-brand-cta,main li a.text-brand-cta{text-decoration:underline;text-underline-offset:3px}
main p a.text-brand-cta:hover,main li a.text-brand-cta:hover{color:var(--mw-gold-text)}

/* Game row: six tiles in one full row on desktop, three per row on tablets, two per row on phones */
.fila-juegos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem}
@media (min-width:640px){.fila-juegos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.fila-juegos{grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}}

/* One colour everywhere: panels, cards, cells and pills share the page colour; gold lines carry the structure */
.bg-brand-dark\/50,.bg-brand-dark\/60,.bg-brand-surface,.bg-brand-cta\/20{background-color:var(--mw-bg)}
.bg-brand-dark\/50,.bg-brand-dark\/60{box-shadow:inset 0 0 0 1px rgba(201,162,107,.22)}

/* Clickable game tiles: each tile is a cloaked play button */
.fila-juegos>button.glass{display:block;width:100%;padding:0;margin:0;text-align:center;cursor:pointer;font:inherit;color:inherit;transition:border-color .2s,transform .2s}
.fila-juegos>button.glass:hover,.fila-juegos>button.glass:focus-visible{border-color:var(--mw-gold);transform:translateY(-2px)}
.fila-juegos>button.glass:hover::after,.fila-juegos>button.glass:focus-visible::after{border-color:var(--mw-gold-text)}
.fila-juegos>button.glass:focus-visible{outline:2px solid var(--mw-orange-1);outline-offset:3px}