/* ==========================================================
   GRUPO EMPRESARIAL KAMANA
   SEPARADOR HERO / MAIN
   ========================================================== */

body[data-page="inicio"]
main#contenido
> .hero-history-separator {
    position: relative;

    z-index: 5;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    border: 0 !important;

    background:
        linear-gradient(
            105deg,
            #ef0f74 0%,
            #ef0f74 24%,
            #ffbd0a 48%,
            #078ee9 76%,
            #078ee9 100%
        ) !important;

    box-shadow:
        0 -10px 35px rgba(0,0,0,.20),
        0 18px 46px rgba(0,0,0,.28) !important;
}


/* anulamos reglas generales del main unificado */
body[data-page="inicio"]
main#contenido
> .hero-history-separator::before,

body[data-page="inicio"]
main#contenido
> .hero-history-separator::after {
    display: none !important;
    content: none !important;
}


.history-separator-inner {
    position: relative;

    display: grid;

    width:
        min(
            1320px,
            calc(100% - 48px)
        );

    max-width: none !important;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    margin-inline: auto;

    background:
        rgba(6,9,12,.26) !important;

    border-right:
        1px solid rgba(255,255,255,.18);

    border-left:
        1px solid rgba(255,255,255,.18);

    box-shadow:
        none !important;

    backdrop-filter:
        blur(8px);
}


.history-recognition {
    position: relative;

    display: grid;

    min-height: 150px;

    grid-template-columns:
        68px minmax(0,1fr);

    gap: 21px;

    align-items: center;

    padding:
        28px
        34px;

    border-right:
        1px solid rgba(255,255,255,.22);
}


.history-recognition:last-child {
    border-right: 0;
}


.history-recognition::after {
    position: absolute;

    right: 22px;
    bottom: 17px;

    color:
        rgba(255,255,255,.15);

    font-family:
        var(--serif);

    font-size: 3.1rem;

    font-weight: 700;

    line-height: 1;

    content:
        attr(data-number);
}


.history-recognition-icon {
    display: grid;

    width: 64px;
    height: 64px;

    place-items: center;

    border:
        1px solid rgba(255,255,255,.64);

    border-radius: 50%;

    background:
        rgba(6,9,12,.82);

    color: #fff;

    box-shadow:
        0 12px 30px rgba(0,0,0,.24);
}


.history-recognition-icon svg {
    width: 31px;
    height: 31px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.history-recognition-copy {
    position: relative;

    z-index: 2;

    min-width: 0;
}


.history-recognition-label {
    display: block;

    margin-bottom: 6px;

    color:
        rgba(255,255,255,.74);

    font-size: .59rem;

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.history-recognition h3 {
    margin:
        0
        0
        5px;

    color: #fff;

    font-family:
        var(--serif);

    font-size:
        clamp(1.45rem, 1.8vw, 2rem);

    line-height: 1;
}


.history-recognition p {
    max-width: 230px;

    margin: 0;

    color:
        rgba(255,255,255,.82);

    font-size: .78rem;

    line-height: 1.42;
}


/* segmento amarillo: reforzamos contraste */
.history-recognition:nth-child(2) {
    background:
        rgba(46,31,0,.22);
}


/* segmento azul */
.history-recognition:nth-child(3) {
    background:
        rgba(0,22,45,.15);
}


/* hover muy sutil */
@media (hover:hover) {

    .history-recognition {
        transition:
            background 180ms ease;
    }

    .history-recognition:hover {
        background:
            rgba(6,9,12,.38);
    }
}


/* tablet */
@media (max-width: 900px) {

    .history-separator-inner {
        width:
            calc(100% - 30px);
    }

    .history-recognition {
        grid-template-columns:
            54px 1fr;

        gap: 14px;

        padding:
            24px
            20px;
    }

    .history-recognition-icon {
        width: 52px;
        height: 52px;
    }

    .history-recognition-icon svg {
        width: 26px;
        height: 26px;
    }
}


/* móvil */
@media (max-width: 680px) {

    .history-separator-inner {
        width: 100%;

        grid-template-columns: 1fr;

        border: 0;
    }

    .history-recognition {
        min-height: 116px;

        border-right: 0;

        border-bottom:
            1px solid rgba(255,255,255,.20);

        padding:
            22px
            26px;
    }

    .history-recognition:last-child {
        border-bottom: 0;
    }

    .history-recognition p {
        max-width: 290px;
    }

    .history-recognition::after {
        right: 18px;

        font-size: 2.4rem;
    }
}