/* Preguntas frecuentes de salud (/faqs/seguros-medicos y sus páginas de pregunta, desde el 04/10/2026).
   Prefijo .fs- dentro de las secciones .hx (paleta y botones de /css/home-asisa.css). */

/* ---------- Cabecera ---------- */
.hx.fs-hero {
	padding: 68px 0 56px;
	overflow: hidden;
	background:
		radial-gradient(900px 420px at 85% -10%, rgba(48, 152, 207, .35), transparent 60%),
		radial-gradient(700px 380px at -10% 110%, rgba(255, 84, 0, .22), transparent 60%),
		linear-gradient(135deg, #0c1a2f 0%, #15305a 55%, #1c4a82 100%);
	color: #fff;
}
.fs-hero-caja {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}
.fs-hero h1 {
	margin: 0 0 14px;
	font-size: clamp(2rem, 4.6vw, 3.2rem);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: #fff;
}
.fs-hero-caja > p {
	max-width: 640px;
	margin: 0 auto 28px;
	font-size: 1.1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .86);
}
.fs-buscador {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 660px;
	margin: 0 auto 24px;
	padding: 7px 7px 7px 52px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
.fs-buscador-lupa {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #5b6b80;
}
.fs-buscador input {
	flex: 1;
	min-width: 0;
	height: 48px;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 1.04rem;
	color: #1d2b3f;
}
.fs-buscador input::placeholder { color: #8a97a8; }
.fs-buscador input::-webkit-search-cancel-button { cursor: pointer; }
.fs-buscador:focus-within { box-shadow: 0 0 0 4px rgba(255, 84, 0, .35), 0 18px 40px rgba(0, 0, 0, .25); }
.fs-buscador .hx-btn { flex-shrink: 0; padding-inline: 26px; }

.fs-populares {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	font-size: .9rem;
}
.fs-populares > span {
	font-weight: 700;
	color: var(--hx-crema);
}
.fs-populares ul {
	display: contents;
	list-style: none;
}
.hx .fs-populares a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	transition: background .2s, border-color .2s;
}
.hx .fs-populares a:hover {
	border-color: var(--hx-naranja);
	background: rgba(255, 84, 0, .2);
	color: #fff;
}

/* ---------- Migas ---------- */
.fs-migas .breadcrumb {
	margin: 18px 0 0;
	font-size: .88rem;
}
.fs-migas a { font-weight: 600; color: var(--hx-azul, #1c4a82); }
.fs-migas--claro .breadcrumb { margin: 0 0 18px; padding: 0; background: transparent; box-shadow: none; }
.fs-migas--claro .breadcrumb-item { color: rgba(255, 255, 255, .85); }
.hx .fs-migas--claro a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.hx .fs-migas--claro a:hover { color: #fff; text-decoration: underline; }
.fs-migas--claro .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .5); }

/* ---------- Temas ---------- */
.hx.fs-temas { padding: 56px 0 24px; }
.fs-temas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fs-temas-grid li, .fs-mas-grid li { margin: 0; padding: 0; }
.hx a.fs-tema {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	column-gap: 14px;
	height: 100%;
	padding: 18px 18px 16px;
	border: 1px solid var(--hx-linea);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--hx-sombra);
	text-decoration: none;
	color: var(--hx-texto);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.hx a.fs-tema:hover {
	border-color: rgba(28, 74, 130, .35);
	box-shadow: var(--hx-sombra-alta);
	transform: translateY(-3px);
	color: var(--hx-texto);
}
.fs-tema-icono {
	grid-row: span 3;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #e8f0fa;
	font-size: 1.25rem;
	color: var(--hx-azul);
}
.hx a.fs-tema:hover .fs-tema-icono { background: var(--hx-naranja); color: #fff; }
.fs-tema-nombre { font-size: 1.04rem; font-weight: 800; color: var(--hx-azul); }
.fs-tema-texto { margin: 4px 0 8px; font-size: .9rem; line-height: 1.45; color: var(--hx-gris); }
.fs-tema-n { font-size: .8rem; font-weight: 800; color: var(--hx-naranja); }

/* ---------- Preguntas ---------- */
.hx.fs-cuerpo { padding: 40px 0 80px; }
.fs-rejilla {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
/* Sin esto, la fila de temas que se desliza en móvil ensancharía la rejilla y toda la página */
.fs-rejilla > *, .fs-pregunta-rejilla > * { min-width: 0; }
.fs-indice {
	position: sticky;
	top: 90px;
	padding: 18px 12px;
	border: 1px solid var(--hx-linea);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--hx-sombra);
}
.fs-indice-titulo {
	margin: 0 10px 8px;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hx-gris);
}
.fs-indice ul { margin: 0; padding: 0; list-style: none; }
.fs-indice li { margin: 0; padding: 0; line-height: 1.3; }
.hx .fs-indice a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--hx-texto);
}
.fs-indice a i { width: 18px; text-align: center; color: var(--hx-azul-claro); }
.hx .fs-indice a:hover { background: var(--hx-fondo); color: var(--hx-azul); }
.hx .fs-indice a.is-activo { background: #e8f0fa; font-weight: 800; color: var(--hx-azul); }
.hx .fs-indice a.is-activo i { color: var(--hx-naranja); }
.fs-indice li[hidden] { display: none; }

.fs-estado {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	padding: 12px 18px;
	border-radius: 14px;
	background: var(--hx-fondo);
	font-weight: 700;
	color: var(--hx-azul);
}
.hx .fs-limpiar { font-size: .9rem; }
.fs-vacio {
	margin-bottom: 24px;
	padding: 28px;
	border: 1px dashed #c9d5e4;
	border-radius: 18px;
	text-align: center;
}
.fs-vacio-titulo { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; color: var(--hx-azul); }
.fs-vacio p { color: var(--hx-gris); }
.fs-vacio-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.fs-cat {
	margin-bottom: 44px;
	scroll-margin-top: 90px;
}
.fs-cat-cabecera {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.fs-cat-icono {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: rgba(255, 84, 0, .1);
	font-size: 1.2rem;
	color: var(--hx-naranja);
}
.hx .fs-cat h2 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.fs-cat-cabecera p { margin: 2px 0 0; font-size: .94rem; color: var(--hx-gris); }

.fs-acc { --bs-accordion-border-color: var(--hx-linea); }
.fs-item {
	margin-bottom: 10px;
	border: 1px solid var(--hx-linea) !important;
	border-radius: 14px !important;
	overflow: hidden;
	scroll-margin-top: 90px;
	transition: box-shadow .2s, border-color .2s;
}
.fs-item:hover { border-color: #c9d5e4 !important; }
.fs-item:has(.accordion-button:not(.collapsed)) { border-color: rgba(28, 74, 130, .35) !important; box-shadow: var(--hx-sombra); }
.fs-item .accordion-header { margin: 0; }
.fs-item .accordion-button {
	padding: 17px 20px;
	background: #fff;
	box-shadow: none;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hx-texto);
}
.fs-item .accordion-button:not(.collapsed) { background: #f6f9fd; color: var(--hx-azul); }
.fs-item .accordion-button:focus-visible { box-shadow: inset 0 0 0 3px rgba(255, 84, 0, .45); }
.fs-item .accordion-body {
	padding: 4px 20px 6px;
	background: #f6f9fd;
	font-size: 1rem;
	line-height: 1.65;
}
.fs-item .accordion-body p:last-child { margin-bottom: 8px; }
.fs-item-pie { padding: 0 20px 16px; background: #f6f9fd; }
.hx .fs-item-pie a { font-weight: 800; text-decoration: none; color: var(--hx-naranja); }
.hx .fs-item-pie a:hover { text-decoration: underline; color: var(--hx-naranja-osc); }
.fs-item-pie i { margin-left: 4px; font-size: .85em; }
.fs-item.is-destacada { animation: fs-destaca 1.6s ease-out; }
@keyframes fs-destaca { 0% { box-shadow: 0 0 0 4px rgba(255, 84, 0, .45); } 100% { box-shadow: 0 0 0 4px rgba(255, 84, 0, 0); } }
.fs-item mark { padding: 0 2px; border-radius: 3px; background: #ffe2c7; color: inherit; }

/* ---------- Final ---------- */
.hx.fs-final { padding: 0 0 88px; }
.fs-final-caja {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 28px;
	padding: 44px;
	border-radius: var(--hx-radio);
	background:
		radial-gradient(600px 300px at 100% 0, rgba(48, 152, 207, .35), transparent 60%),
		linear-gradient(135deg, #15305a 0%, #1c4a82 100%);
	color: #fff;
}
.fs-final-caja > div:first-child { flex: 1 1 380px; }
.hx .fs-final-caja h2 { margin-bottom: 10px; color: #fff; }
.fs-final-caja p { margin: 0; color: rgba(255, 255, 255, .85); }
.fs-final-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.fs-final-cliente { flex: 1 1 100%; margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .92rem; }
.hx .fs-final-cliente a { font-weight: 800; color: #fff; white-space: nowrap; }
.fs-final-cliente strong { color: #fff; }

/* ---------- Página de una pregunta ---------- */
.hx.fs-hero--pregunta { padding: 30px 0 48px; }
.fs-hero--pregunta h1 {
	max-width: 900px;
	margin-top: 4px;
	font-size: clamp(1.8rem, 3.8vw, 2.7rem);
}
.hx.fs-pregunta { padding: 48px 0 64px; }
.fs-pregunta-rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px;
	align-items: start;
}
.fs-articulo { max-width: 780px; font-size: 1.05rem; line-height: 1.7; }
.hx .fs-articulo h2 {
	margin: 36px 0 12px;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}
.fs-articulo ul, .fs-articulo ol { padding-left: 1.3rem; }
.fs-articulo li { margin-bottom: 6px; }
.fs-articulo li::marker { color: var(--hx-naranja); font-weight: 800; }
.fs-rapida {
	padding: 24px 26px 10px;
	border: 1px solid #cfe0f3;
	border-left: 5px solid var(--hx-azul-claro);
	border-radius: 18px;
	background: #f2f8fe;
	font-size: 1.1rem;
}
.fs-rapida-titulo {
	margin: 0 0 8px;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hx-azul);
}
.fs-rapida-titulo i { margin-right: 4px; color: var(--hx-verde); }
.fs-aviso {
	display: flex;
	gap: 12px;
	margin: 20px 0 0;
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--hx-ambar-fondo);
	font-weight: 600;
	color: #7a3a06;
}
.fs-aviso i { margin-top: 5px; color: var(--hx-ambar); }

.fs-pasos {
	counter-reset: fs-paso;
	margin: 0;
	padding: 0 !important;
	list-style: none;
}
.fs-pasos li {
	position: relative;
	counter-increment: fs-paso;
	margin: 0 0 10px !important;
	padding: 14px 16px 14px 62px;
	border: 1px solid var(--hx-linea);
	border-radius: 14px;
	background: #fff;
}
.fs-pasos li::before {
	content: counter(fs-paso);
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--hx-naranja);
	font-weight: 800;
	color: #fff;
}

.fs-tabla-caja { overflow-x: auto; margin: 6px 0 18px; }
.fs-tabla {
	width: 100%;
	margin: 6px 0 18px;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--hx-linea);
	border-radius: 14px;
	overflow: hidden;
	font-size: .96rem;
}
.fs-tabla-caja .fs-tabla { margin: 0; }
.fs-tabla th, .fs-tabla td { padding: 10px 14px; border-bottom: 1px solid var(--hx-linea); text-align: left; vertical-align: top; }
.fs-tabla thead th { background: var(--hx-azul); font-weight: 800; color: #fff; }
.fs-tabla tbody tr:nth-child(even) td { background: var(--hx-fondo); }
.fs-tabla tbody tr:last-child td { border-bottom: 0; }

.fs-enlaces {
	margin-top: 32px;
	padding: 20px 22px;
	border-radius: 18px;
	background: var(--hx-fondo);
}
.fs-enlaces-titulo { margin: 0 0 8px; font-weight: 800; color: var(--hx-azul); }
.fs-enlaces ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0 !important; list-style: none; }
.fs-enlaces li { margin: 0 !important; }
.hx .fs-enlaces a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--hx-linea);
	border-radius: 999px;
	background: #fff;
	font-size: .94rem;
	text-decoration: none;
}
.fs-enlaces a i { font-size: .8em; color: var(--hx-naranja); }
.fs-nota { margin: 28px 0 0; font-size: .88rem; line-height: 1.55; color: var(--hx-gris); }

.fs-lateral { position: sticky; top: 90px; display: grid; gap: 20px; }
.fs-ayuda, .fs-relacionadas {
	padding: 22px;
	border: 1px solid var(--hx-linea);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--hx-sombra);
}
.fs-ayuda { display: grid; gap: 10px; }
.fs-ayuda p { margin: 0; color: var(--hx-gris); }
.fs-ayuda .fs-ayuda-titulo, .fs-relacionadas-titulo { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--hx-azul); }
.fs-ayuda .hx-btn { width: 100%; padding: 12px 18px; }
.hx .fs-ayuda-enlace { margin-top: 2px; font-size: .92rem; text-align: center; }
.fs-ayuda .fs-ayuda-cliente { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hx-linea); font-size: .86rem; line-height: 1.5; }
.fs-ayuda-cliente strong { color: var(--hx-texto); }
.hx .fs-ayuda-cliente a { white-space: nowrap; }
.fs-relacionadas ul { margin: 10px 0 0; padding: 0; list-style: none; }
.fs-relacionadas li + li { border-top: 1px solid var(--hx-linea); }
.hx .fs-relacionadas a { display: block; padding: 10px 0; font-size: .95rem; line-height: 1.4; text-decoration: none; }
.hx .fs-relacionadas a:hover { text-decoration: underline; }

