/* =========================================================
   GAMESALONE18 UNIVERSE
   PREGUNTAS FRECUENTES
========================================================= */

*,
*::before,
*::after {

margin:0;
padding:0;
box-sizing:border-box;

}


:root {

--green:#00ff88;
--green-dark:#00cc6a;

--bg:#050507;
--white:#ffffff;

--text:#d2d2d8;
--muted:#8e8e98;

--border:
rgba(255,255,255,.085);

--green-border:
rgba(0,255,136,.22);

}


html {

scroll-behavior:smooth;
scroll-padding-top:100px;

-webkit-text-size-adjust:100%;

}


body {

min-height:100vh;

font-family:
'Inter',
Arial,
sans-serif;

background:
var(--bg);

color:
var(--white);

overflow-x:hidden;

-webkit-font-smoothing:
antialiased;

}


a {

color:inherit;

}


.container {

width:
min(
  calc(100% - 40px),
  1180px
);

margin:auto;

}



/* =========================================================
   BACKGROUND
========================================================= */

.page-background {

position:fixed;

inset:0;

z-index:-3;

background:

radial-gradient(
  circle at 50% -10%,
  rgba(0,255,136,.09),
  transparent 38%
),

linear-gradient(
  180deg,
  #09090c,
  #050507 45%,
  #020203
);

}


.page-grid {

position:fixed;

inset:0;

z-index:-2;

opacity:.15;

background-image:

linear-gradient(
  rgba(255,255,255,.035) 1px,
  transparent 1px
),

linear-gradient(
  90deg,
  rgba(255,255,255,.035) 1px,
  transparent 1px
);

background-size:
42px 42px;

mask-image:
linear-gradient(
  to bottom,
  #000,
  transparent 75%
);

}



/* =========================================================
   HEADER
========================================================= */

.site-header {

position:fixed;

top:0;
left:0;
right:0;

z-index:1000;

background:
rgba(5,5,7,.93);

border-bottom:
1px solid
var(--border);

backdrop-filter:
blur(16px);

-webkit-backdrop-filter:
blur(16px);

}


.header-inner {

width:
min(
  calc(100% - 40px),
  1180px
);

min-height:72px;

margin:auto;

display:flex;

align-items:center;

justify-content:
space-between;

gap:30px;

}


.brand {

display:flex;

flex-direction:column;

text-decoration:none;

line-height:.9;

}


.brand-main {

font-size:1rem;

font-weight:900;

letter-spacing:-1px;

color:#fff;

}


.brand-universe {

margin-top:5px;

font-size:.5rem;

font-weight:900;

letter-spacing:4px;

color:var(--green);

}


.header-nav {

display:flex;

align-items:center;

gap:28px;

}


.header-nav a {

padding:
27px 0 24px;

color:#85858d;

font-size:.68rem;

font-weight:800;

text-decoration:none;

transition:
color .2s ease;

}


.header-nav a:hover {

color:#fff;

}



/* =========================================================
   HERO
========================================================= */

.faq-hero {

padding:
175px 20px 90px;

text-align:center;

}


.hero-tag {

display:inline-flex;

align-items:center;

justify-content:center;

padding:
10px 18px;

margin-bottom:30px;

border:
1px solid
var(--border);

border-radius:999px;

background:
rgba(255,255,255,.035);

color:#bdbdc4;

font-size:.7rem;

font-weight:800;

letter-spacing:2px;

}


.faq-hero h1 {

max-width:900px;

margin:auto;

font-family:
'Orbitron',
sans-serif;

font-size:
clamp(
  2.8rem,
  7vw,
  5.3rem
);

font-weight:700;

line-height:1.03;

letter-spacing:-.04em;

}


.faq-hero h1 span {

display:block;

color:var(--green);

}


.hero-description {

max-width:720px;

margin:
28px auto 0;

color:var(--muted);

font-size:1rem;

line-height:1.85;

}


.hero-actions {

margin-top:35px;

display:flex;

justify-content:center;

gap:10px;

flex-wrap:wrap;

}



/* =========================================================
   BUTTONS
========================================================= */

.primary-button,
.secondary-button,
.whatsapp-button {

min-height:48px;

display:inline-flex;

align-items:center;

justify-content:center;

padding:
0 22px;

border-radius:10px;

font-size:.73rem;

font-weight:800;

text-decoration:none;

transition:
transform .2s ease,
border-color .2s ease,
background .2s ease;

}


.primary-button {

background:
var(--green);

color:#001c0e;

border:
1px solid
var(--green);

}


