.mat-section-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 24px; }
.mat-section-links a { padding: 10px 16px; border: 1px solid var(--rec-line); border-radius: 24px; color: var(--rec-navy); text-decoration: none; font-weight: 600; }
.mat-section-links a:hover { background: var(--rec-paper); }
.mat-section { margin: 24px 0; scroll-margin-top: 24px; }
.mat-section h2 { color: var(--rec-navy); }
.mat-kit-feature { display: grid; grid-template-columns: 3fr 2fr; overflow: hidden; border: 1px solid var(--rec-line); border-radius: 14px; background: var(--rec-paper); margin-top: 16px; }
.mat-kit-preview { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 18px; background: #eeeaf5; align-items: center; }
.mat-kit-preview img { width: 100%; height: auto; aspect-ratio: 210 / 297; object-fit: contain; background: white; border: 1px solid var(--rec-line); box-shadow: var(--rec-shadow); }
.mat-kit-copy { padding: 20px; align-self: center; }
.mat-kit-copy h3 { font-size: 1.65rem; line-height: 1.25; margin: 0 0 16px; }
.mat-kit-copy ul { padding-left: 20px; font-size: .92rem; }
.mat-kit-copy li { margin-bottom: 8px; }
.mat-kit-cta { display: inline-block; padding: 12px 18px; background: var(--rec-navy); color: white; text-decoration: none; border-radius: 8px; font-weight: 700; margin-top: 10px; }
.mat-kit-cta:hover { background: var(--rec-morado); }
.mat-filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; background: var(--rec-paper); padding: 20px; border-radius: 10px; margin: 24px 0; }
.mat-filters label { display: flex; flex: 1 1 180px; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 600; }
.mat-filters input, .mat-filters select, .mat-filters button { font: inherit; border: 1px solid var(--rec-line); border-radius: 6px; padding: 10px; min-height: 44px; background: white; color: var(--rec-ink); max-width: 100%; }
.mat-filters button { cursor: pointer; }
.mat-section [hidden] { display: none !important; }
.mat-section :is(a, button, input, select):focus-visible, .mat-section-links a:focus-visible { outline: 3px solid var(--rec-morado); outline-offset: 3px; }
#mat-empty { padding: 20px; background: var(--rec-paper); border-left: 3px solid var(--rec-morado); }
@media (max-width: 760px) {
    .mat-kit-feature { grid-template-columns: 1fr; }
    .mat-kit-preview { padding: 18px; }
    .mat-kit-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mat-kit-copy { padding: 18px; }
    .mat-filters { padding: 16px; }
}