/*
Theme Name: Neko Games
Theme URI: https://neko.games/
Author: Neko Games
Author URI: https://neko.games/
Description: Tema personalizado para la landing de Neko Games.
Version: 1.0
Text Domain: neko-games
*/

:root {
  --bg-0:#050510;
  --bg-1:#0a0a22;
  --bg-2:#00001e;
  --navy:#001a70;
  --navy-deep:#001050;
  --orange:#ff5100;
  --orange-2:#ff8a3d;
  --gold:#d4aa3d;
  --gold-light:#fdfb9d;
  --blue:#0c71c3;
  --blue-light:#2ea3f2;
  --white:#ffffff;
  --ink-60:rgba(255,255,255,.62);
  --ink-40:rgba(255,255,255,.4);
  --line:rgba(255,255,255,.1);
  --radius:22px;
  --container:1240px;
  --mnav-ease:cubic-bezier(.4,.01,.165,.99);
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html {
  scroll-behavior:smooth;
}
body {
  font-family:'Montserrat', sans-serif;
  background:var(--bg-0);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img {
  max-width:100%;
  display:block;
}
a {
  color:inherit;
  text-decoration:none;
}
ul {
  list-style:none;
}
.wrap {
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:radial-gradient(60% 50% at 82% -6%, rgba(255,81,0,.20), transparent 60%),
    radial-gradient(45% 40% at 6% 8%, rgba(12,113,195,.18), transparent 60%),
    var(--bg-0);
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-light);
  background:linear-gradient(90deg, rgba(212,170,61,.16), rgba(212,170,61,.04));
  border:1px solid rgba(212,170,61,.35);
  padding:8px 18px 8px 14px;
  border-radius:999px;
}
.eyebrow .dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 10px 2px var(--orange);
}

.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.01em;
  padding:16px 30px;
  border-radius:999px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, color .35s, border-color .35s;
  white-space:nowrap;
}
.btn-primary {
  background:linear-gradient(180deg,var(--orange-2) 0%, var(--orange) 60%, #d64300 100%);
  color:var(--white);
  box-shadow:0 10px 30px -10px rgba(255,81,0,.65);
}
.btn-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 34px -8px rgba(255,81,0,.75);
}
.btn-ghost {
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,.28);
}
.btn-ghost:hover {
  border-color:var(--white);
  transform:translateY(-3px);
}
.btn-arrow {
  width:15px;
  height:15px;
  flex:none;
}

header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  padding:22px 0;
  transition:background .4s, padding .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
header.scrolled {
  background:rgba(5,5,16,.86);
  backdrop-filter:blur(14px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
header .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo img {
  height:50px;
  width:auto;
}
nav.main-nav {
  display:flex;
  align-items:center;
  gap:38px;
}
nav.main-nav a {
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-60);
  position:relative;
  padding:6px 0;
  transition:color .3s;
}
nav.main-nav a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:var(--orange);
  transition:width .35s;
}
nav.main-nav a:hover {
  color:var(--white);
}
nav.main-nav a:hover::after {
  width:100%;
}
.header-cta {
  display:flex;
  align-items:center;
  gap:16px;
}

/* GTranslate: el switcher se mueve acá por JS (ver footer.php) para que quede
   siempre visible junto al CTA / botón hamburguesa, en vez de dentro del nav
   colapsable. Sólo bandera + código de idioma, sin el fondo blanco del plugin. */
.header-cta .menu-item-gtranslate {
  list-style:none;
  display:flex;
  align-items:center;
  position:relative;
}
/* GTranslate pone position:absolute inline en este div contenedor; si el padre
   (.menu-item-gtranslate) no tiene position, escapa del flex y se monta sobre
   el botón. Lo anclamos acá para que quede en flujo normal dentro del header-cta. */
