/* Megamenú de escritorio (diseño B) y menú del móvil (diseño A). 2026-10-15.
   Marcado en inc/menu.php y template-parts/offcanvas.php. */

.jtm-baldosa { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; }
.jtm-baldosa svg { display: block; }

/* ---------- Escritorio ---------- */
@media (min-width: 1020px) {
	.cs-header { position: relative; }
	.cs-header__nav-inner > li.jtm-con-panel { position: static; }
	.cs-header__nav-inner > li.jtm-con-panel > a > span::after {
		content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; vertical-align: 2px;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55;
		transition: transform .18s ease;
	}
	.cs-header__nav-inner > li.jtm-con-panel:hover > a > span::after,
	.cs-header__nav-inner > li.jtm-con-panel:focus-within > a > span::after { transform: rotate(225deg); vertical-align: -2px; }

	.jtm-panel {
		position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
		visibility: hidden; opacity: 0; transform: translateY(6px);
		transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
		background: #fff; border-top: 1px solid #ECECF2;
		box-shadow: 0 24px 40px -12px rgba(41, 41, 75, .22);
	}
	/* Puente invisible para que el ratón no pierda el panel al bajar. */
	.jtm-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
	.cs-header__nav-inner > li.jtm-con-panel:hover > .jtm-panel,
	.cs-header__nav-inner > li.jtm-con-panel:focus-within > .jtm-panel {
		visibility: visible; opacity: 1; transform: none; transition-delay: 0s;
	}
	.jtm-panel__dentro { max-width: 1200px; margin: 0 auto; padding: 28px 40px 22px; display: flex; flex-direction: column; gap: 20px; }
	.jtm-panel__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	a.jtm-tema {
		display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 14px;
		color: #29294B; text-decoration: none; transition: background .15s ease, box-shadow .15s ease;
	}
	a.jtm-tema:hover, a.jtm-tema:focus-visible { background: #F7F7FA; box-shadow: 0 0 0 1px #ECECF2; }
	.jtm-tema__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
	.jtm-tema__texto strong { font-size: 16px; font-weight: 700; line-height: 1.25; }
	.jtm-tema__texto span { font-size: 14px; line-height: 1.4; color: #696981; white-space: normal; }
	a.jtm-tema:hover .jtm-tema__texto strong { color: var(--cs-color-accent, #5955D1); }
	.jtm-panel__pie {
		display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
		padding: 16px 14px 0; border-top: 1px solid #EEEEF3; font-size: 14px;
	}
	.jtm-panel__etiqueta { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #696981; }
	.jtm-panel__pie a { color: #29294B; font-weight: 500; text-decoration: none; }
	.jtm-panel__pie a:hover { color: var(--cs-color-accent, #5955D1); }
	.jtm-panel__pie a.jtm-panel__todo { margin-left: auto; font-weight: 700; color: var(--cs-color-accent, #5955D1); }
}
@media (max-width: 1019.98px) {
	.jtm-panel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.jtm-panel, .cs-header__nav-inner > li.jtm-con-panel > a > span::after { transition: none; }
}

/* ---------- Móvil ---------- */
.jtm-movil .cs-offcanvas__header { border-bottom: 1px solid #EEEEF3; }
.jtm-movil .jtm-cerrar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px; background: #F2F2F6; }
.jtm-movil__dentro { display: flex; flex-direction: column; gap: 22px; padding: 16px 20px 28px; }

.jtm-buscar__caja { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 14px; background: #F2F2F6; color: #696981; cursor: text; }
.jtm-buscar__caja input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: #29294B; outline: none; padding: 0; height: 100%; }

.jtm-movil__etiqueta { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #696981; }
.jtm-movil__temas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
a.jtm-movil__tema {
	display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px;
	background: #fff; color: #29294B; text-decoration: none;
	box-shadow: 0 0 0 1px rgba(41, 41, 75, .08), 0 4px 12px rgba(41, 41, 75, .06);
}
a.jtm-movil__tema strong { font-size: 15px; line-height: 1.25; }
a.jtm-movil__tema:active { transform: scale(.98); }
.jtm-baldosa--movil { width: 42px; height: 42px; border-radius: 12px; }
a.jtm-movil__todo { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--cs-color-accent, #5955D1); text-decoration: none; }

.jtm-movil__cats { display: flex; flex-direction: column; }
a.jtm-movil__cat {
	display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 0;
	border-bottom: 1px solid #EEEEF3; color: #29294B; text-decoration: none; font-size: 17px; font-weight: 700;
}
a.jtm-movil__cat > span:not(.jtm-baldosa) { flex: 1 1 auto; }
a.jtm-movil__cat svg:last-child { color: #A0A0B4; }
.jtm-baldosa--fila { width: 38px; height: 38px; border-radius: 11px; }

.jtm-movil__leidos { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; background: #F7F7FA; }
.jtm-movil__leidos .jtm-movil__etiqueta { margin: 0; }
.jtm-movil__leidos a { color: #29294B; font-size: 15px; font-weight: 500; line-height: 1.35; text-decoration: none; }

.jtm-movil__pie { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font-size: 14px; }
.jtm-movil__pie a { color: #696981; text-decoration: none; }