/*
 * JobFlexy Blog Hub v0.3.9 — estilos. MEZCLA de v0.3.1 y v0.3.2 (+ ajustes v3.4-v3.9 al final).
 *
 * Víctor (2026-09-16), sobre la v0.3.2: «debes mezclar el diseño antiguo con
 * este; te has pasado, todo cards; la parte de arriba de la otra versión me
 * gustaba, con las cards azules; no poner 5 titulares seguidos de card card
 * card». Resultado buscado: ritmo alterno, nunca dos secciones seguidas con
 * la misma forma.
 *
 *   Arriba ............ héroe partido + mosaicos AZULES (forma de v0.3.1)
 *   How to Get Hired .. tarjeta con foto (v0.3.2) | lista limpia (v0.3.1)
 *   By Company ........ índice sin tarjetas, filas con línea fina (v0.3.1)
 *   Pay & Salaries .... lista limpia (v0.3.1) | tarjeta con foto (v0.3.2)
 *   Interview ......... rejilla de tarjetas con foto (v0.3.2)
 *
 * PIEL GLOBAL: la de v0.3.2. Cada valor sale de un componente de JobFlexy;
 * la cita completa está en DESIGN-TOKENS.md (abreviada aquí).
 *   ct   = plugins/jobflexy-city-tags/assets/city-tags.css
 *   cg   = plugins/jobflexy-city-tags/assets/city-grid.css
 *   reco = plugins/jobflexy-reco-jobs/jobflexy-reco-jobs.php
 *   sc   = plugins/jobflexy-pseo/inc/shortcodes.php
 *   jw   = themes/schema-lite/jf-jobs-widget.css
 *   fp   = /amazon-job/ (y /walmart-job/, /ups-job/), widget HTML a1e5727, .featured-post
 *   v31  = backups-jobflexy/2026-09-16-blog-hub-v3.1-live/assets/hub-v3-1.css
 *
 * ÚNICA EXCEPCIÓN a los colores del sistema: el azul #003388 / #0B2E6F de los
 * mosaicos (y la cifra #F9A45C sobre ese azul). Víctor pide expresamente las
 * «cards azules»; viven SOLO en .jfh-tile.
 *
 * TIPOGRAFÍA: esta hoja NO declara ninguna familia tipográfica. El cuerpo
 * hereda Roboto (CSS adicional del Personalizador) y h1/h2/h3 heredan
 * Roboto Slab (style.css del tema: h1..h6). Por eso la cifra de los mosaicos,
 * que en v0.3.1 era Roboto Slab 300, aquí es Roboto 300.
 *
 * Sin !important. Todo bajo .jfh.
 * Carruseles: .jfh-track con scroll-snap. Las diapositivas están SIEMPRE en
 * el flujo del documento: ninguna regla de esta hoja las oculta.
 */

.jfh {
	--jfh-accent: #f58220;       /* ct:3 --jf-ct-accent */
	--jfh-accent-dark: #d36e16;  /* sc:103 --brand-dark */
	--jfh-navy: #1e2a4a;         /* ct:3 --jf-ct-navy (titulares, ct:6) */
	--jfh-text: #1f2937;         /* ct:4 */
	--jfh-text-2: #374151;       /* ct:37 .jf-ct-tagline */
	--jfh-line: #e5e7eb;         /* ct:3 --jf-ct-line */
	--jfh-soft: #f3f4f6;         /* ct:30 fondo de .jf-ct-chip */
	--jfh-hover-line: #f2b183;   /* ct:69 borde hover de tarjeta */
	--jfh-chip-line: #f3e3cb;    /* ct:94 .jf-ct-search-chip */
	--jfh-chip-hover: #fffbf5;   /* ct:97 */
	--jfh-dot: #ddd;             /* jw:127 indicador de posición (scrollbar) */
	--jfh-off: #999;             /* jw:46 icono inactivo (chevron) */

	/* Solo mosaicos (v31 --jfh-blue / --jfh-navy / --jfh-orange-soft). */
	--jfh-tile-a: #003388;
	--jfh-tile-b: #0b2e6f;
	--jfh-tile-num: #f9a45c;

	--jfh-shadow-hover: 0 4px 14px rgba(30, 42, 74, .12); /* ct:69, ct:104 */
	--jfh-shadow-photo: 0 2px 10px rgba(20, 25, 39, .10); /* cg:22 tarjeta con foto */

	--jfh-r-hero: 14px;  /* ct:12 */
	--jfh-r-card: 12px;  /* ct:68, ct:103, cg:22, sc:108 */
	--jfh-r-row: 8px;    /* ct:87, ct:94 */
	--jfh-r-btn: 4px;    /* jw:256, fp .featured-post__button */

	--jfh-bleed-x: 10px; /* holgura para que el track no recorte sombras */

	background: #fff;    /* body.custom-background { background-color:#ffffff } */
	color: var(--jfh-text);
	font-size: 16px;     /* ct:4 */
	text-align: left;
}

