/* ============================================================
   Products Directors — Informes de Directivos
   Figma: node 756:34685 (Directors frame)
   ============================================================ */

/* Full-bleed pattern */
body.has-hero-header .alphinus-container {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

body.has-hero-header {
    overflow-x: clip;
}

/* ============================================================
   HERO SECTION
   Figma: 756:34686 — height 797px
   Overlay: #7CC0FF opacity 0.5 (light blue, not navy)
   ============================================================ */
.directors-hero {
    position: relative;
    z-index: 1;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    height: 797px;
    display: flex;
    align-items: flex-start;
}

.directors-hero__bg-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
}

.directors-hero__bg {
    position: absolute;
    inset: 0;
    background: url('/cdn/sections/products/directors/images/hero-bg-desktop.webp') center top / cover no-repeat;
    z-index: 0;
}

@media (max-width: 768px) {
    .directors-hero__bg {
        background-image: url('/cdn/sections/products/directors/images/hero-bg-mobile.webp');
    }
}

.directors-hero__inner {
    position: relative;
    z-index: 1;
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    padding: calc(var(--skin-header-height) + 112px) 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 96px;
}

.directors-hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* H1: Manrope/H2/Bold — 65px 700 lh 1.3385 CENTER */
.directors-hero__headline {
    font-family: var(--skin-font-display);
    font-size: 65px;
    font-weight: 700;
    line-height: 1.3385em;
    text-align: center;
    color: var(--skin-white-500);
    margin: 0;
    max-width: 1132px;
}

/* Subtitle: inter/body L/Regular — 20px 400 lh 1.2 CENTER */
.directors-hero__subheadline {
    font-family: var(--skin-font-base);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2em;
    text-align: center;
    color: var(--skin-white-500);
    margin: 0;
    max-width: 932px;
}

/* Search: 950px wide */
.directors-hero__search {
    width: 950px;
    max-width: 100%;
}

.directors-hero__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: 12px;
    height: 80px;
    padding: 14px 12px;
    gap: 10px;
}

.directors-hero__search-icon {
    color: var(--skin-text-muted);
    flex-shrink: 0;
}

.directors-hero__search-input-area {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 8px;
    min-width: 0;
}

.directors-hero__search-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--skin-font-base);
    font-size: 16px;
    font-weight: 400;
    color: var(--skin-dark-900);
    background: transparent;
    min-width: 0;
}

.directors-hero__search-input::placeholder {
    color: #9CA3AF;
}

.directors-hero__search-clear {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--skin-text-muted);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.directors-hero__search-btn {
    background: var(--skin-darkblue-500);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    padding: 20px 24px;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.directors-hero__search-btn-icon {
    display: none;
}

.directors-hero__search-btn:hover {
    background: var(--skin-navy-hover);
}

.directors-hero__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08);
    z-index: 200;
    overflow: hidden;
}

.directors-hero__dropdown-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.directors-hero__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--skin-border-subtle-strong);
    border-top-color: var(--skin-darkblue-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.directors-hero__dropdown-count {
    padding: 10px 16px;
    font-family: var(--skin-font-base);
    font-size: 12px;
    font-weight: 400;
    color: var(--skin-text-muted);
    border-bottom: 1px solid #F3F3F3;
}

.directors-hero__dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    transition: background 0.15s;
}

.directors-hero__dropdown-item:hover,
.directors-hero__dropdown-item.is-active {
    background: #F9FAFB;
}

.directors-hero__dropdown-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.directors-hero__dropdown-item-icon.--person {
    background: #E9EAF2;
    color: var(--skin-text-muted);
}

.directors-hero__dropdown-item-name {
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 500;
    color: var(--skin-dark-900);
    display: block;
}

.directors-hero__dropdown-item-meta {
    font-family: var(--skin-font-base);
    font-size: 12px;
    font-weight: 400;
    color: var(--skin-text-muted);
    display: block;
}

.directors-hero__dropdown-empty {
    padding: 24px;
    text-align: center;
    font-family: var(--skin-font-base);
    font-size: 16px;
    font-weight: 600;
    color: var(--skin-dark-900);
}

.directors-hero__dropdown-footer {
    border-top: 1px solid #F3F3F3;
    padding: 10px 16px;
}

