/* ---------- Quiénes somos ----------
   Seis secciones que alternan noche y blanca, como el resto del sitio. No hay
   nada decorativo: las únicas piezas nuevas son la fila de cifras, la rejilla de
   lo que hay dentro y la lista numerada de las siete formas de estudiar. */

/* --- portada --- */
.opr-qs-portada .opr-cabeza{max-width:none !important}
.opr-qs-portada .opr-entradilla{max-width:52ch !important}

.opr-qs-cifras{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:14px !important;
  margin-top:clamp(30px,3.6vw,46px) !important;
}
.opr-qs-cifra{
  padding:20px 20px 18px !important; border-radius:var(--radio) !important;
  background:var(--p900) !important; box-shadow:inset 0 0 0 1px var(--p800) !important;
}
.opr-qs-cifra b{display:block !important; color:#fff !important; line-height:1 !important}
.opr-qs-cifra span{
  display:block !important; margin-top:8px !important; font-size:.8125rem !important;
  line-height:1.4 !important; color:var(--p400) !important; text-wrap:pretty !important;
}

/* --- dos columnas de texto: «por qué existe» y «cómo se hace» --- */
.opr-qs-dos{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:clamp(24px,3.4vw,52px) !important}
.opr-qs-dos p{margin-top:12px !important; color:var(--suave) !important; text-wrap:pretty !important}
.opr-qs-dos p + p{margin-top:12px !important}
.opr-qs-dos a{color:var(--tinta) !important; text-decoration:underline !important; text-underline-offset:3px !important}

/* --- la rejilla de lo que hay dentro ---
   Son enlaces, no tarjetas mudas: cada pieza lleva a su página. Por eso toda la
   tarjeta reacciona al pasar por encima y no solo el rótulo de abajo. */
.opr-qs-rejilla{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:14px !important;
  grid-auto-rows:auto auto 1fr auto !important;
}
.opr-qs-pieza{
  display:grid !important; grid-template-rows:subgrid !important; grid-row:span 4 !important;
  padding:24px 22px 20px !important;
  transition:box-shadow .18s ease, transform .18s ease !important;
}
.opr-qs-pieza:hover{box-shadow:inset 0 0 0 1.5px var(--borde2), var(--sombra) !important; transform:translateY(-2px) !important}
.opr-qs-pieza .opr-cifra{font-size:1.75rem !important; line-height:1 !important; color:var(--tinta) !important}
.opr-qs-pieza .opr-h4{margin-top:10px !important}
.opr-qs-pieza p{margin-top:8px !important; font-size:.875rem !important; line-height:1.5 !important; color:var(--suave) !important; text-wrap:pretty !important}
.opr-qs-ir{
  display:block !important; margin-top:16px !important; font-size:.8125rem !important; font-weight:700 !important;
  letter-spacing:-.012em !important; color:var(--tenue) !important;
}
.opr-qs-pieza:hover .opr-qs-ir{color:var(--tinta) !important}
.opr-qs-ir::after{content:' →' !important}

/* --- las siete piezas de cada tema ---
   Lleva número porque **el orden significa algo**: es el camino que se recomienda
   dentro de un tema, del test al repaso. No es una lista de la compra. */
.opr-qs-lista{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:2px 34px !important; counter-reset:pieza !important; margin-top:clamp(26px,3vw,38px) !important;
}
.opr-qs-lista li{
  position:relative !important; counter-increment:pieza !important;
  padding:16px 0 16px 46px !important; border-top:1px solid var(--p800) !important;
}
.opr-qs-lista li::before{
  content:counter(pieza,decimal-leading-zero) !important;
  position:absolute !important; left:0 !important; top:17px !important;
  font-size:.8125rem !important; font-weight:800 !important; color:var(--p600) !important;
  font-variant-numeric:tabular-nums !important;
}
.opr-qs-lista b{display:block !important; font-size:1rem !important; font-weight:700 !important; letter-spacing:-.014em !important; color:#fff !important}
.opr-qs-lista span{display:block !important; margin-top:3px !important; font-size:.875rem !important; line-height:1.5 !important; color:var(--p400) !important}

/* --- cierre --- */
.opr-qs-botones{display:flex !important; flex-wrap:wrap !important; gap:10px !important; margin-top:clamp(22px,2.6vw,30px) !important}
.opr-qs-pie{margin-top:22px !important; color:var(--p500) !important}
.opr-qs-pie a{color:#fff !important; text-decoration:underline !important; text-underline-offset:3px !important}
.opr-seccion.es-blanca .opr-qs-pie a{color:var(--tinta) !important}

/* --- se aprieta por escalones --- */
@media (max-width:1080px){
  .opr-qs-rejilla{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (max-width:860px){
  .opr-qs-cifras{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .opr-qs-dos{grid-template-columns:1fr !important; gap:30px !important}
  .opr-qs-lista{grid-template-columns:1fr !important; gap:0 !important}
}
@media (max-width:640px){
  .opr-qs-rejilla{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .opr-qs-pieza{padding:20px 18px 18px !important}
}
@media (max-width:460px){
  .opr-qs-rejilla{grid-template-columns:1fr !important}
  .opr-qs-cifra{padding:18px 18px 16px !important}
  .opr-qs-botones .opr-btn{width:100% !important; justify-content:center !important}
}

/* SIN `subgrid`, LO DE SIEMPRE: las tarjetas se apilan en columna y el rótulo de
   «ver» se va al fondo con `margin-top:auto`. Cuadra peor, pero se lee igual. */
@supports not (grid-template-rows:subgrid){
  .opr-qs-pieza{display:flex !important; flex-direction:column !important}
  .opr-qs-ir{margin-top:auto !important; padding-top:16px !important}
}