.jfh *,
.jfh *::before,
.jfh *::after { box-sizing: border-box; }

/* Titulares: familia heredada del tema (Roboto Slab). Solo color y peso. */
.jfh h1,
.jfh h2,
.jfh h3 {
	margin: 0;
	padding: 0;
	color: var(--jfh-navy);  /* ct:6 */
	font-weight: 700;        /* CSS adicional h1,h2 700; reco:908 h3 700 */
}
.jfh p { margin: 0; }
.jfh ul { margin: 0; padding: 0; list-style: none; }
.jfh li { margin: 0; padding: 0; }

/* El tema pinta a{color:#0274be} (style.css:545) y a:hover en negro (inline). */
.jfh a,
.jfh a:hover { color: var(--jfh-text); text-decoration: none; }
.jfh a:focus-visible,
.jfh summary:focus-visible {
	outline: 2px solid var(--jfh-accent);  /* reco:899 */
	outline-offset: 2px;
}

/* Mismo contenedor que el resto de páginas: style.css:269 y :273. */
.jfh .jfh-frame {
	width: 1152px;
	max-width: 96%;
	margin: 0 auto;
	padding: 45px 0 56px;  /* style.css:273 arriba · ct:4 abajo */
}

.jfh .jfh-noimg { background: var(--jfh-soft); }

/* -------------------------------------------------------------------------
 * 1. Héroe partido — composición de v31 (etiqueta + H1 arriba, entradilla
 *    abajo, foto a sangre a la derecha) dentro de la caja redondeada del
 *    héroe de ciudad (ct:11-12).
 * ---------------------------------------------------------------------- */

.jfh .jfh-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);  /* v31 */
	min-height: 220px;                   /* ct:12 */
	margin: 0 0 12px;                    /* = hueco de los mosaicos: un solo bloque */
	background: #fff;
	border: 1px solid var(--jfh-line);   /* ct:68 */
	border-radius: var(--jfh-r-hero);
	overflow: hidden;
}

.jfh .jfh-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;      /* v31 */
	gap: 28px;
	padding: 48px 44px 44px 48px;
}

/* Etiqueta naranja de v31, con el radio de los botones sólidos del sitio. */
.jfh .jfh-hero__tag {
	display: inline-block;
	padding: 6px 12px;                   /* v31 */
	background: var(--jfh-accent);
	color: #fff;
	border-radius: var(--jfh-r-btn);     /* jw:256 */
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* 60 px en el lienzo de 1280; 52 px era el propio tamaño de v31 a <=1180,
   que es donde vive un marco de 1152. */
.jfh .jfh-hero__title {
	margin: 20px 0 0;
	font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
	line-height: 1.04;
	letter-spacing: -.02em;
}
.jfh .jfh-hero__accent { color: var(--jfh-accent); }  /* ct:32 */

.jfh .jfh-hero__lede {
	max-width: 46ch;                     /* v31 */
	color: var(--jfh-text-2);            /* ct:37 */
	font-size: 1.0625rem;
	line-height: 1.55;
}

.jfh .jfh-hero__media {
	position: relative;
	overflow: hidden;
}
.jfh .jfh-hero__media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------------------
 * 2. Mosaicos AZULES — forma de v31 (cifra grande clara arriba, nombre en
 *    negrita abajo, azules alternos) con esquinas de tarjeta del sistema y
 *    separados por el hueco de rejilla del sitio (ct:101).
 * ---------------------------------------------------------------------- */

.jfh .jfh-tiles {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;          /* ct:101 */
	margin: 0 0 38px;   /* ct:65 */
}

.jfh .jfh-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;      /* v31 */
	gap: 18px;
	min-width: 0;
	min-height: 136px;                   /* v31 */
	padding: 24px 20px 22px;
	background: var(--jfh-tile-a);
	border-radius: var(--jfh-r-card);    /* ct:103 */
	transition: box-shadow .15s;
}
.jfh .jfh-tile:nth-child(even) { background: var(--jfh-tile-b); }  /* v31 */