.hx.fs-tema-mas { padding: 64px 0 80px; background: var(--hx-fondo); }
.fs-mas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hx .fs-mas-grid a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 16px 18px;
	border: 1px solid var(--hx-linea);
	border-radius: 14px;
	background: #fff;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	color: var(--hx-texto);
	transition: border-color .2s, box-shadow .2s;
}
.hx .fs-mas-grid a:hover { border-color: rgba(28, 74, 130, .35); box-shadow: var(--hx-sombra); color: var(--hx-azul); }
.fs-mas-grid i { flex-shrink: 0; color: var(--hx-naranja); }
.fs-volver { margin: 32px 0 0; text-align: center; }

/* ---------- Móvil ---------- */
@media (max-width: 991.98px) {
	.fs-rejilla { grid-template-columns: 1fr; gap: 0; }
	/* El índice pasa a ser una fila de temas que se desliza y se queda arriba */
	.fs-indice {
		top: 60px;
		z-index: 5;
		margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5) 22px;
		padding: 10px calc(var(--bs-gutter-x, 1.5rem) * .5);
		border: 0;
		border-bottom: 1px solid var(--hx-linea);
		border-radius: 0;
		background: rgba(255, 255, 255, .97);
		box-shadow: 0 6px 14px rgba(12, 26, 47, .06);
	}
	.fs-indice-titulo { display: none; }
	.fs-indice ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
	.fs-indice ul::-webkit-scrollbar { display: none; }
	.hx .fs-indice a { flex-shrink: 0; padding: 7px 12px; border: 1px solid var(--hx-linea); border-radius: 999px; white-space: nowrap; font-size: .86rem; }
	.fs-cat, .fs-item { scroll-margin-top: 130px; }
	.fs-pregunta-rejilla { grid-template-columns: 1fr; gap: 32px; }
	.fs-lateral { position: static; }
}
@media (max-width: 575.98px) {
	.hx.fs-hero { padding: 44px 0 40px; }
	.hx.fs-hero--pregunta { padding: 22px 0 32px; }
	.fs-buscador { padding: 6px 6px 6px 44px; }
	.fs-buscador-lupa { left: 15px; }
	.fs-buscador input { height: 42px; font-size: .96rem; }
	.fs-buscador .hx-btn { padding: 11px 16px; }
	/* Los populares en una fila que se desliza */
	.fs-populares { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5); padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) 4px; scrollbar-width: none; }
	.fs-populares::-webkit-scrollbar { display: none; }
	.fs-populares > span { flex-shrink: 0; }
	.hx .fs-populares a { white-space: nowrap; }
	.hx.fs-temas { padding-top: 40px; }
	.fs-temas-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.hx a.fs-tema { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
	.fs-tema-icono { width: 40px; height: 40px; font-size: 1.05rem; }
	.fs-tema-texto { display: none; }
	.fs-tema-nombre { font-size: .94rem; line-height: 1.25; }
	.fs-item .accordion-button { padding: 15px 16px; font-size: .98rem; }
	.fs-item .accordion-body { padding: 4px 16px 6px; }
	.fs-item-pie { padding: 0 16px 14px; }
	.fs-final-caja { padding: 28px 22px; }
	.fs-final-botones .hx-btn { flex: 1 1 100%; }
	.hx.fs-pregunta { padding-top: 28px; }
	.fs-rapida { padding: 18px 18px 6px; font-size: 1.02rem; }
	.fs-articulo { font-size: 1rem; }
	.fs-pasos li { padding-left: 56px; }
	.fs-mas-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.hx a.fs-tema, .fs-item { transition: none; }
	.hx a.fs-tema:hover { transform: none; }
	.fs-item.is-destacada { animation: none; }
}
