@font-face {
    font-family: 'Neue Haas';
    src: url('./../fonts/NeueHaas-Regular.woff2') format('woff2'), 
         url('./../fonts/NeueHaas-Regular.woff') format('woff');  
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Neue Haas';
    src: url('./../fonts/NeueHaas-Bold.woff2') format('woff2'), 
         url('./../fonts/NeueHaas-Bold.woff') format('woff');  
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Neue Haas';
    src: url('./../fonts/NeueHaas_Light-Italic.woff') format('woff2'), 
         url('./../fonts/NeueHaas_Light-Italic.woff') format('woff');  
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Neue Haas';
    src: url('./../fonts/NeueHaas_Bold-Italic.woff2') format('woff2'), 
         url('./../fonts/NeueHaas_Bold-Italic.woff') format('woff');  
    font-weight: 600;
    font-style: Italic;
}

* {
    font-family: 'Neue Haas', sans-serif;
    letter-spacing: .5px!important;
    line-height: 1.2;
}

textarea {
    max-height: 300px;
}

ul li {
    font-size: 18px;
}

.no-slide {
    overflow: auto;

    body {
        background: #1B1924;
    }
}

.wrapper {
    max-width: 1180px;
    margin: 0 auto;
    margin-block: 130px;
    padding: 0 30px;
}

/* Example Background Vimeo (#1) */
.slides .slide .background.vimeo iframe {
    width: 1280px;
    height: 720px;
    position: absolute;
    top: initial;
    bottom: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
    -webkit-transform-origin: 0%;
    transform-origin: 0%;
}

.slides,
.slides p {
    font-family: "Neue Haas", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-weight: 400;
    line-height: 1.2;
}
.slides h1,
.slides h2,
.slides h3,
.slides h4,
.slides h5,
.slides h6 {
    font-family: "Neue Haas", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-weight: 700;
}
.slides .button,
.slides .slides-form {
    font-family: "Neue Haas", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-weight: 500;
}

.slide {
    background: #1B1924;
}

.icon-text {
    display: flex;
    gap: 12px;
}

.home h1, 
.home h2 {
    text-transform: uppercase;
    font-size: 78px!important;
    line-height: .9;

    span.primary {
        color: #9ded2a;
    }
}

.button {
    font-weight: 600!important;
    font-size: 18px!important;

    &.primary {
        background: #9ded2a;
        color: #1B1924;

        &:hover {
            filter: brightness(130%);
        }
    }
}

.panel.dark {
    background: #1B1924!important;
}

.panel:has(.legals) {
    background: #1B1924;
}

.sections {
    .right {
        gap: 8px;
    }
}

.legal-section {
    h1, h2, h3 {
        margin-bottom: 12px;
        line-height: 1.2;
    }

    * {
        color: white;
    }

    a:not(.button) {
        text-decoration: underline;
    }
}

/* Header */
.sections.mobile {
    flex-direction: row;
}

.button.actionButton,
.button:hover {
    -webkit-box-shadow: none;
            box-shadow: none;
}

/* Footer */
.sections.footer {
    .center {
        gap: 12px;
        align-items: center;
    }

    a:hover {
        opacity: 1!important;
    }
}

.bg-gray .panel {
    background: #1B1924;

    * {
        color: white;
    }
}

/* Menú lateral */
.lateral-navigation {
    display: none;
}

@media(min-width: 768px) {
    .navigation {
        display: flex;
        align-items: center;
    
        ul {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 12px;
        }
    
        li {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 0;
            min-height: 22px;
        }
    
        li:before {
            color: #1B1924;;
            font-size: 12px;
            font-weight: 800;
            background: white;
            padding: 2px 8px;
            border-radius: 50px;
            display: none;
        }
        
        li:after {
            width: 20px;
            height: 20px;
            border-radius: 50px;
        }
    }

    .lateral-navigation {
        display: block;
    }

    .lateral-navigation .navigation {
        li:first-of-type:before {
        content: "Inicio";
        }
    
        li:nth-of-type(2):before {
        content: "Compositing";
        }
    
        li:nth-of-type(3):before {
        content: "3D";
        }
    
        li:nth-of-type(4):before {
        content: "DMP & Art Work";
        }
    
        li:nth-of-type(5):before {
        content: "Animation & Motion Graphics";
        }
    
        li:nth-of-type(6):before {
        content: "Contacto";
        }
        
        li:hover:before {
            display: block;
        }

        li.selected:before {
            display: block;
        }
    }

    .lang-en {
        .lateral-navigation .navigation {
            li:first-of-type:before {
            content: "Home";
            }
        
            li:nth-of-type(6):before {
            content: "Contact";
            }
        }
    }
}
/* Formulario */
#sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
}
  
#sib-container input::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
}
  
#sib-container textarea::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
}
  