/* Especificidad 0,3,0: gana a ".jfh a:hover" (0,2,1). */
.jfh .jfh-tile,
.jfh .jfh-tile:hover { color: #fff; }
.jfh .jfh-tile:hover { box-shadow: var(--jfh-shadow-hover); }  /* ct:104 */

.jfh .jfh-tile__n {
	/* Misma familia que los titulares del tema (style.css:119): no es una fuente ajena, es la de JobFlexy.
	   En la v3.1 aprobada la cifra iba en Roboto Slab 300; sin esto salia en Roboto. */
	font-family: 'Roboto Slab', sans-serif;
	color: var(--jfh-tile-num);          /* v31 */
	font-size: 2.125rem;                 /* v31 34 px */
	font-weight: 300;                    /* v31 */
	line-height: 1;
	transition: color .15s;
}
.jfh .jfh-tile:hover .jfh-tile__n { color: var(--jfh-accent); }

.jfh .jfh-tile__t {
	font-size: 1rem;                     /* v31 16 px */
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * Secciones y cabecera de sección — v0.3.2: H2 limpio, sin raya ni barra
 * (ct:58-59, ct:65)
 * ---------------------------------------------------------------------- */

.jfh .jfh-sec {
	margin: 0 0 38px;  /* ct:65, ct:76, ct:92 */
}
.jfh .jfh-sec:last-child { margin-bottom: 0; }

/* Destinos de los mosaicos: la barra de navegación es sticky y mide 70 px. */
.jfh .jfh-sec,
.jfh .jfh-firm { scroll-margin-top: 84px; }

.jfh .jfh-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;  /* ct:58 */
}
.jfh .jfh-head__title {
	min-width: 0;
	font-size: 1.3em;  /* ct:59 */
}

/* Flechas: forma de la paginación de las páginas de ciudad (ct:86-89) */
.jfh .jfh-arrows {
	display: flex;
	gap: 6px;  /* ct:86 margin 0 3px */
	flex: none;
}
.jfh .jfh-arr {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--jfh-line);
	border-radius: var(--jfh-r-row);
	color: var(--jfh-navy);
	line-height: 1;
}
.jfh .jfh-arr:hover {
	border-color: var(--jfh-accent);  /* ct:89 */
	color: var(--jfh-accent);
}
.jfh .jfh-arr.is-off,
.jfh .jfh-arr.is-off:hover {
	border-color: var(--jfh-line);
	color: var(--jfh-off);
	cursor: default;
}

/* Dots: el punto es el ::before; el <a> es más alto para poder pulsarlo. */
.jfh .jfh-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}
.jfh .jfh-dots a {
	display: block;
	padding: 10px 0;
}
.jfh .jfh-dots a::before {
	content: "";
	display: block;
	width: 8px;                 /* sc:218-221 punto de 8 px */
	height: 8px;
	border-radius: 999px;       /* ct:31 */
	background: var(--jfh-dot);
	transition: width .2s ease, background-color .2s ease;
}
.jfh .jfh-dots a.is-on::before {
	width: 26px;
	background: var(--jfh-accent);
}

/* -------------------------------------------------------------------------
 * Carrusel (mecanismo: PAGINACION.md §5 — sin cambios de comportamiento)
 * El track recorta (overflow). Para que las sombras de las tarjetas no se
 * corten, la diapositiva lleva holgura interior y el track la compensa con
 * margen negativo: el contenido queda alineado con el resto de la página.
 * ---------------------------------------------------------------------- */

.jfh .jfh-track {
	position: relative;
	min-width: 0;
	display: flex;
	align-items: stretch;
	gap: 24px;
	margin: -8px calc(-1 * var(--jfh-bleed-x)) -14px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.jfh .jfh-track::-webkit-scrollbar { width: 0; height: 0; }

.jfh .jfh-slide {
	flex: 0 0 100%;
	min-width: 0;
	padding: 8px var(--jfh-bleed-x) 14px;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	/* Sin JS, el salto al fragmento deja visible la cabecera de la sección. */
	scroll-margin-top: 96px;
}

/* -------------------------------------------------------------------------
 * 3 y 5. How to Get Hired / Pay & Salaries (espejo)
 *        tarjeta con foto (v0.3.2) + lista limpia sin tarjetas (v31)
 * ---------------------------------------------------------------------- */

.jfh .jfh-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.jfh .jfh-split--mirror { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.jfh .jfh-split--mirror > .jfh-lead { grid-column: 2; grid-row: 1; }
.jfh .jfh-split--mirror > .jfh-track { grid-column: 1; grid-row: 1; }

/* Tarjeta con foto: forma de cg:22-24, contenido como fp (.featured-post). */
.jfh .jfh-lead,
.jfh .jfh-card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--jfh-r-card);        /* cg:22 */
	box-shadow: var(--jfh-shadow-photo);     /* cg:22 */
	overflow: hidden;
}
.jfh .jfh-lead__img,
.jfh .jfh-card__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 680 / 350;  /* tamaño schema-lite-featured, functions.php:52 */
	object-fit: cover;
	transition: transform .3s;  /* cg:23 */
}
.jfh .jfh-lead:hover .jfh-lead__img,
.jfh .jfh-card:hover .jfh-card__img { transform: scale(1.04); }  /* cg:24 */

/* position + fondo: el texto queda por encima de la foto ampliada. */
.jfh .jfh-lead__body,
.jfh .jfh-card__body {
	position: relative;
	flex: 1;
	background: #fff;
}

.jfh .jfh-lead__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;       /* fp .featured-post__excerpt margin 0 0 12px */
	padding: 20px;   /* fp .featured-post__body */
}
.jfh .jfh-lead__title {
	font-size: 1.25rem;  /* fp .featured-post__title */
	line-height: 1.3;
	overflow-wrap: break-word;
}
.jfh .jfh-lead:hover .jfh-lead__title,
.jfh .jfh-card:hover .jfh-card__title { color: var(--jfh-accent); }

