/* ==========================================================
   KAMANA
   HISTORY SEPARATOR BAND V4

   Objetivo:
   - mantener el contenido actual
   - eliminar el gran fondo amarillo liso
   - eliminar las cajas amarillas internas
   - dejar un solo contenedor visual full width
   - usar un fondo inspirado en el header
     con azul + fucsia + amarillo
   ========================================================== */


/* contenedor exterior del separador */
body[data-page="inicio"] .hero-history-separator {
    position: relative !important;
    z-index: 5 !important;

    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}


/* contenedor grande donde viven los 3 bloques */
body[data-page="inicio"] .hero-history-separator .history-separator-inner {
    position: relative !important;
    isolation: isolate !important;
    z-index: 2 !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding:
        42px
        max(28px, calc((100vw - 1320px) / 2))
        42px
        max(28px, calc((100vw - 1320px) / 2)) !important;

    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;

    background:
        linear-gradient(
            132deg,
            transparent 0 4%,
            #078ee9 4% 12%,
            transparent 12% 100%
        ),
        linear-gradient(
            132deg,
            transparent 0 10%,
            #ef0f74 10% 17%,
            transparent 17% 100%
        ),
        linear-gradient(
            132deg,
            transparent 0 16%,
            #ffbd0a 16% 22%,
            transparent 22% 100%
        ),
        linear-gradient(
            -132deg,
            transparent 0 79%,
            #ffbd0a 79% 84%,
            transparent 84% 100%
        ),
        linear-gradient(
            -132deg,
            transparent 0 84%,
            #ef0f74 84% 91%,
            transparent 91% 100%
        ),
        linear-gradient(
            -132deg,
            transparent 0 90%,
            #078ee9 90% 100%
        ),
        linear-gradient(
            135deg,
            #0b7ef1 0%,
            #0a6ddd 45%,
            #085fca 100%
        ) !important;

    box-shadow:
        0 22px 46px rgba(0,0,0,.22) !important;
}


/* detalles diagonales sutiles */
body[data-page="inicio"] .hero-history-separator .history-separator-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            132deg,
            transparent 0 18%,
            rgba(255,255,255,.12) 18% 18.8%,
            transparent 18.8% 100%
        ),
        linear-gradient(
            -132deg,
            transparent 0 83%,
            rgba(255,255,255,.10) 83% 83.8%,
            transparent 83.8% 100%
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,0)
        );
}


/* cada bloque interno: sin caja amarilla individual */
body[data-page="inicio"] .hero-history-separator .history-recognition {
    position: relative !important;
    z-index: 2 !important;

    min-height: 246px !important;

    padding: 18px 34px 20px 34px !important;

    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    backdrop-filter: none !important;
}


/* separadores verticales entre los 3 bloques */
body[data-page="inicio"] .hero-history-separator .history-recognition:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,.16) !important;
}


/* iconos negros circulares */
body[data-page="inicio"] .hero-history-separator .history-recognition-icon,
body[data-page="inicio"] .hero-history-separator .history-recognition figure,
body[data-page="inicio"] .hero-history-separator .history-recognition .icon-wrap {
    background: #05070b !important;
    border: 0 !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.30) !important;
}


/* textos en blanco dentro de la franja */
body[data-page="inicio"] .hero-history-separator .history-recognition,
body[data-page="inicio"] .hero-history-separator .history-recognition h3,
body[data-page="inicio"] .hero-history-separator .history-recognition h4,
body[data-page="inicio"] .hero-history-separator .history-recognition p,
body[data-page="inicio"] .hero-history-separator .history-recognition span,
body[data-page="inicio"] .hero-history-separator .history-recognition small {
    color: #ffffff !important;
}


/* numeración 01 02 03 más suave */
body[data-page="inicio"] .hero-history-separator .history-recognition [class*="number"],
body[data-page="inicio"] .hero-history-separator .history-recognition [class*="index"],
body[data-page="inicio"] .hero-history-separator .history-recognition [class*="count"] {
    color: rgba(255,255,255,.28) !important;
}


/* responsive */
@media (max-width: 980px) {
    body[data-page="inicio"] .hero-history-separator .history-separator-inner {
        grid-template-columns: 1fr !important;
        padding:
            28px
            20px
            28px
            20px !important;
    }

    body[data-page="inicio"] .hero-history-separator .history-recognition:not(:last-child) {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.16) !important;
    }

    body[data-page="inicio"] .hero-history-separator .history-recognition {
        min-height: auto !important;
        padding: 24px 24px !important;
    }
}