body{
    --bg: #C4CCDB;
    --gu: #273851;
    --borde: rgba(39, 56, 81, 0.10);
    --margen: 30px;
    background: var(--bg);
    color: rgba(39, 56, 81, 0.80);
    font-family: 'Source Sans 3', sans-serif;
    letter-spacing: inherit;
    line-height: 1.4;
    min-height: 1500px;
}
*{transition: 0.150s;}
a{color: var(--gu);text-decoration: none!important}
.dropdown-menu{border-radius: 0;background: var(--bg);border-color: var(--borde)}
.dropdown-item:focus, .dropdown-item:hover {
    color: var(--gu);
    background-color: rgba(0, 0, 0, 0.05);
}
h1,h2,h3,h4,h5{
    color: var(--gu);
    font-family: 'Libre Baskerville', serif;
    text-transform: inherit;
    letter-spacing: 0;
}
.contenedor{
    max-width: 1136px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 287px;
    grid-template-rows: 1fr;
    grid-column-gap: var(--margen);
}
.logo{
    width: 363px;
    height: 130px;
    position: absolute;
    top: 0;
    background: var(--bg);
    box-shadow: 0 0 11px 0 rgba(0,0,0,0.30);
    z-index: 2;
}
.logo a{
    width: 257.38px;
    height: 69.26px;
    background: url(../img/logo.svg) center no-repeat;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}