/* Botón: fp .featured-post__button (mismo tipo de enlace: una guía). */
.jfh .jfh-lead__more {
	display: inline-block;
	padding: 10px 16px;
	background: var(--jfh-accent);
	color: #fff;
	border-radius: var(--jfh-r-btn);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
	transition: background-color .2s;
}
.jfh .jfh-lead:hover .jfh-lead__more { background: var(--jfh-accent-dark); }  /* pseo-page.php:223 */

/* Lista limpia (v31): SIN tarjeta, filas separadas por una línea fina. */
.jfh .jfh-rows { border-top: 1px solid var(--jfh-line); }
.jfh .jfh-rows > li { border-bottom: 1px solid var(--jfh-line); }
.jfh .jfh-rows > li:last-child { border-bottom: 0; }

/* Columna de etiqueta de 96 px (v31): cabe "DOLLARAMA" en una línea; los
   nombres de dos palabras (Tim Hortons, Canada Post) pasan a dos líneas. */
.jfh .jfh-row {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 18px;
	gap: 14px;
	align-items: baseline;
	padding: 15px 0;
}
.jfh .jfh-row__co {
	padding-left: 9px;
	border-left: 3px solid var(--jfh-accent);  /* filete naranja, v31 */
	color: var(--jfh-navy);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .13em;
	text-transform: uppercase;
	overflow-wrap: break-word;
}
.jfh .jfh-row__co:empty {
	padding-left: 0;
	border-left: 0;
}
.jfh .jfh-row__t {
	font-weight: 500;   /* v31 · ct:95 */
	line-height: 1.4;
	overflow-wrap: break-word;
}
.jfh .jfh-row__go {
	color: var(--jfh-off);  /* flecha gris (jw:46) */
	font-size: 14px;
}
.jfh .jfh-row:hover .jfh-row__t,
.jfh .jfh-row:hover .jfh-row__go { color: var(--jfh-accent); }  /* cg:43 */

/* -------------------------------------------------------------------------
 * 4. By Company — ÍNDICE sin tarjetas (v31): filas separadas por una línea
 *    fina, nombre enlazado con flecha naranja, marcador discreto por guía.
 *    El control "Show all N" es el chip redondeado de v0.3.2 (ct:94-97).
 * ---------------------------------------------------------------------- */

.jfh .jfh-firms { border-top: 1px solid var(--jfh-line); }

.jfh .jfh-firm {
	position: relative;
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr) 128px;  /* v31 */
	gap: 28px;
	align-items: start;
	padding: 22px 0;                        /* v31 */
	border-bottom: 1px solid var(--jfh-line);
}
.jfh .jfh-firm:last-child { border-bottom: 0; }

.jfh .jfh-firm__head { grid-column: 1; min-width: 0; }
.jfh .jfh-firm__name {
	font-size: 1.25rem;  /* fp .featured-post__title */
	line-height: 1.3;
	overflow-wrap: break-word;
}
.jfh .jfh-firm__name a { color: var(--jfh-navy); }
.jfh .jfh-firm__name a:hover { color: var(--jfh-accent); }
.jfh .jfh-firm__go {
	color: var(--jfh-accent);  /* ct:60 "View all employers →" */
	padding-left: 6px;
}

.jfh .jfh-firm__body {
	grid-column: 2;
	min-width: 0;
	margin: -5px 0;  /* absorbe el padding de la primera y última guía */
}

/* Guía: marcador redondo de 6 px (el cuadradito azul de v31, en la piel del
   sitio). Padding vertical en vez de gap: misma separación, zona de toque
   más alta. */
.jfh .jfh-firm__l a {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 5px 0;
	line-height: 1.4;
	overflow-wrap: break-word;
}
.jfh .jfh-firm__l a::before {
	content: "";
	flex: none;
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 999px;                /* ct:31 */
	background: var(--jfh-hover-line);   /* ct:69 */
	transform: translateY(-2px);         /* v31 */
}
.jfh .jfh-firm__l a:hover { color: var(--jfh-accent); }
.jfh .jfh-firm__l a:hover::before { background: var(--jfh-accent); }
/* Las guías de dentro de "Show all" llevan el marcador apagado (v31). */
.jfh .jfh-firm__x > .jfh-firm__l a::before { background: var(--jfh-dot); }
.jfh .jfh-firm__x > .jfh-firm__l a:hover::before { background: var(--jfh-accent); }

/* "Show all N" = <details>. El <summary> es un botón-chip (ct:94-97) en la
   3ª columna; al abrir, la lista crece bajo las 3 visibles. */
