/* Página de especialidad (templates/subcategory/especialidad.html), la misma
   para todas: el diseño aprobado de Contratos. El cuerpo de
   referencias/contratos/styles.css con sus mismos valores (unidad --u = 1/1448
   del ancho, hasta 1,2 px; el banner escala con el ancho de la ventana).
   Cambios respecto de la referencia, solo los necesarios:
   - todo acotado a .especialidad-ref (la página usa la cabecera y el footer
     globales, Bootstrap y style.css): sus :root, body, *, button, a y
     encabezados pasan a .especialidad-ref, y se neutralizan reglas globales del
     sitio (form{width:90%}, márgenes de Bootstrap);
   - sin las reglas de su cabecera, su footer, su diálogo y su aviso;
   - letra: Inter (la del sitio) en vez de su ReferenceSans, mismos tamaños;
   - textos del banner (ruta, etiqueta, título, bajada), que la referencia trae
     dibujados en la imagen: en HTML en el mismo lugar (bloque "Banner");
   - la tarjeta de profesional, que la referencia muestra como recorte de su
     lámina: armada en HTML con sus medidas (bloque "Tarjeta"). Todas las filas
     con el alto de la primera (330): la segunda fila de la referencia es más
     baja solo porque su captura la corta el footer. */

/* La unidad de la lámina se mide sobre el ancho del propio <main> (cqw), no sobre vw:
   en Windows vw suma la barra de desplazamiento, así que el encabezado salía ~1 % más
   ancho que el área visible y se corría. 2026-10-15. */
/* overflow en los DOS ejes (2026-10-24; antes solo overflow-x). Las dos láminas
   decorativas de los lados (.main-decoration) son absolutas, miden 727 u de alto
   y cuelgan de un top fijo, así que en una especialidad con poco contenido pasan
   por debajo del main: estiraban el scrollHeight del documento más allá del body
   —124 px a 1536 × 864, 21 a 1280 × 720— y debajo del footer aparecía esa altura
   de <html> en blanco. En una página larga el main ya es más alto que ellas y el
   recorte no toca nada. El eje x ya estaba recortado por ellas mismas: esto solo
   termina el trabajo. Comprobado con los cuatro desplegables del panel de filtros
   abiertos: ninguno sobresale por debajo del main, así que no se corta nada. */
