:root{
  --purple: #8b4bff;
  --purple-dark: #5a1fd6;
  --magenta: #ff3fb0;
  --blue: #3f6bff;
  --cyan: #00e5d6;
  --ink: #eceaff;
  --navy: #0e0a26;
  --bg-deep: #0b0820;
  --card-bg: rgba(255,255,255,0.055);
  --card-border: rgba(255,255,255,0.14);
  --muted: #a9a4cf;
  --font-head: 'Baloo 2', 'Poppins', 'Trebuchet MS', sans-serif;
  --font-body: 'Poppins', 'Segoe UI', sans-serif;
  --shadow-soft: 0 20px 44px rgba(0,0,0,0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(139,75,255,0.35), transparent 60%),
    radial-gradient(900px 700px at 90% 18%, rgba(255,63,176,0.22), transparent 55%),
    radial-gradient(1000px 800px at 50% 100%, rgba(0,229,214,0.16), transparent 55%),
    var(--bg-deep);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit;}

.heading-font{
  font-family:var(--font-head);
  font-weight:700;
}
.gradient-text{
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.container{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ---------- Floating bubbles background ---------- */
.bubbles-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.bubbles-bg .bubble{
  position:absolute;
  bottom:-120px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), rgba(255,255,255,0.05) 60%);
  border:1px solid rgba(255,255,255,0.35);
  animation:floatUp linear infinite;
  opacity:0.55;
}
@keyframes floatUp{
  0%{transform:translateY(0) translateX(0) scale(1); opacity:0;}
  8%{opacity:0.6;}
  100%{transform:translateY(-115vh) translateX(var(--drift, 30px)) scale(1.15); opacity:0;}
}

/* ---------- Header ---------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 32px;
  background:rgba(12,9,34,0.65);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:sticky;
  top:0;
  z-index:200;
}
.site-header .logo img{height:40px;}
.site-header nav.desktop-nav ul{
  display:flex;
  gap:36px;
}
.site-header nav.desktop-nav a{
  position:relative;
  display:inline-block;
  padding:6px 2px;
  font-weight:600;
  font-size:0.92rem;
  letter-spacing:0.03em;
  color:var(--muted);
  transition:color .2s;
}
.site-header nav.desktop-nav a::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--purple), var(--magenta), var(--cyan));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.site-header nav.desktop-nav a:hover{color:#fff;}
.site-header nav.desktop-nav a:hover::after{transform:scaleX(1);}
.site-header nav.desktop-nav a.active{color:#fff;}
.site-header nav.desktop-nav a.active::after{transform:scaleX(1);}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  display:block;
  width:26px;
  height:3px;
  background:#fff;
  margin:5px 0;
  border-radius:2px;
  transition:transform .2s, opacity .2s;
}
.mobile-nav{
  display:none;
  flex-direction:column;
  background:rgba(12,9,34,0.97);
  backdrop-filter:blur(14px);
  position:absolute;
  top:100%;
  left:0;
  right:0;
  padding:10px 32px 20px;
  box-shadow:0 10px 24px rgba(0,0,0,0.4);
}
.mobile-nav a{
  padding:14px 0;
  font-weight:600;
  color:var(--ink);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.mobile-nav.open{display:flex;}

@media (max-width:860px){
  .desktop-nav{display:none;}
  .nav-toggle{display:block;}
}

.header-socials{display:flex; gap:10px;}
.header-socials a{
  width:34px;height:34px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.18);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  transition:background .2s, border-color .2s, transform .2s, color .2s;
}
.header-socials a:hover{
  background:linear-gradient(135deg, var(--purple), var(--magenta));
  border-color:transparent;
  color:#fff;
  transform:translateY(-2px) rotate(-6deg);
}
.header-socials svg{width:15px;height:15px;fill:currentColor;}
.header-right{display:flex; align-items:center; gap:22px;}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  position:relative;
  padding:88px 24px 74px;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.page-hero .hero-content{position:relative; z-index:2;}
.page-hero h1{
  font-size:clamp(2.1rem, 8vw, 3.1rem);
  margin:0 0 14px;
  text-shadow:0 4px 20px rgba(0,0,0,0.25);
}
.page-hero p{
  max-width:640px;
  margin:0 auto;
  font-size:1.08rem;
  font-weight:500;
  line-height:1.55;
  opacity:0.96;
}
.bg-presentaciones{background:linear-gradient(120deg, var(--purple) 0%, var(--blue) 45%, var(--cyan) 100%);}
.bg-juegos{background:linear-gradient(120deg, var(--purple) 0%, var(--blue) 38%, var(--magenta) 72%, var(--cyan) 100%);}
.bg-contacto{background:linear-gradient(120deg, var(--cyan) 0%, var(--blue) 55%, var(--purple-dark) 100%);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:50px;
  font-weight:700;
  font-family:var(--font-head);
  font-size:1rem;
  cursor:pointer;
  border:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background:linear-gradient(120deg, var(--magenta), var(--purple));
  color:#fff;
  box-shadow:0 12px 26px rgba(139,75,255,0.4);
}
.btn-ghost{
  background:rgba(255,255,255,0.1);
  color:#fff;
  border:1.5px solid rgba(255,255,255,0.4);
}
.btn:hover{transform:translateY(-3px);}
.btn-primary:hover{box-shadow:0 16px 32px rgba(139,75,255,0.55);}
.btn-ghost:hover{background:rgba(255,255,255,0.2);}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-top:30px;}

/* ---------- Inicio hero ---------- */
.hero-inicio{
  position:relative;
  background:linear-gradient(125deg, #1e3fc9 0%, #6a2ce0 50%, #b23bef 100%);
  padding:0;
  overflow:hidden;
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:52px;
  padding:90px 32px 100px;
  flex-wrap:wrap;
}
.hero-text{flex:1 1 340px; min-width:280px;}
.hero-eyebrow{
  display:inline-block;
  color:#fff;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.4);
  padding:6px 16px;
  border-radius:50px;
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.08em;
  margin-bottom:22px;
}
.hero-text img.wordmark{
  max-width:340px; width:100%; margin-bottom:24px;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,0.35));
  animation:wobble 6s ease-in-out infinite;
}
@keyframes wobble{
  0%,100%{transform:rotate(-2deg);}
  50%{transform:rotate(2deg);}
}
.hero-text p{
  color:#fff;
  font-size:1.4rem;
  font-weight:600;
  line-height:1.45;
  margin:0;
}
.hero-media{
  flex:1 1 420px;
  min-width:300px;
  position:relative;
  perspective:1000px;
}
.hero-media img.hero-photo{
  border-radius:28px;
  width:100%;
  box-shadow:0 24px 50px rgba(10,6,45,0.4);
  transition:transform .15s ease-out;
  will-change:transform;
}
.hero-media img.fish{
  position:absolute;
  bottom:-30px;
  right:-18px;
  width:30%;
  min-width:110px;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,0.35));
  animation:bob 3.2s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
