/* Variables de color */
:root {
    --text-color: #f0e6d2; /* Color de texto principal */
    --accent: #c19a6b; /* Color de acento (bronce) */
  }
  
  /* Reseteo de márgenes y padding global */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Estilos generales para el body y html */
  body, html {
    height: 100%;
    font-family: 'Roboto', sans-serif; /* Fuente principal */
    color: var(--text-color); /* Color de texto por defecto */
    overflow-x: hidden;
  }
  
  body {
    background: url('https://static.planetminecraft.com/files/image/minecraft/project/2022/130/16294735_xl.webp') no-repeat center center fixed;
    background-size: cover; /* Fondo fijo */
  }
  
  /* Estilos de header (barra de navegación) */
  header {
    background: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
    backdrop-filter: blur(8px); /* Efecto de desenfoque */
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--accent);
    animation: slideDown 1s ease-out; /* Animación de entrada */
  }
  
  /* Animación de deslizamiento para el header */
  @keyframes slideDown {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* Estilo de la logo en el header */
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cinzel', serif; /* Fuente para el logo */
  }
  
  .logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    position: relative;
    top: -5px; /* Ajuste para subir la imagen */
  }
  
  /* Estilos de los enlaces del menú de navegación */
  nav a {
    margin-left: 2rem;
    text-decoration: none;
    color: var(--text-color);
    font-weight: bold;
    position: relative;
    transition: color 0.3s ease;
  }
  
  /* Efecto de subrayado en los enlaces */
  nav a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: var(--accent);
    left: 0;
    bottom: -4px;
    transition: width 0.3s ease;
  }
  
  /* Efecto de hover en los enlaces */
  nav a:hover {
    color: var(--accent);
  }
  
  nav a:hover::after {
    width: 100%; /* Subraya el enlace al pasar el cursor */
  }
  
  /* Estilo del enlace activo (Inicio) */
  nav a#here {
    color: var(--accent); 
    border-bottom: 2px solid var(--accent);
    padding-bottom: 2px;
  }
  
  /* Sección principal (Hero) */
  .hero {
    text-align: center;
    padding: 120px 20px;
    background: rgba(0, 0, 0, 0.6);
    margin: 40px;
    border-radius: 15px;
    animation: fadeIn 2s ease; /* Animación de desvanecimiento */
  }
  #mas-informacion {
    text-align: center;
    padding: 120px 20px;
    background: rgba(0, 0, 0, 0.6);
    margin: 40px;
    border-radius: 15px;
    animation: fadeIn 2s ease; /* Animación de desvanecimiento */
  }
  
  /* Título de la sección Hero */
  #mas-informacion h2 {
    font-size: 3rem;
    font-family: 'Cinzel', serif;
    text-shadow: 2px 2px 5px #000;
  }
  .hero h1 {
    font-size: 3rem;
    font-family: 'Cinzel', serif;
    text-shadow: 2px 2px 5px #000;
  }

  
  /* Párrafos de la sección Hero */
  .hero p {
    margin-top: 1rem;
    font-size: 1.2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Animación de desvanecimiento */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* Estilos del footer */
  footer {
    text-align: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.7);
    color: #aaa;
    margin-top: 50px;
  }
  
  /* Botón de llamada a la acción */
  .btn-cta {
    margin-top: 2.5rem;
    background: linear-gradient(135deg, #8b0000, #b22222); /* Fondo degradado */
    color: #f0e6d2;
    padding: 16px 32px;
    border: none;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    animation: pulse 2s infinite; /* Animación de pulso */
    letter-spacing: 1px;
  }
  
  .btn-cta:hover {
    transform: scale(1.05); /* Efecto de aumento al pasar el cursor */
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.6);
  }
  
  /* Pulso animado */
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
  }
  
  /* Estilo de la caja de IP */
  .ip-box {
    margin-top: 2rem;
    font-family: 'Courier New', monospace;
    background-color: rgba(20, 20, 20, 0.7);
    padding: 12px 20px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    display: inline-block;
    font-size: 1.1rem;
    color: #ddd;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  .discord-btn{
    margin-top: 2rem;
    font-family: 'Courier New', monospace;
    background-color: #5865f2b4;
    padding: 12px 12px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    display: inline-block;
    font-size: 1.3rem;
    color: #ddd;
    position: relative;
    cursor: pointer;
    top: -1px;
    transition: background 0.3s ease;
    transition: transform 1s ease;

  }
  .discord-btn:hover {
    background-color: #5865f2;
    transform: rotateY(180deg);
    text-shadow: 0 0 1px #ffffff;
  }
  /* Hover de la caja de IP */
  .ip-box:hover {
    background-color: rgba(40, 40, 40, 0.85);
  }
  
  .ip-box:hover code {
    color: #cd7f32; /* Color bronce al pasar el cursor */
    text-decoration: underline; /* Subrayado al pasar el cursor */
  }
  
  /* Mensaje de "copiado" */
  .copiado-msg {
    position: absolute;
    right: -90px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #c19a6b;
    color: #fff;
    padding: 4px 8px;
    font-size: 0.9rem;
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  /* RESPONSIVE NAVBAR */
.menu-toggle {
  display: none;
  font-size: 1.8rem;
  color: var(--text-color);
  cursor: pointer;
}

@media (max-width: 768px) {
  header {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .logo h1{
    font-size: 25px;
  }
  nav {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 1rem;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
    border-radius: 10px;
    
  }

  nav.open {
    display: flex;
  }

  nav a {
    margin: 0.5rem 0;
  }

  .menu-toggle {
    display: block;
  }

  .hero {
    width: 95%; /* Establecemos el ancho al 90% */
    margin-left: auto; /* Centramos horizontalmente */
    margin-right: auto; /* Centramos horizontalmente */
    margin-top: 20px; /* Ajustamos los márgenes superior e inferior para que no se peguen tanto */
    margin-bottom: 20px;
    padding: 60px 15px; /* Reducimos el padding horizontal para que quepa mejor el contenido */
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  #mas-informacion {
    width: 95%; /* Establecemos el ancho al 90% */
    margin-left: auto; /* Centramos horizontalmente */
    margin-right: auto; /* Centramos horizontalmente */
    margin-top: 20px; /* Ajustamos los márgenes superior e inferior para que no se peguen tanto */
    margin-bottom: 20px;
    padding: 60px 15px; /* Reducimos el padding horizontal para que quepa mejor el contenido */
  }

  #mas-informacion h2 {
    font-size: 2rem;
  }

  #mas-informacion p {
    font-size: 0.5rem;
  }

  .btn-cta {
    font-size: 1rem;
    padding: 12px 24px;
  }


  .ip-box {
    font-size: 1rem;
    padding: 10px 16px;
  }

  .discord-btn {
    font-size: 1.1rem;
    padding: 10px;
  }
}