.directors-hero__dropdown-showall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 600;
    color: var(--skin-text-muted);
    padding: 4px 0;
    transition: color 0.15s;
}

.directors-hero__dropdown-showall:hover {
    color: var(--skin-dark-900);
}

.directors-hero__dropdown-showall svg {
    flex-shrink: 0;
    transition: transform 0.15s;
}

.directors-hero__dropdown-showall:hover svg {
    transform: translateX(2px);
}

/* ============================================================
   PROFILE FEATURES SECTION
   Figma: 756:34712 Container
   layout: column, gap 56px, padding 56px 20px, bg #F9FAFB
   Cards: row wrap, center, gap 24px — 236px wide (5 cols × 1280px inner)
   ============================================================ */
.directors-profile {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: #F9FAFB;
    padding: 56px 80px;
}

.directors-profile__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.directors-profile__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Manrope/H5/Bold — 40px 700 lh 1.2 CENTER */
.directors-profile__title {
    font-family: var(--skin-font-display);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    color: var(--skin-dark-900);
    margin: 0;
    max-width: 1152px;
}

/* Manrope/body L/Medium — 20px 500 lh 1.45 CENTER */
.directors-profile__subtitle {
    font-family: var(--skin-font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45em;
    text-align: center;
    color: var(--skin-text-muted);
    margin: 0;
}

.directors-profile__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

/* Cards: 5 cols × (1280 - 4×24) / 5 = 236.8px → 236px */
/* justify-content: space-between — icon+title stays top, desc pushed to bottom */
.directors-profile__card {
    width: 236px;
    min-height: 304px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
}

.directors-profile__card-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Icon: 48x48, bg #E7EFFF, radius 12px */
.directors-profile__card-icon {
    width: 48px;
    height: 48px;
    background: #E7EFFF;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Manrope/H7/semibold — 28px 600 lh 1.214 color var(--skin-darkblue-500) */
.directors-profile__card-title {
    font-family: var(--skin-font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.214em;
    color: var(--skin-darkblue-500);
    margin: 0;
}

/* Description pushed to bottom of card by space-between on parent */
.directors-profile__card-desc {
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 400;
    color: var(--skin-text-muted);
    line-height: 1.5em;
    margin: 0;
}

/* ============================================================
   MONITORING CTA SECTION
   Figma: 967:21513 — identical to company monitoring
   bg var(--skin-darkblue-500), padding 96px 80px
   ============================================================ */
.directors-monitoring {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    background: var(--skin-darkblue-500);
    padding: 96px 80px;
    overflow: hidden;
}

.directors-monitoring__gradient-1 {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 50%, rgba(232, 160, 32, 0.1) 0%, rgba(232, 160, 32, 0) 60%),
        radial-gradient(circle at 0% 50%, rgba(45, 138, 94, 0.06) 0%, rgba(45, 138, 94, 0) 55%);
    pointer-events: none;
    z-index: 0;
}

.directors-monitoring__gradient-2 {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 2%, rgba(255, 255, 255, 0) 2%);
    pointer-events: none;
    z-index: 0;
}

.directors-monitoring__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.directors-monitoring__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.directors-monitoring__text-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.directors-monitoring__title {
    font-family: var(--skin-font-display);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2em;
    color: #FFFFFF;
    margin: 0;
}

.directors-monitoring__subtitle {
    font-family: var(--skin-font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45em;
    color: #B4BDC1;
    margin: 0;
}

.directors-monitoring__features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Chip: subtle translucent bg + colored dot + white text — Figma 967:21523 */
.directors-monitoring__feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 8px 16px;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 400;
    color: var(--skin-white-500);
}

/* Colored dot — color set inline */
.directors-monitoring__chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: block;
}

.directors-monitoring__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.directors-monitoring__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    border-radius: 12px;
    font-family: var(--skin-font-base);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
}

.directors-monitoring__btn--primary {
    background: #FFFFFF;
    color: var(--skin-dark-900);
    border-color: var(--skin-white-500);
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
}

.directors-monitoring__btn--primary:hover {
    background: var(--skin-white-500);
}

.directors-monitoring__btn--secondary {
    background: transparent;
    color: var(--skin-white-500);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    height: 62px;
}

.directors-monitoring__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}

.directors-monitoring__visual {
    width: 320px;
    flex-shrink: 0;
}

