:root{ 
    --uts-blue:#025ba1; --uts-orange:#f06b05; --uts-orange-2:#ff861f; --text:#0b0f1a; 
}
*{box-sizing:border-box} html,body{margin:0}
body {
    font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, sans-serif;
    background: 
        linear-gradient(to bottom, rgb(231, 163, 39) 0%, rgba(2, 91, 161, 0.13) 20%),
        url("img/bgbody.JPG");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* <-- Esto hace que la imagen cubra toda la página */
    color: #000;
}
.bg-uts{ 
    background-color: var(--uts-blue) !important; 
}
.brand-logo {
    inline-size:34px;
    block-size:34px;
    display:inline-block;
    background: url("img/banner/logo-small.fw.png") center/contain no-repeat;
}
.uts-bold, .uts-normal {
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
}
.bg-gradient-uts{ 
    background: linear-gradient(90deg, color-mix(in srgb, var(--uts-blue), #000 10%) 0%, var(--uts-blue) 60%, color-mix(in srgb, var(--uts-orange), #000 10%) 100%); 
}
.marquee-container{ 
    background: var(--uts-orange); color:#fff; padding:.5rem 0; border-bottom:3px solid var(--uts-orange-2); overflow:hidden 
}
.marquee-content{ 
    display:inline-block; white-space:nowrap; animation:marquee 22s linear infinite 
}
.marquee-container:hover .marquee-content{ 
    animation-play-state:paused 
}
@keyframes marquee{
    0%{transform:translateX(0%)}100%{transform:translateX(-100%)}
}
.card-hover{ 
    transition: transform .25s ease, box-shadow .25s ease; border:1px solid rgba(0,0,0,.06) 
}
.card-hover:hover{ 
    transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.06) 
}
.carousel{ 
    border-bottom:3px solid var(--uts-blue); background-color:#025ba10a 
}
.carousel {
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    margin-left: auto;
    margin-right: auto;
    max-width: 98vw;
}
.card-access {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: transform 0.25s, box-shadow 0.25s;
    background: #fff;
    width: auto; /* Permite que la carta se adapte al contenido */
    max-width: 100%;
}
.card-access .card-img-top {
    border-radius: 0.5rem;
    width: 100%;
    height: auto;
    object-fit: contain; /* Muestra la imagen completa sin recortar */
    display: block;
}
.card-access:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}
@media (max-width: 575.98px) {
    .card-access {
        width: 100% !important;
    }
    .card-access .card-img-top {
        width: 100%;
        height: auto;
    }
}

.social-a {
    display: flex;
    align-items: center;
    gap: 0.00rem;           /* Espacio pequeño entre iconos */
    margin: 8px 0 0 0;     /* Margen superior, ajusta si lo necesitas */
    font-size: 1.8rem;     /* Tamaño de los iconos */
}

.social-a .social-icon {
    color: #fff !important;
    transition: color 0.2s, background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.0rem;      /* Padding pequeño para que no se separen mucho */
    border-radius: 50%;
    background: transparent;
    font-size: inherit;    /* Hereda el tamaño de .social-a */
}

.social-a .social-icon:hover {
    color: var(--uts-orange) !important;
    background: #fff2e0;
}