body{font-family:'Poppins',sans-serif;background:#f4f6f9;
padding-top: 50px;}
:root{--gold:#d4af37;--dark:#0f0f0f;}
.bb{
    background-color: black;
}
.hero{
background:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.85)),
url('./img/trabajos/banner.jpg');
background-size:cover;
color:#fff;
padding:140px 20px;
text-align:center;
}
.logo{
    width: 80px;
}
.btn-gold{
background: linear-gradient(180deg,rgba(0, 40, 106, 1) 10%, rgba(0, 89, 207, 1) 57%, rgba(42, 227, 253, 1) 100%);
color:white;
font-weight:600;
border:none;
transition: all 1s;
}
.btn-gold:hover{
    background: linear-gradient(180deg,rgba(0, 89, 207, 1) 9%, rgba(42, 227, 253, 1) 57%);
    color:black;

}
.nav-link{
    color: white !important;
    transition: 0.4s;
}
.nav-link:hover{
    color: #0059cf !important;

}
.section{padding:90px 0;}

.service-card{
background:#fff;
border-radius:15px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
transition:.3s;
}
.service-card:hover{transform:translateY(-8px);}
.service-card img{width:100%;height:220px;object-fit:cover;}
.service-card .content{padding:25px;}

.whatsapp{
position:fixed;right:20px;bottom:20px;z-index:999;
}
.whatsapp a{
background:#25D366;color:#fff;width:60px;height:60px;
border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:28px;
}

/* BEFORE AFTER */
.ba-container{
position:relative;
overflow:hidden;
border-radius:15px;
}
.ba-container img{width:100%;display:block;}
.ba-overlay{
position:absolute;top:0;left:0;width:50%;overflow:hidden;
}
.ba-slider{
position:absolute;top:0;bottom:0;left:50%;
width:4px;background:#fff;cursor:ew-resize;
}

/* TESTIMONIOS */
.testimonial{
background:#fff;
padding:25px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* CTA */
.cta{background:var(--dark);color:#fff;text-align:center;padding:70px 20px;}


/* CAROUSEL INFINITO */
/* WRAPPER */
.carousel-wrapper{
    overflow:hidden;
    width:100%;
    position:relative;
}

/* TRACK */
.carousel-track{
    display:flex;
    gap:20px;
    width:max-content;
    animation: scroll 40s linear infinite;
}

/* IMAGENES */
.carousel-track img{
    height:220px;
    width:320px;
    object-fit:cover;
    border-radius:12px;
    flex-shrink:0;
}

/* ANIMACION PERFECTA */
@keyframes scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }

}

.text-gradient-fb {
    background: linear-gradient(135deg, #01bdf8, #0175e3, #021f5f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    /* soporte extra */
    background-clip: text;
    color: transparent;
}

.navbar-toggler-icon {

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

}
.navbar-toggler {
    border: 2px solid #fff;
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}


.footer-tsy {
    background: #000;
    color: #fff;
    padding: 20px 0;
    font-size: 14px;
    border-top: 2px solid;
    border-image: linear-gradient(90deg, #01bdf8, #0175e3, #021f5f) 1;
}

.footer-tsy a {
    color: #01bdf8;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.footer-tsy a:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(1,189,248,0.8);
}

.row {

     margin-right: 0px; 
    margin-left: 0px}


    /* contacto */
    .contacto {
    background: #0f0f0f;
    color: #fff;
    padding: 90px 0;
}

.contacto .form-control {
    background: #1a1a1a;
    border: none;
    color: #fff;
    padding: 12px;
}

.contacto .form-control::placeholder {
    color: #aaa;
}

.contacto .form-control:focus {
    box-shadow: 0 0 0 2px rgba(1,189,248,0.3);
    background: #1a1a1a;
    color: #fff;
}

.contacto a {
    color: #01bdf8;
    text-decoration: none;
    font-weight: 500;
}

.contacto a:hover {
    color: #fff;
    text-shadow: 0 0 6px rgba(1,189,248,0.7);
}

.contacto-logo {
    width: 120px;
    border-radius: 10px;
}