/* Figma 967:21538/21539: Overlay+Border+OverlayBlur — 320×423px */
.directors-monitoring__visual-card {
    height: 423px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.29);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

/* Title row: Inter 12px/400 var(--skin-white-500) */
.directors-monitoring__vc-header {
    margin-bottom: 12px;
}

.directors-monitoring__vc-title {
    font-family: var(--skin-font-base);
    font-size: 12px;
    font-weight: 400;
    color: var(--skin-white-500);
    line-height: 16px;
}

/* Alert list */
.directors-monitoring__vc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Each alert row — matches Figma HorizontalBorder rows */
.directors-monitoring__vc-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.directors-monitoring__vc-item:last-child {
    border-bottom: none;
}

/* Dot column — 8px dot inside a 12px top-padded col */
.directors-monitoring__vc-dot-col {
    width: 8px;
    padding-top: 4px;
    flex-shrink: 0;
}

.directors-monitoring__vc-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    /* color set inline */
}

/* Info column */
.directors-monitoring__vc-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

/* Title: DM Sans 13px/600 var(--skin-white-500) */
.directors-monitoring__vc-item-title {
    font-family: var(--skin-font-base);
    font-size: 13px;
    font-weight: 600;
    color: var(--skin-white-500);
    line-height: 1.4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta: Inter 12px/400 var(--skin-white-500) */
.directors-monitoring__vc-item-meta {
    font-family: var(--skin-font-base);
    font-size: 12px;
    font-weight: 400;
    color: rgba(245, 245, 245, 0.7);
    line-height: 18px;
}

/* Badge: rounded pill — bg and color set inline */
.directors-monitoring__vc-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: var(--skin-font-base);
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
    align-self: flex-start;
    white-space: nowrap;
}

/* ============================================================
   RECENT MOVEMENTS TABLE
   Figma: 756:35383 Container
   layout: column, gap 40px, padding 80px, bg #F9FAFB
   Table card: white, radius 16px, padding 16px
   ============================================================ */
.directors-movements {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: #F9FAFB;
    padding: 80px;
}

.directors-movements__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.directors-movements__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Manrope/H5/Bold — 40px 700 lh 1.2 CENTER */
.directors-movements__title {
    font-family: var(--skin-font-display);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    color: var(--skin-dark-900);
    margin: 0;
    max-width: 1152px;
}

/* Manrope/body L/Medium — 20px 500 lh 1.45 CENTER */
.directors-movements__subtitle {
    font-family: var(--skin-font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45em;
    text-align: center;
    color: var(--skin-text-muted);
    margin: 0;
}

/* Table card: white, radius 16px, padding 16px, gap 24px */
.directors-movements__table-wrap {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.directors-movements__table-inner {
    overflow-x: auto;
}

.directors-movements__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Table header: border-bottom 2px rgba(9,30,66,0.14) */
.directors-movements__th {
    padding: 12px 16px;
    text-align: left;
    font-family: var(--skin-font-base);
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: var(--skin-darkblue-500);
    border-bottom: 2px solid rgba(9, 30, 66, 0.14);
    white-space: nowrap;
}

/* Table rows: border-bottom 1px */
.directors-movements__tr:not(:last-child) .directors-movements__td {
    border-bottom: 1px solid rgba(9, 30, 66, 0.14);
}

.directors-movements__td {
    padding: 14px 16px;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 400;
    color: var(--skin-text-muted);
    vertical-align: middle;
}

.directors-movements__td--director {
    font-weight: 500;
    color: var(--skin-dark-900);
    text-transform: capitalize;
}

/* Badge: rounded tag, color by type */
.directors-movements__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    background: #E9EAF2;
    font-family: var(--skin-font-base);
    font-size: 12px;
    font-weight: 500;
    color: var(--skin-darkblue-500);
    white-space: nowrap;
}

.directors-movements__badge--appointment {
    background: #F0FDF4;
    color: #00A63E;
}

.directors-movements__badge--resignation {
    background: #FEF2F1;
    color: #B32218;
}

.directors-movements__badge--modification {
    background: #FFF9EB;
    color: #B54707;
}

/* Action link: inter/body s/semibold, navy */
.directors-movements__action-link {
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 600;
    color: var(--skin-darkblue-500);
    text-decoration: none;
    padding: 8px 0;
    display: inline-block;
}

.directors-movements__action-link:hover {
    color: var(--skin-navy-hover);
    text-decoration: underline;
}

/* Filter bar: search + date dropdown + change type dropdown */
.directors-movements__filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.directors-movements__filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F9FAFB;
    border: 1px solid var(--skin-border-subtle-strong);
    border-radius: 8px;
    padding: 10px 12px;
    flex: 1;
    min-width: 200px;
    color: var(--skin-text-muted);
}