.destacado{
    background: var(--gu);
    height: 507px;
    background: url(../img/bgdest.webp) center no-repeat;
    background: var(--gu);
    background-size: cover;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.destacado .contenedor{position: relative;z-index: 2}
.destacado video{
    position: absolute;
    z-index: 1;
    left: 0;
    width: 103%;
    height: auto;
    top: 50%;
    right: 0;
    transform: translate(0%,-50%);
    mix-blend-mode: soft-light;
    filter: blur(5px) grayscale(100%);
}
.destacadodeco{
    height: 30px;
    background: url(../img/shapedark.svg) repeat-x;
    margin-bottom: var(--margen);
}
.intro{margin-top: 222px;}
.intro h2{
    font-size: 44px;
    margin-bottom: 15px;
    color: var(--bg);
    text-shadow: 0 2px 4px rgba(0,0,0,0.50);
}
.intro p{
    font-size: 19px;
    color: var(--bg);
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.50);
}
.hovercraft {
    left: calc(50% + 287px);
    width: 285px;
    top: 0;
    margin-bottom: -0.8333333333rem;
    display: block;
    position: absolute;
    z-index: 4;
}
.hoverheader{
    height: 120px;
    background: var(--bg);
}
.horario{
    display: flex;
    padding: 12px var(--margen);
    justify-content: space-between;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 15px;
}
.horario b{
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    margin-right: 10px;
    opacity: 0.8;
}
.horario .abierto{opacity: 10}
.horario .dropdown{font-size: 13px;}
.horario .dropdown-menu small{opacity: 0.7;margin-left: 10px;}
.horario .dropdown-item{display: flex;justify-content: space-between;}
.telefonos{
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    padding: 0 30px;
}
.telefonos i{font-size: 20px}
.telefonos p{font-size: 16px;margin: 0}
.botonwha{
    width: 100%;
    height: 62px;
    background: var(--gu);
    display: block;
    margin-top: 10px;
    color: var(--bg);
    padding-left: var(--margen);
    position: relative;
    text-decoration: none!important;
}
.botonwha span{
    font-family: 'Libre Baskerville', serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    padding: 22px 0 0;
    display: block;
}
.botonwha:hover{background: #2c3e58}
.botonwha:hover span{padding-left: 5px}
.botonwha::after{
    content: '';
    width: 15px;
    height: 6px;
    background: url(../img/fde.svg) center no-repeat;
    position: absolute;
    right: 30px;
    top: 28px;
    display: block;
}
.sidebar--sticky {
    left: calc(50% + 287px);
    width: 285px;
    position: absolute;
    top: 192px;
    transition: none;
    z-index: 2;
}
.sidebar--sticky.sticky{position: fixed;top: 0;transition: none;}
.sidebar__main-navigation {
    box-shadow: 0 3px 15px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
    margin-bottom: 1.6666666667rem;
    margin-top: var(--margen);
    padding-bottom: 0;
    background: #192434;
    min-height: 254px;
    transition: 0.300s;
}
.sidebar__main-navigation.essticky{min-height: calc(254px + 80px);}
.sidebar__main-navigation{
    
}
.sidebar__main-navigation nav{padding: 15px 0;}
.sidebar__main-navigation nav li{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(196, 204, 219, 0.1);
    list-style: none;
    margin: 0 29px;
}
.sidebar__main-navigation nav li:last-child{border: 0}
.sidebar__main-navigation nav li a{
    color: rgba(196, 204, 219, 0.7);
    font-family: 'Libre Baskerville', serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    display: block;
    padding: 14px 0;
    line-height: 1.2;
}
.sidebar__main-navigation nav li a:hover{color: var(--bg);}
.sidebar__main-navigation nav li.activo a{
    color: var(--bg);
    display: flex;
    align-items: center;
}
.sidebar__main-navigation nav li a::before{
    content: '';
    width: 1px;
    height: 6px;
    background: url(../img/fdech.svg) center no-repeat;
    background-size: contain;
    display: inline-flex;
    margin-right: 15px;
    transition: 0.300s;
}
.sidebar__main-navigation nav li.activo a::before{
    content: '';
    width: 15px;
    height: 6px;
    background: url(../img/fdech.svg) center no-repeat;
    background-size: contain;
    display: inline-flex;
    margin-right: 15px;
    transition: 0.300s;
}
.logoSidebar{
    background: url(../img/logoinvert.svg) center no-repeat var(--gu);
    background-size: 190px;
    height: 1px;
    opacity: 0;
    transition: 0.300s;
}
.logoSidebar.lsticky{height: 80px;opacity: 10}
.introservicios{
    display: flex;
    align-items: center;
    margin-bottom: var(--margen)
}
.introservicios h3{margin: 0;min-width: 270px}
.introservicios p{margin: 0;}
#servicios{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 30px;
}
#servicios figure{
    height: 200px;
    margin: 0 0 20px;
    background: #B8BFCC;
    background-size: cover;
    background-position: center;
}
#servicios h3{
    font-family: 'Libre Baskerville', serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    margin: 0;
    padding-bottom: 15px;
}
#servicios li{
    list-style: none;
    display: block;
    padding: 5px 0;
    border-bottom: 1px solid var(--borde);
}
#servicios li::before{
    display: inline-block;
    font-family: bootstrap-icons!important;
    font-style: normal;
    font-weight: 400!important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f26a";
    margin-right: 8px;
}
#servicios li:last-child{border: 0;}
#experiencia{
    min-height: 600px;
    background: var(--gu);
    margin: var(--margen) 0;
}
#nosotros{}
#nosotros .fotos{
    display: block;
    margin-bottom: var(--margen);
}
#nosotros .fotos figure{
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#nosotros .fotos figure:nth-child(1){
    background-image: url(../img/gucontadores.webp);
    height: 200px;
    background-position: 0 10%;
    grid-area: 1 / 1 / 2 / 3;
}
#nosotros .nosotrosi{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: var(--margen);
}
#nosotros .nosotrosi li{margin-bottom: var(--margen);list-style: none;text-align: center}
#nosotros .nosotrosi li:last-child{margin-bottom: 0;}
#nosotros .nosotrosi li h3{
    font-family: 'Libre Baskerville', serif;
    font-size: 13px;
    color: #273851;
    letter-spacing: 0;
    line-height: 20px;
    text-transform: uppercase;
}
#nosotros .nosotrosi li p{font-size: 14px;margin: 0;}
.dividor{opacity: 0.1;height: 1px;background: #273851;margin-bottom: var(--margen)}
#mapa iframe{
    width: 100%;
    height: 310px;
    margin-bottom: var(--margen);
}
.formulario{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 30px;
    margin-bottom: var(--margen);
}
.formulario input{
    background: none;
    color: var(--gu);
    border: 1px solid rgba(39, 56, 81, 0.1);
    margin-bottom: 20px;
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 14px;
    padding: 15px 15px 13px;
    line-height: 1.2;
    background: #ced4e0
}
.formulario textarea{
    background: none;
    color: var(--gu);
    border: 1px solid rgba(39, 56, 81, 0.1);
    height: 100%;
    width: 100%;
    padding: 10px;
    font-size: 14px;
    padding: 15px;
    line-height: 1.2;
    background: #ced4e0
}
.formulario button{
    border: 0;
    background: var(--gu);
    color: var(--bg);
    width: 100%;
    padding: 14px 0;
    font-family: 'Libre Baskerville', serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}