#sib-container a {
    text-decoration: underline;
    color: #2BB2FC;
}
  
#sib-container {
    padding: 0!important;
}
  
.sib-form {
    padding: 0!important;
    font-family: "neue-kabel", system-ui, -apple-system!important;
    font-size: 1.125rem;
    font-weight: 300;
}
  
.sib-form .input::placeholder {
    font-family: "neue-kabel", system-ui, -apple-system!important;
    font-size: 1.125rem;
    font-weight: 200;
}
  
.sib-form-block {
    padding: 0!important;
}
  
.entry__error {
    margin: 0!important;
}
  
.sib-form .entry__field {
    background-color: rgba(255, 255, 255, 0.1)!important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: .625rem!important;
    color: #f6c1d6 !important;
    padding: .825rem 1.1875rem!important;
}
  
.sib-form .input:not(textarea), .sib-form .input__button {
    height: auto!important;
}
  
.sib-form .checkbox, .sib-form .radio-button {
    height: 24px!important;
    width: 24px!important;
    border-radius: .3125rem!important;
    border: none!important;
    outline: none!important;
}
  
.sib-form .input_replaced:checked+.checkbox_tick_positive {
    background-color: #9ded2a!important;
}
  
.sib-form .entry__choice .checkbox, .sib-form .entry__choice .radio-button {
    margin-bottom: -5px;
}
  
.sib-form .entry__error {
    line-height: 1.4!important;
}

.sib-form-block__button {
    padding: 14px 22px!important;
}

/* Selector idioma */
.dropdown-container {
    position: relative;
}
 
.dropdown-select { 
    cursor: pointer;
    padding-bottom: 4px;
    font-weight: 600;
}

.dropdown-content {
    overflow: hidden;
    height: 0; 
    position: absolute;
    z-index: 1000;
    right: 0;
    transition: height 0.3s ease;
}
  
.dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: white;
    border-radius: 6px;
    text-align: left;
    margin-top: 4px;
}

.dropdown-list li a { 
    display: block;
    padding: 6px 10px; 
    color: #1B1924;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
}
  
.dropdown-list li a:hover { 
    background: #9ded2a;
}
  
.dropdown-list.show {  
    height: 50px;
}

.sidebarShown .panel {
    opacity: .5;
}

.sidebarShown .panel.bottom {
    transform: none;
}

@media(max-width: 1024px) {
    .home h1, 
    .home h2 {
        font-size: 52px!important;
    }

    .sections {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .panel .sections.footer {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;

        .left {
            width: 100%;
            min-width: 100%;
            justify-content: center;
            order: 3;
        }

        >div.center {
           justify-content: left;
           order: 1;
        }

        .right {
            justify-content: right;
            order: 2;
        }
    }

    .container .wrap .spaceWrap, .container .wrap.spaceWrap, .container .wrap:not(.noSpaces) {
        padding: 120px 30px 120px 30px;
    }

    .sections.footer {
        * {
            font-size: 14px!important;
        }

        svg {
            width: 16px!important;
            height: 16px!important;
        }
    }
}

/* Banner Cookies */
#CybotCookiebotDialog *, 
#CybotCookiebotDialogBodyUnderlay * {
    font-size: 15px!important;
}

#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize, 
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept, 
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept, 
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change {
    background-color: #9ded2a!important;
    border-color: #9ded2a!important;
    color: #1B1924!important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    color: #9ded2a!important;
    border-color: #9ded2a!important;
}

#CybotCookiebotDialog input:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #9ded2a!important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover, #CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover, #CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieProvider:not(.CybotCookiebotDialogDetailBodyContentCookieInfoCount):hover,
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a, 
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonIABHeaderViewPartnersLink, 
#CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentList dt a, 
#CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a, 
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonIABDescription a, 
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink, #CybotCookiebotDialogDetailBodyContentTextAbout a,
#CookiebotWidget .CookiebotWidget-consent-details button {
    color: #9ded2a!important;
}

#CybotCookiebotDialog a:hover:after, 
#CybotCookiebotDialog a:hover:before, 
#CybotCookiebotDialog button:hover:after, 
#CybotCookiebotDialog button:hover:before,
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw {
    border-color: #9ded2a!important;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #1B1924!important;
}

#CookiebotWidget {
    bottom: 50px!important;
}

#CookiebotWidget .CookiebotWidget-logo svg circle {
    fill: #1B1924!important;
}

#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li.CookiebotWidget-approved svg {
    fill: #9ded2a!important;
}

.CookieDeclarationTableHeader {
    font-size: 15px!important;
    text-wrap: balance!important;
}

.CookieDeclarationTableCell {
    font-size: 14px!important;
    text-wrap: balance!important;
}

@media(max-width: 768px) {
    #CookiebotWidget {
        display: none;
    }

    .dropdown-content {
        left: 0;
        right: auto;
    }
}