.catalogo-afiche{position:relative;isolation:isolate;display:block;min-width:0;aspect-ratio:16 / 9;overflow:hidden;border-radius:20px;background:#173f7d;color:#fff;text-decoration:none;box-shadow:0 10px 24px -18px rgba(15,23,42,.45);transition:transform .28s ease,box-shadow .28s ease;}
.catalogo-afiche:is(:hover,:focus-visible){transform:translateY(-4px) scale(1.015);box-shadow:0 22px 34px -20px rgba(20,78,164,.55);color:#fff;}
.catalogo-afiche:focus-visible{outline:3px solid var(--fc-primario);outline-offset:3px;}
.catalogo-afiche__imagen{position:absolute;inset:0;z-index:-1;display:block;overflow:hidden;background:linear-gradient(135deg,#173f7d,#76a8ed);}
.catalogo-afiche__imagen::after{position:absolute;inset:0;content:"";background:linear-gradient(180deg,rgba(8,20,45,0) 35%,rgba(8,20,45,.35) 58%,rgba(8,20,45,.86) 100%);}
.catalogo-afiche__imagen>img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.catalogo-afiche:is(:hover,:focus-visible) .catalogo-afiche__imagen>img{transform:scale(1.06);}
.catalogo-afiche__imagen>i{position:absolute;top:42%;left:50%;color:rgba(255,255,255,.9);font-size:52px;transform:translate(-50%,-50%);}
.catalogo-afiche__pie{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:10px;}
.catalogo-afiche__numero{position:absolute;top:10px;left:10px;display:grid;width:32px;height:32px;place-items:center;border-radius:50%;background:var(--fc-primario);box-shadow:0 4px 10px rgba(8,20,45,.28);color:#fff;font-size:12px;font-weight:800;letter-spacing:-.02em;}
.catalogo-afiche__contenido{display:block;min-width:0;}
.catalogo-afiche__titulo{display:block;font-size:clamp(13px,1vw,17px);font-weight:800;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere;text-shadow:0 1px 8px rgba(8,20,45,.45);}
.catalogo-afiche__texto{display:-webkit-box;margin-top:1px;overflow:hidden;color:rgba(255,255,255,.82);font-size:10px;line-height:1.25;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.catalogo-afiche__accion{display:inline-flex;align-items:center;align-self:flex-start;gap:5px;padding:4px 10px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:700;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.catalogo-afiche:is(:hover,:focus-visible) .catalogo-afiche__accion{border-color:#fff;background:#fff;color:var(--fc-primario);}

/* Una sola tarjeta para categorías y especialidades (partials/catalog_card.html).
   Geometría fija 16:9; la imagen del admin llena el fondo con object-fit:cover,
   sin deformarse, sea vertical, horizontal o cuadrada. */
.catalogo-afiches{align-items:start;}
.catalogo-afiche{--fc-primario:#144ea4;width:100%;aspect-ratio:16 / 9;}
.catalogo-afiche__imagen>img{display:block;object-position:center;}
/* Afiche con textos incluidos y sin "Foto para la tarjeta": se encuadra la foto
   de arriba. Con 15 % la ventana 16:9 de un afiche vertical (5:7, 3:4, 10:11 o
   cuadrado) va de ~7 % a menos del 63 % de su alto: deja fuera el marco blanco
   superior y la franja de número, nombre y botón dibujados (desde ~80 %), y en
   los afiches de categoría baja el recuadro del logo para que no tape el título. */
.catalogo-afiche__imagen--artwork>img,.catalogo-collage__foto--artwork{object-position:50% 15%;}
.catalogo-afiche__titulo{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em;}
.catalogo-afiche__texto{height:1.25em;overflow-wrap:anywhere;}
.catalogo-afiche__accion{flex-shrink:0;}
@media(max-width:575.98px){.catalogo-afiche{max-width:420px;margin:0 auto;aspect-ratio:16 / 9;}}
@media(prefers-reduced-motion:reduce){
.catalogo-afiche,.catalogo-afiche__imagen>img,.catalogo-afiche__accion{transition:none;}
.catalogo-afiche:is(:hover,:focus-visible),.catalogo-afiche:is(:hover,:focus-visible) .catalogo-afiche__imagen>img{transform:none;}
}