/* =========================================================
   EMBOLÍVAR
   ITA - HEADER TRANSVERSAL
   Archivo: emb-ita.css
   ========================================================= */

.emb-ita-header {
    --ita-blue: #073B5C;
    --ita-blue-2: #0A4F73;
    --ita-cyan: #00A9D9;
    --ita-green: #00A50E;
    --ita-text: #475569;
    --ita-muted: #64748B;
    --ita-light: #F2FAFD;
    --ita-border: #DCE8EF;

    position: relative;
    width: 100%;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #073B5C 0%,
            #084B6C 55%,
            #006BB6 100%
        );

    color: #ffffff;
}


/* =========================================================
   EFECTOS DECORATIVOS
   ========================================================= */

.emb-ita-header::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -170px;
    top: -250px;

    border-radius: 50%;

    background: rgba(0, 169, 217, 0.13);

    pointer-events: none;
}

.emb-ita-header::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    left: -140px;
    bottom: -180px;

    border-radius: 50%;

    background: rgba(0, 165, 14, 0.08);

    pointer-events: none;
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.emb-ita-header-inner {
    position: relative;

    z-index: 2;

    max-width: 1200px;

    margin: 0 auto;

    padding: 42px 30px 62px;
}


/* =========================================================
   MIGA DE PAN
   ========================================================= */

.emb-ita-breadcrumb {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin: 0 0 32px 0;

    padding: 0;

    font-size: 14px;

    line-height: 1.5;

    color: rgba(255,255,255,0.65);
}

.emb-ita-breadcrumb a {
    color: rgba(255,255,255,0.72);

    text-decoration: none;

    transition: color 0.25s ease;
}

.emb-ita-breadcrumb a:hover {
    color: #ffffff;
}

.emb-ita-breadcrumb span {
    color: rgba(255,255,255,0.35);
}

.emb-ita-breadcrumb strong {
    color: #ffffff;

    font-weight: 600;
}


/* =========================================================
   COMPONENTE
   ========================================================= */

.emb-ita-label {
    display: inline-flex;

    align-items: center;

    margin-bottom: 18px;

    padding: 8px 15px;

    background: rgba(255,255,255,0.10);

    border-left: 4px solid #00A9D9;

    border-radius: 4px;

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.2px;

    line-height: 1.4;

    text-transform: uppercase;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.emb-ita-title {
    max-width: 950px;

    margin: 0;
    padding: 0;

    color: #ffffff !important;

    font-size: 48px;

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: -0.5px;
}


/* =========================================================
   LÍNEA DECORATIVA
   ========================================================= */

.emb-ita-line {
    width: 95px;

    height: 5px;

    margin-top: 24px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #00A9D9 0%,
            #00A9D9 50%,
            #00A50E 100%
        );
}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.emb-ita-description {
    max-width: 850px;

    margin: 24px 0 0 0;

    color: rgba(255,255,255,0.78) !important;

    font-size: 18px;

    line-height: 1.75;

    font-weight: 400;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .emb-ita-header-inner {
        padding: 40px 25px 55px;
    }

    .emb-ita-title {
        font-size: 40px;
    }

    .emb-ita-description {
        font-size: 17px;
    }

}


@media (max-width: 600px) {

    .emb-ita-header-inner {
        padding: 32px 20px 45px;
    }

    .emb-ita-breadcrumb {
        margin-bottom: 25px;

        font-size: 13px;

        gap: 7px;
    }

    .emb-ita-label {
        margin-bottom: 16px;

        padding: 7px 12px;

        font-size: 10px;

        letter-spacing: 1px;
    }

    .emb-ita-title {
        font-size: 32px;

        line-height: 1.18;

        letter-spacing: 0;
    }

    .emb-ita-line {
        width: 75px;

        height: 4px;

        margin-top: 20px;
    }

    .emb-ita-description {
        margin-top: 20px;

        font-size: 16px;

        line-height: 1.65;
    }

}