.jfh .jfh-firm__x > summary {
	position: absolute;
	top: 17px;
	right: 0;
	display: inline-block;
	list-style: none;
	cursor: pointer;
	white-space: nowrap;
	padding: 8px 14px;                        /* ct:95 */
	background: #fff;
	border: 1px solid var(--jfh-chip-line);   /* ct:94 */
	border-radius: var(--jfh-r-row);
	color: var(--jfh-text);
	font-size: .88em;
	font-weight: 500;
	line-height: 1.3;
	transition: background-color .15s, border-color .15s, color .15s;
}
.jfh .jfh-firm__x > summary::-webkit-details-marker { display: none; }
.jfh .jfh-firm__x > summary::marker { content: ""; }
.jfh .jfh-firm__x > summary:hover,
.jfh .jfh-firm__x[open] > summary {
	background: var(--jfh-chip-hover);  /* ct:97 */
	border-color: var(--jfh-accent);
	color: var(--jfh-accent);
}
.jfh .jfh-firm__less { display: none; }
.jfh .jfh-firm__x[open] > summary .jfh-firm__all { display: none; }
.jfh .jfh-firm__x[open] > summary .jfh-firm__less { display: inline; }

/* -------------------------------------------------------------------------
 * 6. Interview Questions — rejilla de tarjetas con foto (v0.3.2)
 * ---------------------------------------------------------------------- */

.jfh .jfh-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;  /* /amazon-job/ .jf-related-grid */
}
.jfh .jfh-card__body { padding: 16px; }  /* fp ≤768 · jw:285 */
.jfh .jfh-card__title {
	font-size: 1.1rem;  /* jw:229 */
	line-height: 1.3;
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * Adaptación a pantallas menores.
 * Ningún min-width en toda la hoja: nada puede forzar scroll horizontal.
 * ---------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.jfh .jfh-firm { grid-template-columns: 170px minmax(0, 1fr) 112px; gap: 22px; }  /* v31 */
}

@media (max-width: 1024px) {
	.jfh .jfh-hero__text { padding: 36px 32px 34px 36px; }
	.jfh .jfh-tile { padding: 22px 16px 20px; }                /* v31 ≤960 */
	.jfh .jfh-tile__n { font-size: 1.875rem; }                 /* v31 ≤960 */
	.jfh .jfh-split { gap: 24px; }
}

