/* ==== 2.1 Distribuidor de contenido ==== */

/* ---- Columna del título ---- */

/* Título */
.distribuidores.dist-content.two-columns .container .feature-item.content-header {
    padding-right: 7.15rem;
}

/* Botón de enlace de interés */
.distribuidores.dist-content .container .feature-item.content-header .section-button {
    margin-top: 1.25rem;
}

.distribuidores.dist-content .container .feature-item.content-header .section-button a {
    --btn-padding: 11px 1rem 10px 1rem;
    width: 207px;
}

/* ---- Columna de contenido del distribuidor ---- */

/* Grid */
.distribuidores.dist-content.two-columns .container .feature-item .content-grid {
    padding-left: 0.625rem;
}

.distribuidores.dist-content.all-columns .container .feature-item .content-grid,
.distribuidores.dist-content.all-columns-icons .container .feature-item .content-grid {
    padding-left: 0;
}

/* Imagen */
.distribuidores.dist-content .container .feature-item .content-grid .content-item .image-box {
    max-height: 260px;
    max-width: 324px;
}

/* Se desactiva la barra de scroll */
.distribuidores.dist-content .container .feature-item .content-grid::-webkit-scrollbar {
    display: none;
}

.distribuidores.dist-content .container .feature-item .content-grid {
    scrollbar-width: none;
}

/* ---- Versión con iconos ---- */

/* Card con borde */
.distribuidores.dist-content.all-columns-icons .container .feature-item .content-grid .content-item a {
    border: 2px solid var(--turquoise-20);
    border-radius: var(--radius-default);
    padding: 3rem 2.5rem 2.15rem;
    transition: background 0.3s ease-in-out;
}

.distribuidores.dist-content.all-columns-icons .container .feature-item .content-grid .content-item a:hover {
    background: var(--background-accent-low);
}

/* Icono */
.distribuidores.dist-content .container .feature-item .content-grid .icon-box i {
    color: var(--content-accent);
}

.distribuidores.dist-content.icon-secondary .container .feature-item .content-grid .icon-box i {
    color: var(--content-high);
}

.distribuidores.dist-content.icon-turquoise .container .feature-item .content-grid .icon-box i {
    color: var(--turquoise-60);
}

/* ---- Link del caption ---- */

.distribuidores.dist-content .container .feature-item .content-grid .image-caption .link-caption,
.distribuidores.dist-content .container .feature-item .content-grid .icon-caption .link-caption {
    color: var(--content-accent);
    display: block;
    font-size: var(--link-font-size, 1rem);
    font-weight: var(--link-font-weight, 500);
    line-height: var(--link-line-height, 1.375rem);
    width: fit-content;
    max-width: 100%;
    word-break: break-word;
}

/* Hover underline en link */
.distribuidores.dist-content .container .feature-item .content-grid .content-item a:hover .image-caption .link-text,
.distribuidores.dist-content .container .feature-item .content-grid .content-item a:hover .icon-caption .link-caption .link-text {
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 2px !important;
}

/* ==== Responsive ==== */

/* ---- Desktop (>= 992px) ---- */
@media (min-width: 992px) {
    .distribuidores.dist-content .container .content-item {
        flex-shrink: unset;
    }

    .distribuidores .container .feature-item .content-grid {
        overflow: visible;
    }

    .distribuidores.dist-content.two-columns .container .feature-item .content-grid .content-grid-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .distribuidores.dist-content.three-columns .container .feature-item .content-grid .content-grid-items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }

    .distribuidores.dist-content.all-columns .container .feature-item .content-grid .content-grid-items {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }


    .distribuidores.dist-content.all-columns-icons .container .feature-item .content-grid .content-grid-items {
        gap: 1.25rem !important;
    }
}

/* ---- Tablet y móvil (<= 991px) ---- */
@media (max-width: 991px) {

    .distribuidores.dist-content .container .feature-item .content-grid .content-item {
        height: auto;
    }

    /* Título */
    .distribuidores.dist-content .container .feature-item.content-header .section-title {
        font-size: 1.75rem;
        line-height: 2.25rem;
    }

    /* Two columns */
    .distribuidores.dist-content.two-columns .container .feature-item.content-header {
        padding-right: 0;
    }

    .distribuidores.dist-content.two-columns .container .feature-item .content-grid {
        padding-left: 0;
        gap: 0;
    }

    /* All columns */
    .distribuidores.dist-content.all-columns .container .feature-item.content-header .section-button {
        margin-top: 1.5rem;
    }

    .distribuidores.dist-content.all-columns .container .feature-item:nth-child(2) {
        margin-top: 2.4rem;
    }

    /* Ancho de items */
    .distribuidores.dist-content .container .feature-item .content-grid .content-item {
        max-width: 254px;
    }

    .distribuidores.dist-content.all-columns-icons .container .feature-item .content-grid .content-item:first-child {
        padding-left: 0;
    }

    /* Link */
    .distribuidores.dist-content .container .feature-item .content-grid .icon-caption .link-caption {
        margin-top: .85rem;
    }

    /* Versión con iconos */
    .distribuidores.dist-content.all-columns-icons .container .feature-item .content-grid .content-item a {
        padding: 1.3rem 1rem 2rem 1rem;
    }

    .distribuidores.dist-content.all-columns-icons .container .feature-item .content-grid .content-item a .link-caption {
        bottom: 1.75rem;
    }

    /* Imagen */
    .distribuidores.dist-content .container .feature-item .content-grid .image-box {
        max-height: 203px !important;
    }
}

/* ---- Tablet (576px - 991px) ---- */
@media (max-width: 991px) and (min-width: 575.98px) {
    .distribuidores.dist-content .container .feature-item .content-grid .image-caption .link-caption {
        bottom: -1.1rem !important;
    }
}

/* ---- Móvil (<= 575px) ---- */
@media (max-width: 575.98px) {
    .distribuidores.dist-content.all-columns .container .feature-item.content-header .section-button a {
        width: 100%;
    }

    .distribuidores.dist-content.all-columns .container .feature-item.content-header {
        padding-right: 0;
    }
}