/* Salones (pages/salones.html) — tema .page-rooms definido en index.css.
   Réplica del diseño de referencia (Recurso 7.svg): bloque de contenido
   alineado a la izquierda, con el nombre de cada salón como encabezado <h2>
   (jerarquía correcta bajo el <h1> de página) y su descripción en <p> debajo.
   El texto de descripción usa 24px: por debajo de ese tamaño, blanco sobre
   este naranja no alcanza el contraste AA (3.46:1 solo cumple el umbral de
   "texto grande", ≥24px). */

.room-list {
  flex: 1;
  padding: 20px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.room-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

/* Chips traslúcidos: sobre este naranja sólido, los colores de salón del
   programa (verde, azul, dorado) pierden contraste, así que aquí todos
   usan el mismo tratamiento blanco translúcido. */
.room-chip {
  display: inline-block;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--page-text);
  background-color: rgba(255, 255, 255, 0.2);
  padding: 5px 12px;
  border-radius: 4px;
  margin-right: 6px;
}

.room-item h2 {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 44px;
  color: var(--page-text);
  letter-spacing: 1px;
  line-height: 1;
}

.room-item p {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 24px;
  color: var(--page-text);
  letter-spacing: 0.3px;
  line-height: 1.3;
}

/* Tablet */
@media (min-width: 768px) {
  .room-list {
    padding: 40px 50px 60px;
    gap: 56px;
  }

  .room-item h2 {
    font-size: 56px;
  }

  .room-item p {
    font-size: 20px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .room-list {
    padding: 60px 80px 60px;
    gap: 64px;
  }

  .room-item h2 {
    font-size: 64px;
  }

  .room-item p {
    font-size: 22px;
  }
}