.directors-movements__filter-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 400;
    color: var(--skin-dark-900);
    min-width: 0;
}

.directors-movements__filter-input::placeholder {
    color: #9CA3AF;
}

/* Dropdown trigger button */
.directors-movements__filter-select-wrap {
    position: relative;
    flex-shrink: 0;
}

.directors-movements__filter-select {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F9FAFB;
    border: 1px solid var(--skin-border-subtle-strong);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 400;
    color: var(--skin-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s;
}

.directors-movements__filter-select:hover,
.directors-movements__filter-select.is-open {
    border-color: var(--skin-darkblue-500);
    color: var(--skin-dark-900);
}

/* Dropdown panel */
.directors-movements__filter-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #FFFFFF;
    border: 1px solid var(--skin-border-subtle-strong);
    border-radius: 8px;
    box-shadow: 0px 4px 6px -2px rgba(10, 13, 18, 0.05), 0px 12px 16px -4px rgba(10, 13, 18, 0.1);
    z-index: 50;
    overflow: hidden;
    min-width: 160px;
}

.directors-movements__filter-option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 400;
    color: var(--skin-text-muted);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.directors-movements__filter-option:hover {
    background: #F9FAFB;
    color: var(--skin-dark-900);
}

.directors-movements__filter-option.is-active {
    color: var(--skin-darkblue-500);
    font-weight: 600;
    background: #EFF8FF;
}

/* Empty state row */
.directors-movements__td--empty {
    text-align: center;
    padding: 32px 16px;
    color: #9CA3AF;
    font-style: italic;
}

/* Pagination: row, center, gap 32px */
.directors-movements__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 12px 24px 16px;
}

.directors-movements__page-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid var(--skin-border-subtle-strong);
    border-radius: 8px;
    cursor: pointer;
    color: var(--skin-text-muted);
    transition: background 0.15s;
}

.directors-movements__page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.directors-movements__page-btn:not(:disabled):hover {
    background: #F9FAFB;
}

.directors-movements__pages {
    display: flex;
    gap: 2px;
}

.directors-movements__page-num {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 400;
    color: var(--skin-text-muted);
    transition: background 0.15s;
}

.directors-movements__page-num.is-active {
    background: #E9EAF2;
    color: var(--skin-dark-900);
    font-weight: 600;
}

.directors-movements__page-num:not(.is-active):hover {
    background: #F9FAFB;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .directors-hero {
        height: auto;
        min-height: 600px;
    }

    .directors-hero__inner {
        padding: calc(var(--skin-header-height) + 64px) 20px 48px;
        gap: 48px;
    }

    .directors-hero__headline {
        font-size: 36px;
    }

    .directors-hero__subheadline {
        font-size: 16px;
    }

    .directors-hero__search {
        width: 100%;
    }

    .directors-profile {
        padding: 48px 20px;
    }

    .directors-profile__title,
    .directors-movements__title {
        font-size: 28px;
    }

    .directors-profile__grid {
        flex-direction: column;
        align-items: stretch;
    }

    .directors-profile__card {
        width: 100%;
        min-height: auto;
    }

    .directors-monitoring {
        padding: 48px 20px;
    }

    .directors-monitoring__inner {
        flex-direction: column;
        gap: 40px;
    }

    .directors-monitoring__title {
        font-size: 28px;
    }

    .directors-monitoring__visual {
        width: 100%;
    }

    .directors-movements {
        padding: 48px 20px;
    }

    .directors-movements__th,
    .directors-movements__td {
        padding: 10px 12px;
        font-size: 13px;
    }

    .directors-movements__pagination {
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .directors-hero__headline {
        font-size: 28px;
    }

    .directors-hero__search-btn span {
        display: none;
    }

    .directors-hero__search-btn-icon {
        display: block;
    }
}