.pie{
    padding: 15px 0;
    background: #b9c2d2;
}
.pie p{
    margin: 0;
    font-size: 13px;
    color: var(--gu);
}
#experiencia{
    color: var(--bg);
    padding: var(--margen) 0;
}
#experiencia h3{
    color: var(--bg);
    margin: 0;
}
#experiencia p{margin: 15px 0}
#experiencia .accordion{border-top: 1px solid rgba(184, 191, 204, 0.08)}
#experiencia .accordion *{border-radius: 0;border: 0;background: none}
#experiencia .accordion-item{}
#experiencia .accordion-button{
    color: var(--bg);
    padding: 15px 0;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 rgba(184, 191, 204, 0.08);
}
#experiencia .accordion-button:not(.collapsed)::after{background-image: url("data:image/svg+xml,%3csvg width='14px' height='4px' viewBox='0 0 14 4' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='Web' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='Extra-Large' transform='translate(-400, -1613)' fill='%23C4CCDB'%3e%3cg id='Elegirnos' transform='translate(0, 1203)'%3e%3cg id='Group-8' transform='translate(399, 301.33)'%3e%3cpolygon id='Path-3' points='1 108.67 15 108.67 15 112.67 1 112.67'%3e%3c/polygon%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");width: 14px;height: 4px;}
#experiencia .accordion-button::after{background-image: url("data:image/svg+xml,%3csvg width='14px' height='14px' viewBox='0 0 14 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='Web' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='Extra-Large' transform='translate(-400, -1701)' fill='%23C4CCDB'%3e%3cg id='Elegirnos' transform='translate(0, 1203)'%3e%3cg id='Group-8' transform='translate(399, 301.33)'%3e%3cpolygon id='Path-4' points='6 201.67 6 196.67 10 196.67 10 201.67 15 201.67 15 205.67 10 205.67 10 210.67 6 210.67 6 205.67 1 205.67 1 201.67'%3e%3c/polygon%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");width: 14px;height: 14px;background-size: contain;}
#experiencia .accordion-body{
    color: var(--bg);
    padding: 15px;
    opacity: 0.7;
    background: #192434;
}
#experiencia .accordion-body p{margin: 0 0 15px;}
#experiencia .accordion-body p:last-child{margin: 0}
.porque{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 30px;
    margin: 15px 0 0;
}
.porque li{
    list-style: none;
    border: 1px solid rgba(196, 204, 219, 0.10);
    padding: 15px;
    margin-bottom: var(--margen);
    display: flex;
}
.porque span{opacity: 0.8;font-size: 15px;}
.porque i{font-size: 45px;float: right;margin-left: 15px}

/* ========= MEDIA QUERY ========= */
@media only screen and (max-width: 1024px) {
    .contenedor{display: block;padding: 0 var(--margen);}
    .sidebar--sticky{
    position: fixed;
    top: initial;
    transition: none;
    left: 0;
    width: initial;
    right: 0;
    top: 0!important;
    z-index: 10;
    }
    .sidebar__main-navigation{
    min-height: inherit;
    box-shadow: none;
    margin: 0;
    }
    .sidebar__main-navigation nav{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 0;
    }
    .sidebar__main-navigation nav li{display: block;margin: 0;}
    .sidebar__main-navigation nav li a{
    display: block!important;
    line-height: 1;
    text-align: center;
    padding: 14px 0 13px;
    }
    .sidebar__main-navigation nav li.activo a::before{display: none}
    .hovercraft{display: none}
    .destacado{margin-top: 42px}
    .logo{top: 42px}
    .sidebar__main-navigation.essticky{min-height: inherit}
    .logoSidebar{background-color: transparent;}
}

@media only screen and (max-width: 600px) {
    .sidebar__main-navigation{background: none}
    .logoSidebar.lsticky{background-color: var(--gu)}
    .sidebar__main-navigation nav li a::before{display: none}
    .sidebar__main-navigation nav{display: block;overflow: auto;white-space: nowrap;padding: 0 10px;background: var(--bg);}
    .sidebar__main-navigation nav li {display: inline-block;}
    .sidebar__main-navigation nav li a{padding: 15px 10px;color: var(--gu);opacity: 0.7}
    .sidebar__main-navigation nav li.activo a{color: var(--gu);opacity: 10}
    .contenedor{display: block;overflow: hidden;}
    .intro h2{font-size: 27px;}
    .intro p{font-size: 17px}
    .destacado video{
    transform: translate(-50%,-50%);
    left: 0;
    width: initial;
    height: 100%;
    }
    .introservicios,#servicios{display: block}
    #servicios li:last-child{margin-bottom: 15px}
    #experiencia{margin-top: 0}
    .porque,#nosotros .nosotrosi,.formulario{display: block}
    #nosotros .nosotrosi li:last-child{margin-bottom: var(--margen)}
    .formulario textarea{min-height: 300px;margin-bottom: var(--margen)}
    .pie p{text-align: center}
}