/* Centro de ayuda /faqs con todos los ramos (desde el 04/10/2026).
   Prefijo .fh- dentro de las secciones .hx; reutiliza la cabecera, el buscador y la llamada final de /css/faqs-salud.css. */

/* ---------- Cabecera: atajos a cada ramo ---------- */
.fh-atajos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fh-atajos li { margin: 0; }
.hx .fh-atajos a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	font-size: .9rem;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	transition: background .2s, border-color .2s, transform .2s;
}
.fh-atajos i { color: var(--hx-crema); }
.hx .fh-atajos a:hover {
	border-color: var(--hx-naranja);
	background: rgba(255, 84, 0, .2);
	color: #fff;
	transform: translateY(-2px);
}

/* ---------- Resultados de la búsqueda ---------- */
.hx.fh-resultados { padding: 40px 0 64px; }
.fh-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fh-lista li { margin: 0; }
.fh-lista li[hidden] { display: none; }
.hx .fh-lista a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 14px;
	height: 100%;
	padding: 14px 18px;
	border: 1px solid var(--hx-linea);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--hx-sombra);
	text-decoration: none;
	color: var(--hx-texto);
	transition: border-color .2s, box-shadow .2s;
}
.hx .fh-lista a:hover { border-color: rgba(28, 74, 130, .35); box-shadow: var(--hx-sombra-alta); color: var(--hx-texto); }
.fh-lista-ramo {
	grid-column: 1;
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hx-naranja);
}
.fh-lista-pregunta { grid-column: 1; margin-top: 2px; font-weight: 700; line-height: 1.4; color: var(--hx-azul); }
.fh-lista-flecha { grid-column: 2; grid-row: 1 / span 2; color: var(--hx-azul-claro); }
.fh-lista mark { padding: 0 2px; border-radius: 3px; background: #ffe2c7; color: inherit; }

/* ---------- Ramos ---------- */
.hx.fh-ramos { padding: 64px 0 80px; }
.fh-ramos-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fh-ramos-grid > li { margin: 0; }
.fh-ramo {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 22px 20px 20px;
	border: 1px solid var(--hx-linea);
	border-radius: var(--hx-radio);
	background: #fff;
	box-shadow: var(--hx-sombra);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.fh-ramo:hover { border-color: rgba(28, 74, 130, .3); box-shadow: var(--hx-sombra-alta); transform: translateY(-3px); }
.fh-ramo-cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.fh-ramo-icono {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: linear-gradient(135deg, #e8f0fa, #d7e6f7);
	font-size: 1.35rem;
	color: var(--hx-azul);
	transition: background .2s, color .2s;
}
.fh-ramo:hover .fh-ramo-icono { background: var(--hx-naranja); color: #fff; }
.hx .fh-ramo h3 { margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.25; }
.hx .fh-ramo h3 a { text-decoration: none; color: var(--hx-azul); }
.hx .fh-ramo h3 a:hover { color: var(--hx-naranja); }
.fh-ramo-n { font-size: .8rem; font-weight: 800; color: var(--hx-naranja); }
.fh-ramo-texto { margin: 0 0 14px; font-size: .92rem; line-height: 1.5; color: var(--hx-gris); }
.fh-ramo-populares {
	flex: 1;
	margin: 0 0 18px;
	padding: 12px 0 0;
	border-top: 1px dashed var(--hx-linea);
	list-style: none;
}
.fh-ramo-populares li { margin: 0; padding: 0; }
.hx .fh-ramo-populares a {
	position: relative;
	display: block;
	padding: 6px 0 6px 16px;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	color: var(--hx-texto);
}
.fh-ramo-populares a::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hx-naranja);
}
.hx .fh-ramo-populares a:hover { color: var(--hx-naranja); }
.fh-ramo-boton { margin-top: auto; font-size: .92rem; }
.fh-ramo-boton i { margin-left: 4px; font-size: .85em; }

/* ---------- Lo más consultado ---------- */
.hx.fh-destacadas { padding: 80px 0; background: var(--hx-fondo); }
.fh-dest-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fh-dest-grid > li { margin: 0; }
.hx a.fh-dest {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--hx-linea);
	border-radius: 18px;
	background: #fff;
	text-decoration: none;
	color: var(--hx-texto);
	transition: transform .2s, box-shadow .2s;
}
.hx a.fh-dest:hover { box-shadow: var(--hx-sombra-alta); transform: translateY(-3px); color: var(--hx-texto); }
.fh-dest-ramo {
	margin-bottom: 8px;
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--hx-azul-claro);
}
.fh-dest-pregunta { margin-bottom: 8px; font-size: 1rem; font-weight: 800; line-height: 1.35; color: var(--hx-azul); }
.fh-dest-texto { flex: 1; margin-bottom: 14px; font-size: .9rem; line-height: 1.55; color: var(--hx-gris); }
.fh-dest-mas { font-size: .9rem; font-weight: 800; color: var(--hx-naranja); }
.fh-dest-mas i { margin-left: 4px; font-size: .85em; transition: transform .2s; }
.hx a.fh-dest:hover .fh-dest-mas i { transform: translateX(4px); }

/* ---------- Guía rápida ---------- */
.hx.fh-guia { padding: 88px 0; }
.fh-guia-caja {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 48px;
	align-items: start;
}
.fh-guia-intro { position: sticky; top: 90px; }
.fh-guia-intro p { font-size: 1.04rem; line-height: 1.65; color: var(--hx-gris); }
.fh-guia-intro .hx-btn { margin-top: 8px; }
.fh-guia-lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fh-guia-lista > li {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--hx-linea);
	border-radius: 18px;
	background: #fff;
}
.fh-guia-icono {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(255, 84, 0, .09);
	color: var(--hx-naranja);
}
.fh-guia-lista p { margin: 0 0 6px; font-size: .93rem; line-height: 1.5; color: var(--hx-texto); }
.fh-guia-lista a { font-size: .88rem; }
.fh-guia-lista span[aria-hidden] { margin: 0 4px; color: var(--hx-gris); }

#fhPortada[hidden] { display: none; }

/* ---------- Pantallas medianas y móvil ---------- */
@media (max-width: 1199.98px) {
	.fh-ramos-grid, .fh-dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
	.fh-guia-caja { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.fh-guia-intro { position: static; }
}
@media (max-width: 575.98px) {
	.fh-ramos-grid, .fh-dest-grid, .fh-guia-lista { grid-template-columns: minmax(0, 1fr); }
	.hx.fh-ramos { padding: 44px 0 56px; }
	.hx.fh-destacadas, .hx.fh-guia { padding: 56px 0; }
	.hx .fh-atajos a { padding: 7px 12px; font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
	.fh-ramo, .hx a.fh-dest, .hx .fh-atajos a { transition: none; }
	.fh-ramo:hover, .hx a.fh-dest:hover, .hx .fh-atajos a:hover { transform: none; }
}