/* ================================
Estilos principales - Estudio Zona Gamer
================================ */
/* Fuente y colores base */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&display=swap');
:root {
  --color-fondo: #0a0a0a;
  --color-principal: #00ff88; /* Verde neón */
  --color-secundario: #1f1f1f;
  --color-texto: #ffffff;
}
/* Reset general */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: 'Orbitron', sans-serif;
  text-align: center;
}

/* ================================
Encabezado y navegación
================================ */
header {
  background: rgba(0, 0, 0, 0.85);
  border-bottom: 2px solid var(--color-principal);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}
nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
nav a {
  color: var(--color-principal);
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}
nav a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px var(--color-principal);
}
/* ================================
Secciones generales
================================ */
.contenedor {
  padding: 4rem 2rem;
  max-width: 900px;
  margin: 0 auto;
  border-bottom: 1px solid #222;
}
.contenedor h2 {
  color: var(--color-principal);
  margin-bottom: 1rem;
  text-transform: uppercase;
  font-size: 2rem;
}
/* ================================
Inicio
================================ */
.logo {
  width: 180px;
  margin-bottom: 1rem;
  animation: glow 2s infinite alternate;
}
@keyframes glow {
  from { 
    filter: drop-shadow(0 0 5px var(--color-principal)); 
  }
  to { 
    filter: drop-shadow(0 0 20px var(--color-principal)); 
  }
}
  #inicio h1 {
    color: var(--color-principal);
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  #inicio p {
    font-size: 1.2rem;
    color: #ccc;
  }
/* ================================
Enlaces y botones
================================ */
a {
  color: var(--color-principal);
}
a:hover {
  text-shadow: 0 0 6px var(--color-principal);
}
/* ================================
Pie / Contacto
================================ */
#contacto {
  background: var(--color-secundario);
  border-top: 2px solid var(--color-principal);
  padding-bottom: 3rem;
}
#contacto a {
  color: var(--color-principal);
  text-decoration: none;
  font-weight: bold;
}
#contacto a:hover {
  text-shadow: 0 0 10px var(--color-principal);
}
.link-wp{
  position: relative; /*referencia*/
}
.icono-wp {
  position:absolute;
  top: 20px;/*sube / baja */
  left: 20px; /* mueve a la derecha*/
  /*tamaño*/
  width: 15vw;
  max-width: 140px;
  min-width: 80px;
  height: auto;
  border: none;
  cursor: pointer;
}
.link-f{
    position: relative; /*referencia*/
}
.icono-f {
  position:absolute;
  top: 20px;/*sube / baja */
  right: 100px; /* mueve a la izquierda*/
/*tamaño*/
  width: 15vw;
  max-width: 140px;
  min-width: 80px;
  height: auto;
  border: none;
  cursor: pointer;
}
/* ================================
Responsive
================================ */
@media (max-width: 768px) {
 nav {
  flex-direction: column;
  gap: 1rem;
 }

 #inicio h1 {
  font-size: 2rem;
 }

 .logo {
  width: 140px;
 }
}