/* ================================
   RESET BÁSICO
================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ================================
   ESTILOS GENERALES
================================== */
html, body {
  height: 100%;
  /* overflow: hidden; */ /* evita scroll si se desea */
}

body {
  font-family: sans-serif;
  background-image: url('../Assets/Images/FondoPC.webp'); /* Fondo para escritorio */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}


/* ================================
   FONDO PARA DISPOSITIVOS MÓVILES
================================== */
@media (max-width: 768px) {
  body {
    background-image: url('../Assets/Images/FondoMobile.webp'); /* Fondo para móviles */
    background-attachment: fixed;
  }
}


/* ================================
   SELLO PARENTAL (ESQUINA INFERIOR DERECHA)
================================== */
.parental-badge {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 7%;
  max-width: 130px;
  opacity: 0.8;
  z-index: 10;
}

@media (max-width: 768px) {
  .parental-badge {
    width: 20%;
    max-width: 100px;
    bottom: 8px;
    right: 8px;
  }
}


/* ================================
   IMAGEN SUPERIOR (RETROVISOR)
================================== */
.top-image {
  width: 50%;
  max-width: 550px;
  margin: 0 auto;
  padding-top: 20px;
  display: flex;
  justify-content: center;
  animation: fadeIn 1.2s ease-out both;
}

.top-image img {
  width: 100%;
  height: auto;
  display: block;
}


/* ================================
   CONTENEDOR DE BOTONES
================================== */
.platforms {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px 30px 20px;
}

.platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Dos columnas */
  gap: 20px 10px;                /* Espaciado vertical y horizontal */
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  animation: fadeIn 1s ease-out both;
}

.platform-grid a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  width: 100%;
  max-width: 300px;              /* Tamaño uniforme para todos */
}

/* Pandora ocupa dos columnas y está centrado */
.centered-platform {
  grid-column: span 2;
  justify-self: center;
}

/* Hover de los botones */
.platform-grid a:hover {
  transform: scale(1.05);
}

/* Estilos de las imágenes dentro de los botones */
.platform-grid img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Si se quiere forzar un enlace a ocupar todo el ancho */
a.full-width {
  grid-column: span 2;
  justify-content: center;
}


/* ================================
   ANIMACIÓN DE ENTRADA
================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ================================
   RESPONSIVE - PANTALLAS PEQUEÑAS
================================== */
@media (max-width: 600px) {
  .platform-grid {
    width: 100%;
    max-width: 500px;
    gap: 5px;                     /* Menos espacio entre botones */
  }

  .platform-grid a {
    max-width: 48vw;             /* Tamaño igualado en 2 columnas */
  }

  .top-image {
    width: 80%;                  /* Imagen más pequeña en móvil */
  }
}