/* Estilos g enerales y estructura */
:root{
  --azul:#007bff;
  --gris:#6c757d;
  --amarillo:#ffc107;
  --rojo:#dc3545;
  --cian:#17a2b8;
  --fondo:#f4f4f4;
}

*{box-sizing:border-box;}
body{
  font-family: Arial, Helvetica, sans-serif;
  margin:0;
  background-color: var(--fondo);
  color:#222;
  line-height:1.5;
  padding-bottom:70px; /* espacio para footer fijo */
}

/* Header */
header{
  background-color: var(--azul);
  color:#fff;
  text-align:center;
  padding:1rem 0.5rem;
}
header h1{margin:0 0 0.5rem 0; font-size:1.5rem;}

/* Navegación */
nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}
nav a{
  color:#fff;
  text-decoration:none;
  padding:0.25rem 0.5rem;
  transition:background-color 0.2s, color 0.2s;
}
nav a:hover{
  background-color:rgba(255,255,255,0.12);
  border-radius:4px;
}

/* Main */
main{
  max-width:900px;
  margin:2rem auto;
  background:#fff;
  padding:1.25rem;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

/* Artículos y secciones base */
article, section{
  margin:1rem 0;
  padding:1rem;
  border-radius:8px;
  background:transparent;
}

/* Aside y blockquote */
aside{
  background:#f9f9f9;
  padding:0.75rem 1rem;
  border-right:4px solid #ddd;
  margin-top:1rem;
  border-radius:6px;
}
blockquote{
  margin:0;
  font-style:italic;
  color:#666;
}

/* Footer fijo */
footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:#222;
  color:#fff;
  text-align:center;
  padding:0.75rem 0;
  font-size:0.95rem;
}

/* Clases por tipo de contenido */
/* article general */
.seccion-general, article{
  background:#e9f5ff;
  border-left:5px solid var(--azul);
}

/* Funciion */
.seccion-funcion{
  background:#f0e4ff;
  border-left:5px solid var(--gris);
}

/* Tipo */
.seccion-Tipo{
  background:#f7f7e9;
  border-left:5px solid var(--amarillo);
}

/* Ataque */
.seccion-Ataque{
  background:#f6e6e8;
  border-left:5px solid var(--rojo);
}

/* tecnologia */
.seccion-tecnologia{
  background:#e6f6e8;
  border-left:5px solid var(--cian);
}

/* Imagenes */
.imagen-contenedor{
  text-align:center;
  margin:2rem 0;
}
.imagen-contenedor img{
  max-width:100%;
  height:auto;
  border:3px solid #ccc;
  border-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease-in-out;
}
.imagen-contenedor img:hover{
  transform: scale(1.02);
}
.pie-imagen{
  font-size:0.9em;
  color:#666;
  margin-top:0.5rem;
}

/* Listas dentro de secciones */
section ul{
  margin:0.5rem 0 0 1.1rem;
}

/* Responsive */
@media (max-width:600px){
  main{margin:1rem;}
  nav ul{gap:0.5rem;}
  header h1{font-size:1.25rem;}
}