*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

:root {
  --bg-dark:  #0a0a1a;
  --bg-mid:   #0d1b2e;
  --bg-light: #102040;
  --sea:      #0e3a5c;
  --sea2:     #1a5276;
  --gold:     #f5c518;
  --gold2:    #c89e00;
  --cyan:     #00e5ff;
  --cyan2:    #009db8;
  --green:    #39ff14;
  --green2:   #00aa00;
  --red:      #ff3c5a;
  --purple:   #9b59b6;
  --text:     #e8e0c8;
  --dim:      #8fa3b5;
  --fp: 'Press Start 2P', monospace;
  --fv: 'VT323', monospace;
  --fs: 'Silkscreen', monospace;
}

body {
  background: var(--bg-dark);
  color: var(--text);
  font-family: var(--fv);
  font-size: 26px;
  line-height: 1.6;
  overflow-x: hidden;
}

body::before {
  content:'';
  position:fixed; inset:0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.07) 2px, rgba(0,0,0,.07) 4px);
  pointer-events:none;
  z-index:9999;
}

a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

@keyframes blink     { 50%{opacity:0} }
@keyframes pulse     { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes glow-c    { 0%,100%{box-shadow:0 0 4px var(--cyan)} 50%{box-shadow:0 0 14px var(--cyan)} }
@keyframes twinkle   { 0%,100%{opacity:1} 50%{opacity:.15} }
@keyframes floatAnim { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes fill-bar  { from{width:0!important} }
@keyframes wave-anim { 0%,100%{background:var(--sea2)} 50%{background:var(--cyan2);opacity:.35} }
@keyframes fadeUp    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

.blink { animation:blink .9s step-end infinite; }

.px-divider {
  height:8px;
  background: repeating-linear-gradient(90deg,
    var(--gold) 0,var(--gold) 8px,
    var(--gold2) 8px,var(--gold2) 16px,
    var(--sea2) 16px,var(--sea2) 24px,
    var(--cyan2) 24px,var(--cyan2) 32px);
}

nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--bg-dark);
  border-bottom:4px solid var(--gold);
  height:66px;
  display:flex; align-items:center;
  padding:0 40px;
  gap:20px;
}

.nav-logo {
  font-family:var(--fp);
  font-size: 17px;
  color:var(--gold);
  text-shadow:2px 2px 0 var(--gold2), 0 0 16px var(--gold);
  white-space:nowrap;
  flex-shrink:0;
}
.nav-logo span { color:var(--cyan); text-shadow:2px 2px 0 var(--cyan2), 0 0 16px var(--cyan); }

.nav-links {
  display:flex;
  gap:28px;
  list-style:none;
  margin-left:auto;
}
.nav-links a {
  font-family:var(--fs);
  font-size: 17px;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:1px;
  transition:color .1s;
}
.nav-links a:hover { color:var(--cyan); text-shadow:0 0 8px var(--cyan); }
.nav-links a:hover::before { content:'▶ '; color:var(--gold); }

.nav-lives {
  display:flex; align-items:center; gap:6px;
  font-family:var(--fp); font-size: 13px;
  color:var(--red); white-space:nowrap;
  flex-shrink:0;
}
.nav-lives .heart { animation:pulse 1.2s infinite; font-size: 19px; }

/* Selector d'idioma ES · CA · EN */
.lang-switch {
  display:inline-flex; align-items:center;
  border:2px solid var(--gold); margin-right:8px;
  flex-shrink:0;
}
.lang-opt {
  background:transparent; border:none; cursor:pointer;
  font-family:var(--fp); font-size: 11px; letter-spacing:1px;
  color:var(--dim); padding:4px 7px; line-height:1;
  transition:color .15s, background .15s;
}
.lang-opt:hover { color:var(--gold); }
.lang-opt.is-active { background:var(--gold); color:var(--bg-dark); }
.lang-sep { color:var(--gold); opacity:.4; font-family:var(--fp); font-size: 9px; }

.nav-toggle {
  display:none;
  flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none; padding:4px;
  margin-left:auto;
}
.nav-toggle span { display:block; width:22px; height:3px; background:var(--gold); transition:all .2s; }
.nav-toggle.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

