/* =========================
   BLOQUE LINEAS DE AYUDA
========================= */

.lineas-ayuda{
    width: 100%;
    padding: 12px 0;
    background: #ffffff;
    overflow-x: auto;
}

.lineas-ayuda .lineas-contenedor{
    display: flex;
    align-items: center;
    gap: 18px;

    min-width: max-content;

    padding: 0 10px 8px;

    border-bottom: 3px solid #00c6e8;
}

/* =========================
   BOTONES
========================= */

.lineas-ayuda .linea-item{
    position: relative;

    display: flex !important;
    align-items: center;
    justify-content: center;

    min-width: 145px;
    height: 42px;

    padding: 0 16px !important;

    border-radius: 8px !important;

    font-family: Arial, sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    line-height: 1.2;

    text-align: center;
    text-decoration: none !important;

    border: none !important;

    box-shadow: 0 2px 5px rgba(0,0,0,0.12);

    transition: all .3s ease;

    cursor: pointer !important;

    white-space: nowrap;
}

/* DETALLE LATERAL */
.lineas-ayuda .linea-item::before{
    content: "";
    position: absolute;

    left: -6px;
    top: 7px;

    width: 10px;
    height: 20px;

    border-radius: 6px;

    background: rgba(255,255,255,0.28);
}

/* HOVER */
.lineas-ayuda .linea-item:hover{
    transform: translateY(-2px);
}

/* =========================
   COLORES
========================= */

.lineas-ayuda .amarillo{
    background: #f3c228 !important;
    color: #275a87 !important;
}

.lineas-ayuda .verde{
    background: #63c31d !important;
    color: #1f5d87 !important;
}

.lineas-ayuda .morado{
    background: #7267ea !important;
    color: #ffffff !important;
}

.lineas-ayuda .naranja{
    background: #ff8a00 !important;
    color: #ffffff !important;
}

.lineas-ayuda .azul{
    background: #199ee5 !important;
    color: #ffffff !important;
}

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

@media(max-width:768px){

    .lineas-ayuda .lineas-contenedor{
        gap: 12px;
        padding-bottom: 6px;
    }

    .lineas-ayuda .linea-item{
        min-width: 130px;
        height: 30px;

        padding: 0 12px !important;

        font-size: 10px !important;
    }

}

.rutas-atencion .contenedor h3 {
    font-family: "Alphakind" !important;
    color: #1d56b3 !important;
    font-size: 42px !important;
    text-align: center !important;

    width: fit-content !important;
    margin: 0 auto !important;
    padding: 14px 50px !important;

    border-radius: 22px !important;
    border: 2px solid #53e6ff !important;

    /* TEXTURA Y DEGRADADO */
    background:
        linear-gradient(
            180deg,
            #28dfff 0%,
            #16cdf5 35%,
            #00b7eb 70%,
            #09c7f5 100%
        ) !important;

    /* BRILLO INTERNO */
    box-shadow:
        inset 0 3px 8px rgba(255,255,255,0.55),
        inset 0 -4px 6px rgba(0,0,0,0.08),
        0 5px 0 #0aa7d0,
        0 10px 15px rgba(0,0,0,0.12) !important;

    letter-spacing: 1px !important;
    position: relative !important;

    /* textura suave */
    overflow: hidden !important;
}

/* CAPA DE TEXTURA */
.rutas-atencion .contenedor h3 {
    font-family: "Alphakind" !important;
    color: #1565c0 !important;
    font-size: 42px !important;
    text-align: center !important;
    width: fit-content !important;
    border: 4px solid #36d6ff !important;
    border-radius: 25px !important;
    background: linear-gradient(180deg, #1fd3ff 0%, #00b8f0 100%) !important;
    padding: 12px 45px !important;
    margin: 0 auto !important;
    display: table !important;
    box-shadow: 
        0 6px 0 #1aa6cf,
        0 10px 20px rgba(0,0,0,0.15) !important;
    letter-spacing: 1px !important;
    position: relative !important;
    transform: rotate(-1deg) !important;
}

/* brillo superior */
.rutas-atencion .contenedor h3::before {
    content: "" !important;
    position: absolute !important;
    top: 4px !important;
    left: 15px !important;
    right: 15px !important;
    height: 35% !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.35) !important;
}