.header-cta .menu-item-gtranslate > div[id^="gtranslate_menu_wrapper_"] {
  position:relative !important;
  white-space:nowrap;
}
.header-cta .gt_float_switcher {
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  position:relative !important;
  overflow:visible !important;
}
.header-cta .gt_float_switcher .gt-selected {
  background:transparent !important;
  width:auto !important;
  height:auto !important;
}
.header-cta .gt_float_switcher .gt-current-lang {
  display:flex !important;
  align-items:center !important;
  gap:6px;
  padding:0 !important;
  cursor:pointer;
}
.header-cta .gt_float_switcher .gt-current-lang img {
  width:18px !important;
  min-width:18px !important;
  height:auto !important;
  margin:0 !important;
  border-radius:2px;
  display:block !important;
  flex:none !important;
  opacity:1 !important;
  visibility:visible !important;
}
.header-cta .gt_float_switcher .gt-lang-code {
  display:inline-block !important;
  position:relative !important;
  z-index:2 !important;
  color:var(--white) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.02em;
}
.header-cta .gt_float_switcher .gt_float_switcher-arrow {
  display:none !important;
}

/* Dropdown de idiomas (se abre al click, GTranslate agrega .gt-open + display:block inline). */
.header-cta .gt_float_switcher .gt_options {
  position:absolute !important;
  top:calc(100% + 14px) !important;
  right:0 !important;
  left:auto !important;
  width:auto !important;
  min-width:170px;
  margin:0 !important;
  padding:8px !important;
  background:var(--bg-1) !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  box-shadow:0 16px 34px -8px rgba(0,0,0,.55) !important;
  z-index:150;
}
.header-cta .gt_float_switcher .gt_options.gt-open {
  animation:gt-dropdown-in .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes gt-dropdown-in {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.header-cta .gt_float_switcher .gt_options a.nturl {
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:10px 12px !important;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  color:var(--ink-60) !important;
  text-decoration:none !important;
  white-space:nowrap;
  transition:background .2s, color .2s;
}
.header-cta .gt_float_switcher .gt_options a.nturl:hover {
  background:rgba(255,255,255,.06);
  color:var(--white) !important;
}
.header-cta .gt_float_switcher .gt_options a.nturl.gt-current {
  color:var(--white) !important;
  font-weight:700;
  background:rgba(255,81,0,.1);
}
.header-cta .gt_float_switcher .gt_options a.nturl img {
  width:18px;
  height:auto;
  border-radius:2px;
  flex:none;
}

.nav-toggle {
  display:none;
  position:relative;
  width:24px;
  height:16px;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  transform:rotate(0deg);
  transition:transform .3s var(--mnav-ease);
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle-bar {
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:var(--white);
  border-radius:2px;
  transition:transform .3s var(--mnav-ease);
}
.nav-toggle-bar-top {
  top:0;
}
.nav-toggle-bar-bottom {
  bottom:0;
}

/* ===== Page hero banner (foto + overlay + eyebrow/h1) — usado en About Us, Blog, etc. ===== */
.about-hero {
  padding:140px 0 40px;
}
.about-hero-card {
  position:relative;
  border-radius:32px;
  overflow:hidden;
  min-height:480px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:flex-end;
  padding:48px;
}
.about-hero-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,16,0) 25%, rgba(5,5,16,.7) 68%, rgba(5,5,16,.92) 100%),
    linear-gradient(90deg, rgba(5,5,16,.6) 0%, rgba(5,5,16,.2) 55%, rgba(5,5,16,0) 80%);
  pointer-events:none;
}
.about-hero-mascot {
  position:absolute;
  top:5%;
  right:10%;
  width:281px;
  z-index:1;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
.about-hero-content {
  position:relative;
  z-index:2;
  max-width:640px;
}
.about-hero-content .eyebrow {
  margin-bottom:20px;
}
.about-hero-content h2 {
  font-size:clamp(28px,4.4vw,57px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.16;
}
@media (max-width:767px) {
  .about-hero {
    padding:90px 0 24px;
  }
  .about-hero-card {
    min-height:360px;
    padding:28px;
    border-radius:22px;
  }
  .about-hero-mascot {
    width:50px;
    top:90px;
    left:28px;
  }
}

.hero {
  position:relative;
  padding:80px 0 50px;
  overflow:hidden;
}
.hero .wrap {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
}
.hero-eyebrow-row {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:28px;
}
.hero-eyebrow-row .verified {
  font-size:12.5px;
  color:var(--ink-40);
  font-weight:600;
}
h2.hero-title {
  font-size:clamp(30px,3.6vw,46px);
  line-height:1.02;
  font-weight:800;
  letter-spacing:-.02em;
}
h2.hero-title .word {
  display:inline-block;
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
  animation:reveal .8s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes reveal {
  to {
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}
.hero-sub {
  margin-top:26px;
  font-size:17px;
  line-height:1.7;
  color:var(--ink-60);
  max-width:480px;
  font-weight:400;
}
.hero-actions {
  display:flex;
  gap:16px;
  margin-top:38px;
  flex-wrap:wrap;
}
.boton-games {
  display:flex;
  gap:16px;
  margin-top:38px;
  flex-wrap:wrap;
  justify-content:center;
}
.hero-visual {
  position:relative;
  height:520px;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:25px;
}
.hero-marquee-label {
  text-align:center;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-40);
  font-weight:700;
  margin-bottom:22px;
}
.hero-marquee {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.hero-marquee-track {
  display:flex;
  align-items:center;
  gap:72px;
  width:max-content;
  animation:scroll 18s linear infinite;
}
.hero-marquee-track img {
  height:64px;
  width:auto;
  object-fit:contain;
}

.hero-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:32px;
}
.hero-stat {
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
}
.hero-stat-icon {
  width:32px;
  height:32px;
  color:var(--orange);
  flex-shrink:0;
}
.hero-stat-number {
  font-size:clamp(20px,2.2vw,28px);
  font-weight:800;
  color:var(--orange);
  letter-spacing:-.01em;
}
.hero-stat-label {
  font-size:12.5px;
  color:var(--ink-60);
  font-weight:500;
}

@keyframes scroll {
  from {
    transform:translateX(0);
  }
  to {
    transform:translateX(-50%);
  }
}

/* ===== Más Juegos — grid 5x2 ===== */
.all-games-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-auto-rows:1fr;
  gap:30px;
}
.all-games-card {
  position:relative;
  display:block;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:800/600;
  background:var(--bg-1);
  border:1px solid var(--line);
}
.all-games-card img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.all-games-card:hover img {
  transform:scale(1.06);
}
@media (max-width:1080px) {
  .all-games-grid {
    grid-template-columns:repeat(3,1fr);
  }
}
@media (max-width:520px) {
  .all-games-grid {
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}

/* ===== Latest Updates — carrusel de blog ===== */
.updates-layout {
  display:flex;
  align-items:center;
  gap:60px;
  flex-wrap:wrap;
}
.updates-col-left {
  flex:1 1 360px;
  max-width:420px;
}
.updates-col-right {
  flex:2 1 500px;
  min-width:0;
  width:100%;
}

.updates-heading {
  font-size:clamp(30px,3.6vw,46px);
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.12;
  margin-top:18px;
}
.updates-text {
  margin-top:18px;
  color:var(--ink-60);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  max-width:400px;
}

.updates-swiper-mask {
  overflow:hidden;
}
.updates-swiper {
  overflow:visible;
}
.updates-swiper .swiper-wrapper {
  align-items:stretch;
}
.updates-slide {
  height:auto;
}
.updates-slide-inner {
  padding:10px;
  height:100%;
  transform-origin:left center;
  transition:transform .4s cubic-bezier(.165,.84,.44,1), opacity .4s cubic-bezier(.165,.84,.44,1);
  will-change:transform, opacity;
}

.updates-card {
  display:flex;
  flex-direction:column;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  height:100%;
  transition:border-color .4s ease;
}
.updates-card:hover {
  border-color:rgba(255,255,255,.22);
}
.updates-card-img {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:325/200;
  overflow:hidden;
  background:var(--bg-2);
  flex-shrink:0;
}
.updates-card-img img {
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .6s cubic-bezier(.165,.84,.44,1);
}
.updates-card:hover .updates-card-img img {
  transform:scale(1.06);
}
.updates-card-body {
  padding:22px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.updates-card-category {
  display:inline-flex;
  align-self:flex-start;
  background:rgba(255,81,0,.14);
  color:var(--orange-2);
  border-radius:4px;
  padding:5px 10px;
  font-size:12px;
  font-weight:700;
  margin-bottom:14px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.updates-card-title {
  font-size:19px;
  font-weight:700;
  line-height:1.3;
  margin:0 0 14px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.updates-card-date {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--ink-40);
  font-weight:500;
  margin-top:auto;
}
.updates-card-date svg {
  width:14px;
  height:14px;
  flex-shrink:0;
}

.updates-pagination {
  position:relative !important;
  width:100%;
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.updates-pagination .swiper-pagination-bullet {
  width:7px;
  height:7px;
  background:var(--white);
  opacity:.4;
  border-radius:50%;
  transition:all .3s ease;
  margin:0 !important;
}
.updates-pagination .swiper-pagination-bullet-active {
  width:20px;
  border-radius:3.5px;
  opacity:.9;
  background:var(--gold);
}

@media (max-width:900px) {
  .updates-layout {
    flex-direction:column;
    align-items:center;
    gap:36px;
  }
  .updates-col-left {
    max-width:100%;
    flex-basis:auto;
  }
}

section {
  padding:clamp(56px,8vw,100px) 0;
  position:relative;
}
.our-games {
  padding-top:24px;
}
.section-head {
  max-width:640px;
  margin-bottom:64px;
}
.section-head.center {
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.section-head h2 {
  font-size:clamp(30px,3.6vw,46px);
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.12;
  margin-top:18px;
}
.section-head p {
  margin-top:18px;
  color:white;
  font-size:16px;
  line-height:1.7;
  font-weight:400;
}
.text-orange {
  color:var(--orange);
}
.accent {
  background:#ff5100;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.reveal {
  opacity:0;
  transform:translateY(34px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.in {
  opacity:1;
  transform:translateY(0);
}

/* ===== Nuestros Juegos — carrusel "Opacity Slider" (Swiper) ===== */
.games-carousel-outer {
  position:relative;
  max-width:1920px;
  margin:0 auto;
}
.pf-swiper-mask {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.pf-swiper {
  overflow:visible;
}
.pf-swiper .swiper-wrapper {
  align-items:stretch;
  transition-timing-function:cubic-bezier(.165,.84,.44,1) !important;
}

.pf-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:10;
  transition:opacity .3s ease, background .3s ease, border-color .3s ease;
}
.pf-nav:hover {
  background:var(--orange);
  border-color:var(--orange);
}
.pf-nav.swiper-button-disabled {
  opacity:.3;
  cursor:default;
}
.pf-nav.swiper-button-disabled:hover {
  background:rgba(0,0,0,.55);
  border-color:rgba(255,255,255,.18);
}
.pf-nav svg {
  width:20px;
  height:20px;
}
.pf-nav-prev {
  left:12px;
}
.pf-nav-next {
  right:12px;
}
@media (max-width:860px) {
  .pf-nav {
    width:40px;
    height:40px;
  }
}
@media (max-width:520px) {
  .games-carousel-outer {
    display:flex;
    flex-direction:column;
  }
  .pf-swiper-mask {
    order:1;
  }
  .pf-nav-row {
    order:2;
    position:static;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-top:20px;
  }
  .pf-nav-row .pf-nav {
    position:static;
    transform:none;
  }
  .boton-games {
    order:3;
  }
}

.pf-slide {
  height:auto;
}
.pf-slide-inner {
  position:relative;
  padding:20px 20px 50px;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform-origin:center center;
  will-change:transform, opacity;
}
@media (max-width:767px) {
  .pf-slide-inner {
    padding:10px 10px 40px;
  }
}

.pf-card {
  position:relative;
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:264/415;
  isolation:isolate;
  background-color:var(--bg-1);
  max-width:280px;
  width:100%;
  margin:0 auto;
  box-shadow:0 2px 6px rgba(0,0,0,.35), 0 8px 19px rgba(0,0,0,.45);
  transition:box-shadow .4s ease;
}
.pf-card:hover {
  box-shadow:0 6px 14px rgba(0,0,0,.4), 0 16px 34px rgba(255,81,0,.22);
}
.pf-card::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:inherit;
  background-size:cover;
  background-position:center 50%;
}

.pf-btn {
  position:absolute;
  left:50%;
  bottom:50px;
  z-index:2;
  transform:translate(-50%, 50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  border-radius:999px;
  background:var(--white);
  border:0;
  color:#111;
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  width:80%;
  max-width:180px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.pf-btn:hover {
  transform:translate(-50%, 50%) translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.pf-btn svg {
  width:14px;
  height:14px;
  transition:transform .3s ease;
}
.pf-btn:hover svg {
  transform:translateX(3px);
}
@media (max-width:767px) {
  .pf-btn {
    bottom:40px;
  }
}

/* ===== Awards — marquee de logos ===== */
.awards-marquee {
  overflow:hidden;
  margin-top:44px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.awards-track {
  display:flex;
  align-items:center;
  gap:32px;
  width:max-content;
  animation:scroll 34s linear infinite;
}
.awards-track img {
  height:114px;
  width:auto;
  object-fit:contain;
  background:var(--white);
  border-radius:14px;
  padding:21px 33px;
}

/* ===== Partners — marquee de logos ===== */
.partners-marquee {
  overflow:hidden;
  margin-top:44px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.partners-track {
  display:flex;
  align-items:center;
  gap:28px;
  width:max-content;
  animation:scroll 30s linear infinite;
}
.partners-track img {
  height:64px;
  width:auto;
  object-fit:contain;
  background:var(--white);
  border-radius:12px;
  padding:14px 22px;
}

.team-copy {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
  margin-top:8px;
}

/* ===== Team — grid de 3 columnas en desk/tablet, carrusel infinito en mobile ===== */
.team-marquee {
  max-width:var(--container);
  margin-left:auto;
  margin-right:auto;
  padding:0 32px;
}
.team-track {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.team-photo {
  width:100%;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:4/3.1;
  border:1px solid var(--line);
}
.team-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s;
}
.team-photo:hover img {
  transform:scale(1.06);
}

@media (max-width:860px) {
  .team-marquee {
    max-width:none;
    padding:0;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .team-track {
    display:flex;
    align-items:center;
    gap:22px;
    width:max-content;
    animation:scroll 26s linear infinite;
  }
  .team-photo {
    flex:none;
    width:340px;
  }
}

/* ===== FAQ ===== */
.faq-layout {
  display:flex;
  align-items:flex-start;
  gap:60px;
}
.faq-left {
  flex:1 1 58%;
  min-width:0;
}
.faq-left .section-head {
  margin-bottom:0;
  max-width:560px;
}
.faq-left .section-head p {
  margin-top:18px;
  color:var(--ink-60);
  font-size:16px;
  line-height:1.7;
}
.faq-right {
  flex:0 1 38%;
  position:sticky;
  top:110px;
}

.faq-accordion {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:36px;
}
.faq-item {
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .3s ease;
}
.faq-item.is-open {
  border-color:rgba(255,81,0,.35);
}
.faq-btn {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:20px 22px;
  background:none;
  border:0;
  font-family:'Montserrat',sans-serif;
  text-align:left;
  cursor:pointer;
}
.faq-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(255,81,0,.14);
  color:var(--orange-2);
  flex-shrink:0;
}
.faq-icon svg {
  width:18px;
  height:18px;
}
.faq-question {
  flex:1;
  font-size:15.5px;
  font-weight:700;
  color:var(--white);
}
.faq-chevron {
  display:flex;
  flex-shrink:0;
  color:var(--ink-60);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), color .3s;
}
.faq-chevron svg {
  width:16px;
  height:16px;
}
.faq-item.is-open .faq-chevron {
  transform:rotate(180deg);
  color:var(--orange);
}
.faq-body {
  height:0;
  overflow:hidden;
  opacity:0;
  transition:height .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.faq-item.is-open .faq-body {
  opacity:1;
}
.faq-body-inner {
  padding:0 22px 22px 70px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-60);
}
.faq-body-inner p + p {
  margin-top:12px;
}
.faq-body-inner ul {
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.faq-body-inner li {
  position:relative;
  padding-left:18px;
}
.faq-body-inner li::before {
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
}

.faq-sticky-card {
  background:radial-gradient(70% 100% at 20% 0%, rgba(255,81,0,.28), transparent 60%), linear-gradient(160deg, var(--navy-deep), var(--bg-2));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.faq-feature {
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.faq-feature-icon {
  width:44px;
  height:44px;
  border-radius:12px;
  background:rgba(255,81,0,.16);
  color:var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.faq-feature-icon svg {
  width:22px;
  height:22px;
}
.faq-feature-title {
  font-size:17px;
  font-weight:800;
  color:var(--white);
  margin-bottom:6px;
}
.faq-feature-desc {
  font-size:14px;
  line-height:1.6;
  color:var(--ink-60);
}

@media (max-width:900px) {
  .faq-layout {
    flex-direction:column;
    gap:36px;
  }
  .faq-right {
    position:static;
    width:100%;
  }
}

.cta-banner {
  background:radial-gradient(60% 120% at 15% 0%, rgba(255,81,0,.35), transparent 60%), radial-gradient(50% 100% at 90% 100%, rgba(212,170,61,.22), transparent 60%), linear-gradient(160deg, var(--navy-deep), var(--bg-2));
  border-radius:32px;
  padding:80px 60px;
  text-align:center;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.cta-banner h2 {
  font-size:clamp(30px,4vw,48px);
  font-weight:800;
  letter-spacing:-.02em;
  max-width:720px;
  margin:0 auto;
}
.cta-banner p {
  margin:20px auto 36px;
  max-width:520px;
  color:var(--ink-60);
  font-size:16px;
}
.cta-actions {
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

footer {
  background:var(--bg-2);
  border-top:1px solid var(--line);
  padding-top:90px;
}
.footer-top {
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr 1fr;
  gap:50px;
  padding-bottom:70px;
}
.footer-brand img {
  height:30px;
  margin-bottom:20px;
}
.footer-brand p {
  color:var(--ink-60);
  font-size:14.5px;
  line-height:1.7;
  max-width:280px;
}
.footer-social {
  display:flex;
  gap:12px;
  margin-top:26px;
}
.footer-social a {
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .3s, border-color .3s, transform .3s;
}
.footer-social a:hover {
  background:var(--orange);
  border-color:var(--orange);
  transform:translateY(-3px);
}
.footer-social svg {
  width:16px;
  height:16px;
}
.footer-col h5 {
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-40);
  font-weight:700;
  margin-bottom:20px;
}
.footer-col a {
  display:block;
  font-size:14.5px;
  color:var(--ink-60);
  margin-bottom:14px;
  transition:color .3s;
}
.footer-col a:hover {
  color:var(--white);
}
.footer-col .contact-line {
  color:var(--ink-60);
  font-size:14.5px;
  line-height:1.7;
  margin-bottom:16px;
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding:26px 0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  font-size:13px;
  color:var(--ink-40);
}
.footer-bottom .legal a {
  margin-left:22px;
  color:var(--ink-40);
  transition:color .3s;
}
.footer-bottom .legal a:hover {
  color:var(--white);
}
.age-badge {
  height:30px;
  opacity:.85;
}

@media (max-width:1080px) {
  .footer-top {
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:860px) {
  header {
    overflow:hidden;
    height:94px;
    transition:height .5s var(--mnav-ease), background .4s, padding .4s, border-color .4s;
  }
  header:has(.gt_options.gt-open) {
    overflow:visible;
  }
  header.scrolled {
    height:78px;
  }
  header.menu-opened,
  header.scrolled.menu-opened {
    height:100vh;
    background:var(--bg-1);
    border-bottom-color:transparent;
  }
  header .wrap {
    flex-wrap:wrap;
  }
  .logo {
    order:1;
  }
  .header-cta {
    order:2;
    margin-left:auto;
  }
  .header-cta .btn-primary {
    display:none;
  }
  .nav-toggle {
    display:block;
  }
  header.menu-opened .nav-toggle {
    transform:rotate(90deg);
  }
  header.menu-opened .nav-toggle-bar-top {
    transform:translateY(7px) rotate(45deg);
  }
  header.menu-opened .nav-toggle-bar-bottom {
    transform:translateY(-7px) rotate(-45deg);
  }

  nav.main-nav {
    order:3;
    flex-basis:100%;
    width:100%;
    height:auto;
    position:static;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:56px 4px 40px;
    background:transparent;
    border-left:none;
  }
  nav.main-nav a {
    width:100%;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:20px;
    transform:scale(1.08) translateY(-16px);
    opacity:0;
    transition:transform .5s var(--mnav-ease), opacity .6s var(--mnav-ease);
  }
  nav.main-nav a::after {
    display:none;
  }
  nav.main-nav a:nth-child(1) { transition-delay:.49s; }
  nav.main-nav a:nth-child(2) { transition-delay:.42s; }
  nav.main-nav a:nth-child(3) { transition-delay:.35s; }
  nav.main-nav a:nth-child(4) { transition-delay:.28s; }
  nav.main-nav a:nth-child(5) { transition-delay:.21s; }
  nav.main-nav a:nth-child(6) { transition-delay:.14s; }
  nav.main-nav a:nth-child(7) { transition-delay:.07s; }
  nav.main-nav a:nth-child(8) { transition-delay:0s; }

  header.menu-opened nav.main-nav a {
    transform:scale(1) translateY(0);
    opacity:1;
  }
  header.menu-opened nav.main-nav a:nth-child(1) { transition-delay:.27s; }
  header.menu-opened nav.main-nav a:nth-child(2) { transition-delay:.34s; }
  header.menu-opened nav.main-nav a:nth-child(3) { transition-delay:.41s; }
  header.menu-opened nav.main-nav a:nth-child(4) { transition-delay:.48s; }
  header.menu-opened nav.main-nav a:nth-child(5) { transition-delay:.55s; }
  header.menu-opened nav.main-nav a:nth-child(6) { transition-delay:.62s; }
  header.menu-opened nav.main-nav a:nth-child(7) { transition-delay:.69s; }
  header.menu-opened nav.main-nav a:nth-child(8) { transition-delay:.76s; }
  .phc-wrap {
    margin-top:90px;
  }
  .hero .wrap {
    grid-template-columns:1fr;
  }
  .hero-visual {
    height:380px;
    margin-top:20px;
  }
  .team .wrap {
    padding-left:20px;
    padding-right:20px;
  }

  /* Contenido centrado en mobile: títulos, textos y botones */
  .hero .wrap > div:first-child {
    text-align:center;
  }
  .hero-actions {
    justify-content:center;
  }
  .team-copy {
    flex-direction:column;
    text-align:center;
    align-items:center;
  }
  .team-copy .section-head {
    margin-left:auto;
    margin-right:auto;
  }
  .updates-col-left {
    text-align:center;
    align-items:center;
  }
  .faq-left .section-head {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
}
@media (max-width:520px) {
  .cta-banner {
    padding:56px 24px;
  }
  .awards-track {
    gap:22px;
  }
  .awards-track img {
    height:105px;
    padding:20px 28px;
  }
  .partners-track {
    gap:20px;
  }
  .partners-track img {
    height:70px;
    padding:14px 20px;
  }
  .team-track {
    gap:14px;
  }
  .team-photo {
    width:240px;
  }
  .footer-top {
    grid-template-columns:1fr;
  }
  .hero {
    padding:0px;
  }
  .hero .wrap {
    padding:0;
    gap:0px!important;
  }
  .hero-marquee-track {
    gap:44px;
  }
  .hero-marquee-track img {
    height:44px;
  }
  .hero-stats {
    gap:8px;
    margin-top:20px;
  }
  .hero-stat {
    padding:16px 6px;
    gap:6px;
  }
  .hero-stat-icon {
    width:26px;
    height:26px;
  }
  .all-games {
    padding-top:0;
  }
  .latest-updates {
    padding:0px;
  }
  .updates-layout {
    gap:16px;
  }
  .updates-col-right {
    margin-top:-10px;
  }
  .our-games {
    padding-top:10px;
  }
}

@media (prefers-reduced-motion:reduce) {
  header,
  nav.main-nav a,
  .nav-toggle,
  .nav-toggle-bar {
    transition:none !important;
  }
}