/* ============================================================
   MAROAM · Operadora de máquinas recreativas
   Sistema visual "Premium Arcade Noir"  —  negro + oro
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- Tokens ---------- */
:root{
  --bg:        #08080b;
  --bg-2:      #0d0d12;
  --panel:     #101017;
  --line:      rgba(227,191,92,.16);
  --line-soft: rgba(244,239,230,.08);

  --ink:       #f3ede1;
  --ink-dim:   #b7b0a2;
  --ink-mute:  #7d776c;

  --gold-1:    #fbeaad;
  --gold-2:    #e6c368;
  --gold-3:    #c69b3a;
  --gold-deep: #8a6a20;

  --red:  #ff5757;
  --mint: #4fe6bd;
  --blue: #6aa4ff;

  --grad-gold: linear-gradient(176deg,#fceeb0 4%,#e6c368 46%,#b98a2e 96%);
  --grad-gold-h: linear-gradient(96deg,#fceeb0,#e6c368 50%,#c69b3a);

  --shadow:  0 30px 80px -30px rgba(0,0,0,.85);
  --glow:    0 0 40px -6px rgba(230,195,104,.5);

  --font-d: "Sora", system-ui, sans-serif;
  --font-b: "Manrope", system-ui, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1320px;
  --header-h: clamp(84px, 10vw, 110px);
}

/* ---------- Base ---------- */
body{
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .01em;
}
body::before{ /* grain + scanline + gold vignette */
  content:""; position: fixed; inset:0; z-index: 1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(230,195,104,.10), transparent 55%),
    radial-gradient(90% 60% at 100% 110%, rgba(198,155,58,.07), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
body::after{
  content:""; position: fixed; inset:0; z-index: 1; pointer-events:none; opacity:.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
main, footer, header { position: relative; z-index: 2; }

::selection{ background: var(--gold-3); color:#0a0a0a; }

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family: var(--font-d); font-weight: 700; line-height: .98; letter-spacing:-.02em; }
.display{
  font-family: var(--font-d); font-weight: 800;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height:.9; letter-spacing:-.035em; text-transform: uppercase;
}
/* split animation: keep whole words together, break only at spaces */
.word{ display:inline-block; white-space:nowrap; }
.char{ display:inline-block; will-change: transform; }
.eyebrow{
  font-family: var(--font-d); font-weight: 600;
  font-size: .74rem; letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold-2); display:flex; width:fit-content; align-items:center; gap:.8em;
  margin-bottom: 1.35rem;
}
.eyebrow::before{ content:""; width: 2.2rem; height:1px; background: var(--grad-gold-h); flex:none; }
.eyebrow.center::after{ content:""; width:2.2rem; height:1px; background: var(--grad-gold-h); flex:none; }
.eyebrow.center{ justify-content:center; margin-inline:auto; }

.gold{ background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.serif{ font-style: italic; }

.lead{ font-size: clamp(1.05rem,1.9vw,1.35rem); color: var(--ink-dim); max-width: 46ch; }

/* ---------- Layout ---------- */
.wrap{ width: 100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--pad); }
section{ padding-block: clamp(4.5rem, 11vw, 9rem); position: relative; }
.section-head{ display:flex; flex-direction:column; gap:1.3rem; margin-bottom: clamp(2.2rem,5vw,4rem); }
.section-head.center{ align-items:center; text-align:center; }
.section-head .eyebrow{ margin-bottom:0; }
.section-head h2{ font-size: clamp(2rem,5.2vw,4rem); }

/* ============================================================
   Custom cursor
   ============================================================ */
.cursor, .cursor-dot{ position: fixed; top:0; left:0; z-index: 9999; pointer-events:none; border-radius:50%; mix-blend-mode: difference; }
.cursor{ width: 38px; height:38px; border:1px solid rgba(246,221,148,.9); transform: translate(-50%,-50%); transition: width .3s var(--ease), height .3s var(--ease), background .3s; }
.cursor-dot{ width:5px; height:5px; background: var(--gold-1); transform: translate(-50%,-50%); }
.cursor.hover{ width: 64px; height:64px; background: rgba(246,221,148,.12); }
@media (hover: none){ .cursor,.cursor-dot{ display:none; } }

/* ============================================================
   Boot / intro overlay  ("INSERT COIN")
   ============================================================ */
#boot{ position: fixed; inset:0; z-index: 9000; background: var(--bg);
  display:grid; place-items:center; }
#boot .boot-inner{ text-align:center; }
#boot .coin{ width: 74px; height:74px; margin: 0 auto 1.6rem; border-radius:50%;
  background: radial-gradient(circle at 34% 30%, #fdf1b8, #e6c368 45%, #9c7521 90%);
  box-shadow: inset 0 -6px 14px rgba(120,86,20,.6), 0 0 40px rgba(230,195,104,.5);
  display:grid; place-items:center; font-family:var(--font-d); font-weight:800; color:#6b4e13; font-size:1.6rem; }
#boot .boot-word{ font-family:var(--font-d); font-weight:800; letter-spacing:.55em;
  text-transform:uppercase; font-size: clamp(1.4rem,5vw,2.6rem); padding-left:.55em; }
#boot .boot-sub{ margin-top:1rem; font-size:.72rem; letter-spacing:.5em; color: var(--gold-2);
  text-transform:uppercase; }
#boot .boot-credits{ font-variant-numeric: tabular-nums; }
html.booted{ }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header{ position: fixed; top:0; left:0; right:0; z-index: 800;
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--header-h);
  padding: .9rem var(--pad);
  transition: padding .4s var(--ease), background .4s, min-height .4s var(--ease); }
