/* ===== TIPOGRAFÍA ===== */
@font-face {
  font-family: 'micro-extend';
  src: url('micro-extend/MicroExtendFLF-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'micro-extend', sans-serif;
}

/* ========================= */
/* MENÚ DE NAVEGACIÓN */
/* ========================= */
.menu .opciones {
  display: flex;
  flex-direction: row;
  gap: 30px;
  justify-content: flex-end;
  margin-top: 15px;
  margin-right: 15px;
}

.menu a {
  text-decoration: none;
  color: black;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.menu a:hover {
  color: darkred;
}

/* ========================= */
/* CABECERA */
/* ========================= */
h1 {
  color: #870000;
  font-size: clamp(1.6rem, 4vw, 4rem);
  text-align: center;
  margin: 2rem 1rem;
}

/* ========================= */
/* CUADRÍCULA DE CARRUSELES */
/* ========================= */
.cuadricula {
  margin: 50px auto;
  display: grid;
  grid-template-columns: repeat(3, 450px); /* 3 columnas de 450px en desktop */
  gap: 1rem;
  justify-content: center;
  max-width: 1400px;
  padding: 0 1rem;
}

/* Cada contenedor de carrusel */
.contenedor {
  width: 450px; /* tamaño fijo en desktop */
  display: flex;
  flex-direction: column;
  text-align: center;
  cursor: pointer;
  border: 2px solid #000;
  border-radius: 4px;
  overflow: hidden;
}

/* Carrusel */
.carrusel {
  display: flex;
  width: 100%;
  height: 300px; /* altura fija */
  transition: transform 0.5s ease-in-out;
}

.carrusel img {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Texto debajo del carrusel */
.texto_imagen {
  width: 100%;
  text-align: center;
  font-family: 'micro-extend', sans-serif;
  color: #000;
  font-size: clamp(1rem, 2.5vw, 2rem);
  margin-top: 0.5rem;
}

/* ========================= */
/* MODAL / Ventana Win95 */
/* ========================= */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0; top: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.4);
  justify-content: center; 
  align-items: center;
  font-family: Tahoma, Verdana, sans-serif;
}

.win95-window {
  background: #c0c0c0;
  border: 2px solid #fff;
  box-shadow: inset -2px -2px #808080, inset 2px 2px #000;
  width: 360px;
}

.win95-titlebar {
  background: #870000;
  color: #fff;
  padding: 4px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
}

.win95-close {
  background: #c0c0c0;
  border: 2px solid #fff;
  box-shadow: inset -2px -2px #808080, inset 2px 2px #000;
  font-size: 12px;
  cursor: pointer;
  padding: 0 6px;
}
.win95-close:active {
  box-shadow: inset 2px 2px #808080, inset -2px -2px #fff;
}

.win95-body {
  padding: 14px;
  font-size: 14px;
  color: #000;
}

.win95-buttons {
  margin-top: 16px;
  text-align: right;
}

.win95-btn {
  background: #c0c0c0;
  border: 2px solid #fff;
  box-shadow: inset -2px -2px #808080, inset 2px 2px #000;
  padding: 4px 12px;
  cursor: pointer;
  margin-left: 6px;
}

.win95-btn:active {
  box-shadow: inset 2px 2px #fff, inset -2px -2px #808080;
}

/* ========================= */
/* MEDIA QUERIES RESPONSIVE */
/* ========================= */

/* Pantallas medianas: 2 columnas */
@media (max-width: 1024px) {
  .cuadricula {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    gap: 1rem;
    justify-content: center;
  }

  .contenedor {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .cuadricula {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1rem;
  }

  .contenedor {
    width: 100%;
  }

  .carrusel {
    height: 200px;
  }

  .texto_imagen {
    font-size: 1rem;
  }

  .menu a {
    font-size: 0.5rem;
  }

  .menu .opciones {
    gap: 15px;
  }
}