.button {
    background-color: #e30512;
}

#primary-menu.style-2 {
    background: #e30512;
}

a {
    color: #e30512;
}

h1 > span:not(.nocolor):not(.badge), h2 > span:not(.nocolor):not(.badge), h3 > span:not(.nocolor):not(.badge), h4 > span:not(.nocolor):not(.badge), h5 > span:not(.nocolor):not(.badge), h6 > span:not(.nocolor):not(.badge) {
    color: #e30512;
}

.btn-warning {
    color: #fff;
    background-color: #e30512;
    border-color: #e30512;
}

.text-warning {
    color: #e30512 !important;
}


:root {
  --font-family-sans-serif: Optima, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Optima, 'Raleway', sans-serif;
}

#primary-menu ul li > a {
    font-family: Optima, 'Raleway', sans-serif;
}

#footer.dark, .dark #footer {
    margin-top: 10px !important;
}

body {
    font-family: Optima, 'Lato', sans-serif;
}


.button {
    text-shadow: none;
}

#page-menu-wrap {
    background-color: #e30512;
}


    /* 1. Estilo para el h4 (Contenedor principal) */
    .enlace-con-indicador a h5 {
        /* Es crucial hacerlo inline-block para que el ::after se posicione justo después del texto */
        display: inline-block;
        /* Necesitamos position: relative para que el ::after (la flecha) se posicione *absolutamente* respecto al h5 */
        position: relative;
        /* Transición suave para el movimiento del texto */
        transition: transform 0.3s ease-in-out;
    }

    /* 2. Indicador de Enlace (Flecha) usando ::after */
    .enlace-con-indicador a h5::after {
        /* Usamos el carácter 'Mayor que' (>) para la flecha */
        content: ' >';

        /* Hereda el color del h5, que es #05182b en tu HTML */
        color: inherit;

        /* Un pequeño espacio a la izquierda para separarlo del texto */
        margin-left: 0.25em;

        /* Para que la flecha también tenga una transición suave */
        transition: transform 0.3s ease-in-out;

        /* Aseguramos que se comporte como un elemento de línea para fluir con el texto */
        display: inline-block;

        /* Nota: Si usas position: relative o position: absolute en ::after, el margin-left debe ser sustituido por left: X */
    }

    /* 3. Animación Hover del Texto del h5 */
    .enlace-con-indicador a:hover h5 {
        /* Mueve el h5 (y su contenido) un poco a la derecha (3px) */
        transform: translateX(3px);
    }

    /* 4. Animación Hover de la Flecha */
    .enlace-con-indicador a:hover h5::after {
        /* Mueve la flecha un poco más a la derecha para un efecto más pronunciado */
        transform: translateX(5px);

        /* Opcional: Cambia el color al azul destacado si quieres un mejor contraste */
        /* color: #3498db; */
    }

    .btn-all-services {
        border: 2px solid #26374a;
        color: #26374a;
        font-size: 1.1em;
        font-weight: 700;
        padding: .65em 1.1em;
        margin-top: 15px;

    }

    .btn-all-services:hover {
        border: 2px solid #fc040b;
        color: #fc040b;
    }

    .servInfo:hover {
        font-weight: 600 !important;
    }

    .labelSede {
        display: inline-block;
        font-size: 14px;
        font-family: 'Roboto', sans-serif;
        text-transform: none;
        letter-spacing: 1.4px;
        color: #0b0c0c;
        margin-bottom: 10px;
        cursor: pointer;
        font-weight: 400;
        line-height: 1.7;
    }