/* Página de funcionalidades (catálogo /funcionalidades/) ---------------------
   Herói escuro + painel claro sobreposto; navegação lateral fixa à esquerda
   e grupos em grade de cards. No celular a navegação vira pílulas fixas. */

.ect_feat-hero { padding-bottom: clamp(6rem, 10vw, 9rem); }
.ect_feat-hero__inner { display: flex; flex-direction: column; align-items: center; }
.ect_feat-hero .ect_section-head__actions { justify-content: center; }

.ect_feat-panel { position: relative; margin-top: clamp(-4rem, -6vw, -3rem); padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--ect-pad-md); border-radius: var(--ect-radius-section) var(--ect-radius-section) 0 0; background-color: var(--ect-bg); }
.ect_feat-layout { display: grid; grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 4vw, 4rem); }

/* Navegação lateral */
.ect_feat-nav { position: sticky; top: calc(var(--ect-header-h, 5.5rem) + 1.5rem); }
.ect_feat-nav__box { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border: 1px solid var(--ect-line); border-radius: var(--ect-radius-section); background-color: var(--ect-neutral-100); }
.ect_feat-nav__title { padding-inline: .75rem; color: var(--ect-black-muted); font-size: var(--ect-text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ect_feat-nav__list { display: flex; flex-direction: column; gap: .125rem; margin: 0; padding: 0; list-style: none; }
.ect_feat-nav__link { display: flex; align-items: center; gap: .625rem; padding: .5625rem .75rem; border-radius: var(--ect-radius-md); color: var(--ect-black-muted); font-size: var(--ect-text-sm); font-weight: 500; line-height: 1.3; text-decoration: none; transition: background-color var(--ect-duration) var(--ect-ease), color var(--ect-duration) var(--ect-ease); }
.ect_feat-nav__link .ect_icon { flex: none; width: 1rem; color: currentColor; }
.ect_feat-nav__label { flex: 1; min-width: 0; }
.ect_feat-nav__count { flex: none; min-width: 1.5rem; padding: .0625rem .375rem; border-radius: var(--ect-radius-pill); background-color: var(--ect-neutral-white); color: var(--ect-black-muted); font-size: var(--ect-text-xs); text-align: center; }
.ect_feat-nav__link:hover { background-color: var(--ect-neutral-white); color: var(--ect-fg); }
.ect_feat-nav__link.is-active { background-color: var(--ect-neutral-white); color: var(--ect-blue); box-shadow: 0 1px 2px #0000000f; }
.ect_feat-nav__link.is-active .ect_feat-nav__count { background-color: var(--ect-blue-light); color: var(--ect-blue); }
.ect_feat-nav__link.is-empty { opacity: .4; }

.ect_feat-search { display: flex; align-items: center; gap: .625rem; height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--ect-line); border-radius: var(--ect-radius-pill); background-color: var(--ect-neutral-white); color: var(--ect-black-muted); transition: border-color var(--ect-duration) var(--ect-ease); }
.ect_feat-search:focus-within { border-color: var(--ect-fg); }
.ect_feat-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ect-fg); font: inherit; font-size: var(--ect-text-sm); outline: none; }
.ect_feat-search input::placeholder { color: var(--ect-black-muted); }

/* Grupos */
.ect_feat-content { display: flex; flex-direction: column; gap: clamp(3.5rem, 6vw, 5rem); min-width: 0; }
.ect_feat-group { scroll-margin-top: .5rem; } /* + cabeçalho (scroll-padding do <html>) */
.ect_feat-group[hidden] { display: none; }
.ect_feat-group__head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.ect_feat-group__icon { display: grid; flex: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--ect-radius-md); background-color: var(--ect-navy); color: var(--ect-neutral-white); font-size: 1.125rem; }
.ect_feat-group__head h2 { color: var(--ect-navy); }
.ect_feat-group__desc { margin-top: .25rem; color: var(--ect-black-muted); }

.ect_feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ect_feat-card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border: 1px solid var(--ect-line); border-radius: var(--ect-radius-section); background-color: var(--ect-bg); transition: border-color var(--ect-duration) var(--ect-ease), transform var(--ect-duration) var(--ect-ease); }
.ect_feat-card[hidden] { display: none; }
.ect_feat-card__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--ect-radius-md); background-color: var(--ect-blue-light); color: var(--ect-blue); font-size: 1.0625rem; }
.ect_feat-card__body { display: flex; flex: 1; flex-direction: column; gap: .375rem; }
.ect_feat-card__title { color: var(--ect-fg); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.ect_feat-card__title a { color: inherit; text-decoration: none; }
/* O card inteiro é clicável quando há página própria. */
.ect_feat-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ect_feat-card__desc { color: var(--ect-black-muted); font-size: var(--ect-text-sm); line-height: 1.55; }
.ect_feat-card__more { display: inline-flex; align-items: center; gap: .375rem; margin-top: auto; padding-top: .5rem; color: var(--ect-blue); font-size: var(--ect-text-sm); font-weight: 600; }
.ect_feat-card__more .ect_icon { transition: transform var(--ect-duration) var(--ect-ease); }
.ect_feat-card--link:hover { border-color: var(--ect-neutral-300); transform: translateY(-2px); }
.ect_feat-card--link:hover .ect_feat-card__more .ect_icon { transform: translateX(3px); }
.ect_feat-card--link:has(a:focus-visible) { outline: 2px solid var(--ect-blue); outline-offset: 2px; }

.ect_feat-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ect-gap-sm); padding: var(--ect-gap-lg); border: 1px dashed var(--ect-line); border-radius: var(--ect-radius-section); }
.ect_feat-empty[hidden] { display: none; }

@media (max-width: 1199px) {
	.ect_feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Celular e tablet: busca + pílulas das áreas, fixas abaixo do cabeçalho */
@media (max-width: 991px) {
	.ect_feat-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.ect_feat-nav { top: calc(var(--ect-header-h, 5.5rem) - 1px); z-index: 5; margin-inline: calc(var(--ect-gutter) * -1); padding: .75rem var(--ect-gutter); background-color: var(--ect-bg); box-shadow: 0 1px 0 var(--ect-line); }
	.ect_feat-nav__box { gap: .75rem; padding: 0; border: 0; background: none; }
	.ect_feat-nav__title { display: none; }
	.ect_feat-nav__list { flex-direction: row; gap: .5rem; margin-inline: calc(var(--ect-gutter) * -1); padding-inline: var(--ect-gutter); overflow-x: auto; scrollbar-width: none; }
	.ect_feat-nav__list::-webkit-scrollbar { display: none; }
	.ect_feat-nav__list li { flex: none; }
	.ect_feat-nav__link { padding: .4375rem .875rem; border: 1px solid var(--ect-line); border-radius: var(--ect-radius-pill); white-space: nowrap; }
	.ect_feat-nav__link .ect_icon,
	.ect_feat-nav__count { display: none; }
	.ect_feat-nav__link.is-active { border-color: var(--ect-neutral-black); background-color: var(--ect-neutral-black); color: var(--ect-neutral-white); box-shadow: none; }
	.ect_feat-group { scroll-margin-top: 7rem; } /* fileira de pílulas fixa + cabeçalho (scroll-padding do <html>) */
}
@media (max-width: 599px) {
	.ect_feat-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	.ect_feat-card { flex-direction: row; gap: .875rem; padding: 1rem; }
	.ect_feat-card__icon { flex: none; width: 2.25rem; height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ect_feat-card--link:hover { transform: none; }
}