/* Tarjeta de especialidad (SubCategory): partials/tarjeta_subcategoria.html.
   La única de las especialidades: listado de cada categoría y vista previa
   del admin. La grilla del listado está al final de este archivo.

   Geometría: la de referencias/FreelanClick_ABOGADO_PENAL_CORREGIDA.html
   (1058 x 1487, franja de 289 abajo), medida sobre su imagen y comprobada capa
   por capa contra ella. La foto ocupa toda la tarjeta y la franja es un panel
   de vidrio claro encima (la foto se ve a través), para que la tarjeta se vea
   como una sola composición. --r es 1 px de la referencia (1/1058
   del ancho de la tarjeta): cada medida es la coordenada de la referencia (en
   la franja, y = 0 es su borde de arriba). Los textos usan el tamaño de la
   referencia con un mínimo legible (max()) para las tarjetas chicas.
   Tamaño exterior (2026-10-08): el de la tarjeta de categoría, proporción
   362/482 (antes 1058/1487, un 5 % más alta); la franja, el número, los textos
   y el botón siguen en sus coordenadas, solo la foto se ve un poco más baja.
   Pie como banda propia (2026-10-22, pedido del usuario): la franja dejó de ser
   un vidrio flotando sobre la foto. Ahora la tarjeta son dos zonas apiladas —la
   foto arriba y el pie abajo— y dentro del pie cada pieza (número, separador,
   textos, botón) es una celda de su grilla. Así el administrador puede cambiar
   cualquiera de ellas sin que se pisen entre sí ni tapen la foto.
   Dos zonas (2026-10-22, pedido del usuario): la tarjeta son dos imágenes
   independientes, las dos del admin. Arriba la foto principal, que ocupa solo
   su zona; abajo el pie, cuya imagen de fondo es otro campo. El pie no se monta
   sobre la foto: empieza donde la foto termina. Encima del pie van en HTML el
   número, el nombre y el botón, nunca pintados dentro de la imagen. */