.nav-drawer {
  display:none;
  flex-direction:column;
  position:fixed; top:56px; left:0; right:0;
  background:var(--bg-dark);
  border-bottom:4px solid var(--gold);
  z-index:999;
  padding:8px 24px 16px;
}
.nav-drawer.open { display:flex; }
.nav-drawer a {
  font-family:var(--fs); font-size: 19px;
  color:var(--dim); padding:12px 0;
  border-bottom:1px solid #1a2a3a;
  display:block; text-transform:uppercase;
}
.nav-drawer a:last-child { border-bottom:none; }
.nav-drawer a:hover { color:var(--cyan); }

.score-display {
  position:fixed; top:64px; right:16px; z-index:990;
  display:block;
  background:var(--bg-dark); border:2px solid var(--gold);
  padding:6px 10px; font-family:var(--fp); font-size: 12px;
  color:var(--gold); text-align:right;
}
.score-value { font-size: 20px; display:block; text-shadow:0 0 8px var(--gold); }

#hero {
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:56px;
  position:relative; overflow:hidden;
}

.sky {
  position:absolute; inset:0;
  background:linear-gradient(180deg, #050510 0%, #0a1530 40%, #0d2045 65%, #1a4060 82%, #0e3a5c 100%);
}

.stars { position:absolute; inset:0; pointer-events:none; }
.star  { position:absolute; background:#fff; animation:twinkle var(--d,2s) var(--delay,0s) infinite; }

.moon {
  position:absolute;
  top:80px; right:120px;
  width:72px; height:72px;
  background:#f5e6c8;
  box-shadow:0 0 0 3px #f5e6c8, 0 0 40px 16px rgba(245,230,200,.22);
}

.palms { position:absolute; bottom:196px; left:0; right:0; pointer-events:none; }

.sea-1 { position:absolute; left:0; right:0; bottom:0; height:200px; background:var(--sea); }
.sea-2 { position:absolute; left:0; right:0; bottom:40px; height:66px; background:var(--sea2); opacity:.7; }
.waves { position:absolute; left:0; right:0; bottom:196px; height:8px; display:flex; }
.wave-block { flex:1; height:8px; animation:wave-anim 2s infinite; }

.hero-content {
  position:relative; z-index:10;
  padding:56px 72px 48px;
  max-width:1080px;
}

.hero-tag {
  font-family:var(--fp); font-size: 13px;
  color:var(--cyan); text-shadow:0 0 8px var(--cyan);
  margin-bottom:14px; letter-spacing:2px;
}
.hero-name {
  font-family:var(--fp); font-size: 53px;
  color:var(--gold); text-shadow:4px 4px 0 var(--gold2), 0 0 28px var(--gold);
  line-height:1.2; margin-bottom:10px;
}
.hero-title {
  font-family:var(--fv); font-size: 40px;
  color:var(--cyan); text-shadow:0 0 12px var(--cyan);
  margin-bottom:18px; letter-spacing:2px; line-height:1.3;
}
.hero-desc {
  font-family:var(--fv); font-size: 31px;
  color:var(--text); max-width:720px;
  margin-bottom:28px; line-height:1.75;
}
.hero-desc em { color:var(--gold); font-style:normal; }

.hero-stats {
  display:flex; gap:12px; margin-bottom:28px; flex-wrap:wrap;
}
.stat-box {
  background:rgba(0,0,0,.55); border:3px solid var(--gold);
  padding:14px 22px; font-family:var(--fp); font-size: 13px;
  text-align:center; min-width:110px;
}
.stat-number {
  font-size: 29px; color:var(--gold); text-shadow:0 0 8px var(--gold);
  display:block; margin-bottom:4px;
}
.stat-label { color:var(--dim); font-size: 12px; }

.hero-cta {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold); color:var(--bg-dark);
  font-family:var(--fp); font-size: 16px;
  padding:14px 26px;
  box-shadow:4px 4px 0 var(--gold2);
  transition:all .1s; border:none; cursor:pointer;
}
.hero-cta:hover { background:var(--cyan); box-shadow:4px 4px 0 var(--cyan2); transform:translate(-2px,-2px); }
.hero-cta:active { transform:translate(2px,2px); box-shadow:none; }

.sec {
  padding:80px 72px;
  max-width:1400px;
  margin:0 auto;
}
.sec-full { padding:80px 72px; } 
.sec-full.mid  { background:var(--bg-mid); }
.sec-full.dark { background:var(--bg-dark); }

.sec-h {
  font-family:var(--fp); font-size: 22px;
  color:var(--gold); text-shadow:2px 2px 0 var(--gold2);
  margin-bottom:8px;
  display:flex; align-items:center; gap:16px;
}
.sec-h::after {
  content:''; flex:1; height:4px;
  background:repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 8px, transparent 8px, transparent 16px);
}
.sec-sub {
  font-family:var(--fv); font-size: 29px;
  color:var(--dim); margin-bottom:48px;
}

