/* Estilo compartido por index.html y las paginas "ver todos" de cada
   plataforma (ps5.html, ps4.html, switch2.html, switch.html): cabecera,
   barra flotante, botones, tarjetas de juego, panel que sigue al cursor
   y el pie de pagina. Cada pagina anade encima sus propios estilos. */

:root{
  --fondo: #0b0b12;
  --fondo-panel: #14141f;
  --fondo-card: #1a1a28;
  --borde: #28283a;
  --texto: #e8e8f0;
  --texto-tenue: #9494a8;
  --verde: #39ff8c;
  --morado: #a855f7;
  --radius: 10px;
  --cabecera-bg: rgba(11,11,18,0.92);
  --flotante-bg: rgba(20,20,31,0.92);
  --letterbox: #0a0a10;
  color-scheme: dark;
}
:root[data-theme="light"]{
  --fondo: #f4f4f8;
  --fondo-panel: #ffffff;
  --fondo-card: #ffffff;
  --borde: #e0e0ea;
  --texto: #15151f;
  --texto-tenue: #5c5c6e;
  --verde: #0ea85e;
  --morado: #7c3aed;
  --cabecera-bg: rgba(255,255,255,0.88);
  --flotante-bg: rgba(255,255,255,0.92);
  --letterbox: #ececf2;
  color-scheme: light;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  line-height:1.5;
  transition: background .2s, color .2s;
}
a{color:inherit; text-decoration:none;}
img{
  display:block; width:100%; height:100%; object-fit:cover;
  -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none;
  pointer-events:none;
}

/* ---------- cabecera ---------- */
header{
  position: sticky; top:0; z-index:50;
  background: var(--cabecera-bg);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--borde);
}
.cabecera-interior{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; gap:16px;
}
.logo{
  font-weight:800; font-size:1.2rem; letter-spacing:0.5px;
  display:flex; align-items:center; gap:8px;
}
.logo span{color:var(--verde);}
.cabecera-derecha{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
nav{display:flex; gap:22px; flex-wrap:wrap;}
nav a{
  font-size:0.92rem; font-weight:600; color:var(--texto-tenue);
  transition:color .15s;
  display:inline-flex; align-items:center; gap:7px;
}
nav a:hover{color:var(--verde);}
.icono-plataforma{flex:0 0 auto; display:block; color:var(--texto);}
.cabecera-contacto{display:flex; align-items:center; gap:8px;}
.icono-cabecera-contacto{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--fondo-panel); border:1px solid var(--borde);
  color:var(--texto); transition:border-color .15s, color .15s;
}
.icono-cabecera-contacto:hover{border-color:var(--verde); color:var(--verde);}
.icono-cabecera-contacto .icono-mascara-wallapop{width:26px; height:26px;}
.pildora-mini{
  padding:7px 14px; border-radius:999px; font-size:0.8rem; font-weight:700;
  border:1px solid transparent; white-space:nowrap;
}
.pildora-tema{
  background:transparent; color:var(--texto); border-color:var(--borde);
  cursor:pointer; font-family:inherit; font-size:0.95rem; line-height:1;
  padding:7px 11px;
}
.boton-menu-movil{
  display:none; background:transparent; color:var(--texto); border-color:var(--borde);
  cursor:pointer; font-family:inherit; font-size:1rem; line-height:1;
  padding:7px 12px; align-items:center; justify-content:center;
}