.site-header::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background: rgba(8,8,11,.72); backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line); transition: opacity .4s; }
.site-header.scrolled{ min-height: 78px; padding-block:.65rem; }
.site-header.scrolled::after{ opacity:1; }

.brand{ display:flex; align-items:center; gap:.7rem; flex:0 0 auto; width:auto; max-width:220px; min-width:0; }
.brand img{ display:block; height:52px!important; width:auto!important; max-width:210px!important; max-height:52px!important; min-width:0!important; object-fit:contain; object-position:left center; filter: drop-shadow(0 2px 12px rgba(230,195,104,.35)); transition: height .4s var(--ease), transform .4s var(--ease), filter .4s; }
.site-header.scrolled .brand img{ height:42px!important; max-height:42px!important; }

.nav{ display:flex; align-items:center; gap: 2.6rem; }
.nav-links{ display:flex; align-items:center; gap: 2.4rem; }
.nav a{ font-family: var(--font-d); font-weight:500; font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; color: var(--ink-dim); position:relative; padding: .35rem 0; white-space:nowrap;
  transition: color .3s, transform .3s var(--ease); }
.nav a::after{ content:""; position:absolute; left:0; bottom:-3px; height:1.5px; width:0;
  background: var(--grad-gold-h); box-shadow: 0 0 8px rgba(230,195,104,.6); transition: width .35s var(--ease); }
.nav a:hover, .nav a.active{ color: var(--ink); }
.nav a:hover{ transform: translateY(-2px); }
.nav a:hover::after, .nav a.active::after{ width:100%; }
.brand img{ transition: height .4s var(--ease), transform .4s var(--ease), filter .4s; }
.brand:hover img{ transform: scale(1.04); filter: drop-shadow(0 2px 14px rgba(230,195,104,.6)); }

.nav-cta{ display:flex; align-items:center; gap: 1rem; }
.burger{ display:none; width:44px; height:44px; border:1px solid var(--line); background:transparent;
  border-radius: 4px; cursor:pointer; position:relative; }
.burger span{ position:absolute; left:11px; right:11px; height:1.6px; background: var(--gold-1); transition:.35s var(--ease); }
.burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:22px; } .burger span:nth-child(3){ top:28px; }
.burger.open span:nth-child(1){ top:22px; transform: rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ top:22px; transform: rotate(-45deg); }

@media (max-width: 960px){
  .site-header{ min-height: 84px; padding-block: .8rem; }
  .brand{ max-width:180px; }
  .brand img{ height:46px!important; max-height:46px!important; max-width:175px!important; }
  .nav-links{ position: fixed; inset:0; z-index:790; background: rgba(7,7,10,.97);
    backdrop-filter: blur(10px); flex-direction:column; justify-content:center; gap:1.6rem;
    transform: translateY(-100%); transition: transform .55s var(--ease); }
  .nav-links.open{ transform: translateY(0); }
  .nav-links a{ font-size: 1.5rem; }
  .burger{ display:block; }
  .nav-cta .btn-coin{ display:none; }
}

/* ============================================================
   Buttons — "diferentes"
   ============================================================ */
/* Coin/pill primary with slot-shimmer */
.btn-coin{
  --h: 3.3rem;
  position: relative; display:inline-flex; align-items:center; gap:.7rem;
  height: var(--h); padding: 0 1.7rem; border-radius: 100px;
  font-family: var(--font-d); font-weight:600; font-size:.82rem; letter-spacing:.14em;
  text-transform: uppercase; color:#231a07; cursor:pointer; border:none;
  background: var(--grad-gold-h);
  box-shadow: 0 10px 30px -10px rgba(230,195,104,.55), inset 0 1px 0 rgba(255,255,255,.5);
  overflow:hidden; isolation:isolate;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.btn-coin::before{ content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%);
  transform: translateX(-130%); transition: transform .7s var(--ease); }
.btn-coin:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(230,195,104,.75); }
.btn-coin:hover::before{ transform: translateX(130%); }
.btn-coin .dot{ width:.55rem; height:.55rem; border-radius:50%; background:#231a07; }

/* Ghost / outline */
.btn-ghost{
  display:inline-flex; align-items:center; gap:.7rem; height:3.3rem; padding: 0 1.6rem;
  border-radius:100px; border:1px solid var(--line); color: var(--ink);
  font-family: var(--font-d); font-weight:500; font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer; background: rgba(255,255,255,.02);
  transition: border-color .3s, background .3s, transform .3s var(--ease); }
.btn-ghost:hover{ border-color: var(--gold-3); background: rgba(230,195,104,.08); transform: translateY(-2px); }
.btn-ghost svg{ transition: transform .35s var(--ease); }
.btn-ghost:hover svg{ transform: translateX(4px); }

/* Arcade round pressable button */
.btn-arcade{
  position: relative; width: 7.4rem; height:7.4rem; border-radius:50%; cursor:pointer; border:none;
  background: transparent; display:grid; place-items:center; }
.btn-arcade .cap{
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 38% 32%, #fdf1b8, #e6c368 42%, #b3862f 78%, #7c5c1c);
  box-shadow: 0 12px 0 #5f4715, 0 20px 34px -8px rgba(0,0,0,.7), inset 0 -6px 14px rgba(120,86,20,.55), inset 0 6px 12px rgba(255,255,255,.4);
  transition: transform .12s ease, box-shadow .12s ease; }
.btn-arcade .label{ position:relative; z-index:2; font-family:var(--font-d); font-weight:800;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#4d3810; text-align:center; line-height:1.1; }
.btn-arcade:hover .cap{ transform: translateY(3px); box-shadow: 0 9px 0 #5f4715, 0 16px 28px -8px rgba(0,0,0,.7), inset 0 -6px 14px rgba(120,86,20,.55), inset 0 6px 12px rgba(255,255,255,.4); }
.btn-arcade:active .cap{ transform: translateY(11px); box-shadow: 0 1px 0 #5f4715, inset 0 -4px 10px rgba(120,86,20,.5), inset 0 4px 8px rgba(255,255,255,.35); }

/* Text link with arrow */
.link-arrow{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-d);
  font-weight:600; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-2);
  position:relative; }
.link-arrow::after{ content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background: var(--gold-3); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease); }
.link-arrow:hover::after{ transform: scaleX(1); }
.link-arrow svg{ transition: transform .35s var(--ease); }
.link-arrow:hover svg{ transform: translateX(5px); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height: 100svh; display:flex; align-items:center; padding-top: calc(var(--header-h) + clamp(1.75rem, 4vw, 3.5rem)); overflow:hidden; }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; }
.hero .wrap{ position:relative; z-index:3; }
.hero-arc{ position:absolute; top:14%; left:50%; transform: translateX(-50%); width:min(1200px,120%);
  z-index:1; opacity:.6; pointer-events:none; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items:end; }