.especialidad-ref{container-type:inline-size;--u:min(calc(100cqw / 1448),1.2px);--hero-u:calc(100cqw / 1448);--blue:#0057ff;--navy:#080f4d;--muted:#46629b;position:relative;display:block;overflow:clip;padding-bottom:calc(48 * var(--u));color:var(--navy);font:calc(12 * var(--u))/normal var(--fc-marca-fuente,'Inter',Arial,sans-serif);background:radial-gradient(ellipse at 8% 68%,#f1f8ff80,transparent 45%),#f7fbff}
.especialidad-ref *,.especialidad-ref *::before,.especialidad-ref *::after{box-sizing:border-box}
.especialidad-ref :is(button,input,select){font:inherit;color:inherit}
.especialidad-ref button{cursor:pointer;border:0;padding:0;background:none}
.especialidad-ref :is(button,a){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.especialidad-ref a{color:inherit;text-decoration:none}
.especialidad-ref form{width:auto;margin:0}
.especialidad-ref :is(h1,h2,h3,p,ul){margin:0}
.especialidad-ref :is(h1,h2,h3){line-height:inherit;color:inherit}
.especialidad-ref ul{padding:0;list-style:none}
.especialidad-ref :is(button,a,input,select):focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.especialidad-ref [hidden]{display:none!important}
.especialidad-ref .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.especialidad-ref .asset-store{position:absolute;width:0;height:0;overflow:hidden}
.especialidad-ref .icon{display:block;flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.especialidad-ref .page-frame{position:relative;width:calc(1124 * var(--u));margin:0 auto}

/* ---------- Banner ---------- */
.especialidad-ref .hero{position:relative;width:100%;background:#e8f1ff}
.especialidad-ref .hero-stage{position:relative;aspect-ratio:1448 / 196}
.especialidad-ref .hero-art{position:absolute;inset:0;display:block;width:100%;height:100%}
/* Los banners (1448×196) traen dibujada abajo la barra de la referencia
   (x 152-1298, y 157-196 con su sombra), que la barra real tapa justo mientras
   ambas escalan igual. Desde ~1738 px la barra real deja de crecer (--u tope
   1,2 px) y el banner sigue con el ancho: el dibujo asomaba a los lados y
   arriba. Se recorta solo ese rectángulo (queda el fondo del hero, del mismo
   azul); arriba y a los lados de él el banner sigue entero, también el trazo
   de Contratos (x ≥ 1314). Unión de dos capas: la franja superior y los lados,
   que se funden en unos px para que el borde del recorte no se note. */
@media(min-width:1738px){
 .especialidad-ref .hero-art{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(157 / 196 * 100%),transparent 0),linear-gradient(to right,#000 calc(128 / 1448 * 100%),transparent calc(152 / 1448 * 100%) calc(1298 / 1448 * 100%),#000 calc(1313 / 1448 * 100%));
  mask-image:linear-gradient(to bottom,#000 calc(157 / 196 * 100%),transparent 0),linear-gradient(to right,#000 calc(128 / 1448 * 100%),transparent calc(152 / 1448 * 100%) calc(1298 / 1448 * 100%),#000 calc(1313 / 1448 * 100%))}
}
.especialidad-ref .mobile-hero-art{display:none}
/* Especialidades sin ilustración propia: su foto del admin en el lugar de la
   ilustración de Contratos (x 820 a 1240, y 8 a 154 de 1448 x 196), con los
   bordes suaves de aquella. */
.especialidad-ref .hero-photo{position:absolute;left:calc(820 * var(--hero-u));top:calc(8 * var(--hero-u));display:block;width:calc(420 * var(--hero-u));height:calc(146 * var(--hero-u));overflow:hidden;border-radius:calc(30 * var(--hero-u));-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.especialidad-ref :is(.hero-photo,.mobile-hero-photo)>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* Ícono de la etiqueta que no es la imagen de la referencia (el "Ícono de la
   tarjeta" de la categoría o el de siempre): en una placa celeste como aquella. */
.especialidad-ref .category-label-icon--placa{display:grid;place-items:center;flex:none;border-radius:calc(9 * var(--hero-u));background:linear-gradient(160deg,#eaf3fe,#d4e5fc);color:#2b5fd9}
.especialidad-ref .category-label-icon--placa>img{width:62%;height:62%;object-fit:contain}
.especialidad-ref .category-label-icon--placa>i{font-size:calc(19 * var(--hero-u));line-height:1}
/* Títulos de más de 21 letras o descripciones de más de 55: el título baja a
   34 en hasta dos líneas, la columna llega hasta la foto y el banner crece 26. Contratos y los títulos cortos no cambian. */
.especialidad-ref .hero--largo .hero-stage{aspect-ratio:1448 / 222}
/* El fondo no se agranda: queda abajo, con su barra dibujada bajo la real, y los
   26 de arriba son del color de su borde superior. */
.especialidad-ref .hero--largo .hero-art{top:auto;bottom:0;height:auto;aspect-ratio:1448 / 196}
.especialidad-ref .hero.hero--largo{background:#e4ecfa}
.especialidad-ref .hero--largo .hero-copy{width:calc(600 * var(--hero-u))}
.especialidad-ref .hero--largo .hero-copy h1{font-size:calc(31 * var(--hero-u));line-height:calc(36 * var(--hero-u));letter-spacing:calc(-.8 * var(--hero-u));white-space:normal}
.especialidad-ref .hero--largo .hero-photo{height:calc(172 * var(--hero-u))}
.especialidad-ref:has(.hero--largo) .main-decoration{top:calc(222 * var(--hero-u))}
/* Textos que la referencia trae dibujados, en su lugar (medidas en px de la lámina, y - 46). */
.especialidad-ref .hero-copy{position:absolute;left:calc(197 * var(--hero-u));top:calc(13 * var(--hero-u));width:calc(520 * var(--hero-u))}
.especialidad-ref .hero-breadcrumb{display:flex;align-items:center;gap:calc(5 * var(--hero-u));height:calc(17 * var(--hero-u));font-size:calc(11.5 * var(--hero-u));line-height:calc(17 * var(--hero-u));color:#7a8eb8;white-space:nowrap}
.especialidad-ref .hero-breadcrumb a:hover{color:var(--blue)}
/* "Volver" (partials/boton_volver.html, como en las demás páginas internas):
   una píldora de la altura de la ruta, a su izquierda. */
.especialidad-ref .hero-ruta{display:flex;align-items:center;gap:calc(10 * var(--hero-u))}
.especialidad-ref .hero-ruta .boton-volver{flex:none;white-space:nowrap;height:calc(19 * var(--hero-u));margin:0;padding:0 calc(9 * var(--hero-u)) 0 calc(7 * var(--hero-u));gap:calc(4 * var(--hero-u));font-size:calc(11 * var(--hero-u));line-height:1;color:#5a6f9e}
.especialidad-ref .hero-ruta .boton-volver i{font-size:calc(13 * var(--hero-u))}
.especialidad-ref .hero-breadcrumb [aria-current]{color:#a3b4d8}
.especialidad-ref .category-label{display:flex;align-items:center;gap:calc(11 * var(--hero-u));margin-top:calc(8 * var(--hero-u));height:calc(36 * var(--hero-u));font-size:calc(11 * var(--hero-u));line-height:calc(17 * var(--hero-u));font-weight:700;letter-spacing:calc(1.2 * var(--hero-u));text-transform:uppercase;color:#0b1240}
.especialidad-ref .category-label-icon{display:block;width:calc(33 * var(--hero-u));height:calc(36 * var(--hero-u))}
.especialidad-ref .hero-copy h1{margin-top:calc(2 * var(--hero-u));font-size:calc(36 * var(--hero-u));line-height:calc(42 * var(--hero-u));font-weight:800;letter-spacing:calc(-1.1 * var(--hero-u));color:#050608;white-space:nowrap}
.especialidad-ref .hero-subtitle{margin-top:calc(4 * var(--hero-u));font-size:calc(17.5 * var(--hero-u));line-height:calc(24 * var(--hero-u));letter-spacing:calc(-.2 * var(--hero-u));color:#6076bb}

/* ---------- Barra de búsqueda y búsquedas frecuentes ---------- */
.especialidad-ref .search-stage{position:relative;z-index:2;width:calc(980 * var(--u));height:calc(66 * var(--u));margin:0 auto}
.especialidad-ref .search-bar{position:absolute;z-index:15;left:0;right:0;top:calc(-32 * var(--u));height:calc(64 * var(--u));display:grid;grid-template-columns:295fr 342fr 213fr 197fr;gap:calc(10 * var(--u));padding:calc(11 * var(--u)) calc(12 * var(--u));border-radius:calc(15 * var(--u));background:#fff;box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) #749bfa1b}
.especialidad-ref :is(.search-field,.filters-toggle){position:relative;display:flex;align-items:center;min-width:0;height:calc(42 * var(--u));border:1px solid #d9e4ff;border-radius:calc(10 * var(--u));background:#fff;color:#435b94;text-align:left}
.especialidad-ref :is(.search-field,.filters-toggle)>.icon:first-child{position:absolute;left:calc(15 * var(--u));width:calc(19 * var(--u));height:calc(19 * var(--u));color:#0b1755}
.especialidad-ref :is(.search-field,.filters-toggle)>.icon:last-child{position:absolute;right:calc(15 * var(--u));width:calc(15 * var(--u));height:calc(15 * var(--u));pointer-events:none;color:#0b1755}
.especialidad-ref .search-field>span{display:block;overflow:hidden;width:100%;padding:0 calc(38 * var(--u)) 0 calc(44 * var(--u));font-size:calc(14 * var(--u));white-space:nowrap;text-overflow:ellipsis}
.especialidad-ref .filters-toggle{padding:0 calc(40 * var(--u)) 0 calc(53 * var(--u));font-size:calc(14 * var(--u))}
/* Primera celda: campo de texto (la referencia dibuja ahí "Seleccionar región"). */
.especialidad-ref .keyword-field{cursor:text}
.especialidad-ref .keyword-field>.icon:first-child{color:#0b1755}
.especialidad-ref .keyword-field>input{width:100%;height:100%;min-width:0;padding:0 calc(12 * var(--u)) 0 calc(44 * var(--u));border:0;border-radius:inherit;background:transparent;color:#0b1755;font-size:calc(14 * var(--u));outline:0;-webkit-appearance:none;appearance:none}
.especialidad-ref .keyword-field>input::placeholder{color:#435b94;opacity:1}
.especialidad-ref .keyword-field:focus-within{border-color:#7fa6ff;box-shadow:0 0 0 3px #0057ff1f}
/* Comuna: un select real con el aspecto de la celda de la referencia. */
.especialidad-ref .commune-field>select{width:100%;height:100%;min-width:0;padding:0 calc(38 * var(--u)) 0 calc(44 * var(--u));border:0;border-radius:inherit;background:transparent;color:#435b94;font-size:calc(14 * var(--u));text-overflow:ellipsis;cursor:pointer;outline:0;-webkit-appearance:none;appearance:none}
.especialidad-ref .commune-field:focus-within{border-color:#7fa6ff;box-shadow:0 0 0 3px #0057ff1f}
.especialidad-ref :is(.search-field,.filters-toggle):hover{border-color:#a9c2ff}
.especialidad-ref .search-submit{display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--u));height:calc(42 * var(--u));border-radius:calc(10 * var(--u));background:var(--blue);color:#fff;font-size:calc(14 * var(--u));font-weight:700}
.especialidad-ref .search-submit:hover{background:#0049da}
.especialidad-ref .search-submit .icon{width:calc(19 * var(--u));height:calc(19 * var(--u))}
.especialidad-ref .popular-searches{position:absolute;top:calc(34 * var(--u));left:calc(27 * var(--u));display:flex;align-items:center;gap:calc(18 * var(--u));font-size:calc(11.5 * var(--u));line-height:calc(18 * var(--u));white-space:nowrap}
.especialidad-ref .popular-searches>div{display:flex;align-items:center;gap:calc(10 * var(--u))}
.especialidad-ref .popular-searches a{padding:calc(4 * var(--u)) calc(13 * var(--u));border:2px solid #fff;border-radius:999px;background:#f0f6ff;color:var(--blue);font-size:calc(11 * var(--u));line-height:calc(18 * var(--u));box-shadow:0 3px 10px #6c95d923}
.especialidad-ref .popular-searches a:hover{background:#e2edff}
/* Panel "Filtros": el de /buscar/ (search/panel_filtros.html, estilos en
   busqueda.css) dentro del formulario de la barra. En escritorio se despliega
   bajo la barra, sobre las especialidades y los resultados; bajo 1100 px va en
   el flujo, entre la barra y las especialidades. Se repiten aquí las medidas de
   busqueda.css que pisan los ajustes de .especialidad-ref (button, p, select). */
/* Abierto, la barra queda sobre los resultados (el corazón de las tarjetas también usa z-index 2). */
.especialidad-ref .search-stage:has(.fc-filtros--especialidad:not([hidden])){z-index:20}
.especialidad-ref .filters-toggle[aria-expanded="true"]{border-color:#7fa6ff;background:#f4f8ff}
.especialidad-ref .filters-toggle[aria-expanded="true"]>.icon:last-child{transform:rotate(180deg)}
.especialidad-ref .filters-count{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:7px;padding:0 5px;border-radius:9px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;line-height:1}
.especialidad-ref .fc-filtros--especialidad{--bus-tinta:#0b1b44;--bus-texto:#3a4b6b;--bus-azul:#1f6cf5;--bus-naranjo:#ff6a1a;--bus-borde:#d6dfeb;--bus-estrella:#ffb21a;position:absolute;z-index:16;top:calc(35 * var(--u) + 10px);left:0;right:0;color:var(--bus-tinta);font-size:13px;line-height:1.4}
.especialidad-ref .fc-filtros--especialidad .fc-filtros__form{padding:18px 22px 20px;border:1px solid #d9e4ff;border-radius:calc(16 * var(--u));box-shadow:0 18px 40px -12px #1e3c6e40}
.especialidad-ref .fc-filtros--especialidad .fc-filtros__cabecera h2{color:var(--bus-tinta);font-size:15px;line-height:20px;font-weight:700}
.especialidad-ref .fc-filtros--especialidad .fc-filtros__cerrar{display:grid;width:30px;height:30px;place-items:center;border-radius:8px;background:#eef4ff;color:var(--bus-azul);font-size:20px;cursor:pointer}
.especialidad-ref .fc-filtros--especialidad .fc-filtros__contenido{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr) 190px;gap:10px 32px;margin-top:14px}
.especialidad-ref .fc-filtros--especialidad .fc-filtros__categorias{grid-template-columns:minmax(0,1fr)}
.especialidad-ref .fc-filtros--especialidad .fc-filtros__grupo{grid-row:1 / 3;margin:0}
.especialidad-ref .fc-filtros--especialidad .fc-filtros__select select{font-size:12.5px;color:var(--bus-texto)}
.especialidad-ref .fc-filtros--especialidad .fc-filtros__rango-texto{margin:12px 0 0}
.especialidad-ref .fc-filtros--especialidad .fc-filtros__aplicar{grid-column:4;grid-row:1;align-self:end;display:block;width:100%;height:38px;margin:0;border-radius:8px;background:var(--bus-azul);color:#fff;font-size:13.5px;font-weight:600}
.especialidad-ref .fc-filtros--especialidad .fc-filtros__aplicar:hover{background:#155ad6}
.especialidad-ref .fc-filtros--especialidad .fc-filtros__limpiar{grid-column:4;grid-row:2;align-self:start;height:38px;margin:0;color:#1d2d55}
@media(max-width:1100px){
 .especialidad-ref .fc-filtros--especialidad{position:static;margin-top:12px}
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__form{border-radius:14px;box-shadow:0 6px 18px #749bfa1b}
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__contenido{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 24px}
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__grupo{grid-row:auto}
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__aplicar{grid-column:3;grid-row:2}
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__limpiar{grid-column:2;grid-row:2}
}
@media(max-width:900px){
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__contenido{grid-template-columns:repeat(2,minmax(0,1fr))}
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__aplicar{grid-column:2;grid-row:3}
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__limpiar{grid-column:1;grid-row:3}
}
@media(max-width:700px){
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__form{padding:16px 14px 16px}
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__contenido{grid-template-columns:minmax(0,1fr);gap:18px}
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__aplicar,.especialidad-ref .fc-filtros--especialidad .fc-filtros__limpiar{grid-column:auto;grid-row:auto}
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__aplicar{margin-top:4px}
 .especialidad-ref .fc-filtros--especialidad .fc-filtros__limpiar{margin-top:-8px}
}
.especialidad-ref .primary-button{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:9px;background:var(--blue);color:#fff;font-size:14px;font-weight:700}

/* ---------- Resultados ---------- */
.especialidad-ref .results{scroll-margin-top:20px}
.especialidad-ref .results-toolbar{height:calc(26 * var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 0 0 calc(2 * var(--u));font-size:calc(12 * var(--u));line-height:calc(18 * var(--u))}
/* "Ordenar por": el orden real de la lista; sin selector porque la vista no ofrece otros. */
.especialidad-ref .sort-field{position:relative;display:flex;align-items:center;height:calc(26 * var(--u));border:1px solid #dfebff;border-radius:calc(6 * var(--u));background:#fff;font-size:calc(10 * var(--u));line-height:calc(15 * var(--u));white-space:nowrap}
.especialidad-ref .sort-field>span{padding:0 calc(9 * var(--u));color:#647cc0}
.especialidad-ref .sort-field>select{height:100%;min-width:calc(119 * var(--u));padding:0 calc(24 * var(--u)) 0 calc(10 * var(--u));border:0;border-left:1px solid #ecf2ff;border-radius:0 calc(6 * var(--u)) calc(6 * var(--u)) 0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1447' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right calc(8 * var(--u)) center/calc(11 * var(--u));color:#0a1447;font-size:calc(9.5 * var(--u));font-weight:700;cursor:pointer;outline:0;-webkit-appearance:none;appearance:none}
.especialidad-ref .sort-field:focus-within{border-color:#7fa6ff}
.especialidad-ref .sort-field>b{display:flex;align-items:center;height:100%;min-width:calc(119 * var(--u));padding:0 calc(24 * var(--u)) 0 calc(10 * var(--u));border-left:1px solid #ecf2ff;color:#0a1447;font-size:calc(9.5 * var(--u));font-weight:700}
.especialidad-ref .profiles-layout{position:relative;margin-top:calc(6 * var(--u))}
/* Cuatro columnas de 269 con huecos de 16: los 1124 del marco, como las x de la referencia. */
.especialidad-ref .profiles-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(16 * var(--u));row-gap:calc(3 * var(--u))}
/* Tres columnas bajo 1440 (2026-10-27), como /buscar/ (css/busqueda.css): con cuatro, a
   1280 cada tarjeta medía 236 px y su letra quedaba en miniatura. Bajo 1100 siguen las
   dos de las media queries de la referencia, más abajo. */
@media(max-width:1439.98px){.especialidad-ref .profiles-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Paginación debajo de las tarjetas, centrada (pedido del usuario, 2026-10-08: en la
   referencia va en la celda libre junto a la última tarjeta). */
.especialidad-ref .pagination{display:flex;grid-column:1/-1;align-items:center;justify-content:center;gap:calc(10 * var(--u));margin-top:calc(24 * var(--u))}
.especialidad-ref .pagination>*{width:calc(35 * var(--u));height:calc(32 * var(--u));display:grid;place-items:center;border:1px solid #deebff;border-radius:calc(7 * var(--u));background:#fff;color:#8caae7;font-size:calc(18 * var(--u));line-height:1}
.especialidad-ref .pagination a:hover{border-color:#aac6ff;color:var(--blue)}
.especialidad-ref .pagination .current-page{width:calc(32 * var(--u));background:var(--blue);color:#fff;border-color:#aac6ff;box-shadow:0 3px 8px #547bcd22}
.especialidad-ref .empty-state{padding:32px 16px;text-align:center;border:1px solid #d8e7ff;border-radius:14px;background:#fff}
.especialidad-ref .empty-state h2{font-size:18px;line-height:25px;font-weight:700;margin-bottom:18px}

/* ---------- Tarjeta (en la referencia, recorte de su lámina de 269 x 330) ----------
   Medidas en --cu = 1/269 del ancho de la tarjeta, sobre la lámina: portada
   0-104; avatar de 54 con aro blanco centrado en (47, 80); corazón de 36 en
   x 223, y 4; estado en y 107; nombre y nota en 124; profesión y plan en 145;
   años y lugar en 162; descripción de tres líneas en 183; tres temas en 229;
   trabajos y tarifa en 259; "Ver perfil" de 31 en 291. */
/* align-self:start — el mismo escape que ya usa la tarjeta premium
   (css/tarjeta-destacada-ref.css). Sin él, en una fila que mezcla las dos, esta
   se estiraba al alto de la premium, que es más alta (1024/1536 frente a
   269/330): su fondo blanco crecía con la caja pero el contenido no, porque
   está colocado en coordenadas de --cu, que sale del ancho. Quedaba una franja
   blanca vacía bajo el botón —73 px a 1440, 133 px a 1024— que se leía como una
   caja blanca alrededor de la tarjeta. Con esto la tarjeta vuelve a medir lo
   suyo y el contenido no se mueve ni un píxel: nada de lo de adentro depende
   del alto. A 430 y 390 nunca pasó, porque hay una tarjeta por fila. */
/* Paleta del admin, fila «Sin plan»: esta es la tarjeta de quien no paga plan en
   la página de especialidad (con plan va la lámina de partials/tarjeta_destacada.html,
   que lee las mismas variables). Es otro diseño que el del buscador, así que la
   paleta alcanza a lo que aquí existe: textos, etiquetas, cifras y botón. No hay
   marco de color que configurar. Cada var() cae en el valor de siempre. */
.especialidad-ref .profile-card{font-family:var(--fcpro-fuente,inherit);position:relative;container-type:inline-size;min-width:0;aspect-ratio:269 / 330;align-self:start;border-radius:calc(14 * var(--u));background:#fff;box-shadow:0 calc(3 * var(--u)) calc(10 * var(--u)) #3a6fd51c}
.especialidad-ref .profile-card>*{--cu:calc(100cqw / 269)}
/* Gold y Silver no se marcan sobre esta tarjeta: llevan la lámina entera de
   partials/tarjeta_destacada.html (css/tarjeta-destacada-ref.css). Lo que queda
   abajo con --gold/--silver ya no lo pinta nadie en esta página. */
.especialidad-ref .pc-cover{position:absolute;left:0;right:0;top:0;height:calc(110 * var(--cu));overflow:hidden;border-radius:calc(14 * var(--cu)) calc(14 * var(--cu)) 0 0;background:linear-gradient(135deg,#dfe9fb,#bcd3f8)}
.especialidad-ref .pc-cover>img{display:block;width:100%;height:100%;object-fit:cover}
.especialidad-ref .pc-cover__lateral{position:absolute;left:0;top:calc(28 * var(--cu));width:calc(30 * var(--cu));height:calc(86 * var(--cu));border-radius:0 calc(26 * var(--cu)) calc(26 * var(--cu)) 0;background:linear-gradient(180deg,#2a74ff,#0c45d8)}
.especialidad-ref .pc-cover__puntos{position:absolute;left:calc(4 * var(--cu));top:calc(58 * var(--cu));width:calc(18 * var(--cu));height:calc(26 * var(--cu));background:radial-gradient(circle,#ffffffc0 0 calc(1 * var(--cu)),transparent calc(1.3 * var(--cu))) 0 0/calc(4.5 * var(--cu)) calc(4.5 * var(--cu))}
.especialidad-ref .pc-cover__arco{position:absolute;right:calc(-40 * var(--cu));top:calc(46 * var(--cu));width:calc(96 * var(--cu));height:calc(96 * var(--cu));border-radius:50%;background:radial-gradient(circle at 30% 35%,#ffffff 0,#e6eaf2 35%,#aeb7c6 70%,#8d97a8 100%);opacity:.9}
.especialidad-ref .profile-card:not(.profile-card--gold,.profile-card--silver) .pc-cover__arco{display:none}
.especialidad-ref .pc-cover__destello{position:absolute;width:calc(9 * var(--cu));height:calc(9 * var(--cu));background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.especialidad-ref .pc-cover__destello--1{left:calc(11 * var(--cu));top:calc(46 * var(--cu))}
.especialidad-ref .pc-cover__destello--2{left:calc(245 * var(--cu));top:calc(65 * var(--cu))}
.especialidad-ref .pc-body{position:absolute;left:0;right:0;top:calc(96 * var(--cu));bottom:0;border-radius:calc(14 * var(--cu));background:#fff}
/* La cinta de «Destacado»: 10 calificaciones válidas como freelancer. Antes
   salía con el plan Gold, que es otra cosa. Con plan, esta tarjeta no se usa:
   la lámina de la membresía lleva su propia cinta. */
.especialidad-ref .pc-destacado{position:absolute;z-index:1;left:calc(4 * var(--cu));top:calc(4 * var(--cu));width:auto;height:calc(34 * var(--cu))}
.especialidad-ref .favorite-button{position:absolute;z-index:2;left:calc(223 * var(--cu));top:calc(4 * var(--cu));display:grid;place-items:center;width:calc(36 * var(--cu));aspect-ratio:1;background:#fff;border:1px solid #e7edff;border-radius:50%;box-shadow:0 2px 4px #0b2b6826;color:#0758ff}
.especialidad-ref .favorite-button .icon{width:53%;height:53%;stroke-width:2}
/* El avatar, a la misma escala que el de la tarjeta de /buscar/ (30 % del ancho de la
   tarjeta, .fc-resultado__foto): las dos tarjetas sin plan son la misma pieza para el
   usuario y no pueden verse con avatares distintos. */
.especialidad-ref .pc-avatar{position:absolute;left:calc(12 * var(--cu));top:calc(38 * var(--cu));width:calc(80 * var(--cu));height:calc(80 * var(--cu))}
.especialidad-ref .pc-avatar>img{display:block;width:100%;height:100%;border:calc(3 * var(--cu)) solid #fff;border-radius:50%;object-fit:cover;background:#eef2f8;box-shadow:0 calc(2 * var(--cu)) calc(6 * var(--cu)) #0b2b6833}
.especialidad-ref .pc-avatar__presencia{position:absolute;left:calc(47.5 * var(--cu));top:calc(52.5 * var(--cu));width:calc(11.25 * var(--cu));height:calc(11.25 * var(--cu));border:calc(1.9 * var(--cu)) solid #fff;border-radius:calc(3.75 * var(--cu));background:#2fc35a}
.especialidad-ref .pc-avatar__presencia--fuera{background:#a9b4c9}
.especialidad-ref .pc-estado{position:absolute;left:calc(15 * var(--cu));top:calc(107 * var(--cu));display:inline-flex;align-items:center;gap:calc(4 * var(--cu));height:calc(16 * var(--cu));padding:0 calc(8 * var(--cu)) 0 calc(6 * var(--cu));border-radius:999px;background:#ddf5e3;color:#147a37;font-size:calc(8.2 * var(--cu));font-weight:700;white-space:nowrap}
.especialidad-ref .pc-estado>span{width:calc(6 * var(--cu));height:calc(6 * var(--cu));border-radius:50%;background:#21b04b}
.especialidad-ref .pc-estado--fuera{background:#eef1f6;color:#64708b}
.especialidad-ref .pc-estado--fuera>span{background:#a9b4c9}
.especialidad-ref .pc-cabecera{position:absolute;left:calc(17 * var(--cu));right:calc(22 * var(--cu));top:calc(124 * var(--cu));display:flex;align-items:center;justify-content:space-between;gap:calc(6 * var(--cu));height:calc(16 * var(--cu))}
.especialidad-ref .pc-cabecera h3{display:flex;align-items:center;gap:calc(5 * var(--cu));min-width:0;overflow:hidden;font-size:calc(12.6 * var(--cu) * var(--fcpro-nombre-escala,1));line-height:calc(16 * var(--cu));font-weight:var(--fcpro-nombre-peso,700);letter-spacing:calc(-.15 * var(--cu));color:var(--fcpro-nombre-color,#0b1240);white-space:nowrap}
.especialidad-ref .pc-verificado{flex:none;font-size:calc(14 * var(--cu));line-height:1;color:var(--fcpro-acento,#1d63ff)}
.especialidad-ref .pc-nota{display:flex;flex:none;align-items:center;gap:calc(3 * var(--cu));font-size:calc(11 * var(--cu));font-weight:700;color:var(--fcpro-nota-color,#0b1240);white-space:nowrap}
.especialidad-ref .pc-nota>i{font-size:calc(14 * var(--cu));line-height:1;color:var(--fcpro-estrella-color,var(--fcpro-acento,#ffb400))}
.especialidad-ref .pc-nota>span{font-weight:500;color:var(--fcpro-nota-cantidad-color,#2958e8)}
.especialidad-ref .pc-linea{position:absolute;left:calc(17 * var(--cu));right:calc(22 * var(--cu));top:calc(145 * var(--cu));display:flex;align-items:center;gap:calc(7 * var(--cu));height:calc(15 * var(--cu))}
.especialidad-ref .pc-profesion{min-width:0;overflow:hidden;font-size:calc(10.6 * var(--cu) * var(--fcpro-profesion-escala,1));font-weight:var(--fcpro-profesion-peso,inherit);line-height:calc(14 * var(--cu));color:var(--fcpro-profesion-color,#3049d4);text-overflow:ellipsis;white-space:nowrap}
.especialidad-ref .profile-card--gold .pc-profesion{color:#e5482a}
.especialidad-ref .pc-plan{display:inline-flex;flex:none;align-items:center;gap:calc(3 * var(--cu));height:calc(15 * var(--cu));padding:0 calc(7 * var(--cu));border-radius:calc(8 * var(--cu));background:#e9edf3;color:#1b2033;font-size:calc(9.4 * var(--cu));font-weight:700}
/* El chip del plan ya no se dibuja: el plan trae su tarjeta completa. */
.especialidad-ref .pc-datos{position:absolute;left:calc(17 * var(--cu));right:calc(22 * var(--cu));top:calc(162 * var(--cu));display:flex;align-items:center;height:calc(15 * var(--cu));font-size:calc(10 * var(--cu));color:var(--fcpro-meta-color,#0b1240);white-space:nowrap}
.especialidad-ref .pc-datos>li{display:flex;align-items:center;gap:calc(8 * var(--cu));min-width:0;overflow:hidden;text-overflow:ellipsis}
.especialidad-ref .pc-datos>li+li{margin-left:calc(15 * var(--cu));padding-left:calc(15 * var(--cu));border-left:1px solid #dfe6f3;color:var(--fcpro-meta-color,#4a5f9a)}
.especialidad-ref .pc-datos i{flex:none;font-size:calc(14 * var(--cu));line-height:1;color:var(--fcpro-meta-color,#0b1240)}
.especialidad-ref .pc-descripcion{position:absolute;left:calc(17 * var(--cu));right:calc(24 * var(--cu));top:calc(183 * var(--cu));display:-webkit-box;overflow:hidden;font-size:calc(9.3 * var(--cu) * var(--fcpro-descripcion-escala,1));line-height:calc(12.6 * var(--cu));color:var(--fcpro-descripcion-color,#4c61a6);-webkit-line-clamp:3;-webkit-box-orient:vertical}
.especialidad-ref .pc-temas{position:absolute;left:calc(14 * var(--cu));right:calc(14 * var(--cu));top:calc(229 * var(--cu));display:flex;gap:calc(5 * var(--cu));height:calc(21 * var(--cu));overflow:hidden}
.especialidad-ref .pc-temas>li{display:inline-flex;align-items:center;gap:calc(4 * var(--cu));min-width:0;padding:0 calc(8 * var(--cu));border-radius:calc(10 * var(--cu));background:var(--fcpro-tag-fondo,var(--fcpro-secundario,#edf3ff));color:var(--fcpro-tag-texto,var(--fcpro-principal,#1d4fd8));box-shadow:inset 0 0 0 calc(1 * var(--cu)) var(--fcpro-tag-borde,transparent);font-size:calc(8 * var(--cu));font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.especialidad-ref .pc-temas i{flex:none;font-size:calc(10 * var(--cu));line-height:1}
.especialidad-ref .pc-cifras{position:absolute;left:calc(14 * var(--cu));right:calc(14 * var(--cu));top:calc(259 * var(--cu));display:grid;grid-template-columns:110fr 121fr;gap:calc(10 * var(--cu));height:calc(29 * var(--cu))}
.especialidad-ref .pc-cifra{display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--cu));min-width:0;overflow:hidden;border-radius:calc(8 * var(--cu));background:var(--fcpro-cifra-trabajos-fondo,var(--fcpro-secundario,#f1f5fb));color:var(--fcpro-cifra-color,#0b1240);font-size:calc(9.6 * var(--cu));font-weight:700;white-space:nowrap}
.especialidad-ref .pc-cifra>i{flex:none;font-size:calc(15 * var(--cu));line-height:1;color:var(--fcpro-acento,#1b2033)}
/* La tarifa no se tiñe por plan: con plan va la lámina. */
.especialidad-ref .pc-cifra--sin-tarifa{font-weight:600;color:var(--fcpro-cifra-etiqueta-color,#53627f)}
.especialidad-ref .profile-button{position:absolute;left:calc(14 * var(--cu));right:calc(14 * var(--cu));top:calc(291 * var(--cu));display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--cu));height:calc(31 * var(--cu));border-radius:calc(8 * var(--cu));background:var(--fcpro-boton-fondo,linear-gradient(180deg,#1f6dff,#0a54f5));color:var(--fcpro-boton-texto,#fff);font-size:calc(12.5 * var(--cu));font-weight:500;box-shadow:inset 0 0 0 calc(1.5 * var(--cu)) var(--fcpro-boton-borde,transparent),0 calc(3 * var(--cu)) calc(8 * var(--cu)) var(--fcpro-boton-sombra,#0b55f52e)}
.especialidad-ref .profile-button:hover{background:var(--fcpro-boton-hover,#0049da);color:var(--fcpro-boton-texto,#fff)}
.especialidad-ref .profile-button .icon{width:calc(15 * var(--cu));height:calc(15 * var(--cu));stroke-width:2}

/* ---------- Decoraciones laterales de la referencia ---------- */
.especialidad-ref .main-decoration{position:absolute;top:calc(196 * var(--hero-u));height:calc(727 * var(--u));pointer-events:none}
.especialidad-ref .main-decoration-left{left:0;width:calc(162 * var(--u))}
.especialidad-ref .main-decoration-right{right:0;width:calc(158 * var(--u))}

/* ---------- Media queries de la referencia (sin cabecera ni footer) ---------- */
@media(max-width:1100px){
 .especialidad-ref{--u:1px;font-size:14px;padding-bottom:24px}
 .especialidad-ref .page-frame{width:calc(100% - 32px)}
 .especialidad-ref .hero-stage{aspect-ratio:auto;padding:18px 16px 28px;background:radial-gradient(ellipse at 80% 50%,#dce9ff,transparent 65%),linear-gradient(110deg,#edf4ff,#e6f0ff)}
 .especialidad-ref .hero-art{display:none}
 .especialidad-ref .hero-copy{position:static;width:auto}
 .especialidad-ref .hero-breadcrumb{gap:6px;height:auto;margin-bottom:15px;font-size:11px;line-height:17px;color:#7b98d2;white-space:normal;flex-wrap:wrap}
 .especialidad-ref .hero-breadcrumb [aria-current]{color:#94afe4}
 .especialidad-ref .hero-ruta{align-items:flex-start;gap:10px;margin-bottom:15px}
 .especialidad-ref .hero-ruta .hero-breadcrumb{margin-bottom:0}
 .especialidad-ref .hero-ruta .boton-volver{height:22px;padding:0 10px 0 8px;gap:5px;font-size:12px}
 .especialidad-ref .hero-ruta .boton-volver i{font-size:14px}
 .especialidad-ref .category-label{gap:10px;margin-top:0;height:auto;font-size:11px;line-height:17px;letter-spacing:1px}
 .especialidad-ref .category-label-icon{width:33px;height:36px}
 .especialidad-ref .hero-copy h1{font-size:34px;line-height:40px;font-weight:900;margin-top:3px;letter-spacing:-.8px;white-space:normal}
 .especialidad-ref .hero-photo{display:none}
 .especialidad-ref .hero--largo .hero-stage{aspect-ratio:auto}
 .especialidad-ref .hero--largo .hero-copy{width:auto}
 .especialidad-ref .hero--largo .hero-copy h1{font-size:32px;line-height:38px;letter-spacing:-.8px}
 .especialidad-ref .hero-subtitle{font-size:18px;line-height:26px;margin-top:3px;letter-spacing:0}
 .especialidad-ref .mobile-hero-art{display:block;width:min(720px,100%);height:auto;aspect-ratio:660 / 166;margin:16px auto 0}
 .especialidad-ref .mobile-hero-photo{overflow:hidden;border-radius:16px;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%)}
 .especialidad-ref .category-label-icon--placa{border-radius:9px}
 .especialidad-ref .category-label-icon--placa>i{font-size:19px}
 .especialidad-ref .search-stage{width:calc(100% - 32px);height:auto;padding:0 0 20px}
 .especialidad-ref .search-bar{position:relative;left:auto;right:auto;top:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;height:auto;padding:14px;margin-top:-12px;border-radius:14px}
 .especialidad-ref :is(.search-field,.filters-toggle){height:46px;border-radius:10px}
 .especialidad-ref .search-field>span{font-size:14px;padding:0 38px 0 42px}
 .especialidad-ref .keyword-field>input{font-size:14px;padding:0 12px 0 42px}
 .especialidad-ref .commune-field>select{font-size:14px;padding:0 38px 0 42px}
 .especialidad-ref .sort-field>select{min-width:150px;font-size:11px;padding:0 24px 0 8px;background-position:right 8px center;background-size:11px}
 .especialidad-ref :is(.search-field,.filters-toggle)>.icon:first-child{left:12px;width:20px;height:20px}
 .especialidad-ref :is(.search-field,.filters-toggle)>.icon:last-child{right:12px;width:13px;height:13px}
 .especialidad-ref .filters-toggle{font-size:14px;padding:0 35px 0 42px}
 .especialidad-ref .search-submit{height:46px;gap:10px;border-radius:10px;font-size:14px}
 .especialidad-ref .search-submit .icon{width:21px;height:21px}
 .especialidad-ref .popular-searches{position:static;display:block;padding:14px 2px 0;font-size:12px;line-height:18px;white-space:normal}
 .especialidad-ref .popular-searches>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
 .especialidad-ref .popular-searches a{font-size:11px;line-height:17px;padding:4px 10px}
 .especialidad-ref .results-toolbar{height:auto;min-height:32px;gap:12px;font-size:13px;line-height:19px;padding:0}
 .especialidad-ref .sort-field{height:30px;border-radius:6px;font-size:10px;line-height:15px}
 .especialidad-ref .sort-field>span{padding:0 8px}
 .especialidad-ref .sort-field>b{min-width:119px;font-size:10px;padding:0 23px 0 8px}
 .especialidad-ref .profiles-layout{margin-top:12px}
 .especialidad-ref .profiles-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
 .especialidad-ref .profile-card{border-radius:14px}
 .especialidad-ref .favorite-button{box-shadow:0 2px 5px #0b2b6826}
 .especialidad-ref .pagination{grid-column:1/-1;justify-content:center;gap:10px;margin:0;padding:20px 0}
 .especialidad-ref .pagination>*{width:35px;height:32px;border-radius:7px;font-size:18px}
 .especialidad-ref .pagination .current-page{width:32px}
 .especialidad-ref .main-decoration{display:none}
}
@media(max-width:600px){
 .especialidad-ref .hero-copy h1{font-size:28px;line-height:34px}
 .especialidad-ref .hero--largo .hero-copy h1{font-size:26px;line-height:32px}
 .especialidad-ref .hero-subtitle{font-size:17px;line-height:24px}
 .especialidad-ref .results-toolbar{align-items:flex-start;flex-wrap:wrap;gap:10px}
 .especialidad-ref .results-toolbar>p{padding-top:5px}
 .especialidad-ref .profiles-grid{grid-template-columns:minmax(0,1fr);gap:16px;width:min(380px,100%);margin-left:auto;margin-right:auto}
 .especialidad-ref .sort-field{margin-left:auto}
 .especialidad-ref :is(.keyword-field,.commune-field){grid-column:1/-1}
}
@media(max-width:380px){
 .especialidad-ref .search-bar{padding:12px;gap:10px}
 .especialidad-ref .search-field>span{font-size:12px;padding:0 29px 0 35px}
 .especialidad-ref .keyword-field>input{font-size:12px;padding:0 9px 0 35px}
 .especialidad-ref .commune-field>select{font-size:12px;padding:0 29px 0 35px}
 .especialidad-ref .search-field>.icon:first-child{left:9px;width:18px;height:18px}
 .especialidad-ref .search-field>.icon:last-child{right:9px;width:11px;height:11px}
 .especialidad-ref .sort-field{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.especialidad-ref *{scroll-behavior:auto}}
/* CMS Fase 5 (2026-10-09): banner subido en el admin. Se recorta (cover) para llenar el mismo
   recuadro que la ilustración original, sin deformarse; sin banner subido no se usa. */
.especialidad-ref .hero-art--propio,.especialidad-ref .mobile-hero-art--propio{object-fit:cover;object-position:center}