.sc-card,.sc-card *{box-sizing:border-box}
.sc-card{position:relative;display:flex;flex-direction:column;aspect-ratio:362/482;overflow:hidden;container-type:inline-size;isolation:isolate;border-radius:4.7%/3.53%;background:#e8eef7;box-shadow:0 4px 14px rgba(16,44,80,.08);font-family:var(--fc-marca-fuente,'Inter',Arial,sans-serif);transition:box-shadow .2s ease,transform .2s ease}
a.sc-card,a.sc-card:is(:hover,:focus,:visited){color:#0b1f44;text-decoration:none}
.sc-card:hover{box-shadow:0 0 0 2px #a5ccff,0 8px 22px rgba(16,44,80,.12)}
.sc-card:focus-visible{outline:3px solid #0058ee;outline-offset:3px}
.sc-card>*{--r:calc(100cqw/1058)}
/* Paleta del pie: la misma de la franja de la tarjeta de categoría
   (css/tarjeta-categoria.css, .pc-cat__franja y sus piezas), para que las dos
   tarjetas del catálogo se lean como la misma familia. Si cambia allá, cambia
   estos cinco valores y nada más. */
.sc-card{--sc-pie-fondo:linear-gradient(168deg,#0a4596 0,#003070 58%,#00295f 100%);
  --sc-pie-filo:rgba(70,140,240,.55);--sc-pie-titulo:#f0f6ff;--sc-pie-bajada:#a3b6dc;
  --sc-pie-separador:rgba(255,255,255,.42)}
/* El texto para lectores de pantalla se oculta aquí mismo: esta página no carga
   portada.css, donde vive el .sr-only del sitio, y al apilar las zonas de la
   tarjeta ese texto pasaría a verse. */
.sc-card .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Foto: toda la tarjeta, detrás del panel. Se adapta sola (cover, centrada).
   Los afiches antiguos con textos dibujados abajo (crop_artwork) amplían su
   parte de arriba (la foto, 1198 de 1487) hasta cubrir toda la tarjeta: los
   textos dibujados quedan fuera del recorte y la foto sigue bajo el vidrio. */
.sc-card__foto{position:relative;flex:1 1 auto;display:block;width:100%;min-height:0;overflow:hidden;background:linear-gradient(135deg,#1d5fd8,#0b3fa8);color:#fff}
.sc-card__foto>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Afiches antiguos con textos dibujados abajo (crop_artwork): la foto se ancla
   arriba, así el recorte deja fuera esos textos. */
.sc-card__foto--afiche>img{object-position:50% 0}
.sc-card__foto>i{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(260*var(--r));opacity:.85}

/* Ícono del admin (de la especialidad o de su categoría): caja blanca de
   150 x 150 en (40, 40), sobre la foto y lejos de la franja; el ícono, con su
   transparencia, ocupa el 68 % del centro. Solo existe si hay ícono subido. */
.sc-card__icono{position:absolute;z-index:1;left:calc(40*var(--r));top:calc(40*var(--r));display:block;width:max(calc(150*var(--r)),44px);aspect-ratio:1;border:max(calc(3*var(--r)),1px) solid #dceafc;border-radius:calc(28*var(--r));background:#fff;box-shadow:0 calc(6*var(--r)) calc(18*var(--r)) rgba(4,30,90,.18)}
.sc-card__icono>img{position:absolute;inset:16%;display:block;width:68%;height:68%;object-fit:contain}

/* Pie: la segunda zona de la tarjeta (2026-10-22, pedido del usuario). La foto
   termina donde empieza el pie; el pie no se le monta encima. Su fondo es otra
   imagen, la que el administrador sube en "Fondo del pie de la tarjeta"
   (card_footer_image): ocupa la franja entera (cover) y encima van, en HTML,
   el número, el nombre y el botón. Sin esa imagen la franja lleva el azul del
   sitio, que es el respaldo de las tarjetas que todavía no la tienen.
   Una fila: [número] [nombre + especialidad] [botón]. El alto es proporcional
   al ancho de la tarjeta (285 de la referencia, unos 77 px en escritorio, el
   20 % de su alto) con un mínimo legible, así el pie no crece con el texto.
   El redondeo de las esquinas de abajo lo da el recorte de la tarjeta. */
.sc-card__pie{font-family:var(--fcp-fuente,inherit);position:relative;flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;height:max(calc(300*var(--r)),72px);column-gap:calc(20*var(--r));padding:0 calc(22*var(--r));overflow:hidden;background:linear-gradient(168deg,#0a4596 0,#003070 58%,#00295f 100%)}
/* La imagen del admin, de borde a borde de la franja. */
/* La imagen del pie y su legibilidad son la pieza compartida con la tarjeta de
   categoría (css/pie-tarjeta.css): aquí no se repite ninguna de sus reglas.
   Antes esta hoja le pintaba encima un degradado azul de hasta el 50 % y la
   foto subida llegaba apagada. */
/* Velo sobre la imagen: sin él, un fondo claro dejaría los textos ilegibles. */
.sc-card__pie :is(.sc-card__numero,.sc-card__texto,.sc-card__boton){z-index:3}

/* Color, tamaño, peso y contorno de los textos del pie: los de «Estilo del pie
   de las tarjetas» (--fcp-*); el segundo valor de cada var() es el de siempre.
   El contorno es un borde real (-webkit-text-stroke) y no una sombra; se dibuja
   al doble del grosor elegido porque paint-order:stroke fill deja asomar solo
   su mitad de afuera. Grosor 0, el de siempre: sin contorno.
   Posición y caja (2026-10-26): el número con su caja y el botón con su texto y
   su flecha se mueven enteros con translate (se suma al transform del hover con
   foto, no lo pisa). El fondo es color en canales + opacidad; sin elegir nada,
   el de siempre (y con foto, el vidrio de css/pie-tarjeta.css). */
/* Número: vidrio claro dentro de la franja, no una caja aparte. */
.sc-card__numero{position:relative;display:grid;width:max(calc(150*var(--r)),40px);height:max(calc(150*var(--r)),40px);place-items:center;border:var(--fcp-numero-borde-px,max(calc(2*var(--r)),1px)) solid var(--fcp-numero-borde-color,rgba(255,255,255,.3));border-radius:var(--fcp-numero-radio,calc(26*var(--r)));background:rgba(var(--fcp-numero-fondo-rgb,255,255,255),var(--fcp-numero-fondo-alpha,var(--fcp-numero-fondo-alpha-defecto,.14)));translate:var(--fcp-numero-x,0px) var(--fcp-numero-y,0px);color:var(--fcp-numero-color,#f4f9ff);font-size:var(--fcp-numero-px,max(calc(76*var(--r)),18px));font-weight:var(--fcp-numero-peso,800);line-height:1;letter-spacing:-.04em;-webkit-text-stroke-width:calc(var(--fcp-numero-contorno-px,0px)*2);-webkit-text-stroke-color:var(--fcp-numero-contorno-color,#000);paint-order:stroke fill}

/* Nombre y especialidad: la columna que se estira, centrada en la franja. */
.sc-card__texto{position:relative;display:block;min-width:0}
.sc-card__titulo{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;color:var(--fcp-titulo-color,var(--sc-pie-titulo));font-size:var(--fcp-titulo-px,max(calc(50*var(--r)),15.5px));line-height:1.18;font-weight:var(--fcp-peso,700);letter-spacing:-.025em;text-overflow:ellipsis;overflow-wrap:anywhere;-webkit-text-stroke-width:calc(var(--fcp-titulo-contorno-px,0px)*2);-webkit-text-stroke-color:var(--fcp-titulo-contorno-color,#000);paint-order:stroke fill}
/* Dos líneas, no una: con una sola, nombres como «Consultoría en derecho civil»
   se cortaban con puntos a media palabra. */
.sc-card__especialidad{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  margin-top:calc(6*var(--r));overflow:hidden;
  color:var(--fcp-bajada-color,var(--fc-pie-bajada,var(--sc-pie-bajada)));
  font-size:var(--fcp-bajada-px,max(calc(22*var(--r)),9px));
  line-height:1.22;font-weight:var(--fcp-bajada-peso,600);letter-spacing:.04em;text-transform:uppercase;
  overflow-wrap:anywhere;-webkit-text-stroke-width:calc(var(--fcp-bajada-contorno-px,0px)*2);-webkit-text-stroke-color:var(--fcp-bajada-contorno-color,#000);paint-order:stroke fill}

/* Botón: compacto, en la misma fila. */
.sc-card__boton{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(10*var(--r));height:max(calc(118*var(--r)),30px);padding:0 calc(16*var(--r));border:var(--fcp-boton-borde-px,max(calc(2*var(--r)),1px)) solid var(--fcp-boton-borde-color,rgba(255,255,255,.34));border-radius:var(--fcp-boton-radio,999px);background:rgba(var(--fcp-boton-fondo-rgb,255,255,255),var(--fcp-boton-fondo-alpha,var(--fcp-boton-fondo-alpha-defecto,.16)));translate:var(--fcp-boton-x,0px) var(--fcp-boton-y,0px);color:var(--fcp-boton-texto,#f4f9ff);font-size:var(--fcp-boton-px,max(calc(27*var(--r)),10.5px));font-weight:var(--fcp-boton-peso,700);line-height:1;letter-spacing:-.01em;white-space:nowrap;transition:background .2s ease,color .2s ease;-webkit-text-stroke-width:calc(var(--fcp-boton-contorno-px,0px)*2);-webkit-text-stroke-color:var(--fcp-boton-contorno-color,#000);paint-order:stroke fill}
/* Texto del botón más largo que "Ver servicios": la letra baja un punto. */
.sc-card__pie--boton-largo .sc-card__boton{gap:calc(8*var(--r));padding:0 calc(13*var(--r));font-size:var(--fcp-boton-px,max(calc(24*var(--r)),10px))}
.sc-card__boton::before{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:max(100%,44px);transform:translateY(-50%)}
.sc-card__boton svg{flex:none;width:1.1em;height:1.1em}
/* Hover: el botón se vuelve blanco, salvo que el admin le haya elegido colores
   (-hover, DERIVADAS_PIE en apps/category/models.py): entonces los conserva. */
.sc-card:is(:hover,:focus-visible) .sc-card__boton{background:var(--fcp-boton-fondo-hover,#fff);color:var(--fcp-boton-texto-hover,#0a46e6);border-color:var(--fcp-boton-borde-hover,#fff)}

/* Tarjetas angostas: primero bajan separaciones y tamaños. */
@container (max-width:380px){
 .sc-card__pie{column-gap:calc(18*var(--r));padding:0 calc(20*var(--r))}
}
@container (max-width:310px){
 .sc-card__pie{column-gap:calc(14*var(--r));padding:0 calc(16*var(--r))}
 .sc-card__titulo{font-size:var(--fcp-titulo-px,max(calc(50*var(--r)),14px))}
 .sc-card__especialidad{font-size:var(--fcp-bajada-px,max(calc(22*var(--r)),9px));letter-spacing:.02em}
 .sc-card__boton{gap:5px;padding:0 10px;font-size:var(--fcp-boton-px,max(calc(27*var(--r)),10px))}
}

/* ---------- Listado de especialidades (category/detail.html) ----------
   Misma escala que la grilla de categorías de /category/ (css/categorias-referencia.css,
   medida en el navegador el 2026-10-08): tarjetas de hasta 285,8 px de ancho en
   escritorio (4 por fila en una grilla de 1192 px, la misma), separadas 16 px y
   22 px entre filas (18 bajo 1200). Los cortes siguen al contenedor de esta
   página (Bootstrap: 1110 px desde 1200, 930 desde 992, 690 desde 768), que es
   más angosto que el marco de /category/: con los cortes de esa página, entre
   821 y 991 px quedarían tarjetas de 219 px. Así: 4 columnas desde 1200, 3
   desde 992, 2 desde 768 y 1 debajo (hasta 460 px de ancho). Bajo 768 el
   contenedor mide 510 px o menos: dos columnas darían tarjetas de ~247 px,
   donde palabras como "emprendimiento" no caben en la columna de la
   especialidad y se parten (pasaba también antes, entre 700 y 767). */
/* Las tarjetas crecieron de 286 a 311 px en escritorio (2026-10-23): los nombres
   largos y su bajada de dos líneas pedían sitio. El ancho sale de aprovechar el
   contenedor entero —1280, no 1192— y de juntar un poco las columnas; son las
   mismas cuatro de antes, no tres gigantes. */
.subcategorias-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 12px;max-width:1280px;margin-inline:auto}
@media(max-width:1199.98px){.subcategorias-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}}
@media(max-width:991.98px){.subcategorias-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767.98px){.subcategorias-grid{grid-template-columns:minmax(0,460px);justify-content:center}}

/* Tamaño en móvil del estilo propio de una tarjeta (2026-10-26): el mismo
   mecanismo que en css/tarjeta-categoria.css. El style de la tarjeta trae el
   tamaño móvil propio como -movil; aquí, en móvil, el pie lo usa o, si no hay,
   el tamaño que la tarjeta ya tenía (el suyo o el del estilo general). */
.sc-card{--fcp-titulo-px-heredado:var(--fcp-titulo-px);--fcp-bajada-px-heredado:var(--fcp-bajada-px);--fcp-numero-px-heredado:var(--fcp-numero-px);--fcp-boton-px-heredado:var(--fcp-boton-px);--fcp-numero-x-heredado:var(--fcp-numero-x);--fcp-numero-y-heredado:var(--fcp-numero-y);--fcp-boton-x-heredado:var(--fcp-boton-x);--fcp-boton-y-heredado:var(--fcp-boton-y)}
@media (max-width:767.98px){.sc-card__pie{--fcp-titulo-px:var(--fcp-titulo-px-movil,var(--fcp-titulo-px-heredado));--fcp-bajada-px:var(--fcp-bajada-px-movil,var(--fcp-bajada-px-heredado));--fcp-numero-px:var(--fcp-numero-px-movil,var(--fcp-numero-px-heredado));--fcp-boton-px:var(--fcp-boton-px-movil,var(--fcp-boton-px-heredado));--fcp-numero-x:var(--fcp-numero-x-movil,var(--fcp-numero-x-heredado));--fcp-numero-y:var(--fcp-numero-y-movil,var(--fcp-numero-y-heredado));--fcp-boton-x:var(--fcp-boton-x-movil,var(--fcp-boton-x-heredado));--fcp-boton-y:var(--fcp-boton-y-movil,var(--fcp-boton-y-heredado))}}

/* «Ver en la página de su categoría» (admin de especialidades) salta al ancla
   #especialidad-<slug> de la tarjeta: este margen deja la tarjeta debajo de la
   cabecera fija del sitio. No cambia ninguna medida. */
.sc-card{scroll-margin-top:110px}