.hero-grid > *{ min-width:0; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; gap:2rem; } }

.hero .credit-tag{ display:inline-flex; align-items:center; gap:.6rem; flex-wrap:wrap; max-width:100%; font-family:var(--font-d);
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color: var(--gold-2);
  border:1px solid var(--line); border-radius:100px; padding:.5rem 1rem; margin-bottom:1.4rem; }
.hero-title{ margin: 0 0 2.6rem; }
.hero-title .line{ display:block; overflow:hidden; }
.hero .credit-tag .blink{ width:.5rem; height:.5rem; border-radius:50%; background: var(--mint);
  box-shadow: 0 0 10px var(--mint); animation: blink 1.3s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }

.hero h1{ margin-bottom: 1.6rem; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .char{ display:inline-block; will-change: transform; }
.hero .sub-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:2rem; }

.hero-side{ display:flex; flex-direction:column; gap:1.4rem; padding-bottom:.5rem; }
.hero-side p{ color: var(--ink-dim); font-size:1rem; }
.hero-mini-stats{ display:flex; gap:1.6rem; }
.hero-mini-stats .n{ font-family:var(--font-d); font-weight:800; font-size:1.9rem; }
.hero-mini-stats .l{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); }

.scroll-hint{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--ink-mute);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; }
.scroll-hint .bar{ width:1px; height:44px; background: linear-gradient(var(--gold-2),transparent); animation: drop 1.8s var(--ease) infinite; }
@keyframes drop{ 0%{ transform: scaleY(0); transform-origin:top; } 50%{ transform: scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform: scaleY(0); transform-origin:bottom; } }

/* ============================================================
   Marquee
   ============================================================ */
.marquee{ border-block:1px solid var(--line); padding-block: 1.4rem; overflow:hidden; background: rgba(230,195,104,.03); }
.marquee-track{ display:flex; gap:3.5rem; width:max-content; animation: scroll-x 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-track span{ font-family:var(--font-d); font-weight:700; font-size: clamp(1.1rem,2.6vw,1.8rem);
  text-transform:uppercase; letter-spacing:-.01em; color: var(--ink); display:flex; align-items:center; gap:3.5rem; white-space:nowrap; }
.marquee-track span::after{ content:"◆"; color: var(--gold-3); font-size:.7em; }
@keyframes scroll-x{ to{ transform: translateX(-50%); } }

/* ============================================================
   Services
   ============================================================ */
.svc-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; }
@media (max-width: 780px){ .svc-grid{ grid-template-columns:1fr; } }
.svc-card{ position:relative; padding: 2.2rem; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  overflow:hidden; transition: border-color .4s, transform .4s var(--ease); }
.svc-card::before{ content:""; position:absolute; inset:0; z-index:0; opacity:0;
  background: radial-gradient(80% 60% at var(--mx,50%) var(--my,0%), rgba(230,195,104,.14), transparent 60%);
  transition: opacity .4s; }
.svc-card:hover{ border-color: var(--gold-3); transform: translateY(-4px); }
.svc-card:hover::before{ opacity:1; }
.svc-card > *{ position:relative; z-index:1; }
.svc-num{ font-family:var(--font-d); font-weight:800; font-size:.8rem; letter-spacing:.2em; color: var(--gold-3); }
.svc-icon{ width: 56px; height:56px; margin: 1.4rem 0 1.2rem; }
.svc-card h3{ font-size: 1.5rem; margin-bottom:.7rem; }
.svc-card p{ color: var(--ink-dim); font-size:.98rem; }
.svc-card .tag{ display:inline-block; margin-top:1.3rem; font-family:var(--font-d); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color: var(--gold-2); border:1px solid var(--line); padding:.35rem .75rem; border-radius:100px; }

/* ============================================================
   Stats reels
   ============================================================ */
.stats{ background: var(--bg-2); border-block:1px solid var(--line); }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
@media (max-width: 820px){ .stats-grid{ grid-template-columns: repeat(2,1fr); gap:2rem; } }
.stat{ text-align:center; padding: 1rem; }
.count-reel{ font-family:var(--font-d); font-weight:800; font-size: clamp(2.6rem,7vw,4.6rem); line-height:1;
  display:inline-flex; overflow:hidden; }