/* ---------- barra flotante de contacto, centrada (estilo delefant.com) ---------- */
.flotantes{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:200;
  display:flex; flex-direction:row; gap:10px; flex-wrap:wrap; justify-content:center;
  background:var(--flotante-bg); backdrop-filter:blur(8px);
  border:1px solid var(--borde); border-radius:999px;
  padding:8px; box-shadow:0 10px 30px rgba(0,0,0,0.6);
  max-width:94vw;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) translateY(14px);
  transition:opacity .4s ease, transform .4s ease, visibility .4s;
}
.flotantes.visible{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.flotante{
  display:flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:999px; font-weight:700; font-size:0.86rem;
  transition:transform .15s;
  white-space:nowrap;
}
.flotante:hover{transform:translateY(-1px);}
.flotante-verde{background:var(--verde); color:#06130b;}
.flotante-morada{background:var(--morado); color:#fff;}
@media (max-width:480px){
  .flotante{padding:10px 14px; font-size:0.76rem;}
}

/* ---------- botones generales ---------- */
.boton{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-weight:700; font-size:0.95rem;
  transition:transform .15s;
  border:1px solid transparent;
}
.boton:hover{transform:translateY(-1px);}
.boton-verde{background:var(--verde); color:#06130b;}
.boton-morado{background:transparent; color:var(--morado); border-color:var(--morado);}

/* ---------- tarjeta de juego ---------- */
.tarjeta{
  background:var(--fondo-card); border:1px solid var(--borde); border-radius:0;
  overflow:hidden; cursor:pointer;
}
.tarjeta .marco{
  aspect-ratio: 4/5; background:var(--letterbox); overflow:hidden;
}
.tarjeta .marco.nin{aspect-ratio: 5/8;}
.tarjeta .marco img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.tarjeta .nombre{
  padding:10px 12px 14px; font-size:0.85rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--fondo-card);
}

/* ---------- panel que sigue al cursor, con la caratula completa ---------- */
.panel-completa{
  position:fixed; z-index:500; width:420px; max-width:46vw;
  background:var(--fondo-card); border:1px solid var(--borde); border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(0,0,0,0.6);
  padding:10px; display:none;
  pointer-events:none;
}
.panel-completa.visible{display:block;}
.panel-completa img{width:100%; height:auto; border-radius:6px; display:block;}
@media (max-width:700px){ .panel-completa{width:260px; max-width:60vw;} }

/* ---------- faldon (pie de pagina) ---------- */
footer{
  margin-top:90px; border-top:1px solid var(--borde);
  background:var(--fondo-panel);
}
.faldon{
  max-width:1200px; margin:0 auto; padding:46px 20px 30px;
  display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:36px;
}
.faldon h4{font-size:0.95rem; margin-bottom:14px; color:var(--texto);}
.faldon p, .faldon a{color:var(--texto-tenue); font-size:0.88rem;}
.faldon-contacto{display:flex; flex-direction:column; gap:14px; align-items:flex-start;}
.faldon-iconos{display:flex; gap:12px;}
.faldon-icono{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--fondo-card); border:1px solid var(--borde);
  color:var(--texto); transition:border-color .15s, color .15s;
}
.faldon-icono:hover{border-color:var(--verde); color:var(--verde);}
.icono-mascara-wallapop{
  display:block; width:26px; height:26px; background-color:currentColor;
  -webkit-mask-image:url(imagenes/wallapop-logo.png); mask-image:url(imagenes/wallapop-logo.png);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.tarjeta-wallapop{
  display:block; background:#13c1ac; border:1px solid #13c1ac;
  border-radius:var(--radius); padding:20px 18px;
  transition:border-color .15s;
}
.tarjeta-wallapop:hover{border-color:#fff;}
.logotipo-wallapop{width:auto; height:26px; margin:0 0 16px; display:block;}
.tarjeta-wallapop-datos{display:flex; flex-wrap:wrap; gap:18px;}
.dato-wallapop{display:flex; align-items:center; gap:8px;}
.dato-wallapop-icono{flex:0 0 auto; display:block;}
.dato-wallapop-texto{font-size:0.88rem; font-weight:700; color:#fff;}
.faldon-legal{
  max-width:1200px; margin:0 auto; padding:18px 20px 34px;
  border-top:1px solid var(--borde);
  font-size:0.76rem; color:#5c5c70; line-height:1.6;
}

@media (max-width:760px){
  nav{display:none;}
  .boton-menu-movil{display:inline-flex;}
  body.menu-movil-abierto header nav{
    display:flex; flex-direction:column; align-items:flex-start;
    position:fixed; top:var(--altura-cabecera, 64px); left:0; right:0;
    background:var(--cabecera-bg); backdrop-filter:blur(6px);
    border-bottom:1px solid var(--borde);
    padding:10px 20px 16px; gap:2px; z-index:60;
  }
  body.menu-movil-abierto header nav a{padding:10px 0; width:100%;}
  .faldon{grid-template-columns:1fr; gap:28px;}
}