﻿/* ============================================================
   capabilities.css — Strip horizontal bajo el hero
   ============================================================ */

#capabilities {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    padding: 0;
}

.capabilities__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 56px;
}

.capabilities__strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}

.capability-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 16px;
    text-align: center;
    border-right: 1px solid var(--border-light);
    transition: background var(--transition-base), color var(--transition-base);
    cursor: default;
}

.capability-item:last-child {
    border-right: none;
}

.capability-item:hover {
    background: var(--color-red);
    color: var(--text-white);
}

.capability-item__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-red);
    transition: color var(--transition-base);
}

.capability-item:hover .capability-item__icon {
    color: var(--text-white);
}

.capability-item__icon svg {
    width: 32px;
    height: 32px;
}

.capability-item__text {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-primary);
    transition: color var(--transition-base);
}

.capability-item:hover .capability-item__text {
    color: var(--text-white);
}

@media (max-width: 1024px) {
    .capabilities__strip { grid-template-columns: repeat(3, 1fr); }
    .capability-item:nth-child(3) { border-right: none; }
    .capability-item:nth-child(-n+3) { border-bottom: 1px solid var(--border-light); }
}

@media (max-width: 640px) {
    .capabilities__strip { grid-template-columns: repeat(2, 1fr); }
    .capability-item { border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: 24px 8px; }
    .capability-item:nth-child(odd) { border-right: 1px solid var(--border-light); }
    .capability-item:nth-child(even) { border-right: none; }
}