.secondary-button {

border:
1px solid
var(--border);

background:
rgba(255,255,255,.03);

color:#ddd;

}


.whatsapp-button {

background:
#25D366;

border:
1px solid
#25D366;

color:#fff;

}


.primary-button:hover,
.secondary-button:hover,
.whatsapp-button:hover {

transform:
translateY(-2px);

}



/* =========================================================
   QUICK LINKS
========================================================= */

.quick-section {

padding:
0 20px 70px;

}


.quick-grid {

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:10px;

}


.quick-grid a {

min-height:90px;

display:flex;

align-items:center;

gap:15px;

padding:20px;

border:
1px solid
var(--border);

border-radius:16px;

background:
rgba(255,255,255,.025);

color:#fff;

text-decoration:none;

transition:
transform .2s ease,
border-color .2s ease,
background .2s ease;

}


.quick-grid a:hover {

transform:
translateY(-3px);

border-color:
var(--green-border);

background:
rgba(0,255,136,.025);

}


.quick-grid span {

color:
var(--green);

font-family:
'Orbitron',
sans-serif;

font-size:.6rem;

font-weight:700;

}


.quick-grid strong {

font-size:.75rem;

}



/* =========================================================
   FAQ SECTION
========================================================= */

.faq-section {

padding:
80px 20px 110px;

}


.faq-container {

max-width:1000px;

}


.section-heading {

margin-bottom:65px;

text-align:center;

}


.section-label {

display:inline-block;

margin-bottom:12px;

color:var(--green);

font-size:.65rem;

font-weight:800;

letter-spacing:2px;

}


.section-heading h2 {

font-family:
'Orbitron',
sans-serif;

font-size:
clamp(
  1.8rem,
  4vw,
  2.6rem
);

}


.section-heading p {

margin-top:13px;

color:var(--muted);

font-size:.85rem;

}



/* =========================================================
   CATEGORY
========================================================= */

.faq-category {

margin-bottom:85px;

scroll-margin-top:100px;

}


.category-heading {

display:flex;

align-items:center;

gap:18px;

margin-bottom:25px;

}


.category-heading > span {

width:48px;
height:48px;

flex-shrink:0;

display:grid;

place-items:center;

border:
1px solid
var(--green-border);

border-radius:50%;

background:
rgba(0,255,136,.05);

color:
var(--green);

font-family:
'Orbitron',
sans-serif;

font-size:.65rem;

font-weight:700;

}


.category-heading small {

display:block;

margin-bottom:4px;

color:var(--green);

font-size:.55rem;

font-weight:800;

letter-spacing:1.5px;

}


.category-heading h3 {

font-family:
'Orbitron',
sans-serif;

font-size:
clamp(
  1.2rem,
  3vw,
  1.55rem
);

}



/* =========================================================
   FAQ DETAILS
========================================================= */

.faq-list {

display:flex;

flex-direction:column;

gap:9px;

}


details {

overflow:hidden;

border:
1px solid
var(--border);

border-radius:14px;

background:
rgba(255,255,255,.025);

transition:
border-color .2s ease,
background .2s ease;

}


details:hover {

border-color:
rgba(255,255,255,.14);

}


details[open] {

border-color:
var(--green-border);

background:
rgba(0,255,136,.018);

}


summary {

position:relative;

min-height:68px;

display:flex;

align-items:center;

padding:
18px 60px 18px 22px;

color:#ededf0;

font-size:.86rem;

font-weight:700;

line-height:1.5;

cursor:pointer;

list-style:none;

user-select:none;

}


summary::-webkit-details-marker {

display:none;

}


summary::after {

content:"+";

position:absolute;

right:22px;

top:50%;

transform:
translateY(-50%);

width:28px;
height:28px;

display:grid;

place-items:center;

border:
1px solid
var(--border);

border-radius:50%;

color:var(--green);

font-size:1rem;

font-weight:400;

transition:
transform .2s ease;

}


details[open] summary::after {

content:"−";

}


.answer {

padding:
0 22px 22px;

border-top:
1px solid
rgba(255,255,255,.05);

}


.answer p {

padding-top:18px;

color:#9d9da6;

font-size:.82rem;

line-height:1.8;

}


.answer strong {

color:#e7e7eb;

}


.answer a {

color:var(--green);

font-weight:700;

text-decoration:none;

}


.answer a:hover {

text-decoration:underline;

}



/* =========================================================
   HELP CARD
========================================================= */

