/* Tarjeta de categoría (partials/tarjeta_categoria.html): la única del sitio,
   en el carrusel del inicio, la grilla de /category/ y la vista previa del
   admin. Cada página pone solo el contenedor (carrusel o grilla).

   Geometría: la de los recortes originales de
   referencias/FreelanClick_CATEGORIAS_DESTACADAS_CORREGIDA.html (362 x 482),
   medida sobre ellos y comprobada capa por capa contra esos recortes. --r es
   1 px de la referencia (1/362 del ancho de la tarjeta): cada medida de aquí es
   la coordenada del recorte, y la tarjeta escala igual a cualquier ancho.
   El contenido (foto, ícono, nombre, subtítulo, número) viene del admin y
   ocupa cajas fijas: cambiarlo no mueve nada. */
.pc-cat{position:relative;display:block;aspect-ratio:362/482;overflow:hidden;container-type:inline-size;border-radius:4.7%/3.53%;background:#0b3f9a;box-shadow:none;font-family:var(--fc-marca-fuente,'Inter',Arial,sans-serif);transition:box-shadow .2s ease}
/* Blanca y sin subrayado en cualquier página (gana a los a{color} de cada hoja). */
a.pc-cat,a.pc-cat:is(:hover,:focus,:visited){color:#fff;text-decoration:none}
/* Los recortes de la referencia dejan un filo blanco de ~2 px a los lados y 1 px
   arriba y abajo, y eso se reproducía con clip-path: inset(.21% .55%). Se quitó el
   2026-10-23 a pedido del usuario: como el recorte no pinta blanco sino que deja
   ver lo que hay detrás, en /category/ —cuyo fondo es blanco— se leía como una
   caja blanca alrededor de cada tarjeta. Ahora la tarjeta pinta hasta su propio
   borde redondeado y el fondo de la página llega justo hasta ahí. El redondeo lo
   sigue dando su border-radius con overflow:hidden, que ya estaban. */
/* Hover de la referencia: solo un filo azul suave, sin zoom (dentro del recorte). */
.pc-cat::after{content:"";position:absolute;inset:0;z-index:1;border-radius:4.7%/3.53%;box-shadow:inset 0 0 0 2px #a5ccff;opacity:0;transition:opacity .2s ease;pointer-events:none}
.pc-cat:hover::after{opacity:1}
.pc-cat:focus-visible{outline:2px solid #0065ff;outline-offset:2px}
.pc-cat,.pc-cat *{box-sizing:border-box}
.pc-cat>*{--r:calc(100cqw/362)}

/* Foto: toda la tarjeta (la franja la tapa abajo). Las fotos 4:3 del
   procesamiento actual llegan hasta bajo el punto más bajo de la onda (y 408). */
.pc-cat__foto{position:absolute;inset:0;display:block;background:linear-gradient(135deg,#1d5fd8,#0b3fa8)}
.pc-cat__foto--4-3{bottom:15%}
/* Láminas antiguas con los textos dibujados abajo (crop_artwork): la foto se
   ancla arriba para que esos textos queden fuera del recorte. */
.pc-cat__foto--afiche>img{object-position:50% 0}
.pc-cat__foto>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* Placa blanca del ícono: 144 x 150 en (109, 144), radio 18, filo celeste de
   1 px y sombra suave. Es diseño: el admin solo cambia el ícono de adentro. */
.pc-cat__placa{position:absolute;left:calc(109*var(--r));top:calc(144*var(--r));display:block;width:calc(144*var(--r));height:calc(150*var(--r));overflow:hidden;border:calc(1.2*var(--r)) solid #dceafc;border-radius:calc(18*var(--r));background:#fff;box-shadow:0 calc(2*var(--r)) calc(6*var(--r)) rgba(4,30,90,.16);color:#0b4ad6}
/* Ícono de la referencia (recorte del interior de su placa, sin borde). */
.pc-cat__placa>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
/* Ícono subido en el admin: centrado, con el aire del de la referencia. */
.pc-cat__placa--icono>img{inset:16%;width:68%;height:68%}
.pc-cat__placa>i{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(70*var(--r));line-height:1}

/* Franja azul: 111 de alto (y 371 al pie). Su borde baja de 394 a la izquierda
   a 407 hacia x 175 y sube a 371 a la derecha. */
.pc-cat__franja{position:absolute;left:0;right:0;bottom:0;display:block;height:calc(111*var(--r));font-family:var(--fcp-cat-fuente,inherit)}
.pc-cat__onda{position:absolute;inset:0;width:100%;height:100%}
/* Fondo del pie subido en el admin ("Fondo del pie de la tarjeta"): cubre la
   franja entera, POR DELANTE de la onda. Antes iba detrás y la onda se le
   pintaba encima al 42 %: la foto llegaba lavada, con el azul de la onda
   teñiéndola entera. Ahora la onda queda debajo y solo se ve donde la máscara
   desvanece el canto recto de la foto, que es justo la curva de arriba; así la
   silueta de la franja no cambia y la foto conserva sus colores.
   El resto —cómo se encuadra la imagen y el tono del texto, que va sin sombra—
   es la pieza compartida con la tarjeta de especialidad (css/pie-tarjeta.css).
   El número, el nombre y el botón siguen yendo en HTML encima. */
.pc-cat__pie-fondo{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%);mask-image:linear-gradient(180deg,transparent 0,#000 38%)}
.pc-cat__franja--con-fondo :is(.pc-cat__numero,.pc-cat__linea,.pc-cat__texto,.pc-cat__boton){z-index:3}
/* Color, tamaño y peso de los cuatro textos del pie: los que el administrador
   llene en «Estilo del pie de las tarjetas» (--fcp-cat-*, {% estilo_pie_tarjeta %}).
   El segundo valor de cada var() es el de siempre: sin nada configurado la
   tarjeta no cambia. El tamaño del admin vale para todos los largos del texto.
   Contorno: un borde real (-webkit-text-stroke), no una sombra. Con
   paint-order:stroke fill el trazo queda detrás del relleno y solo asoma su
   mitad de afuera; por eso se dibuja al doble del grosor elegido, que es lo
   que se ve alrededor de la letra. 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 la propiedad translate, que se suma a un
   transform de hover en vez de pisarlo. El fondo es color + opacidad: el color
   en canales (-fondo-rgb) y la opacidad (-fondo-alpha); el degradado de siempre
   se apaga (-fondo-imagen: none) solo cuando el admin elige uno de los dos, y el
   relieve de la caja se apaga con la opacidad. */
/* Número: caja de 51 x 53 en (16, 413), cifras de 28 px. */
.pc-cat__numero{position:absolute;left:calc(16*var(--r));top:calc(42*var(--r));display:grid;width:calc(51*var(--r));height:calc(53*var(--r));place-items:center;border:var(--fcp-cat-numero-borde-px,calc(1*var(--r))) solid var(--fcp-cat-numero-borde-color,rgba(70,140,240,.55));border-radius:var(--fcp-cat-numero-radio,calc(8*var(--r)));background-color:rgba(var(--fcp-cat-numero-fondo-rgb,2,84,207),var(--fcp-cat-numero-fondo-alpha,1));background-image:var(--fcp-cat-numero-fondo-imagen,linear-gradient(180deg,#035bdf 0%,#0254cf 50%,#0047ab 100%));box-shadow:0 calc(2*var(--r)) calc(6*var(--r)) rgba(0,15,60,calc(.35*var(--fcp-cat-numero-fondo-alpha,1)));translate:var(--fcp-cat-numero-x,0px) var(--fcp-cat-numero-y,0px);color:var(--fcp-cat-numero-color,inherit);font-size:var(--fcp-cat-numero-px,calc(28*var(--r)));font-weight:var(--fcp-cat-numero-peso,700);line-height:1;letter-spacing:-.01em;-webkit-text-stroke-width:calc(var(--fcp-cat-numero-contorno-px,0px)*2);-webkit-text-stroke-color:var(--fcp-cat-numero-contorno-color,#000);paint-order:stroke fill}
/* Separador: x 79, de 422 a 457. */
.pc-cat__linea{position:absolute;left:calc(79*var(--r));top:calc(51*var(--r));width:calc(1.4*var(--r));height:calc(35*var(--r));background:rgba(255,255,255,.42)}
/* Nombre y bajada: columna de x 95 a 240, bloque centrado a la altura de la
   caja del número (2,5 más abajo, como la referencia). El tamaño del nombre
   sigue el de la referencia según su largo: 20,8 (hasta 12 letras), 15,2
   (13 a 22), 16,4 (23 a 30, dos líneas) y 14,1 (más de 30). */
.pc-cat__texto{position:absolute;left:calc(95*var(--r));width:calc(145*var(--r));top:calc(44.5*var(--r));display:flex;height:calc(53*var(--r));min-width:0;flex-direction:column;justify-content:center}
.pc-cat__titulo{display:-webkit-box;overflow:hidden;color:var(--fcp-cat-titulo-color,#f0f6ff);font-size:var(--fcp-cat-titulo-px,calc(15.2*var(--r)));line-height:1.18;font-weight:var(--fcp-cat-titulo-peso,700);letter-spacing:-.005em;overflow-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;-webkit-text-stroke-width:calc(var(--fcp-cat-titulo-contorno-px,0px)*2);-webkit-text-stroke-color:var(--fcp-cat-titulo-contorno-color,#000);paint-order:stroke fill}
.pc-cat__titulo--corto{font-size:var(--fcp-cat-titulo-px,calc(20.8*var(--r)));line-height:1.1}
.pc-cat__titulo--largo{font-size:var(--fcp-cat-titulo-px,calc(16.4*var(--r)))}
.pc-cat__titulo--muy-largo{font-size:var(--fcp-cat-titulo-px,calc(14.1*var(--r)))}
/* Bajada: mayúsculas de 8 px que en la referencia llenan ~140 px sea cual sea
   su largo: el espaciado entre letras baja con la cantidad de letras. */
.pc-cat__lema{width:calc(150*var(--r));margin-top:calc(5.2*var(--r));overflow:hidden;color:var(--fcp-cat-lema-color,var(--fc-pie-bajada,#a3b6dc));font-size:var(--fcp-cat-lema-px,calc(8*var(--r)));line-height:1;font-weight:var(--fcp-cat-lema-peso,500);letter-spacing:.19em;text-overflow:clip;text-transform:uppercase;white-space:nowrap;-webkit-text-stroke-width:calc(var(--fcp-cat-lema-contorno-px,0px)*2);-webkit-text-stroke-color:var(--fcp-cat-lema-contorno-color,#000);paint-order:stroke fill}
.pc-cat__lema--media{letter-spacing:.09em}
.pc-cat__lema--larga{letter-spacing:.03em}
.pc-cat__lema--muy-larga{letter-spacing:.02em}
/* "Ver servicios": píldora de 99 x 33 en (248, 424), letra de 10 px celeste. */
.pc-cat__boton{position:absolute;left:calc(248*var(--r));top:calc(53*var(--r));display:flex;width:calc(99*var(--r));height:calc(33*var(--r));align-items:center;justify-content:center;gap:calc(4.5*var(--r));border:var(--fcp-cat-boton-borde-px,calc(1.2*var(--r))) solid var(--fcp-cat-boton-borde-color,rgba(90,150,255,.6));border-radius:var(--fcp-cat-boton-radio,999px);background-color:rgba(var(--fcp-cat-boton-fondo-rgb,10,103,255),var(--fcp-cat-boton-fondo-alpha,1));background-image:var(--fcp-cat-boton-fondo-imagen,linear-gradient(180deg,#0a67ff,#0460f8));box-shadow:0 0 calc(6*var(--r)) rgba(60,140,255,calc(.45*var(--fcp-cat-boton-fondo-alpha,1))),0 calc(2.5*var(--r)) calc(7*var(--r)) rgba(0,20,80,calc(.35*var(--fcp-cat-boton-fondo-alpha,1)));translate:var(--fcp-cat-boton-x,0px) var(--fcp-cat-boton-y,0px);color:var(--fcp-cat-boton-texto,#eaf4ff);font-size:var(--fcp-cat-boton-px,calc(10*var(--r)));font-weight:var(--fcp-cat-boton-peso,600);line-height:1;letter-spacing:-.005em;white-space:nowrap;-webkit-text-stroke-width:calc(var(--fcp-cat-boton-contorno-px,0px)*2);-webkit-text-stroke-color:var(--fcp-cat-boton-contorno-color,#000);paint-order:stroke fill}
/* Texto del botón del admin más largo que "Ver servicios" (13 letras): misma
   píldora, letra más chica para que quepa (hasta 20 letras). */
.pc-cat__boton--largo{gap:calc(3.5*var(--r));font-size:var(--fcp-cat-boton-px,calc(8.4*var(--r)))}
.pc-cat__boton--muy-largo{gap:calc(3*var(--r));font-size:var(--fcp-cat-boton-px,calc(7.3*var(--r)));letter-spacing:-.02em}
.pc-cat__boton::before{content:"";position:absolute;inset:-6px -3px}
.pc-cat__boton .icon{flex:none;width:calc(10*var(--r));height:calc(10*var(--r))}
/* 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. */
.pc-cat:is(:hover,:focus-visible) .pc-cat__boton{background:var(--fcp-cat-boton-fondo-hover,#fff);color:var(--fcp-cat-boton-texto-hover,#0460f8)}

/* Tamaño en móvil del estilo propio de una tarjeta (2026-10-26). El style de
   la tarjeta trae sus variables (apps/category/estilo_pie.py), pero un style en
   línea no admite media queries: el tamaño móvil propio viaja como -movil y se
   elige aquí. La tarjeta guarda primero el tamaño que le toca (el suyo o el del
   estilo general, que en :root ya cambia en móvil) y en móvil el pie usa el
   -movil propio o, si no hay, ese. Sin nada configurado no cambia nada: las
   reglas de cada texto siguen cayendo en su valor de siempre. */
.pc-cat{--fcp-cat-titulo-px-heredado:var(--fcp-cat-titulo-px);--fcp-cat-lema-px-heredado:var(--fcp-cat-lema-px);--fcp-cat-numero-px-heredado:var(--fcp-cat-numero-px);--fcp-cat-boton-px-heredado:var(--fcp-cat-boton-px);--fcp-cat-numero-x-heredado:var(--fcp-cat-numero-x);--fcp-cat-numero-y-heredado:var(--fcp-cat-numero-y);--fcp-cat-boton-x-heredado:var(--fcp-cat-boton-x);--fcp-cat-boton-y-heredado:var(--fcp-cat-boton-y)}
@media (max-width:767.98px){.pc-cat__franja{--fcp-cat-titulo-px:var(--fcp-cat-titulo-px-movil,var(--fcp-cat-titulo-px-heredado));--fcp-cat-lema-px:var(--fcp-cat-lema-px-movil,var(--fcp-cat-lema-px-heredado));--fcp-cat-numero-px:var(--fcp-cat-numero-px-movil,var(--fcp-cat-numero-px-heredado));--fcp-cat-boton-px:var(--fcp-cat-boton-px-movil,var(--fcp-cat-boton-px-heredado));--fcp-cat-numero-x:var(--fcp-cat-numero-x-movil,var(--fcp-cat-numero-x-heredado));--fcp-cat-numero-y:var(--fcp-cat-numero-y-movil,var(--fcp-cat-numero-y-heredado));--fcp-cat-boton-x:var(--fcp-cat-boton-x-movil,var(--fcp-cat-boton-x-heredado));--fcp-cat-boton-y:var(--fcp-cat-boton-y-movil,var(--fcp-cat-boton-y-heredado))}}