/* ═══ PERE / emociones ═══════════════════════════════════════════════════════ */
.options-grid--wide { grid-template-columns: repeat(3, 1fr); }
.screen--pere .trial__stimulus { padding: 4px 0 8px; }
.screen--pere .trial__question { margin: 2px 0 10px; }
.screen--pere .options-grid--wide { gap: 8px; }
.screen--pere .option-btn { padding: 10px 12px; font-size: 0.95rem; }
.screen--pere .keys-hint { margin-top: 8px; }
.trial__face-frame {
  height: 100%; max-height: min(55vh, 460px);
  aspect-ratio: 25 / 36; width: auto; max-width: 100%;
}
.trial__img--face {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: contain;
}

/* 7 emociones en 3 columnas fijas con padding ya reducido (10px 12px) queda
   justo en el límite en un celular — se restaura el padding y se pasa a 2
   columnas por tipo de dispositivo (no solo por el breakpoint de 520px que
   ya usa responsive.css para .options-grid--wide en general), y a 1 columna
   en los angostos de verdad. */
@media (pointer: coarse), (hover: none) {
  .screen--pere .options-grid--wide { grid-template-columns: 1fr 1fr; gap: 10px; }
  .screen--pere .option-btn { padding: 14px 16px; font-size: 1rem; }
}
@media (max-width: 380px) {
  .screen--pere .options-grid--wide { grid-template-columns: 1fr; }
}