.help-card {

padding:
55px 40px;

border:
1px solid
var(--green-border);

border-radius:24px;

background:

radial-gradient(
  circle at 50% 0%,
  rgba(0,255,136,.08),
  transparent 55%
),

rgba(255,255,255,.025);

text-align:center;

}


.help-card h2 {

font-family:
'Orbitron',
sans-serif;

font-size:
clamp(
  1.6rem,
  4vw,
  2.4rem
);

}


.help-card p {

max-width:550px;

margin:
15px auto 0;

color:var(--muted);

font-size:.85rem;

line-height:1.7;

}


.help-actions {

display:flex;

justify-content:center;

gap:10px;

flex-wrap:wrap;

margin-top:28px;

}



/* =========================================================
   FOOTER
========================================================= */

.site-footer {

border-top:
1px solid
var(--border);

background:
#030304;

}


.footer-inner {

width:
min(
  calc(100% - 40px),
  1100px
);

margin:auto;

padding:
65px 0;

display:grid;

grid-template-columns:
2fr 1fr 1fr;

gap:60px;

}


.footer-brand strong {

font-size:1rem;

}


.footer-brand p {

margin-top:8px;

color:#5d5d65;

font-size:.68rem;

}


.footer-column {

display:flex;

flex-direction:column;

gap:8px;

}


.footer-column > span {

margin-bottom:8px;

color:var(--green);

font-size:.54rem;

font-weight:900;

letter-spacing:2px;

}


.footer-column a {

color:#777780;

font-size:.67rem;

text-decoration:none;

}


.footer-column a:hover {

color:#fff;

}