.count-reel .digit{ display:inline-block; }
.stat .suffix{ font-size:.6em; color: var(--gold-2); vertical-align: super; }
.stat .l{ margin-top:.9rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-mute); }

/* ============================================================
   Split feature (image/SVG + text)
   ============================================================ */
.feature{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.feature.rev{ direction: rtl; } .feature.rev > *{ direction: ltr; }
.feature > *{ min-width:0; }
@media (max-width: 860px){ .feature{ grid-template-columns:1fr; } }
.feature h2{ font-size: clamp(1.8rem,4.5vw,3.2rem); margin-bottom:1.3rem; }
.feature p + p{ margin-top:1rem; }
.feature .ticks{ margin-top:1.8rem; display:flex; flex-direction:column; gap:.9rem; }
.tick{ display:flex; gap:.9rem; align-items:flex-start; color: var(--ink-dim); }
.tick .k{ flex:none; width:1.4rem; height:1.4rem; border-radius:50%; display:grid; place-items:center;
  background: var(--grad-gold); color:#2a1f07; font-size:.7rem; font-weight:800; margin-top:.15rem; }

/* Machine cabinet SVG frame */
.cabinet-wrap{ position:relative; }
.cabinet-wrap::after{ content:""; position:absolute; inset:-8% -4% -12%; z-index:-1;
  background: radial-gradient(closest-side, rgba(230,195,104,.22), transparent 70%); filter: blur(6px); }

/* ============================================================
   MAROAM 777 — máquina recreativa (juego)
   ============================================================ */
.slot-stage{ position:relative; display:flex; justify-content:center; align-items:flex-start;
  padding: 1rem 0; --symH: 76px; }
.slot-stage::after{ content:""; position:absolute; inset:3% 5% -6%; z-index:-1;
  background: radial-gradient(closest-side, rgba(230,195,104,.3), transparent 72%); filter: blur(12px); }

.machine{ position:relative; width: min(460px, 100%); }
.machine.win{ animation: mach-shake .5s ease; }
@keyframes mach-shake{ 0%,100%{ transform: translate(0,0);} 25%{ transform: translate(-6px,-3px);} 50%{ transform: translate(6px,0);} 75%{ transform: translate(-4px,0);} }

.machine-body{ position:relative; border-radius: 28px; padding: 1.4rem 1.3rem 1.6rem;
  background: linear-gradient(180deg,#23232e,#111119 55%,#0a0a0f);
  box-shadow: 0 44px 90px -26px rgba(0,0,0,.9), inset 0 2px 0 rgba(255,255,255,.07), inset 0 -20px 44px rgba(0,0,0,.6); }
.machine-body::before{ content:""; position:absolute; inset:0; border-radius:28px; padding:2px; z-index:0;
  background: linear-gradient(150deg,#fceeb0,#c69b3a 28%,#6b4e13 52%,#e6c368 78%,#8a6a20);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.machine-body > *{ position:relative; z-index:1; }

.machine-crown{ text-align:center; margin-bottom: 1rem; }
.machine-crown .bulbs{ display:flex; justify-content:center; gap:.55rem; margin-bottom:.6rem; }
.machine-crown .bulbs i{ width:.5rem; height:.5rem; border-radius:50%; background:#e6c368; box-shadow:0 0 8px #e6c368; animation: bulb 1.1s steps(1) infinite; }
.machine-crown .bulbs i:nth-child(2){animation-delay:.15s}.machine-crown .bulbs i:nth-child(3){animation-delay:.3s}.machine-crown .bulbs i:nth-child(4){animation-delay:.45s}.machine-crown .bulbs i:nth-child(5){animation-delay:.6s}.machine-crown .bulbs i:nth-child(6){animation-delay:.75s}.machine-crown .bulbs i:nth-child(7){animation-delay:.9s}
@keyframes bulb{ 50%{ opacity:.22; box-shadow:none } }
.machine-crown .title{ font-family:var(--font-d); font-weight:800; letter-spacing:.28em; text-transform:uppercase; font-size:.9rem; padding-left:.28em; }
.machine-crown .bote{ margin:.55rem auto 0; display:inline-flex; align-items:center; gap:.5rem; padding:.28rem .9rem; border-radius:100px; background:rgba(230,195,104,.09); box-shadow: inset 0 0 0 1px rgba(230,195,104,.35); }
.machine-crown .bote span{ font-family:var(--font-d); font-size:.52rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); }
.machine-crown .bote b{ font-family:var(--font-d); font-weight:800; color:var(--gold-1); font-variant-numeric:tabular-nums; font-size:1.05rem; text-shadow:0 0 12px rgba(230,195,104,.55); }
.machine-crown .bote.flash b{ animation: boteflash .45s steps(1) 4; }
@keyframes boteflash{ 50%{ color:#fff; text-shadow:0 0 18px #fff } }

/* overlay logo + plinko */
.ov-logo{ height:30px; width:auto; margin-bottom:.7rem; filter: drop-shadow(0 2px 8px rgba(230,195,104,.45)); }
.box .boxlogo{ width:56%; height:auto; opacity:.92; }
#plinkoCanvas{ border-radius:12px; background: linear-gradient(180deg,#0b0a10,#08070c); box-shadow: inset 0 0 0 1px rgba(230,195,104,.28); max-width:100%; height:auto; touch-action:none; }
.plinko-mult{ margin-top:.7rem; font-family:var(--font-d); font-weight:800; font-size:1.25rem; color:var(--gold-1); min-height:1.4em; text-shadow:0 0 14px rgba(230,195,104,.4); }

.machine-main{ display:grid; grid-template-columns: 46px 1fr; gap:.6rem; align-items:stretch; }

/* Prize ladder */
.ladder{ display:flex; flex-direction:column-reverse; gap:3px; padding:.4rem .25rem; border-radius:10px;
  background: linear-gradient(180deg,#0b0a10,#070609); box-shadow: inset 0 0 0 1px rgba(230,195,104,.2); }
.ladder .rung{ flex:1; display:grid; place-items:center; border-radius:5px; font-family:var(--font-d);
  font-weight:800; font-size:.6rem; color:#5b5546; background:#14131a; transition:.2s; }
.ladder .rung.on{ color:#231a07; background: var(--grad-gold); box-shadow:0 0 12px rgba(230,195,104,.7); transform: scale(1.06); }

/* Reels */
.reels{ position:relative; display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
  padding:.6rem; border-radius: 14px; background: linear-gradient(180deg,#040406,#0c0b12);
  box-shadow: inset 0 6px 22px rgba(0,0,0,.9), inset 0 0 0 1px rgba(230,195,104,.28); }
.reel{ position:relative; height: calc(var(--symH) * 3); overflow:hidden; border-radius:8px;
  background: linear-gradient(180deg,#151019,#0a0810 50%,#151019); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.reel::before, .reel::after{ content:""; position:absolute; left:0; right:0; height:36%; z-index:3; pointer-events:none; }
.reel::before{ top:0; background: linear-gradient(#0a0810, transparent); }
.reel::after{ bottom:0; background: linear-gradient(transparent, #0a0810); }
.reel-glass{ position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:8px;
  background: linear-gradient(105deg, rgba(255,255,255,.09) 0 12%, transparent 30% 70%, rgba(255,255,255,.04) 88% 100%); }
.reel-strip{ display:flex; flex-direction:column; will-change: transform; }
.sym{ height: var(--symH); display:grid; place-items:center; font-size: calc(var(--symH) * .6); line-height:1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.sym.g{ font-family:var(--font-d); font-weight:800; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.reel.spin .reel-strip{ filter: blur(2px); }
.reel.hit{ animation: reelhit .6s ease; box-shadow: inset 0 0 0 2px var(--gold-2), 0 0 20px rgba(230,195,104,.5); }
@keyframes reelhit{ 0%,100%{ } 50%{ box-shadow: inset 0 0 0 2px var(--gold-1), 0 0 30px rgba(230,195,104,.8); } }

.payline{ position:absolute; top:50%; left:.5rem; right:.5rem; height:2px; z-index:5; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #ff5757, #ff5757, transparent); box-shadow:0 0 12px rgba(255,87,87,.75); opacity:.9; }
.payline.flash{ animation: pl 0.4s steps(1) 4; }
@keyframes pl{ 50%{ opacity:.2 } }

/* Meters */
.meters{ margin-top:1rem; display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem; }
.meter{ text-align:center; padding:.5rem .3rem; border-radius:9px; background:#0b0a10; box-shadow: inset 0 0 0 1px rgba(230,195,104,.18); }
.meter span{ display:block; font-family:var(--font-d); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.meter b{ display:block; margin-top:.15rem; font-family:var(--font-d); font-weight:800; font-size:1.35rem; color:var(--gold-1);
  font-variant-numeric: tabular-nums; text-shadow:0 0 12px rgba(230,195,104,.35); }
.meter.win b{ color:#8affce; text-shadow:0 0 14px rgba(79,230,189,.55); }

/* Controls */
.controls{ margin-top:1rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.mbtn{ flex:none; height:2.4rem; padding:0 .8rem; border-radius:100px; border:1px solid var(--line); cursor:pointer;
  background: rgba(255,255,255,.03); color:var(--ink); font-family:var(--font-d); font-weight:600; font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; transition:.25s; }
.mbtn:hover{ border-color: var(--gold-3); background: rgba(230,195,104,.08); }
.mbtn.mute{ width:2.4rem; padding:0; font-size:.9rem; }

.spin-btn{ position:relative; flex:none; width: 4.8rem; height:4.8rem; border-radius:50%; border:none; cursor:pointer; background:transparent; }
.spin-btn .cap{ position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 38% 32%, #ff8a8a,#ff5757 45%,#b52d2d 78%,#7c1c1c);
  box-shadow: 0 8px 0 #571414, 0 16px 26px -8px rgba(0,0,0,.7), inset 0 -5px 12px rgba(120,20,20,.6), inset 0 5px 10px rgba(255,255,255,.35);
  transition: transform .1s ease, box-shadow .1s ease; }
.spin-btn .txt{ position:relative; z-index:2; font-family:var(--font-d); font-weight:800; font-size:.72rem; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.spin-btn:hover .cap{ transform: translateY(2px); box-shadow:0 6px 0 #571414, 0 12px 20px -8px rgba(0,0,0,.7), inset 0 -5px 12px rgba(120,20,20,.6), inset 0 5px 10px rgba(255,255,255,.35); }
.spin-btn:active .cap, .spin-btn.press .cap{ transform: translateY(8px); box-shadow:0 1px 0 #571414, inset 0 -4px 10px rgba(120,20,20,.5), inset 0 4px 8px rgba(255,255,255,.3); }
.spin-btn[disabled]{ opacity:.5; cursor:not-allowed; }

.machine-foot{ margin-top:.9rem; text-align:center; font-size:.8rem; color:var(--ink-dim); min-height:1.4em; }
.machine-foot.win{ color:var(--gold-1); font-weight:600; }

/* Lever */
.lever{ position:absolute; top: 26%; right: -34px; width: 34px; z-index:5; cursor:pointer; }
.lever .track{ position:absolute; left:50%; transform:translateX(-50%); top:0; width:8px; height:96px; background: linear-gradient(#2a2a33,#14141a); border-radius:6px; box-shadow: inset 0 0 0 1px rgba(230,195,104,.2); }
.lever .stick{ position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:8px; height:70px; background: linear-gradient(#c69b3a,#8a6a20); border-radius:6px; transition: height .12s ease; }
.lever .knob{ position:absolute; left:50%; top:-10px; transform:translateX(-50%); width:26px; height:26px; border-radius:50%;
  background: radial-gradient(circle at 34% 30%, #ff8a8a,#ff5757 50%,#a52222); box-shadow:0 4px 10px rgba(0,0,0,.6), inset 0 -3px 6px rgba(120,20,20,.6), inset 0 3px 5px rgba(255,255,255,.4); transition: top .18s var(--ease); }
.lever.pull .knob{ top: 70px; } .lever.pull .stick{ height: 8px; }
@media (max-width: 560px){ .lever{ display:none; } .machine{ transform:none; } .machine.win{ animation:none; } .slot-stage{ --symH: 62px; } }

.slot-burst{ position:absolute; inset:0; z-index:7; pointer-events:none; }

/* Overlays (paytable / gamble / bonus) */
.ov{ position:absolute; inset:0; z-index:8; border-radius:28px; display:none; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:1.4rem;
  background: rgba(6,6,10,.93); backdrop-filter: blur(4px); }
.ov.show{ display:flex; animation: ovin .3s var(--ease); }
@keyframes ovin{ from{ opacity:0; transform: scale(.96);} }
.ov h4{ font-family:var(--font-d); font-size:1.15rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.3rem; }
.ov .ov-sub{ color:var(--ink-dim); font-size:.82rem; margin-bottom:1.1rem; }
.ov .ov-close{ position:absolute; top:.8rem; right:1rem; cursor:pointer; color:var(--ink-mute); font-size:1.3rem; }
.ov .ov-close:hover{ color:var(--gold-1); }

/* paytable list */
.pt{ width:100%; max-width:320px; display:flex; flex-direction:column; gap:.35rem; }
.pt-row{ display:flex; align-items:center; justify-content:space-between; padding:.4rem .7rem; border-radius:8px; background:rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line-soft); }
.pt-row .s{ font-size:1.2rem; letter-spacing:.1em; }
.pt-row .s.g{ font-family:var(--font-d); font-weight:800; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pt-row .p{ font-family:var(--font-d); font-weight:700; color:var(--gold-1); font-size:.9rem; }

/* gamble */
.card3d{ width:118px; height:164px; margin:0 auto 1.1rem; position:relative; transform-style:preserve-3d; transition: transform .5s var(--ease); }
.card3d.flip{ transform: rotateY(180deg); }
.card-face{ position:absolute; inset:0; border-radius:12px; backface-visibility:hidden; display:grid; place-items:center;
  font-size:3rem; font-weight:800; box-shadow:0 12px 30px -8px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.2); }
.card-back{ background: repeating-linear-gradient(45deg,#c69b3a,#c69b3a 6px,#8a6a20 6px,#8a6a20 12px); color:#231a07; }
.card-back::after{ content:"?"; font-family:var(--font-d); font-size:2.6rem; color:#231a07; }
.card-front{ transform: rotateY(180deg); background:#0e0e14; }
.card-front.red{ color:#ff5757; } .card-front.black{ color:#eee; }
.gamble-btns{ display:flex; gap:.6rem; justify-content:center; }
.gbtn{ height:2.8rem; padding:0 1.2rem; border-radius:100px; border:none; cursor:pointer; font-family:var(--font-d);
  font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; transition:.2s transform var(--ease); }
.gbtn:hover{ transform: translateY(-2px); }
.gbtn.red{ background: linear-gradient(#ff6b6b,#c92c2c);} .gbtn.black{ background: linear-gradient(#3a3a44,#111);}
.gbtn.collect{ background: var(--grad-gold-h); color:#231a07; }
.gamble-amt{ font-family:var(--font-d); font-weight:800; color:var(--gold-1); font-size:1.4rem; margin-bottom:.9rem; }

/* bonus boxes */
.boxes{ display:grid; grid-template-columns: repeat(3,1fr); gap:.7rem; width:100%; max-width:320px; margin-bottom:1rem; }
.box{ aspect-ratio:1; border-radius:12px; cursor:pointer; position:relative; border:none;
  background: radial-gradient(circle at 40% 30%, #fceeb0,#e6c368 45%,#a5781f 85%);
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.6), inset 0 -5px 10px rgba(120,86,20,.5), inset 0 4px 8px rgba(255,255,255,.4);
  display:grid; place-items:center; font-size:1.7rem; color:#5a4212; transition: transform .2s var(--ease); }
.box:hover:not(.opened){ transform: translateY(-3px) scale(1.03); }
.box.opened{ background:#0e0e14; color:var(--gold-1); box-shadow: inset 0 0 0 2px var(--gold-3); cursor:default; }
.box .val{ font-family:var(--font-d); font-weight:800; font-size:1.2rem; }
.box.dud{ color:var(--ink-mute); }

/* ============================================================
   Process / steps
   ============================================================ */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.1rem; }
@media (max-width: 860px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .steps{ grid-template-columns:1fr; } }
.step{ padding: 1.9rem 1.6rem; border:1px solid var(--line); position:relative; background: rgba(255,255,255,.015); }
.step .num{ font-family:var(--font-d); font-weight:800; font-size: 2.4rem; line-height:1;
  -webkit-text-stroke: 1px var(--gold-3); color: transparent; }
.step h4{ margin:.9rem 0 .5rem; font-size:1.15rem; }
.step p{ font-size:.9rem; color: var(--ink-dim); }

/* ============================================================
   CTA band
   ============================================================ */
.cta{ text-align:center; position:relative; overflow:hidden; }
.cta .wrap{ position:relative; z-index:2; }
.cta h2{ font-size: clamp(2.2rem,7vw,5.2rem); margin-bottom:1.4rem; }
.cta .row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.cta-arc{ position:absolute; bottom:-30%; left:50%; transform: translateX(-50%); width:min(900px,110%); opacity:.5; z-index:0; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ border-top:1px solid var(--line); background: var(--bg-2); padding-top: clamp(3.5rem,7vw,5.5rem); }
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; }
@media (max-width: 820px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:2.2rem; } }
@media (max-width: 480px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-col h5{ font-family:var(--font-d); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-2); margin-bottom:1.1rem; }
.foot-col a, .foot-col p{ display:block; color: var(--ink-dim); font-size:.92rem; margin-bottom:.55rem; transition: color .3s; }
.foot-col a:hover{ color: var(--ink); }
.foot-brand img{ height:64px; margin-bottom:1rem; filter: drop-shadow(0 2px 12px rgba(230,195,104,.3)); }
.foot-brand p{ max-width: 30ch; }
.foot-bottom{ border-top:1px solid var(--line-soft); padding-block:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.foot-bottom p, .foot-bottom a{ font-size:.78rem; color: var(--ink-mute); }
.foot-bottom a:hover{ color: var(--gold-2); }

/* ============================================================
   WhatsApp float
   ============================================================ */
.wa-float{ position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 700; width: 3.6rem; height:3.6rem;
  border-radius:50%; display:grid; place-items:center; background:#1faf54;
  box-shadow: 0 10px 30px -6px rgba(31,175,84,.6); transition: transform .3s var(--ease); }
.wa-float:hover{ transform: scale(1.08) translateY(-2px); }
.wa-float svg{ width: 1.7rem; height:1.7rem; fill:#fff; }

/* ============================================================
   Page hero (interior)
   ============================================================ */
.page-hero{ padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3rem)); padding-bottom: 3rem; }
.page-hero h1{ font-size: clamp(2.6rem,8vw,6rem); text-transform:uppercase; letter-spacing:-.03em; }
.page-hero h1 .line{ display:block; }
.page-hero .crumbs{ font-family:var(--font-d); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-mute); margin-bottom:1.4rem; }
.page-hero .crumbs a{ color: var(--gold-2); }

/* ============================================================
   Forms
   ============================================================ */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:1.1rem; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field.full{ grid-column: 1/-1; }
.field label{ font-family:var(--font-d); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-mute); }
.field input, .field textarea, .field select{
  background: rgba(255,255,255,.03); border:1px solid var(--line); color: var(--ink);
  padding: .95rem 1.1rem; border-radius: 4px; font-size:.98rem; transition: border-color .3s, background .3s; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color: var(--gold-3); background: rgba(230,195,104,.05); }
.field textarea{ resize: vertical; min-height: 140px; }

/* ============================================================
   Gallery
   ============================================================ */
.gal-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.1rem; }
@media (max-width: 900px){ .gal-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .gal-grid{ grid-template-columns: 1fr; } }
.gal-item{ position:relative; border:1px solid var(--line); background: var(--panel); overflow:hidden;
  aspect-ratio: 4/5; display:grid; place-items:center; transition: border-color .4s, transform .4s var(--ease); }
.gal-item.wide{ grid-column: span 2; aspect-ratio: auto; }
@media (max-width: 560px){ .gal-item.wide{ grid-column: span 1; } }
.gal-item:hover{ border-color: var(--gold-3); transform: translateY(-4px); }
.gal-item svg{ width: 78%; height:auto; }
.gal-cap{ position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.3rem;
  background: linear-gradient(transparent, rgba(6,6,9,.9)); }
.gal-cap .t{ display:block; font-family:var(--font-d); font-weight:700; font-size:1rem; }
.gal-cap .s{ display:block; margin-top:.2rem; font-size:.76rem; color: var(--gold-2); letter-spacing:.08em; }

/* ============================================================
   Values / timeline
   ============================================================ */
.timeline{ position:relative; padding-left: 2rem; }
.timeline::before{ content:""; position:absolute; left:5px; top:.4rem; bottom:.4rem; width:1px; background: var(--line); }
.tl-item{ position:relative; padding-bottom: 2.6rem; }
.tl-item::before{ content:""; position:absolute; left:-2rem; top:.35rem; width:11px; height:11px; border-radius:50%;
  background: var(--grad-gold); box-shadow: 0 0 0 4px rgba(230,195,104,.14); }
.tl-item .yr{ font-family:var(--font-d); font-weight:800; color: var(--gold-2); font-size:.9rem; letter-spacing:.1em; }
.tl-item h4{ margin:.4rem 0 .5rem; font-size:1.3rem; }
.tl-item p{ color: var(--ink-dim); max-width: 52ch; }

/* ============================================================
   Info cards (contact)
   ============================================================ */
.info-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
@media (max-width: 780px){ .info-grid{ grid-template-columns:1fr; } }
.info-card{ padding:1.8rem; border:1px solid var(--line); background: rgba(255,255,255,.02); }
.info-card .ic{ width:38px; height:38px; color: var(--gold-2); margin-bottom:1rem; }
.info-card h4{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:.5rem; font-family:var(--font-d); }
.info-card a, .info-card p{ font-size:1.05rem; color: var(--ink); }

/* ============================================================
   Legal pages
   ============================================================ */
.legal{ max-width: 800px; }
.legal h2{ font-size:1.5rem; margin: 2.4rem 0 .9rem; color: var(--gold-1); }
.legal h3{ font-size:1.1rem; margin:1.6rem 0 .6rem; }
.legal p, .legal li{ color: var(--ink-dim); margin-bottom:.8rem; }
.legal ul{ list-style: disc; padding-left:1.3rem; }
.legal strong{ color: var(--ink); }

/* ============================================================
   Reveal utility (JS driven)
   ============================================================ */
[data-reveal]{ opacity:0; transform: translateY(30px); }
html.no-js [data-reveal]{ opacity:1; transform:none; }

/* ---------- Screenshot mode ---------- */
html.shot .hero{ min-height:auto; padding-block: 7rem 4rem; }
html.shot .scroll-hint{ display:none; }
html.shot #boot{ display:none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  #boot{ display:none !important; }
}

/* Integración con Elementor */
.elementor-widget-maroam_page,
.elementor-widget-maroam_page > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}
.maroam-managed-page .elementor-location-header,
.maroam-managed-page .elementor-location-footer {
  display: none !important;
}
.maroam-form-notice {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  font-size: .9rem;
}
.maroam-form-notice.success {
  color: var(--mint);
  border-color: rgba(138,255,206,.4);
  background: rgba(138,255,206,.06);
}
.maroam-form-notice.error {
  color: #ffb4b4;
  border-color: rgba(255,120,120,.4);
  background: rgba(255,120,120,.06);
}
.maroam-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ============================================================
   Integración WordPress / Elementor
   ============================================================ */
html,
body.maroam-managed-page {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100% !important;
  background: #08080b !important;
}
body.maroam-managed-page {
  width: 100% !important;
  max-width: none !important;
  color: var(--ink) !important;
  overflow-x: hidden !important;
}
body.maroam-managed-page .maroam-site {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg);
  color: var(--ink);
}
body.maroam-managed-page .elementor,
body.maroam-managed-page .elementor-section-wrap,
body.maroam-managed-page .e-con,
body.maroam-managed-page .elementor-widget,
body.maroam-managed-page .elementor-widget-container {
  margin: 0;
  padding: 0;
  max-width: none;
}
body.maroam-managed-page .elementor-section,
body.maroam-managed-page .elementor-container,
body.maroam-managed-page .elementor-column,
body.maroam-managed-page .elementor-widget-wrap {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.maroam-managed-page.admin-bar .maroam-site .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  body.maroam-managed-page.admin-bar .maroam-site .site-header {
    top: 46px;
  }
}
body.maroam-managed-page #wpadminbar {
  z-index: 100000;
}


/* ============================================================
   v1.1.9 · Corrección de títulos recortados
   ============================================================ */
.maroam-site h1,
.maroam-site h2,
.maroam-site h3,
.maroam-site [data-hero-split],
.maroam-site [data-split] {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.page-hero,
.page-hero .wrap,
.page-hero h1,
.page-hero h1 .line {
  overflow: visible !important;
}

.page-hero h1 {
  width: 100%;
  font-size: clamp(2.35rem, 6.8vw, 5.35rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.page-hero h1 .line {
  width: 100%;
  max-width: 100%;
  white-space: normal !important;
}

.page-hero h1 .word {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
}

/* Evita que el desplazamiento de entrada recorte ascendentes y descendentes. */
.hero-title .line,
.hero h1 .line {
  overflow: clip;
  overflow-clip-margin: .18em;
}

@media (max-width: 1024px) {
  .page-hero h1 {
    font-size: clamp(2.25rem, 7.2vw, 4.6rem);
    line-height: 1.05;
  }
}

@media (max-width: 767px) {
  .page-hero {
    padding-top: calc(var(--header-h) + 1.4rem);
  }

  .page-hero h1 {
    font-size: clamp(2rem, 10.2vw, 3.45rem);
    line-height: 1.06;
    letter-spacing: -.03em;
  }

  .page-hero h1 .line + .line {
    margin-top: .06em;
  }

  .page-hero .lead {
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .page-hero h1 {
    font-size: clamp(1.85rem, 9.8vw, 2.65rem);
    line-height: 1.08;
  }
}


/* ============================================================
   v1.1.10 · Texto dorado visible tras la animación por caracteres
   ============================================================ */
/*
 * GSAP convierte cada palabra y letra en spans. El degradado aplicado
 * únicamente al elemento .gold dejaba a sus hijos con color transparente.
 * Se replica el acabado en los fragmentos creados por JavaScript.
 */
.maroam-site .gold,
.maroam-site .gold > .word,
.maroam-site .gold .char {
  background-image: var(--grad-gold) !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Mantiene reservada la altura de las líneas doradas durante la entrada. */
.page-hero h1 .line {
  min-height: 1.06em;
}

.page-hero h1 .line.gold {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fallback para navegadores sin background-clip:text. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .maroam-site .gold,
  .maroam-site .gold > .word,
  .maroam-site .gold .char {
    background: none !important;
    color: var(--gold-2) !important;
    -webkit-text-fill-color: var(--gold-2) !important;
  }
}