@media (max-width: 860px) {
	/* Héroe apilado: texto y debajo la foto. */
	.jfh .jfh-hero { grid-template-columns: minmax(0, 1fr); }
	.jfh .jfh-hero__text { gap: 22px; }
	.jfh .jfh-hero__media { aspect-ratio: 680 / 350; }

	/* Mosaicos: 3 + 2 (v31). */
	.jfh .jfh-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.jfh .jfh-tile { grid-column: span 2; min-height: 120px; }
	.jfh .jfh-tile:nth-child(n+4) { grid-column: span 3; }

	/* Tarjeta líder arriba y lista debajo, en las dos secciones. */
	.jfh .jfh-split,
	.jfh .jfh-split--mirror { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.jfh .jfh-split--mirror > .jfh-lead,
	.jfh .jfh-split--mirror > .jfh-track { grid-column: 1; grid-row: auto; }

	/* Interview: 2 columnas x 3 filas por página. */
	.jfh .jfh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

	/* By Company: fila apilada; el summary vuelve al flujo bajo la lista. */
	.jfh .jfh-firm { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
	.jfh .jfh-firm__head,
	.jfh .jfh-firm__body { grid-column: 1; }
	.jfh .jfh-firm__body { margin-bottom: 0; }
	.jfh .jfh-firm__x > summary {
		position: static;
		margin-top: 6px;
	}
	.jfh .jfh-firm__x[open] > .jfh-firm__l { margin-top: 10px; }
}

@media (max-width: 720px) {
	.jfh .jfh-frame { padding-top: 25px; }  /* style.css:1235 */
}

/* ct:124-132 */
@media (max-width: 640px) {
	.jfh .jfh-hero__text { padding: 24px 20px 22px; }  /* ct:127 (+ aire para el H1 grande) */
	.jfh .jfh-hero__title { margin-top: 16px; }
	.jfh .jfh-hero__lede { font-size: 1rem; }
}

/* reco:928 (≤560) · v31 ≤560 */
@media (max-width: 560px) {
	/* 96% de 360 px deja 7,2 px de margen: la holgura no puede pasar de ahí. */
	.jfh { --jfh-bleed-x: 6px; }

	.jfh .jfh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jfh .jfh-tile,
	.jfh .jfh-tile:nth-child(n+4) { grid-column: span 1; min-height: 104px; padding: 18px 16px; gap: 14px; }
	.jfh .jfh-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.jfh .jfh-tile__n { font-size: 1.75rem; }

	.jfh .jfh-lead__body { padding: 16px; }
	.jfh .jfh-lead__title { font-size: 1.15rem; }  /* fp ≤768 */
	.jfh .jfh-row { grid-template-columns: 96px minmax(0, 1fr) 14px; gap: 12px; }  /* v31 */
	.jfh .jfh-row__t { font-size: .9375rem; }      /* v31 15 px */

	.jfh .jfh-grid { gap: 12px; }                  /* ct:101 */
	.jfh .jfh-card__body { padding: 12px; }         /* fp ≤480 */
	.jfh .jfh-card__title { font-size: 1rem; }      /* reco:908 */

	.jfh .jfh-firm__name { font-size: 1.15rem; }    /* fp ≤768 */
	.jfh .jfh-firm__l a { font-size: .9375rem; }   /* v31 15 px */
}

/* Muy estrecho: la etiqueta de empresa sube encima del título, que recupera
   todo el ancho (con 96 px al lado quedarían ~240 px de título a 400 px). */
@media (max-width: 480px) {
	.jfh .jfh-row {
		grid-template-columns: minmax(0, 1fr) 14px;
		row-gap: 5px;
		column-gap: 12px;
	}
	.jfh .jfh-row__co { grid-column: 1; grid-row: 1; justify-self: start; }
	.jfh .jfh-row__co:empty { display: none; }
	.jfh .jfh-row__t { grid-column: 1; grid-row: 2; }
	.jfh .jfh-row__go { grid-column: 2; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.jfh .jfh-track { scroll-behavior: auto; }
	.jfh .jfh-dots a::before,
	.jfh .jfh-lead__img,
	.jfh .jfh-card__img,
	.jfh .jfh-tile,
	.jfh .jfh-tile__n { transition: none; }
	.jfh .jfh-lead:hover .jfh-lead__img,
	.jfh .jfh-card:hover .jfh-card__img { transform: none; }
}


/* ---------------------------------------------------------------------------
 * (2026-09-16, v3.4) Víctor: la banda azul «como estaba antes, pegada a lo de
 * arriba». Héroe + banda forman UN solo bloque, como en la v3.1: sin hueco entre
 * ellos, separaciones de 2 px entre mosaicos y mosaicos cuadrados. Las esquinas
 * redondeadas de JobFlexy quedan solo en el contorno exterior del bloque.
 * Va al final a propósito: gana a las reglas base y a las de @media (misma
 * especificidad, orden posterior), que no tocan márgenes, huecos ni radios.
 * ------------------------------------------------------------------------- */
.jfh .jfh-hero {
	margin-bottom: 0;
	border-bottom: 0;
	border-radius: var(--jfh-r-hero) var(--jfh-r-hero) 0 0;
}
.jfh .jfh-tiles {
	gap: 2px;
	border-radius: 0 0 var(--jfh-r-hero) var(--jfh-r-hero);
	overflow: hidden;
}
.jfh .jfh-tile { border-radius: 0; }
/* dentro de una banda pegada la sombra de hover quedaria recortada: se indica con el color de la cifra */
.jfh .jfh-tile:hover { box-shadow: none; }


/* ---------------------------------------------------------------------------
 * (2026-09-16, v3.5) Víctor, sobre How to Get Hired y Pay & Salaries: la lista de
 * la derecha debe ocupar la MISMA altura que la tarjeta («que lleguen hasta
 * abajo») y el botón era «ridículo de chico»; texto «Read More».
 * ------------------------------------------------------------------------- */

/* Botón a lo ancho de la tarjeta y pegado abajo, como .featured-post__button de
   las páginas de empresa (width 100%, padding 14px 16px, margin-top auto). */
.jfh .jfh-lead__more {
	align-self: stretch;
	display: block;
	margin-top: auto;
	padding: 14px 16px;
	text-align: center;
}

/* Solo escritorio: por debajo de 861 px la tarjeta va encima de la lista. */
@media (min-width: 861px) {
	/* columnas de igual altura: la lista se estira hasta la altura de la tarjeta */
	.jfh .jfh-split { align-items: stretch; }
	.jfh .jfh-split > .jfh-track { align-self: stretch; }
	.jfh .jfh-split .jfh-slide { display: flex; flex-direction: column; }
	/* 5 huecos iguales (render.php pagina estas listas con array_chunk( $posts, 5 )):
	   la página llena llega hasta abajo; las páginas con menos filas conservan la
	   misma altura de fila en vez de estirarse. */
	.jfh .jfh-split .jfh-rows {
		flex: 1;
		display: grid;
		grid-template-rows: repeat(5, 1fr);
	}
	.jfh .jfh-split .jfh-rows > li { display: flex; }
	.jfh .jfh-split .jfh-row { flex: 1; align-content: center; }
}


/* ---------------------------------------------------------------------------
 * (2026-09-16, v3.6) Víctor: «revisa By Company y sobre todo cómo se ve en
 * móvil: hay que darle más aire a los títulos, se ve todo comprimido; líneas de
 * separación discretas en By Company y flechitas en los carruseles, debajo o al
 * lado de los dots».
 * ------------------------------------------------------------------------- */

/* Línea entre guías de una misma empresa: más clara que la que separa empresas
   (--jfh-line), para que la jerarquía empresa > guía se siga leyendo. */
.jfh { --jfh-line-soft: #eef0f3; }

/* 1. Barra de paginación bajo el carrusel: [←] dots [→] (render.php
      jf_blog_hub_r_pager). Las flechas conservan la forma de la paginación de
      las páginas de ciudad (reglas .jfh-arr de arriba). */
.jfh .jfh-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 14px;
}
.jfh .jfh-pager .jfh-dots { margin-top: 0; }
.jfh .jfh-pager .jfh-arr { flex: none; }

/* 2. By Company: línea discreta entre guías. La primera guía no la lleva (la
      fila de empresa ya tiene la suya); las de "Show all" enlazan con la
      última visible. */
.jfh .jfh-firm__l > li + li { border-top: 1px solid var(--jfh-line-soft); }
.jfh .jfh-firm__x > .jfh-firm__l { border-top: 1px solid var(--jfh-line-soft); }
.jfh .jfh-firm__l a { padding: 9px 0; }
.jfh .jfh-firm__body { margin: -9px 0; }  /* absorbe el padding de la primera y última guía */

@media (max-width: 860px) {
	.jfh .jfh-firm__body { margin: -6px 0 0; }
}

/* 3. Móvil: aire. */
@media (max-width: 560px) {
	/* 16 px de margen lateral (antes 96% = 7,8 px a 390 px): alinea con el texto
	   "MENU" de la barra del tema. La holgura del track cabe de nuevo en 10 px. */
	.jfh { --jfh-bleed-x: 10px; }
	.jfh .jfh-frame { max-width: calc(100% - 32px); }

	.jfh .jfh-sec { margin-bottom: 48px; }
	.jfh .jfh-head { margin-bottom: 18px; }
	.jfh .jfh-split,
	.jfh .jfh-split--mirror { gap: 20px; }

	/* Filas de How to Get Hired / Pay: más alto de fila y de línea. */
	.jfh .jfh-row { padding: 18px 0; }
	.jfh .jfh-row__t { line-height: 1.5; }

	/* By Company */
	.jfh .jfh-firm { gap: 10px; padding: 24px 0; }
	.jfh .jfh-firm__l a { padding: 12px 0; line-height: 1.5; }
	.jfh .jfh-firm__x > summary { margin-top: 14px; }
	.jfh .jfh-firm__x[open] > .jfh-firm__l { margin-top: 14px; }

	/* Flechas con zona de toque de 40 px. */
	.jfh .jfh-pager .jfh-arr { width: 40px; height: 40px; }

	/* Interview Questions: la tarjeta de 2 columnas dejaba títulos de 4-5 líneas
	   en ~150 px. Pasa a tarjeta horizontal (miniatura | título), una por fila;
	   siguen siendo 6 por página y la misma altura total. */
	.jfh .jfh-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.jfh .jfh-card {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		align-items: stretch;
	}
	.jfh .jfh-card__img {
		height: 100%;
		min-height: 96px;
		aspect-ratio: auto;
		/* las portadas de estas guías llevan el rótulo a la izquierda */
		object-position: left center;
	}
	.jfh .jfh-card__body {
		display: flex;
		align-items: center;
		padding: 14px 16px;
	}
	.jfh .jfh-card__title { font-size: 1rem; line-height: 1.4; }
}

@media (max-width: 480px) {
	.jfh .jfh-row { row-gap: 8px; }
}


/* ---------------------------------------------------------------------------
 * (2026-09-16, v3.7) Víctor: «en móvil hay que mejorar la entrada; el chip
 * JobFlexy Guides quítalo» y «en By Company, al darle a Show all 18, que sea un
 * acordeón que se abre».
 * Medido antes (390 px): héroe + mosaicos = 880 px; el primer H2 caía a 1.046 px,
 * debajo de la primera pantalla (844 px). H1 en 4 líneas, foto de 183 px y
 * mosaicos en 3 filas.
 * ------------------------------------------------------------------------- */

/* Sin etiqueta: el H1 abre el héroe en todos los anchos. */
.jfh .jfh-hero__title { margin-top: 0; }

/* Chevron del acordeón: solo se ve en móvil (abajo). */
.jfh .jfh-firm__chev { display: none; }

@media (max-width: 560px) {
	/* 1. Entrada compacta: foto arriba como banda, H1 en dos líneas. */
	.jfh .jfh-hero__media { order: -1; aspect-ratio: 2 / 1; }
	.jfh .jfh-hero__text { gap: 12px; padding: 20px 20px 22px; }
	.jfh .jfh-hero__br { display: none; }
	/* "Know what they ask." mide 10,09 em en Roboto Slab 700 (medido en Chromium).
	   Ancho de texto = 100vw - 74 px (16+16 margen, 1+1 borde, 20+20 relleno):
	   9,8vw - 7,25 px deja ~4 % de holgura. Tope 2 rem (el tamaño anterior). */
	.jfh .jfh-hero__title {
		font-size: clamp(1.5rem, calc(9.8vw - 7.25px), 2rem);
		line-height: 1.15;
		letter-spacing: -.015em;
	}
	.jfh .jfh-hero__lede { font-size: .9375rem; }

	/* Mosaicos 3 + 2 y más bajos (forma de tableta, <=860). */
	.jfh .jfh-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.jfh .jfh-tile,
	.jfh .jfh-tile:nth-child(n+4) { grid-column: span 2; min-height: 0; padding: 14px 12px; gap: 8px; }
	.jfh .jfh-tile:nth-child(n+4),
	.jfh .jfh-tile:last-child:nth-child(odd) { grid-column: span 3; }
	.jfh .jfh-tile__n { font-size: 1.5rem; }
	/* "Questions" a 14 px = 64 px: cabe en la columna más estrecha (320 px -> 74 px útiles). */
	.jfh .jfh-tile__t { font-size: .875rem; line-height: 1.25; }
}
@media (max-width: 380px) {
	.jfh .jfh-tile,
	.jfh .jfh-tile:nth-child(n+4) { padding: 12px 10px; }
}

/* 2. By Company en móvil: "Show all N" como ACORDEÓN. El botón baja al pie de la
      lista (hueco reservado con padding-bottom) y la lista crece por encima; a
      lo ancho, con chevron que gira. Sin flex en <summary> (Safari antiguo). */
@media (max-width: 860px) {
	.jfh .jfh-firm__x {
		position: relative;
		/* alto del botón (línea 1,3 × .9375rem + 26 px de relleno + 2 de borde) + 12 px de aire;
		   en rem para que no pise la lista si el móvil tiene la letra del sistema ampliada */
		padding-bottom: calc(1.21875rem + 40px);
	}
	.jfh .jfh-firm__x > summary {
		position: absolute;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		margin-top: 0;
		padding: 13px 48px 13px 16px;
		font-size: .9375rem;
		touch-action: manipulation;  /* sin zoom por doble toque en iOS */
	}
	.jfh .jfh-firm__x[open] > .jfh-firm__l { margin-top: 0; }
	.jfh .jfh-firm__chev {
		display: block;
		position: absolute;
		top: 50%;
		right: 20px;
		width: 8px;
		height: 8px;
		margin-top: -6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s ease, margin-top .2s ease;
	}
	.jfh .jfh-firm__x[open] > summary .jfh-firm__chev {
		margin-top: -2px;
		transform: rotate(-135deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.jfh .jfh-firm__chev { transition: none; }
}

/* En pantallas táctiles el :hover se queda pegado tras el toque: el botón
   cerrado volvía a pintarse naranja como si siguiera activo. Solo [open] lo
   marca. */
@media (hover: none) {
	.jfh .jfh-firm__x:not([open]) > summary:hover {
		background: #fff;
		border-color: var(--jfh-chip-line);
		color: var(--jfh-text);
	}
}


/* ---------------------------------------------------------------------------
 * (2026-09-16, v3.9) Las anclas de By Company pasan de "Amazon" a "Amazon Jobs"
 * (Víctor: «anclas SEO para posicionar keywords»). Entre 861 y 1180 px la
 * columna del nombre medía 170 px y partía en dos líneas "Tim Hortons Jobs →",
 * "Dollarama Jobs →" y "Canada Post Jobs →" (medido a 900 y 1100 px).
 * ------------------------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1180px) {
	.jfh .jfh-firm { grid-template-columns: 200px minmax(0, 1fr) 112px; }
	.jfh .jfh-firm__name { font-size: 1.15rem; }
}


/* ---------------------------------------------------------------------------
 * (2026-09-16, v4.0) Víctor: «opción A y añade el párrafo abajo».
 * ------------------------------------------------------------------------- */

/* A. El H1 es ahora una línea corta con la búsqueda, encima del eslogan.
      Texto normal, sin chip: estilo de la entradilla de las páginas de ciudad
      (ct:37 .jf-ct-tagline) en negrita. font-family: inherit = Roboto del
      cuerpo (sin esto heredaría Roboto Slab de "h1" en style.css:119). */
.jfh .jfh-hero__kicker {
	margin: 0 0 14px;
	color: var(--jfh-text-2);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
}

/* El eslogan pasa de <h1> a <p>: se le da explícitamente lo que antes heredaba
   (familia de titulares del tema, style.css:119; color y peso de ".jfh h1").
   Tamaño, interlineado y tracking siguen en las reglas .jfh-hero__title. */
.jfh .jfh-hero__title {
	font-family: 'Roboto Slab', sans-serif;
	color: var(--jfh-navy);
	font-weight: 700;
}

@media (max-width: 560px) {
	.jfh .jfh-hero__kicker { margin-bottom: 10px; font-size: .875rem; }
}

/* B. Sección final "About JobFlexy Career Guides": texto propio de la página. */
.jfh .jfh-sec--about {
	padding-top: 32px;
	border-top: 1px solid var(--jfh-line);
}
.jfh .jfh-about { max-width: none; }  /* v4.1, Víctor: «que ocupe todo el ancho disponible» (antes 780 px) */
.jfh .jfh-about p {
	margin: 0 0 14px;
	color: var(--jfh-text-2);
	line-height: 1.7;
}
.jfh .jfh-about p:last-child { margin-bottom: 0; }
.jfh .jfh-about a {
	color: var(--jfh-accent-dark);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.jfh .jfh-about a:hover { color: var(--jfh-accent); }