/* Portada: lo que la referencia (FreelanClick_PORTADA_CORREGIDA) dibuja en su
   lámina con datos de ejemplo y aquí se arma en HTML con datos reales, con las
   mismas medidas. Unidades: --u y --cu de portada.css (las de la referencia);
   en las tarjetas de categoría, --k = 1/167 del ancho de la tarjeta (la
   referencia la dibuja a 167 x 222). Se carga después de portada.css. */

/* La cabecera es la global del sitio (partials/nav.html + css/marca.css). */

/* ---------- Buscador: íconos de los campos (2026-10-08) ----------
   Ubicación, lupa y "Búsqueda avanzada" eran recortes raster de la lámina de la
   referencia (img/portada/referencia_portada.webp, de 18 a 24 px) agrandados a
   20-25 px: se veían borrosos, más aún con zoom o en pantallas de alta densidad.
   Ahora son vectores (icon-campo-* en partials/portada_sprite.html) dibujados
   sobre esos recortes, con el mismo tamaño, lugar y color (el promedio del
   trazo de cada recorte); el color llega por currentColor. */
.field-icon{color:#1a20ba}
.field-icon--filtros{color:#0729f7}

/* ---------- Buscador: sugerencias del autocompletado ---------- */
.keyword-field{position:relative}
.pc-sugerencias{position:absolute;left:0;right:0;top:calc(100% + 14px);z-index:30;max-height:280px;margin:0;padding:6px;overflow:auto;list-style:none;border:1px solid #e2eafa;border-radius:12px;background:#fff;box-shadow:0 10px 26px rgba(12,40,96,.16);font-size:14px}
.pc-sugerencias li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer}
.pc-sugerencias li:hover,.pc-sugerencias li:focus{background:#eef5ff;outline:0}
.pc-sugerencias small{margin-left:auto;color:var(--muted);font-size:12px}
.advanced-options select{color:var(--navy)}

/* El encabezado (hero) está en css/hero-talento.css desde el 2026-10-13 (copia de
   referencias/talento-chile): la foto, los textos, el buscador y los beneficios. */
/* Antetítulo de «Tu próximo paso»: el encabezado anterior le daba este aspecto (sus
   reglas de .eyebrow alcanzaban a toda la página); se conserva tal cual. */
@media(min-width:992px){
 .eyebrow{color:#0b1440;font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:600}
}
@media(min-width:700px) and (max-width:991.98px){
 .eyebrow{font-size:12px;line-height:16px;letter-spacing:2.4px}
}

/* Íconos de los beneficios: vectores sin fondo, en el azul índigo de la referencia. */
.trust-icon{color:#1a22a6}

/* ---------- Buscador: toda la caja de cada control responde al clic ----------
   Región: el <select> iba entre el ícono y la flecha, y un clic en ellos caía
   en el <label>, que enfoca el select pero no abre su lista. Ahora el select
   cubre la caja entera (con relleno donde van el ícono y la flecha, que quedan
   encima sin recibir el clic). Búsqueda avanzada: el botón ocupa el alto del
   campo y no solo el de su texto. Las medidas del select en cada ancho van con el
   resto del buscador, en css/hero-talento.css. */
.region-field{position:relative}
.region-field>svg{position:relative;z-index:1;pointer-events:none}
.region-field>.icon{margin-left:auto}
.region-field select{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.search-fields>.advanced-button{align-self:stretch}

/* La tarjeta de categoría está en css/tarjeta-categoria.css (la comparte /category/). */

/* ---------- Profesionales: portada, avatar, Destacado y plan reales ---------- */
.pc-portada{display:block;overflow:hidden;background:#f4f6fb}
.pc-portada--vacia{background:linear-gradient(135deg,#dfe9fb,#bcd3f8)}
.pc-portada__foto{position:absolute;left:0;top:0;display:block;width:100%;height:calc(92*var(--cu));object-fit:cover}
.pc-portada__borde{position:absolute;inset:0;width:100%;height:100%}
.pc-destacado{position:absolute;left:calc(5*var(--cu));top:calc(5*var(--cu));display:flex;height:calc(24*var(--cu));align-items:center;gap:calc(4*var(--cu));padding:0 calc(9*var(--cu)) 0 calc(7*var(--cu));border-radius:calc(12*var(--cu));background:linear-gradient(180deg,#ff7d2a,#ff4f0d);box-shadow:0 0 0 calc(1.5*var(--cu)) #ffd3b0,0 calc(2*var(--cu)) calc(5*var(--cu)) rgba(255,90,20,.45);color:#fff;font-size:calc(10.6*var(--cu));font-weight:700;white-space:nowrap}
.pc-destacado .icon{width:calc(11*var(--cu));height:calc(11*var(--cu))}
.pc-avatar-pro{position:absolute;left:calc(10*var(--cu));top:calc(55*var(--cu));display:block;width:calc(62*var(--cu));height:calc(62*var(--cu));padding:calc(2.5*var(--cu));border-radius:50%;background:#fff;box-shadow:0 calc(2*var(--cu)) calc(6*var(--cu)) rgba(20,40,80,.25)}
.pc-avatar-pro>img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#eef2f8}
.pc-en-linea{position:absolute;left:calc(47*var(--cu));top:calc(49*var(--cu));width:calc(12*var(--cu));height:calc(12*var(--cu));border-radius:50%;background:#1fc24a;box-shadow:0 0 0 calc(2*var(--cu)) #fff}
.pc-plan{position:absolute;left:calc(80*var(--cu));top:calc(82*var(--cu));display:flex;height:calc(20*var(--cu));align-items:center;gap:calc(3*var(--cu));padding:0 calc(9*var(--cu)) 0 calc(6*var(--cu));border-radius:calc(10*var(--cu));background:linear-gradient(180deg,#ffe594,#f5c64a);box-shadow:0 calc(1*var(--cu)) calc(4*var(--cu)) rgba(150,100,0,.3);color:#0f1440;font-family:var(--fc-marca-fuente,'Inter',Arial,sans-serif);font-size:calc(12.5*var(--cu));font-weight:900;letter-spacing:.02em}
.pc-plan>i{font-size:calc(13*var(--cu));line-height:1}
.pc-plan--silver{background:linear-gradient(180deg,#f6f7fa,#d8dde6);color:#0f1a52}
/* Corazón real: la referencia lo trae dibujado en la lámina y deja el botón
   transparente; aquí el contorno blanco es el propio ícono. */
.pc-favorito{margin:0}
.favorite-button[aria-pressed=false]>.icon{opacity:1;fill:none}
.skills:empty{visibility:hidden}

/* ---------- Video del admin al pulsar el póster ---------- */
.video-poster iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
a.video-play{display:block}

/* ---------- Diálogos (rol) y avisos ---------- */
.pc-dialogo-form label{display:block;margin:10px 0}
.pc-dialogo-form fieldset{margin:12px 0;padding:0;border:0}
.pc-dialogo-form legend{margin-bottom:6px;font-weight:700}
.pc-dialogo-form select{width:100%;padding:8px;border:1px solid #cbd8f1;border-radius:6px;background:#fff}
.pc-terminos{font-size:14px}
.pc-terminos a{color:var(--blue);text-decoration:underline}

/* Celular: las sugerencias se abren hacia arriba. Hacia abajo tapaban "Buscar" y el
   toque en la flecha elegía una sugerencia en vez de buscar; dentro del formulario
   tampoco sirve, porque la lista se cierra con el blur y el botón se corre antes
   de soltar el dedo. */
@media(max-width:699px){
 .pc-sugerencias{top:auto;bottom:calc(100% + 8px);max-height:min(240px,45vh)}
}

/* Textos reales más largos que los de la maqueta (p. ej. "Región de Valparaíso"):
   en la misma línea, cortados con puntos suspensivos dentro de la tarjeta. */
.profile-copy h3,.profession,.location{min-width:0;overflow:hidden;text-overflow:ellipsis}
.location>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.skills li{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Diálogo de cambio de rol (el mismo contenido que el modal de la cabecera global). */
.pc-rol-actual{margin:8px 0;color:#16794a}
.pc-rol-opcion{display:flex!important;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e0e9fa;border-radius:12px}
.pc-rol-opcion>i{flex:none;color:var(--blue);font-size:22px}
.pc-rol-opcion>span{flex:1}
.pc-rol-opcion em{color:var(--muted);font-style:normal}
.pc-dialogo-botones{display:flex;justify-content:flex-end;gap:12px}
.pc-cancelar{padding:10px 18px;border:1px solid #cbd8f1;border-radius:10px;margin-top:18px}

/* ---------- Carruseles: categorías, profesionales y novedades ----------
   Un solo sistema (js/carrusel.js). Base, sin js o con el movimiento apagado
   (admin o "reducir movimiento"): la grilla es una pista con scroll horizontal
   y scroll-snap que se desliza a mano. Con movimiento, el js la convierte en
   cinta (.pc-cinta): las tarjetas corren a velocidad constante con una
   animación lineal; la velocidad viene del admin (Carruseles del inicio).
   Las tarjetas no cambian: solo cuántas se ven a la vez (--pc-visibles). */
[data-carrusel]{--pc-visibles:4;--pc-hueco:calc(9*var(--u))}
.news-section[data-carrusel]{--pc-visibles:3}
[data-carrusel-pista]{display:flex;gap:var(--pc-hueco);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
 /* Aire para las sombras y el foco de las tarjetas, sin mover el layout. */
 padding:8px 0 14px;margin:-8px 0 -14px}
[data-carrusel-pista]::-webkit-scrollbar{display:none}
[data-carrusel-pista]>*{flex:0 0 calc((100% - (var(--pc-visibles) - 1)*var(--pc-hueco))/var(--pc-visibles));min-width:0;scroll-snap-align:start}
[data-carrusel-pista] .category-card:focus-visible{outline-offset:-3px}
/* La tarjeta de profesional se dibuja en unidades de 1/167 de su ancho (--cu). */
.professionals-grid[data-carrusel-pista]{container-type:inline-size}
.professionals-grid[data-carrusel-pista]>.profile-card{--cu:calc((100cqw - (var(--pc-visibles) - 1)*var(--pc-hueco))/var(--pc-visibles)/167)}
/* Cinta: todas las tarjetas (y sus copias visuales del final) se desplazan
   juntas un ciclo (--pc-ciclo: el ancho de las originales) y vuelven a 0, donde
   la primera copia ocupa el lugar de la primera original: no se nota el corte. */
[data-carrusel-pista].pc-cinta{overflow:hidden;scroll-snap-type:none}
.pc-cinta>*{animation:pc-cinta var(--pc-duracion,40s) linear var(--pc-desfase,0s) infinite;will-change:transform}
@keyframes pc-cinta{to{transform:translateX(calc(-1*var(--pc-ciclo,0px)))}}
/* Pausa: mouse encima, foco dentro o un dedo apoyado (entonces se puede
   arrastrar a mano; al soltar, la cinta sigue desde ahí). */
@media(hover:hover){.pc-cinta:hover>*{animation-play-state:paused}}
.pc-cinta:focus-within>*,.pc-cinta.pc-cinta--quieta>*{animation-play-state:paused}
.pc-cinta.pc-cinta--quieta{overflow-x:auto}
/* Con Tab las tarjetas vuelven a su lugar para que el foco se vea. */
.pc-cinta.pc-cinta--teclado{overflow-x:auto}
.pc-cinta.pc-cinta--teclado>*{animation:none}
@media(prefers-reduced-motion:reduce){.pc-cinta>*{animation:none}}
/* Flechas (data-carrusel-flechas, las pone js/carrusel.js): retroceden o avanzan una tarjeta,
   para volver a la que ya pasó. Van a los lados de la pista, a media altura de las tarjetas
   (--pc-flecha-y, que mide el js). Tras pulsar una, la cinta espera unos segundos (.pc-cinta--pausa). */
.pc-cinta.pc-cinta--pausa>*{animation-play-state:paused}
.pc-flecha{position:absolute;z-index:6;top:var(--pc-flecha-y,50%);display:grid;place-items:center;width:42px;height:42px;margin-top:-21px;padding:0;
 border:1px solid #d5e3fb;border-radius:50%;background:#fff;color:#0b63f6;box-shadow:0 4px 14px rgba(13,46,110,.2);cursor:pointer;
 transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}
.pc-flecha--anterior{left:-21px}
.pc-flecha--siguiente{right:-21px}
.pc-flecha svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pc-flecha:hover{background:#0b63f6;color:#fff;box-shadow:0 6px 18px rgba(11,99,246,.38)}
.pc-flecha:active{transform:scale(.94)}
.pc-flecha:focus-visible{outline:2px solid #0b63f6;outline-offset:3px}
.pc-sin-flechas>.pc-flecha{display:none}
@media(max-width:1100px){
 .pc-flecha{width:38px;height:38px;margin-top:-19px}
 .pc-flecha--anterior{left:-12px}
 .pc-flecha--siguiente{right:-12px}
}
@media(prefers-reduced-motion:reduce){.pc-flecha{transition:none}}
/* Fotos de novedades: cualquier tamaño subido al admin, recortada sin deformar. */
.news-photo{object-fit:cover}
@media(min-width:900px) and (max-width:1199.98px){
 .categories-section[data-carrusel],.professionals-section[data-carrusel]{--pc-visibles:3}
}
@media(min-width:700px) and (max-width:899.98px){
 .categories-section[data-carrusel],.professionals-section[data-carrusel]{--pc-visibles:2}
}
@media(min-width:700px) and (max-width:991.98px){
 .news-section[data-carrusel]{--pc-visibles:2}
}
@media(max-width:699px){
 /* Una tarjeta y el borde de la siguiente. */
 [data-carrusel]{--pc-visibles:1.2;--pc-hueco:12px}
 .news-section[data-carrusel]{--pc-visibles:1.08}
}

/* ---------- Categorías destacadas: encabezado y tarjetas visibles ----------
   Según referencias/FreelanClick_CATEGORIAS_DESTACADAS_CORREGIDA.html, con sus
   proporciones llevadas al marco del inicio (871u = su marco de 1870, factor
   0,4658): título 46 -> 21,4u (900), bajada 24,6 -> 11,5u, línea azul 43 x 3,
   "Ver todas" de 20 a la derecha; 5 tarjetas con huecos de 16 sobre 362 de
   ancho. Responsive de la referencia: <=1100 tres, <=820 dos, <=480 una de
   hasta 380 px. Solo esta sección; el carrusel (movimiento, velocidad del
   admin, bucle y pausas) no cambia. */
.categories-section{padding-top:calc(16.3*var(--u));margin-top:0}
.categories-section .section-heading{height:calc(41*var(--u))}
.categories-section .section-titles{padding-left:calc(29.8*var(--u))}
.categories-section .section-titles:before{left:0;top:calc(15.8*var(--u));width:calc(20*var(--u));height:calc(1.4*var(--u))}
.categories-section .section-heading h2{font-size:calc(21.4*var(--u));line-height:calc(28*var(--u));font-weight:900;letter-spacing:calc(-.12*var(--u))}
.categories-section .section-heading p{margin-top:0;font-size:calc(11.46*var(--u));line-height:calc(14*var(--u));color:#858cbf}
/* «Ver todas las categorías» se ve igual que «Ver todas las profesionales» (2026-10-11):
   tamaño, peso, interlineado, icono y posición son los de .section-link (portada.css),
   sin reglas propias de esta sección. En tableta este encabezado va apilado y con medidas
   fijas, así que el enlace conserva la misma letra y proporciones a un tamaño legible. */
.categories-section .section-link:hover{text-decoration:underline}
.categories-section[data-carrusel]{--pc-visibles:4;--pc-hueco:calc(12*var(--u))}
.categories-section .category-grid{margin-top:calc(8.85*var(--u))}
/* En la referencia el título va entero en azul marino (el inicio pinta de azul el span). */
.categories-section .section-heading h2 span{color:inherit}
@media(max-width:1100px){
 .categories-section{padding-top:28px}
 .categories-section .section-heading{display:flex;flex-direction:column;align-items:flex-start;gap:16px;height:auto;margin-bottom:0}
 .categories-section .section-titles{padding-left:42px}
 .categories-section .section-titles:before{left:0;top:21px;width:28px;height:2px}
 .categories-section .section-heading h2{font-size:32px;line-height:40px;letter-spacing:0}
 .categories-section .section-heading p{margin-top:5px;font-size:16px;line-height:24px}
 .categories-section .section-link{margin:0 0 0 42px;gap:9px;font-size:15px;line-height:20px}
 .categories-section .section-link .icon{width:21px;height:21px}
 .categories-section[data-carrusel]{--pc-visibles:3;--pc-hueco:16px}
 .categories-section .category-grid{margin-top:16px}
}
@media(max-width:820px){
 .categories-section[data-carrusel]{--pc-visibles:2}
 .categories-section .section-heading h2{font-size:31px;line-height:38px}
}
@media(max-width:480px){
 .categories-section{padding-top:25px}
 .categories-section .section-heading h2{font-size:29px;line-height:35px}
 .categories-section .section-heading p{margin-top:8px;font-size:15px;line-height:23px}
 .categories-section .section-titles:before{top:18px}
 /* En móvil, las mismas medidas que el enlace de profesionales. */
 .categories-section .section-link{gap:7px;font-size:12px;line-height:17px}
 .categories-section .section-link .icon{width:17px;height:17px}
 /* Una tarjeta de hasta 380 px, centrada cuando el carrusel está quieto. */
 .categories-section[data-carrusel]{--pc-visibles:1;--pc-hueco:18px}
 .categories-section [data-carrusel-pista]>*{flex-basis:min(380px,100%)}
 .categories-section [data-carrusel-pista]:not(.pc-cinta){justify-content:safe center}
}

/* CMS Fase 3 (2026-10-09): piezas que el admin puede cambiar en el inicio. Solo se usan
   cuando el admin las elige; sin ellas el inicio se ve igual que antes.
   - Franja de confianza: ícono del catálogo (Remix) o imagen en vez del dibujado.
   - Portada del video: foto subida (SiteAsset home.video_poster) en el recuadro de siempre. */
.trust-features .trust-icon--ri{display:inline-flex;align-items:center;justify-content:center;font-size:calc(30*var(--u));line-height:1;color:var(--blue)}
.trust-features .trust-icon--img{object-fit:contain}
.video-poster .video-art--foto{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:699px){.trust-features .trust-icon--ri{font-size:28px}}