/* ════════════════════════════════════════════
   MUNDOCOSO.CSS — Estilos exclusivos de
   la página Mundo Coso (grilla revista).
   Se carga DESPUÉS de base.css y subpaginas.css
   ════════════════════════════════════════════ */


/* ── CONTENEDOR PRINCIPAL ─────────────────────
   Wrapper de la grilla. Usa 960px en lugar del
   --max-w global (906px) para dar más aire
   a la grilla de 3 columnas.
   ─────────────────────────────────────────── */

.mc-container {
  width: 100%;
  max-width: 960px;
  padding: 0 2rem 4rem;
}


/* ── GRILLA ───────────────────────────────────
   3 columnas iguales con gap mínimo.
   Las filas se arman con 3 tarjetas cada una,
   alternando imagen / texto / imagen.
   ─────────────────────────────────────────── */

.mc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}


/* ── TARJETA BASE ─────────────────────────────
   Todas las celdas son cuadradas (1:1).
   Flex column para alinear el contenido
   verticalmente dentro de cada tarjeta.
   ─────────────────────────────────────────── */

.mc-card {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.8rem;
  overflow: hidden;
}


/* ── TARJETA IMAGEN ───────────────────────────
   Sin padding para que la imagen ocupe toda
   la celda. La imagen hace zoom suave al hover.
   ─────────────────────────────────────────── */

.mc-img-card {
  padding: 0;
  position: relative;
}

.mc-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%) sepia(10%) contrast(95%);  /* Tono levemente envejecido */
  transition: transform 0.4s ease;
}

/* Zoom suave al pasar el mouse */
.mc-img-card:hover img { transform: scale(1.04); }


/* ── TARJETA TEXTO ────────────────────────────
   Fondo negro, estructura interna:
     .mc-copete  — etiqueta naranja (tipo de evento)
     h2          — nombre del evento en celeste
     p           — descripción en blanco semitransparente
     .mc-more    — link "Saber más +"
   ─────────────────────────────────────────── */

/* Fondo y color base de las tarjetas de texto */
.mc-bg-black { background: var(--black); color: var(--white); }

/* Etiqueta superior — tipo de evento, siempre naranja */
.mc-copete {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-bottom: 0.4rem;
}

/* Título del evento — Outfit pesado, color celeste del sitio */
.mc-text-card h2 {
  font-family: var(--font);
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
  color: var(--bg);             /* Celeste — contrasta sobre negro */
}

/* Descripción — excluye .mc-copete para no pisarle el color naranja */
.mc-text-card p:not(.mc-copete) {
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1.5vw, 0.9rem);
  line-height: 1.5;
  margin-bottom: 1rem;
  flex: 1;                      /* Empuja el .mc-more hacia abajo */
  color: rgba(255,255,255,0.8);
}

/* Link "Saber más +" — alineado al fondo de la tarjeta */
.mc-more {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 2px;
  align-self: flex-start;
  color: var(--white);
  border-bottom: 2px solid rgba(255,255,255,0.3);  /* Subrayado sutil */
  transition: opacity 0.2s;
}

.mc-more:hover { opacity: 0.6; }


/* ── RESPONSIVE ───────────────────────────────
   768px: pasa a 2 columnas, tarjetas con
          altura mínima en lugar de ratio fijo.
   520px: pasa a 1 columna, vuelve el ratio 1:1.
   ─────────────────────────────────────────── */

/* Tablet */
@media (max-width: 768px) {
  .mc-grid      { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .mc-card      { aspect-ratio: auto; min-height: 220px; }
  .mc-container { padding: 0 1.5rem 3rem; }
}

/* Móvil */
@media (max-width: 520px) {
  .mc-grid      { grid-template-columns: 1fr; }
  .mc-card      { aspect-ratio: 1 / 1; min-height: auto; }
  .mc-container { padding: 0 1.25rem 3rem; }
}