/* =============================================
   HOJA DE RUTA 2 — estilos exclusivos
   ============================================= */


/* === ¿QUÉ ES? === */
.hdr2-que-es {
    padding: 6rem 0;
    background: #fff;
}
.hdr2-que-es__title {
    font-family: var(--font-bebas);
    font-size: 70px;
    color: var(--secondary-color);
    line-height: 1;
    margin-bottom: 1.5rem;
}
.hdr2-que-es__text {
    font-family: var(--font-sf-pro);
    font-size: 22px;
    color: #444;
    line-height: 1.5;
}
.hdr2-que-es .col-md-6:first-child {
    border-right: 1px solid #ddd;
    padding-right: 3rem;
}
.hdr2-que-es__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.hdr2-que-es__list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-sf-pro);
    font-size: 19px;
    color: #444;
    line-height: 1.4;
}
.hdr2-que-es__list li img {
    width: 75px;
    height: auto;
    flex-shrink: 0;
}

/* === CAPÍTULOS === */
.hdr2-capitulos {
    background: #d6e6ed;
    padding: 5rem 0;
}
.hdr2-capitulos__title {
    font-family: var(--font-bebas);
    font-size: 70px;
    color: var(--gray);
    text-align: center;
    margin-bottom: 3rem;
}
.hdr2-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    background: #fff;
    border-radius: 30px;
    padding: 2.25rem 1.5rem;
    text-decoration: none;
    font-family: var(--font-sf-pro);
    font-size: 20px;
    font-weight: 700;
    color: var(--gray) !important;
    transition: .25s all;
}
.hdr2-pill:hover {
    background: var(--secondary-color);
    color: #fff !important;
    text-decoration: none;
}
.hdr2-pill__icon {
    flex-shrink: 0;
}
.hdr2-pill__icon .more-icon {
    fill: none;
    stroke: var(--secondary-color);
    stroke-width: 1.5;
    stroke-miterlimit: 10;
}
.hdr2-pill:hover .hdr2-pill__icon .more-icon {
    stroke: #fff;
}

/* === ¿CÓMO TRABAJAMOS? === */
.hdr2-como {
    background: var(--secondary-color);
    padding: 5rem 0 6rem;
    text-align: center;
}
.hdr2-como__title {
    font-family: var(--font-bebas);
    font-size: 70px;
    color: #fff;
    margin-bottom: 1.5rem;
}
.hdr2-como__text {
    font-family: var(--font-sf-pro);
    font-size: 21px;
    color: #fff;
    margin: 0 auto 1rem;
    line-height: 1.5;
}
.hdr2-como__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 4rem;
}
.hdr2-como__col {
    padding: 2.5rem 2rem;
    border-right: 1px solid #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hdr2-como__col:last-child {
    border-right: none;
}
.hdr2-como__col-icon {
    max-width: 80px;
    height: 90px;
    object-fit: contain;
    margin: 0 auto 1.25rem;
}
.hdr2-como__col-title {
    font-family: var(--font-sf-pro);
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    margin-bottom: .5rem;
}
.hdr2-como__col-text {
    font-family: var(--font-sf-pro);
    font-size: 21px;
    color: var(--gray);
    line-height: 1.4;
}

/* === STATS === */
.hdr2-stats {
    background: linear-gradient(to bottom, var(--secondary-color) 50%, var(--gray) 50%);
    padding: 2rem 0 3rem;
}
.hdr2-stats__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
}
.hdr2-stat {
    background: #fff;
    border-radius: 30px;
    padding: 1.5rem 1rem;
    text-align: center;
}
.hdr2-stat__num {
    font-family: var(--font-bebas);
    font-size: 68px;
    color: var(--secondary-color);
    line-height: 1;
    margin-bottom: 1rem;
}
.hdr2-stat__label {
    font-family: var(--font-sf-pro);
    font-size: 15px;
    color: var(--gray);
    line-height: 1.3;
    text-align: center;
}

/* === NOTICIAS === */
.hdr2-noticias {
    background: var(--gray);
    padding: 4rem 0 5rem;
}
.hdr2-noticias__title {
    font-family: var(--font-bebas);
    font-size: 70px;
    color: #fff;
    text-align: center;
    margin-bottom: 2rem;
}
.hdr2-noticias a:hover {
    text-decoration: none;
}


/* === RESPONSIVE === */
@media (max-width: 768px) {

    .header__energia .hero__title,
    .header__logistica .hero__title,
    .header__recursos-hidricos .hero__title,
    .header__urbanismo .hero__title,
    .header__hojaderuta .hero__title,
    .header__cartera .hero__title { font-size: 64px; }

    .hdr2-que-es { padding: 3.5rem 0; }
    .hdr2-que-es .col-md-6:first-child { border-right: none; padding-right: calc(var(--bs-gutter-x) * .5); }
    .hdr2-que-es__title { font-size: 40px; }
    .hdr2-que-es__text { font-size: 18px; }
    .hdr2-que-es__list li { font-size: 16px; }

    .hdr2-capitulos { padding: 3rem 0; }
    .hdr2-capitulos__title { font-size: 40px; }
    .hdr2-pill { font-size: 18px; }

    .hdr2-como { padding: 3rem 0; }
    .hdr2-como__title { font-size: 40px; }
    .hdr2-como__text { font-size: 18px; }
    .hdr2-como__cols { grid-template-columns: 1fr; }
    .hdr2-como__col { border-right: none; border-bottom: 1px solid #fff; }
    .hdr2-como__col:last-child { border-bottom: none; }
    .hdr2-como__col-title { font-size: 18px; }
    .hdr2-como__col-text { font-size: 16px; }

    .hdr2-stats { background: var(--gray); padding: 2rem 0; }
    .hdr2-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .hdr2-stat__num { font-size: 42px; }
    .hdr2-stat__label { font-size: 13px; }

    .hdr2-noticias { padding: 3rem 0 4rem; }
    .hdr2-noticias__title { font-size: 40px; }

}