/* Página de categorías (templates/category/index.html): el cuerpo de
   referencias/FreelanClick_CATEGORIAS_CORREGIDAS/styles.css con sus mismos valores.
   Cambios respecto de la referencia, solo los necesarios:
   - todo acotado a .categorias-ref (la página usa la cabecera y el footer
     globales, Bootstrap y style.css): sus :root, body, *, a, button, form y
     encabezados pasan a .categorias-ref, y se neutralizan reglas globales del
     sitio que la referencia no tiene (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 y la del inicio, en vez de sus BodySans y
     HeadingSans (mismos tamaños y pesos);
   - la tarjeta de categoría, que en la referencia es un recorte de su lámina,
     se arma en HTML (bloque "Tarjeta"), medida sobre esa lámina (1u = 1 px de
     la lámina de 948 px). */

/* La escala (--u, 1 px de la lámina de 948) se mide con el ancho de la página (100cqw), no con
   el de la ventana (100vw), que incluye la barra de desplazamiento: con 100vw el contenido
   quedaba tan ancho como la barra más allá del borde y aparecía scroll horizontal (2026-10-14). */
.categorias-ref{container-type:inline-size;--u:min(calc(100cqw / 948),1.3502px);--blue:#0063ff;--navy:#070e39;--muted:#8794ba;display:block;font-family:var(--fc-marca-fuente,'Inter',Arial,sans-serif);font-size:calc(13*var(--u));line-height:normal;color:var(--navy);background:#fff;padding-bottom:calc(17*var(--u))}
.categorias-ref *,.categorias-ref *::before,.categorias-ref *::after{box-sizing:border-box}
.categorias-ref :is(h1,h2,h3,p,ul){margin:0}
.categorias-ref :is(h1,h2,h3){color:inherit;line-height:inherit}
.categorias-ref ul{padding:0}
.categorias-ref :is(button,input,select){font:inherit;color:inherit}
.categorias-ref button{cursor:pointer;border:0;background:none;padding:0}
.categorias-ref a{color:inherit;text-decoration:none}
.categorias-ref form{width:auto;margin:0}
.categorias-ref :is(button,a,input,select):focus-visible{outline:2px solid #ff9600;outline-offset:3px}
.categorias-ref [hidden]{display:none!important}
.categorias-ref .icon{height:24px;width:24px;display:block;flex:none}
.categorias-ref .source-art{width:100%;height:100%;display:block;overflow:hidden}
.categorias-ref .asset-store{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.categorias-ref .site-frame{position:relative;width:calc(948*var(--u));margin:0 auto}
.categorias-ref .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}
.categorias-ref .eyebrow{font-size:calc(8.5*var(--u));line-height:calc(11*var(--u));letter-spacing:calc(2*var(--u));font-weight:700;text-transform:uppercase;color:var(--muted)}

/* ---------- Encabezado ---------- */
.categorias-ref .hero{background:#f0f7ff}
.categorias-ref .hero-stage{height:calc(273*var(--u));background:linear-gradient(105deg,#f0f7ff,#edf5ff 60%,#f2f8ff)}
.categorias-ref .hero-art{position:absolute;inset:0;object-fit:fill}
.categorias-ref .hero-copy{position:absolute;left:calc(53*var(--u));top:calc(33*var(--u));width:calc(448*var(--u))}
.categorias-ref .hero-copy h1{font-weight:900;font-size:calc(26.6*var(--u));line-height:calc(30*var(--u));letter-spacing:calc(-.8*var(--u));margin-top:calc(4*var(--u));white-space:nowrap}
.categorias-ref .hero-description{font-size:calc(13*var(--u));line-height:calc(16*var(--u));letter-spacing:calc(-.1*var(--u));color:var(--muted);margin-top:calc(10*var(--u))}
.categorias-ref .mobile-hero-art{display:none}
/* Foto del admin (SiteAsset categorias.hero), si la hay: en el marco de la foto de la referencia. */
.categorias-ref .hero-photo{position:absolute;left:calc(548*var(--u));top:calc(14*var(--u));width:calc(357*var(--u));height:calc(252*var(--u));object-fit:cover;border-radius:calc(22*var(--u))}
.categorias-ref .category-search{position:absolute;left:calc(53*var(--u));top:calc(167*var(--u));width:calc(463*var(--u));height:calc(41*var(--u));border-radius:calc(10*var(--u));border:calc(1*var(--u)) solid #f1f6ff;background:#fff;box-shadow:0 calc(5*var(--u)) calc(13*var(--u)) #1e6bd416;display:flex;padding:calc(2*var(--u));gap:calc(4*var(--u))}
.categorias-ref .search-field{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:calc(11*var(--u));padding-left:calc(11*var(--u));margin:0}
.categorias-ref .search-icon{height:calc(15*var(--u));width:calc(15*var(--u));flex:none;color:#2b3b63}
.categorias-ref .search-field input{min-width:0;width:100%;height:100%;border:0;padding:0;background:transparent;font-size:calc(10*var(--u));outline-offset:1px}
.categorias-ref .search-field input::placeholder{color:#8190b4;opacity:1}
.categorias-ref .search-field .search-filters__suggestions{top:calc(100% + 8px);z-index:30;font-size:14px}
.categorias-ref .search-submit{width:calc(94*var(--u));border-radius:calc(7*var(--u));background:linear-gradient(105deg,#0063ff,#0050ef);color:white;font-size:calc(10.5*var(--u));box-shadow:0 0 0 calc(1*var(--u)) #649aff inset}
.categorias-ref .popular-searches{position:absolute;left:calc(53*var(--u));top:calc(215*var(--u));width:calc(462*var(--u))}
.categorias-ref .popular-searches>p{font-size:calc(9*var(--u));line-height:calc(12*var(--u));color:#67789d}
.categorias-ref .popular-tags{display:flex;gap:calc(6*var(--u));margin-top:calc(4*var(--u))}
.categorias-ref .popular-tags a{display:inline-flex;align-items:center;height:calc(22*var(--u));padding:0 calc(13*var(--u));border-radius:calc(13*var(--u));color:#4e6daa;background:#e0ecff;font-size:calc(10*var(--u));white-space:nowrap}
.categorias-ref .popular-tags a:hover{background:#d2e3ff}

/* ---------- Listado ---------- */
.categorias-ref .directory{scroll-margin-top:20px}
.categorias-ref .directory-header{height:calc(101*var(--u));position:relative}
.categorias-ref .directory-copy{position:absolute;left:calc(53*var(--u));top:calc(21*var(--u))}
.categorias-ref .directory-copy .eyebrow span{color:var(--blue)}
.categorias-ref .directory-copy h2{font-size:calc(32*var(--u));line-height:calc(38*var(--u));letter-spacing:calc(-1*var(--u));font-weight:900;margin-top:calc(2*var(--u))}
.categorias-ref .directory-description{font-size:calc(13*var(--u));line-height:calc(18*var(--u));color:var(--muted);margin-top:calc(3*var(--u))}
.categorias-ref .sort-field{position:absolute;left:calc(751*var(--u));top:calc(35*var(--u));width:calc(149*var(--u));height:calc(39*var(--u));border:calc(1*var(--u)) solid #dbe4f6;border-radius:calc(8*var(--u));padding:calc(6*var(--u)) calc(10*var(--u));background:#fff;display:flex;flex-direction:column;gap:calc(2*var(--u))}
.categorias-ref .sort-field>label{margin:0;font-size:calc(8*var(--u));line-height:calc(10*var(--u));color:#8a97b5}
.categorias-ref .sort-field select{width:100%;appearance:none;border:0;background:none;padding:0;font-size:calc(10*var(--u));line-height:calc(13*var(--u));height:calc(14*var(--u));padding-right:calc(16*var(--u))}
.categorias-ref .sort-field>.icon{position:absolute;right:calc(9*var(--u));top:calc(13*var(--u));width:calc(13*var(--u));height:calc(13*var(--u));pointer-events:none}
.categorias-ref .sort-apply{position:absolute;right:0;top:calc(100% + 6px);color:var(--blue);font-size:13px}
/* Grilla de la tarjeta compartida (partials/tarjeta_categoria.html, toda en
   css/tarjeta-categoria.css): aquí solo las columnas. Mismo ancho útil y
   hueco que el carrusel del inicio (32 y 12 u de portada.css, pasados a esta
   u), para que la tarjeta mida lo mismo en las dos páginas. */
.categorias-ref .cards-layout{margin:0 calc(32.45*var(--u))}
.categorias-ref .tarjetas-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(16.2*var(--u)) calc(12.17*var(--u))}
.categorias-ref .tarjetas-grid>.pc-cat{min-width:0}
.categorias-ref .empty-results{padding:35px 20px;border:1px solid #e0ebfb;border-radius:12px;text-align:center;font-size:16px}
.categorias-ref .empty-results .primary-button{padding:10px 18px;margin-top:18px}
.categorias-ref .primary-button{display:inline-flex;align-items:center;justify-content:center;gap:calc(12*var(--u));color:white;background:var(--blue);border:calc(1*var(--u)) solid #88afff;border-radius:calc(10*var(--u));box-shadow:0 calc(5*var(--u)) calc(10*var(--u)) #0063ff20}

/* ---------- Comunidad ---------- */
.categorias-ref .community-section{margin-top:calc(16*var(--u));padding:0 calc(20*var(--u))}
.categorias-ref .community-card{height:calc(184*var(--u));position:relative;border:0;border-radius:calc(13*var(--u));overflow:hidden;background:linear-gradient(105deg,#f1f8ff,#eef7ff 50%,#e9f4ff)}
.categorias-ref .community-art{position:absolute;inset:0;object-fit:fill}
.categorias-ref .community-copy{position:absolute;left:calc(424*var(--u));top:calc(25*var(--u));width:calc(455*var(--u))}
.categorias-ref .community-copy .eyebrow{color:var(--blue);font-size:calc(10*var(--u));line-height:calc(13*var(--u));letter-spacing:calc(2*var(--u))}
.categorias-ref .community-copy h2{font-size:calc(28.5*var(--u));font-weight:900;line-height:calc(34*var(--u));letter-spacing:calc(-.7*var(--u));white-space:nowrap;margin-top:calc(4*var(--u))}
.categorias-ref .community-copy>p:not(.eyebrow){font-size:calc(13*var(--u));line-height:calc(18*var(--u));color:var(--muted);letter-spacing:calc(-.1*var(--u));margin-top:calc(6*var(--u));white-space:nowrap}
.categorias-ref .community-button{margin-top:calc(8*var(--u));height:calc(45*var(--u));width:calc(226*var(--u));font-size:calc(16*var(--u))}
.categorias-ref .community-button:hover{color:#fff;background:#0052e0}
.categorias-ref .community-button .icon{height:calc(19*var(--u));width:calc(19*var(--u))}
.categorias-ref .mobile-community-art{display:none}

/* ---------- Media queries de la referencia (sin cabecera ni footer) ---------- */
/* La lámina del encabezado mide 948*--u, que con --u al tope son justo 1280 px: el ancho
   del sitio. Antes se estiraba a todo el ancho (width:100%) y, como su contenido va en
   posición absoluta con las coordenadas de la lámina, el título quedaba clavado a 72 px
   del borde de la ventana: a 1920 px caía 275 px a la izquierda del eje de la cabecera.
   Centrada, la composición vuelve al eje y conserva sus proporciones. El fondo de la
   sección (.hero, #f0f7ff) cubre los costados. 2026-10-15. */
@media(min-width:1281px){.categorias-ref .hero-stage{width:min(100%,calc(948*var(--u)));margin-inline:auto}}
@media(min-width:700px) and (max-width:850px){
 .categorias-ref .community-copy h2{font-size:calc(27*var(--u))}
}
@media(max-width:699px){
 .categorias-ref{--u:1px;font-size:14px}
 .categorias-ref .site-frame{width:100%}
 .categorias-ref .hero-stage{height:auto;padding:24px 20px 25px;background:linear-gradient(110deg,#f0f7ff,#edf5ff)}
 .categorias-ref .hero-art{display:none}
 .categorias-ref .hero-copy{position:static;width:100%}
 .categorias-ref .hero-copy h1{font-size:32px;line-height:32px;letter-spacing:-1px;margin-top:8px;white-space:normal}
 .categorias-ref .eyebrow{font-size:9px;line-height:13px;letter-spacing:1.8px}
 .categorias-ref .hero-description{font-size:14px;line-height:20px;margin-top:12px;letter-spacing:0}
 .categorias-ref .desktop-break{display:none}
 .categorias-ref .mobile-hero-art{display:block;width:100%;height:auto;aspect-ratio:402/266;margin-top:20px}
 .categorias-ref .hero-photo{position:static;display:block;width:100%;height:auto;aspect-ratio:402/266;margin-top:20px;border-radius:16px}
 .categorias-ref .category-search{position:static;width:100%;height:46px;margin-top:16px;padding:3px;border-radius:10px;gap:4px}
 .categorias-ref .search-field{gap:9px;padding-left:8px}
 .categorias-ref .search-icon{width:15px;height:15px}
 .categorias-ref .search-field input{font-size:12px}
 .categorias-ref .search-submit{width:76px;font-size:12px;border-radius:7px}
 .categorias-ref .popular-searches{position:static;width:100%;margin-top:14px}
 .categorias-ref .popular-searches>p{font-size:10px;line-height:14px}
 .categorias-ref .popular-tags{flex-wrap:wrap;gap:7px;margin-top:7px}
 .categorias-ref .popular-tags a{height:26px;padding:0 12px;font-size:11px;border-radius:14px}
 .categorias-ref .directory-header{height:auto;display:flex;flex-direction:column;padding:24px 20px 20px;gap:16px}
 .categorias-ref .directory-copy{position:static}
 .categorias-ref .directory-copy h2{font-size:31px;line-height:37px;margin-top:5px;letter-spacing:-.8px}
 .categorias-ref .directory-description{font-size:14px;line-height:20px;margin-top:3px}
 .categorias-ref .sort-field{position:relative;left:auto;top:auto;width:170px;height:43px;padding:6px 10px;border-radius:8px}
 .categorias-ref .sort-field>label{font-size:9px;line-height:11px}
 .categorias-ref .sort-field select{font-size:12px;line-height:16px;height:17px;padding-right:20px}
 .categorias-ref .sort-field>.icon{width:14px;height:14px;right:10px;top:15px}
 .categorias-ref .cards-layout{margin:0 20px}
 .categorias-ref .community-section{margin-top:24px;padding:0 20px}
 .categorias-ref .community-card{height:auto;padding:18px;border-radius:13px;display:flex;flex-direction:column;gap:16px}
 .categorias-ref .community-art{display:none}
 .categorias-ref .mobile-community-art{display:block;width:100%;height:auto;aspect-ratio:398/176}
 .categorias-ref .community-copy{position:static;width:100%}
 .categorias-ref .community-copy .eyebrow{font-size:10px;line-height:14px;letter-spacing:1.8px}
 .categorias-ref .community-copy h2{font-size:27px;line-height:29px;letter-spacing:-.6px;white-space:normal;margin-top:8px}
 .categorias-ref .community-copy>p:not(.eyebrow){font-size:14px;line-height:20px;letter-spacing:0;white-space:normal;margin-top:10px}
 .categorias-ref .community-button{width:226px;height:45px;font-size:15px;gap:12px;margin-top:15px;border-radius:10px}
 .categorias-ref .community-button .icon{width:19px;height:19px}
 .categorias-ref{padding-bottom:24px}
}
@media(max-width:360px){
 .categorias-ref .hero-copy h1{font-size:29px;line-height:30px}
 .categorias-ref .search-field input{font-size:10.5px}
 .categorias-ref .community-copy h2{font-size:25px;line-height:28px}
}

/* Ajuste final de tipografía de la referencia ("Final typography alignment"). */
@media(min-width:700px){
 .categorias-ref .hero-copy h1{letter-spacing:calc(-1.55*var(--u));margin-top:calc(7*var(--u))}
 .categorias-ref .hero-description{margin-top:calc(9*var(--u))}
 .categorias-ref .directory-copy h2{font-size:calc(33.3*var(--u))}
 .categorias-ref .community-copy h2{font-size:calc(28.8*var(--u))}
 .categorias-ref .community-button{margin-left:calc(3*var(--u))}
}

/* Columnas de la grilla: las mismas que el carrusel del inicio (4, 3, 2 y 1). */
@media(max-width:1100px){.categorias-ref .tarjetas-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}}
@media(max-width:820px){.categorias-ref .tarjetas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.categorias-ref .tarjetas-grid{grid-template-columns:minmax(0,380px);justify-content:center}}

/* ---------- Encabezado compacto en escritorio (2026-10-08) ----------
   El encabezado ocupaba casi todo el primer viewport (273u de alto: 415 px en
   1440 y 553 en 1920, porque desde 1281 px su u crece con la ventana). Mismo
   diseño, ~16 % menos alto: 228u; título 28,5 (-14 %), bajada 12, buscador
   del mismo ancho y 35 de alto (-15 %), chips de 19, separaciones más cortas.
   La imagen conserva su proporción (contain, a la derecha): su lado izquierdo
   es el mismo degradado del fondo, así que no se deforma ni se nota el borde.
   Desde 1024 px: más angosto la letra ya es chica (u ~0,8 px en 768), así que
   tablet y celular no cambian. */
@media(min-width:1024px){
 .categorias-ref .hero-stage{height:calc(228*var(--u))}
 .categorias-ref .hero-art{object-fit:contain;object-position:100% 50%}
 .categorias-ref .hero-copy{top:calc(26*var(--u))}
 .categorias-ref .hero-copy h1{font-size:calc(26.6*var(--u));line-height:calc(26.5*var(--u));letter-spacing:calc(-1*var(--u));margin-top:calc(5*var(--u))}
 .categorias-ref .hero-description{font-size:calc(12*var(--u));line-height:calc(15*var(--u));margin-top:calc(7*var(--u))}
 .categorias-ref .category-search{top:calc(139*var(--u));height:calc(35*var(--u))}
 .categorias-ref .search-icon{width:calc(14*var(--u));height:calc(14*var(--u))}
 .categorias-ref .search-field input{font-size:calc(9.6*var(--u))}
 .categorias-ref .search-submit{font-size:calc(10*var(--u))}
 .categorias-ref .popular-searches{top:calc(181*var(--u))}
 .categorias-ref .popular-tags{margin-top:calc(3*var(--u))}
 .categorias-ref .popular-tags a{height:calc(19*var(--u));padding:0 calc(11*var(--u));font-size:calc(9.2*var(--u))}
 .categorias-ref .hero-photo{left:calc(612*var(--u));top:calc(12*var(--u));width:calc(293*var(--u));height:calc(205*var(--u))}
 .categorias-ref .directory-header{height:calc(94*var(--u))}
 .categorias-ref .directory-copy{top:calc(17*var(--u))}
}
/* Escala de encabezados del sitio (css/marca.css, 2026-10-14): es un «hero de página»; su
   lámina crece con el ancho, pero el título no pasa del nivel común. */
@media(min-width:1281px){
 .categorias-ref .hero-copy h1{font-size:min(calc(26.6*var(--u)),var(--fc-titulo-hero-pagina,38px));line-height:min(calc(26.5*var(--u)),40px)}
}
/* Imágenes de Hero sin agrandar (2026-10-14): la lámina del encabezado
   (img/categorias/catalogo/hero.webp) mide 948 x 273 px y no hay versión más grande. Antes
   se estiraba con el encabezado (hasta 2x en 1920 px) y se veía borrosa. Ahora el texto y el
   buscador conservan su escala, y la lámina (su mitad izquierda es solo el degradado del
   fondo) se dibuja a lo sumo a su tamaño real, abajo a la derecha, fundida a la izquierda
   con el fondo. La foto que se sube en el Admin (categorias.hero) llega por srcset. */
@media(min-width:700px){
 .categorias-ref .hero-art{inset:auto 0 0 auto;width:min(100%,948px);height:auto;max-height:100%;aspect-ratio:948/273;object-fit:contain;object-position:100% 100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
}