.footer-bottom {

width:
min(
  calc(100% - 40px),
  1100px
);

margin:auto;

padding:
22px 0;

border-top:
1px solid
var(--border);

display:flex;

justify-content:
space-between;

gap:20px;

color:#4d4d55;

font-size:.58rem;

}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:850px) {

.quick-grid {

grid-template-columns:
1fr 1fr;

}


.footer-inner {

grid-template-columns:
1.5fr 1fr 1fr;

gap:35px;

}

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px) {

.container {

width:
calc(100% - 30px);

}


.header-inner {

width:
calc(100% - 30px);

min-height:65px;

}


.header-nav {

gap:14px;

}


.header-nav a {

padding:
24px 0 21px;

font-size:.58rem;

}


.header-nav a:nth-child(2),
.header-nav a:nth-child(3) {

display:none;

}


.faq-hero {

padding:
135px 0 70px;

}


.hero-tag {

font-size:.58rem;

letter-spacing:1.2px;

}


.faq-hero h1 {

font-size:
clamp(
  2.2rem,
  12vw,
  3.5rem
);

}


.hero-description {

font-size:.9rem;

}


.quick-section {

padding:
0 0 55px;

}


.faq-section {

padding:
65px 0 85px;

}


.section-heading {

margin-bottom:50px;

}


.faq-category {

margin-bottom:65px;

}


summary {

padding:
17px 55px 17px 18px;

font-size:.8rem;

}


summary::after {

right:17px;

}


.answer {

padding:
0 18px 19px;

}


.answer p {

font-size:.78rem;

}


.help-card {

padding:
45px 22px;

}


.footer-inner {

width:
calc(100% - 32px);

grid-template-columns:1fr;

gap:35px;

padding:
50px 0;

}


.footer-bottom {

width:
calc(100% - 32px);

flex-direction:column;

gap:5px;

}

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px) {

.faq-hero {

padding-top:120px;

}


.faq-hero h1 {

font-size:2.15rem;

}


.quick-grid {

grid-template-columns:1fr;

}


.quick-grid a {

min-height:72px;

}


.category-heading {

align-items:flex-start;

}


.category-heading > span {

width:42px;
height:42px;

}


.category-heading h3 {

font-size:1.1rem;

}


summary {

min-height:64px;

}


.help-actions {

flex-direction:column;

}


.help-actions a {

width:100%;

}

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {

html {

scroll-behavior:auto;

}


*,
*::before,
*::after {

transition-duration:.01ms !important;
animation-duration:.01ms !important;

}

}

/* =========================================================
   GA18 SHARED SHELL + FAQ LEGIBILITY
   2026-09-25
========================================================= */
:root{--header:74px;--max:1180px;--green:#00ffae;--green-dark:#00c989;--green-border:rgba(0,255,174,.22)}
body{font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif}
.faq-hero h1,.section-heading h2,.category-heading>span,.category-heading h3,.help-card h2,.quick-grid span{font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif}

/* HEADER */
.site-header{height:var(--header);background:rgba(5,5,7,.82)}
.nav-wrap{width:min(calc(100% - 36px),var(--max));height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-wrap .unified-brand{display:inline-flex;flex-direction:row;align-items:center;gap:10px;color:#fff;line-height:normal;font-size:1.18rem;font-weight:850;letter-spacing:-.03em;white-space:nowrap}
.brand-dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--green);box-shadow:0 0 20px rgba(0,255,174,.8)}
.menu-toggle{display:none;width:44px;height:44px;padding:10px;border:0;border-radius:10px;background:transparent;cursor:pointer}
.menu-toggle span{display:block;width:100%;height:2px;margin:5px 0;border-radius:999px;background:#fff;transition:transform .2s ease,opacity .2s ease}
.nav-wrap .main-nav{display:flex;align-items:center;gap:28px}
.nav-wrap .main-nav>a{padding:0;color:#d2d2d8;font-size:.92rem;font-weight:650;text-decoration:none}
.nav-wrap .main-nav>a:not(.nav-cta):hover{color:#fff}
.nav-wrap .nav-cta{min-height:42px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(0,255,174,.34);border-radius:999px;background:rgba(0,255,174,.11);color:var(--green);font-size:.92rem;font-weight:700}

/* LEGIBILIDAD */
.hero-tag{font-size:.76rem}
.hero-description{font-size:clamp(1rem,1.4vw,1.08rem);line-height:1.8}
.primary-button,.secondary-button,.whatsapp-button{font-size:.9rem}
.quick-grid span{font-size:.72rem}
.quick-grid strong{font-size:.94rem}
.section-label{font-size:.72rem}
.section-heading p{font-size:.96rem;line-height:1.7}
.category-heading>span{font-size:.72rem}
.category-heading small{font-size:.68rem}
summary{font-size:.96rem}
.answer p{color:#aaaab3;font-size:.94rem;line-height:1.8}
.help-card p{font-size:.96rem;line-height:1.75}

/* FOOTER */
.site-footer{padding:0;border-top:1px solid var(--border);background:#030304}
.footer-grid{width:min(calc(100% - 36px),var(--max));margin:auto;padding:48px 0 34px;display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.4fr);align-items:start;gap:50px}
.footer-brand{display:inline-block;color:#fff;font-size:1.08rem;font-weight:850;letter-spacing:-.025em;text-decoration:none}
.footer-grid>div>p{margin:10px 0 0;color:var(--muted);font-size:.88rem;line-height:1.6}
.footer-nav{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:14px 24px}
.footer-nav a{color:#a7a7b0;font-size:.88rem;font-weight:650;text-decoration:none}
.footer-nav a:hover,.footer-nav a[aria-current="page"]{color:#fff}
.footer-bottom{width:min(calc(100% - 36px),var(--max));margin:auto;padding:20px 0 24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:20px;color:#72727b;font-size:.78rem}

/* RESPONSIVE */
@media(max-width:760px){
:root{--header:68px}
.site-header{height:var(--header)}
.nav-wrap{width:min(calc(100% - 28px),var(--max))}
.nav-wrap .unified-brand{font-size:1.05rem}
.menu-toggle{display:block;position:relative;z-index:2}
.nav-wrap .main-nav{position:absolute;left:14px;right:14px;top:calc(100% + 8px);display:none;padding:12px;border:1px solid var(--border);border-radius:18px;background:rgba(10,10,14,.98);box-shadow:0 20px 60px rgba(0,0,0,.45);flex-direction:column;align-items:stretch;gap:4px}
.nav-wrap .main-nav.is-open{display:flex}
.nav-wrap .main-nav>a:not(.nav-cta),.nav-wrap .nav-cta{min-height:46px;padding:0 14px;display:flex;align-items:center;border-radius:12px;font-size:.94rem}
.nav-wrap .main-nav>a:not(.nav-cta):hover{background:rgba(255,255,255,.04)}
.nav-wrap .nav-cta{margin-top:4px;justify-content:center}
.menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.faq-hero{padding-top:135px}
summary{font-size:.92rem}
.answer p{font-size:.9rem}
.footer-grid{grid-template-columns:1fr;gap:28px;padding:40px 0 28px}
.footer-nav{justify-content:flex-start;gap:12px 20px}
.footer-bottom{flex-direction:column;gap:6px;text-align:left}
}
@media(max-width:480px){
.footer-grid,.footer-bottom{width:min(calc(100% - 28px),var(--max))}
.footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.footer-nav a{font-size:.86rem}
.footer-bottom{font-size:.74rem}
}