.scroll-cue{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  padding-bottom:26px;
}
.scroll-cue span{
  width:26px;height:42px;
  border:2px solid rgba(255,255,255,0.7);
  border-radius:20px;
  position:relative;
}
.scroll-cue span::before{
  content:'';
  position:absolute;
  top:8px; left:50%;
  width:5px;height:5px;
  background:#fff;
  border-radius:50%;
  transform:translateX(-50%);
  animation:scrollDot 1.6s ease infinite;
}
@keyframes scrollDot{
  0%{opacity:1; top:8px;}
  70%{opacity:0; top:22px;}
  100%{opacity:0; top:8px;}
}

/* ---------- Section titles (Inicio extra sections) ---------- */
.section-title{
  text-align:center;
  max-width:640px;
  margin:0 auto 44px;
}
.section-title h2{
  font-size:2.2rem;
  margin:0 0 10px;
  color:#fff;
}
.section-title p{
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.55;
}
.home-section{padding:80px 24px; position:relative;}

.mini-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1100px;
  margin:0 auto;
}
.mini-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:22px;
  padding:32px 24px;
  text-align:center;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.mini-card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,0.09);
  border-color:rgba(255,255,255,0.24);
}
.mini-card .emoji-badge{
  width:56px;height:56px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--purple), var(--magenta));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  font-size:1.5rem;
  box-shadow:0 10px 22px rgba(139,75,255,0.4);
}
.mini-card h3{font-family:var(--font-head); margin:0 0 8px; color:#fff;}
.mini-card p{margin:0; color:var(--muted); font-size:0.94rem; line-height:1.5;}

@media (max-width:760px){
  .mini-cards{grid-template-columns:1fr;}
}

.brand-badge-wrap{
  display:flex;
  justify-content:center;
}
.brand-badge{
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:20px 34px;
  border-radius:24px;
  box-shadow:var(--shadow-soft);
}
.brand-badge img{height:56px; width:auto;}

/* ---------- Presentaciones ---------- */
.products-section{padding:56px 24px 96px;}
.products-grid{
  max-width:1140px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px 26px;
  justify-items:center;
}
.product-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:26px;
  width:100%;
  max-width:320px;
  padding:32px 22px 26px;
  text-align:center;
  box-shadow:var(--shadow-soft);
  transition:box-shadow .25s ease, border-color .25s ease, background .25s ease;
  transform-style:preserve-3d;
  will-change:transform;
}
.product-card:hover{
  box-shadow:0 26px 54px rgba(0,0,0,0.45);
  border-color:rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.085);
}
.product-card .img-wrap{
  position:relative;
  padding:10px;
  margin-bottom:14px;
  overflow:hidden;
}
.product-card .img-wrap::after{
  content:'';
  position:absolute;
  top:-60%; left:-20%;
  width:60%; height:220%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:rotate(20deg) translateX(-140%);
  transition:transform .7s ease;
}
.product-card:hover .img-wrap::after{transform:rotate(20deg) translateX(220%);}
.product-card img{
  width:150px;
  height:150px;
  object-fit:contain;
  margin:0 auto;
  position:relative;
  z-index:1;
  transition:transform .3s ease;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,0.4));
}
.product-card:hover img{transform:scale(1.07) translateY(-4px);}
.product-card h3{
  color:#fff;
  font-size:1.02rem;
  margin:0;
  font-family:var(--font-head);
  font-weight:700;
  letter-spacing:0.01em;
  line-height:1.3;
}
@media (max-width:760px){
  .products-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .products-grid{grid-template-columns:1fr;}
}

