/* Seccion «Catalogos y guias» de la portada.
   Archivo aparte para que no la tape una version cacheada de rex.css. */

/* El gris de fondo, mas marcado que el .about general para que la seccion se
   despegue del blanco de arriba y de abajo. */
.about-oscuro{background:#e3e4e7}

/* Las tarjetas dejan de ser un rectangulo con degradado: ahora son una
   caratula cuadrada arriba y el texto abajo, sobre tarjeta blanca. */
.about-oscuro .catalog{
  display:flex;flex-direction:column;
  min-height:0;padding:0;color:inherit;
  background:#fff;border:1px solid rgba(13,13,15,.08);
  border-radius:22px;overflow:hidden;
  box-shadow:0 2px 10px rgba(13,13,15,.06);
  transition:transform .26s ease,box-shadow .26s ease;
}
.about-oscuro .catalog::after{content:none}
.about-oscuro .catalog:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 44px rgba(13,13,15,.18);
}

/* Tarjetas de tamaño fijo y centradas: con un catalogo o con seis se ven
   iguales, en vez de estirarse a un tercio de la pantalla (o a todo el ancho
   en el celular). En el celular van de a dos. */
.about-oscuro .cat-cards{
  display:flex;flex-wrap:wrap;justify-content:center;gap:24px;
}
.about-oscuro .catalog{width:240px;max-width:100%}

/* Caratula vertical, como la tapa de un catalogo, con aire alrededor. */
.catalog-tapa{
  position:relative;margin:14px 14px 0;
  aspect-ratio:3/4;border-radius:16px;overflow:hidden;
  display:grid;place-items:center;
}
.catalog-tapa img{width:100%;height:100%;object-fit:cover;display:block}
/* Colores de respaldo cuando el documento no tiene caratula cargada. */
.t1{background:linear-gradient(150deg,#3a3c42,#0d0d0f)}
.t2{background:linear-gradient(150deg,#26272b,#0a0a0c)}
.t3{background:linear-gradient(150deg,#4a4d53,#141518)}
.t4{background:linear-gradient(150deg,#2f3136,#101114)}
.t5{background:linear-gradient(150deg,#44474d,#17181b)}
.t6{background:linear-gradient(150deg,#303237,#0b0b0d)}
.catalog-ext{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;
  font-size:2.1rem;letter-spacing:.06em;color:rgba(255,255,255,.82);
}

.catalog-cuerpo{display:flex;flex-direction:column;padding:16px 20px 22px}
.about-oscuro .catalog .kicker{
  font-weight:700;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:#7a7d84;opacity:1;
}
.about-oscuro .catalog h4{
  color:#0d0d0f;font-size:1.12rem;line-height:1.25;margin:.3rem 0 0;
}
.catalog-desc{
  color:#5a5d64;font-size:.9rem;line-height:1.5;margin-top:.4rem;
}
.about-oscuro .catalog .dl{
  display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
  margin-top:1rem;
  font-weight:700;font-size:.86rem;
  background:#000;color:#fff;border:1px solid #000;
  padding:.5rem 1rem;border-radius:999px;transition:.2s ease;
}
.about-oscuro .catalog:hover .dl{background:#000;color:#fff}

@media (prefers-reduced-motion:reduce){
  .about-oscuro .catalog{transition:none}
}

@media (max-width:700px){
  .catalog-tapa{margin:12px 12px 0}
  .catalog-cuerpo{padding:14px 16px 18px}
}
@media (max-width:560px){
  .about-oscuro .cat-cards{gap:14px}
  .about-oscuro .catalog{width:calc(50% - 7px)}
  .catalog-tapa{margin:10px 10px 0;border-radius:12px}
  .catalog-cuerpo{padding:12px 12px 16px}
  .about-oscuro .catalog h4{font-size:1rem}
  .catalog-ext{font-size:1.6rem}
}