.fade-in { opacity:0; transform:translateY(20px); transition:opacity .6s, transform .6s; }
.fade-in.visible { opacity:1; transform:none; }

.about-grid {
  display:grid;
  grid-template-columns:300px 1fr;
  gap:64px;
  align-items:start;
}

.char-card {
  background:var(--bg-dark); border:4px solid var(--gold);
  padding:24px; text-align:center; position:relative;
  animation:floatAnim 4s ease-in-out infinite;
}
.char-card::before {
  content:'PLAYER ONE'; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--bg-mid); padding:0 8px;
  font-family:var(--fp); font-size: 12px; color:var(--cyan); white-space:nowrap;
}

.char-photo {
  width:200px; height:200px;
  margin:0 auto 18px;
  border:4px solid var(--cyan);
  box-shadow: 0 0 0 2px var(--bg-dark), 0 0 0 6px var(--gold), 0 0 20px rgba(0,229,255,.3);
  position:relative; overflow:hidden;
  background:var(--sea);
  image-rendering:pixelated;
}
.char-photo img {
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  image-rendering:pixelated;
}
.char-photo-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size: 82px;
}

.char-name  { font-family:var(--fp); font-size: 17px; color:var(--gold); margin-bottom:6px; }
.char-class { font-family:var(--fv); font-size: 28px; color:var(--cyan); margin-bottom:14px; }
.char-badges { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-bottom:18px; }
.char-badge  { display:inline-block; background:var(--purple); color:#fff; font-family:var(--fp); font-size: 11px; padding:3px 7px; }

.stat-bar { display:flex; align-items:center; gap:6px; margin:6px 0; }
.sbl { font-family:var(--fp); font-size: 10px; color:var(--dim); width:110px; text-align:right; flex-shrink:0; white-space:nowrap; }
.sbt { flex:1; height:9px; background:var(--bg-dark); border:2px solid var(--dim); overflow:hidden; }
.sbf { height:100%; animation:fill-bar 1.6s ease-out both; }
.g{background:var(--gold);} .c{background:var(--cyan);} .v{background:var(--green);} .r{background:var(--red);}

.about-text { font-family:var(--fv); font-size: 30px; line-height:1.8; }
.dialog-box {
  background:var(--bg-dark); border:4px solid var(--cyan);
  padding:18px 22px; margin-bottom:18px; position:relative;
}
.dialog-box::before {
  content:attr(data-label); font-family:var(--fp); font-size: 12px;
  color:var(--cyan); display:block; margin-bottom:8px;
}
.ach {
  display:flex; align-items:flex-start; gap:12px;
  background:rgba(245,197,24,.08); border-left:4px solid var(--gold);
  padding:10px 14px; margin:8px 0;
}
.ach-i { font-size: 31px; flex-shrink:0; margin-top:2px; }
.ach-t { font-family:var(--fv); font-size: 26px; color:var(--text); }
.ach-t strong {
  color:var(--gold); font-family:var(--fp); font-size: 13px;
  display:block; margin-bottom:3px; line-height:1.5;
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.service-card {
  background:var(--bg-mid); border:3px solid var(--dim);
  padding:26px; transition:all .15s; position:relative;
}
.service-card:hover {
  border-color:var(--gold);
  box-shadow:5px 5px 0 var(--gold2);
  transform:translate(-2px,-2px);
}
.s-icon { font-size: 50px; display:block; margin-bottom:10px; }
.s-lvl  { font-family:var(--fp); font-size: 11px; color:var(--green); letter-spacing:1px; margin-bottom:8px; }
.s-name { font-family:var(--fp); font-size: 16px; color:var(--gold); margin-bottom:12px; line-height:1.5; }
.s-desc { font-family:var(--fv); font-size: 28px; color:var(--text); line-height:1.6; margin-bottom:14px; }
.s-tags { display:flex; flex-wrap:wrap; gap:5px; }
.tag    { font-family:var(--fp); font-size: 11px; padding:3px 6px; border:1px solid var(--cyan); color:var(--cyan); }

.quest-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
.q-col-title {
  font-family:var(--fp); font-size: 14px; color:var(--cyan);
  margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid var(--cyan);
}
.quest-item {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px; background:var(--bg-dark); border:2px solid var(--dim);
  margin-bottom:10px; transition:all .1s;
}
.quest-item:hover { border-color:var(--gold); background:var(--bg-light); }
.quest-item.active { border-color:var(--cyan); }
.q-ico { font-size: 42px; flex-shrink:0; filter:drop-shadow(0 0 5px var(--gold)); }
.q-co  { font-family:var(--fp); font-size: 13px; color:var(--gold); margin-bottom:4px; }
.q-ro  { font-family:var(--fv); font-size: 25px; color:var(--text); margin-bottom:6px; line-height:1.4; }
.q-dim { font-size: 22px; color:var(--dim); }
.q-st  { font-family:var(--fp); font-size: 11px; padding:2px 6px; display:inline-block; }
.done  { background:var(--green2); color:var(--bg-dark); }
.actv  { background:var(--cyan2); color:var(--bg-dark); animation:glow-c 2s infinite; }

.testi-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.testi-card {
  background:var(--bg-mid); border:3px solid var(--purple);
  padding:24px; position:relative;
}
.testi-card::before {
  content:'"'; font-family:var(--fp); font-size: 55px; color:var(--purple);
  position:absolute; top:-10px; left:14px; line-height:1; opacity:.4;
}
.t-text { font-family:var(--fv); font-size: 29px; color:var(--text); line-height:1.7; margin-bottom:16px; padding-top:16px; }
.t-auth { font-family:var(--fp); font-size: 13px; color:var(--gold); }
.t-co   { font-family:var(--fv); font-size: 23px; color:var(--dim); margin-top:2px; }

.cert-grid { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.cert-card {
  background:var(--bg-dark); border:3px solid var(--gold);
  padding:20px; text-align:center; width:200px; transition:all .15s;
}
.cert-card:hover { border-color:var(--cyan); box-shadow:0 0 20px var(--cyan2); transform:translateY(-4px); }
.cert-ico  { font-size: 44px; display:block; margin-bottom:8px; }
.cert-name { font-family:var(--fp); font-size: 12px; color:var(--cyan); line-height:1.6; }
.cert-year { font-family:var(--fp); font-size: 11px; color:var(--dim); margin-top:5px; }

.contact-box {
  background:var(--bg-mid); border:4px solid var(--gold);
  padding:56px; max-width:860px; width:100%;
  position:relative; text-align:center; margin:0 auto;
}
.contact-box::before {
  content:attr(data-label);
  font-family:var(--fp); font-size: 13px; color:var(--gold);
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--bg-dark); padding:0 12px; white-space:nowrap;
}
.c-head { font-family:var(--fp); font-size: 20px; color:var(--gold); text-shadow:2px 2px 0 var(--gold2); margin-bottom:16px; line-height:1.7; }
.c-sub  { font-family:var(--fv); font-size: 31px; color:var(--text); margin-bottom:32px; line-height:1.65; }
.c-links { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.c-btn {
  display:inline-flex; align-items:center; gap:6px;
  border:3px solid var(--gold); color:var(--gold);
  font-family:var(--fp); font-size: 14px;
  padding:12px 20px;
  box-shadow:3px 3px 0 var(--gold2); transition:all .1s;
  background:transparent;
}
.c-btn:hover { background:var(--gold); color:var(--bg-dark); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--gold2); }
.c-btn.cyan  { border-color:var(--cyan); color:var(--cyan); box-shadow:3px 3px 0 var(--cyan2); }
.c-btn.cyan:hover { background:var(--cyan); color:var(--bg-dark); box-shadow:5px 5px 0 var(--cyan2); }
.c-loc { font-family:var(--fp); font-size: 12px; color:var(--dim); }

footer {
  background:var(--bg-dark); border-top:2px solid #1a2a3a;
  padding:20px 72px 16px;
  display:flex; flex-direction:column; align-items:stretch; gap:0;
}
.footer-row {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:8px; padding:6px 0;
}
.footer-phrase-row {
  display:flex; justify-content:center; align-items:center;
  min-height:1.6em; padding:4px 0;
}
.ft a { color:var(--dim); }
.ft a:hover { color:var(--cyan); }
.ft { font-family:var(--fp); font-size: 12px; color:var(--dim); }
.ft span { color:var(--red); }

@media (max-width:1024px) {

  
  nav { padding:0 24px; }
  .nav-logo { font-size: 14px; }
  .nav-links a { font-size: 14px; }
  .nav-links { gap:16px; }
  .nav-lives { display:none; }
  .score-display { display:none; }

  
  .hero-content { padding:44px 40px 40px; }
  .hero-name  { font-size: 40px; }
  .hero-title { font-size: 31px; }
  .hero-desc  { font-size: 29px; }
  .moon { top:70px; right:40px; width:56px; height:66px; }

  
  .sec      { padding:64px 40px; }
  .sec-full { padding:64px 0; }
  .sec-h    { font-size: 18px; }

  
  .about-grid { grid-template-columns:260px 1fr; gap:44px; }

  
  .services-grid { grid-template-columns:repeat(2, 1fr); }

  
  
  .testi-grid { grid-template-columns:repeat(2, 1fr); }

  
  .contact-box { padding:44px 36px; }
  .c-head { font-size: 17px; }
  footer  { padding:20px 40px; }
}

@media (max-width:640px) {

  
  .nav-links  { display:none; }
  .nav-toggle { display:flex; }
  .nav-logo   { font-size: 13px; }

  
  .hero-content { padding:32px 24px 28px; }
  .hero-name    { font-size: 29px; }
  .hero-title   { font-size: 25px; }
  .hero-desc    { font-size: 25px; }
  .hero-tag     { font-size: 11px; }
  .stat-box     { min-width:64px; padding:10px 12px; }
  .stat-number  { font-size: 22px; }
  .stat-label   { font-size: 10px; }
  .hero-cta     { font-size: 13px; padding:12px 18px; }
  .palms        { display:none; }
  .moon         { width:40px; height:40px; top:64px; right:20px; }
  .sea-1        { height:140px; }
  .sea-2        { height:36px; bottom:28px; }
  .waves        { bottom:136px; }
  .palms        { bottom:136px; }

  
  .sec      { padding:48px 24px; }
  .sec-full { padding:48px 0; }
  .sec-h    { font-size: 16px; }
  .sec-sub  { font-size: 25px; margin-bottom:28px; }

  
  .about-grid { grid-template-columns:1fr; gap:28px; }
  .char-card  { max-width:380px; margin:0 auto; }
  .char-photo { width:170px; height:170px; }
  .about-text { font-size: 26px; }

  
  .services-grid { grid-template-columns:1fr; }

  
  .quest-grid { grid-template-columns:1fr; gap:28px; }

  
  .testi-grid { grid-template-columns:1fr; }

  
  .cert-card { width:160px; padding:16px; }
  .cert-ico  { font-size: 36px; }
  .cert-name { font-size: 11px; }

  
  .contact-box { padding:32px 22px; }
  .c-head  { font-size: 14px; }
  .c-sub   { font-size: 26px; }
  .c-btn   { font-size: 12px; padding:10px 14px; }
  .c-links { gap:10px; }
  .c-loc   { font-size: 11px; }

  footer { padding:14px 20px; flex-direction:column; text-align:center; }
  .ft    { font-size: 11px; }
}