/* ---------- Juegos ---------- */
.games-section{padding:56px 24px 96px;}
.games-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.game-card{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  aspect-ratio:385/245;
  border:1px solid var(--card-border);
  box-shadow:var(--shadow-soft);
  transition:box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}
.game-card:hover{
  box-shadow:0 26px 50px rgba(0,0,0,0.5);
  border-color:rgba(255,255,255,0.3);
}
.game-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.game-card:hover img{transform:scale(1.08);}
.game-card .play-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,8,32,0) 40%, rgba(11,8,32,0.8) 100%);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:18px;
  opacity:0;
  transition:opacity .25s ease;
}
.game-card:hover .play-overlay{opacity:1;}
.game-card .play-pill{
  background:#fff;
  color:var(--navy);
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.85rem;
  padding:9px 20px;
  border-radius:50px;
  display:flex;
  align-items:center;
  gap:8px;
  transform:translateY(10px);
  transition:transform .25s ease;
}
.game-card:hover .play-pill{transform:translateY(0);}
.game-card .play-pill svg{width:12px;height:12px;fill:var(--magenta);}
@media (max-width:820px){
  .games-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .games-grid{grid-template-columns:1fr;}
}

/* ---------- Contacto ---------- */
.contact-section{text-align:center; position:relative;}
.contact-candy-wrap{margin:26px auto 8px; max-width:420px;}
.contact-candy{
  filter:drop-shadow(0 20px 32px rgba(0,0,0,0.3));
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  cursor:default;
}
.contact-candy-wrap:hover .contact-candy{transform:rotate(-4deg) scale(1.04);}
.contact-lead{
  color:#fff;
  max-width:520px;
  margin:0 auto 40px;
  font-weight:500;
  line-height:1.6;
  position:relative;
  z-index:2;
}
.contact-info{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
  margin-bottom:48px;
  position:relative;
  z-index:2;
}
.contact-info button.contact-btn, .contact-info a.contact-btn{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  font-weight:600;
  font-size:1.05rem;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.32);
  backdrop-filter:blur(10px);
  padding:14px 28px;
  border-radius:50px;
  min-width:320px;
  justify-content:center;
  transition:background .2s, transform .2s;
  font-family:var(--font-body);
}
.contact-info button.contact-btn:hover, .contact-info a.contact-btn:hover{
  background:rgba(255,255,255,0.24);
  transform:translateY(-2px);
}
.contact-info svg{width:20px;height:20px;fill:#fff;flex-shrink:0;}
.contact-fish{
  max-width:200px;
  margin:0 auto;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,0.28));
  animation:bob 3.2s ease-in-out infinite;
  position:relative;
  z-index:2;
}
.toast{
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#fff;
  color:var(--navy);
  padding:12px 26px;
  border-radius:50px;
  font-weight:600;
  font-size:0.9rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:500;
  box-shadow:0 12px 26px rgba(0,0,0,0.35);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Footer ---------- */
.site-footer{
  text-align:center;
  padding:26px;
  font-size:0.85rem;
  color:var(--muted);
  background:transparent;
  border-top:1px solid rgba(255,255,255,0.08);
}
.site-footer a{color:var(--cyan); font-weight:600;}