/* ============================================================
   AKDMY · rejilla de opiniones (ApiCLASES/opiniones.js)

   Tarjetas pequeñas, cinco por fila en escritorio. La rejilla usa
   auto-fit con un ancho mínimo en vez de un número fijo de
   columnas: así se reacomoda sola en cualquier pantalla en vez de
   depender de que alguien acierte con los puntos de corte.
   ============================================================ */

.op-rejilla {
  position: relative;
  z-index: 10;
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) 8px;

  /* Cinco caben cuando hay sitio; si no, cuatro, tres, dos, una. */
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
}

/* Por encima de 1200 se fijan cinco: dejadas a su aire, en pantallas
   muy anchas salían seis y las tarjetas quedaban raquíticas. */
@media (min-width: 1200px) {
  .op-rejilla { grid-template-columns: repeat(5, 1fr); }
}

.op {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 18px 18px 16px;

  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}

.op:hover {
  transform: translateY(-3px);
  border-color: rgba(125, 124, 255, .34);
  background: rgba(255, 255, 255, .07);
}

.op__estrellas { display: flex; gap: 2px; }
.op__estrellas svg { width: 13px; height: 13px; fill: #fbbf24; }

.op__texto {
  margin: 0;
  flex: 1;
  font-size: .84rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}

.op__quien {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
}

.op__cara {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
}

/* Sin retrato, la inicial sobre el color de la casa. */
.op__cara--letra {
  background: linear-gradient(135deg, #5857d5, #d203ab);
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
}

@media (max-width: 520px) {
  .op-rejilla { gap: 12px; padding-top: 24px; }
  .op { padding: 15px; }
  .op__texto { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .op, .op:hover { transition: none; transform: none; }
}

/* Las tarjetas que habla la propia AKDMY, no un alumno. Se
   distinguen a propósito: sin estrellas, sin cara y con el nombre
   de la casa. Quien las lee sabe de quién viene cada cosa. */
.op--nuestra {
  border-color: rgba(125, 124, 255, .22);
  background: linear-gradient(160deg, rgba(88, 87, 213, .13), rgba(255, 255, 255, .03));
}

.op__marca {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  background: linear-gradient(105deg, #7d7cff, #ff4fd8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   El titular de la sección

   Tamaño y peso copiados de los titulares de sección del tema
   para que no cante al lado de «Ahora somos más de 1.000
   estudiantes», que está justo encima.
   ============================================================ */

/* El bloque entero, que es lo que ve el contenedor flex de la
   plantilla: una sola pieza a todo el ancho, no dos hermanos
   repartiéndoselo. */
.op-bloque {
  position: relative;
  z-index: 10;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  padding-top: 34px;
}

.op-titulo {
  margin: 0 auto 26px;
  max-width: 1300px;
  padding: 0 16px;
  text-align: center;

  font-family: var(--heading-fontFamily, inherit);
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: #fff;
}

@media (max-width: 640px) {
  .op-titulo { margin-bottom: 18px; }
}