:root {
        --negro: #000000;
        --grisoscuro: #343A40;
        --grisazulado: #ADB5BD;
        --blanco: #FFFFFF;
        --grisclaro: #D9D9D9;
        --fuenteprincipal: "Inter", sans-serif;
    }

    body {
        font-family: var(--fuenteprincipal);
        font-weight: 400;
        font-style: normal;
        background-color: #ffffff;
    }

    p, li {
        font-size: 1.1em;
        font-weight: 300;
        color: var(--grisoscuro);
    }

    .titulo {
        color: var(--grisoscuro);
        font-size: 2.5em;
    }

    .subtitulo {
        color: var(--grisoscuro);
        font-size: 2.4em;
        margin-bottom: 20px;
    }
    
    .menu-titulo{
        color: var(--grisoscuro);
    }
      
    #logo {
        width: 150px;
    }

    #botonWhatsApp {
        position: fixed;
        z-index: 1000;
        bottom: 20px;
        right: 15px;
    }

    #piedepagina {
        background: var(--negro);
        background: linear-gradient(180deg, var(--negro) 0%, var(--negro) 60%, var(--grisoscuro) 100%);

    }

    #piedepagina a {
        color: #fff;
        text-decoration: none;
    }   

    #piedepagina a:hover {
        color: #fff;
    }

    #piedepagina .iconoredes {
        font-size: 1.5em;
        padding-right: 10px;
        color: #fff;
    }

    #piedepagina .iconoredes:hover {
        color: #fff;
    }

    .titulopiedepagina {
        font-size: 1.5em;
        font-weight: bold;
        color: var(--grisclaro);
    }
    
    .titulopiedepagina1 {
        color: var(--grisclaro);
    }


    #qr {
        display: block;
        border-radius: 10px;
        margin: 2rem;
        margin-left: auto;
        margin-right: auto;
        height: 150px;
        width: 150px;
        border: 10px solid #FFFFFF;
    }

    /* Menu */
    .navbar {
        z-index: 999;
        background: var(--negro);
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar-nav , .nav-link, .nav-link.active, .navbar-nav .nav-link.show {
        font-size: 16px;
        color: white;
    }

    .nav-link:hover {
        color: white;
    }

    .hvr-underline-from-center:before {
        background: var(--grisazulado) !important;
    }

    .navbar-toggler {
        border: 0px;
    }

    .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }

    /* Sliders */

    #elementosSlider1, #elementosSlider2, #elementosSlider3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

    .textoSlider{
        top: 55%;
    }

    .tituloCarrusel {
        font-family: "Poppins", sans-serif;
        color: white;
        font-size: 4rem;
        font-weight: bold;
        text-align: center;
    }

    .subtituloCarrusel {
        font-family: "Poppins", sans-serif;
        color: white;
        font-size: 2rem;
        text-align: center;
    }

    .btn {
        width: 200px;
        border-radius: 25px;
    }
    
    .btnInfo {
        display: block;
        margin: 0 auto;
        background-color: white;
        color: black;
    }
    
    .btnInfo:hover {
        background-color: black;
        color: white;
    }

    .btnParallax {
        display: block;
        margin: 0 auto;
        background-color: black;
        color: white;
    }

    .btnParallax:hover {
        background-color: black;
        color: white;
    }



    .btnContacto{
        display: block;
        background-color: var(--grisoscuro);
        color: white;
    }

    .btnContacto a{
        text-decoration: none;
        color: white;
    }

    .btnContacto:hover {
        background-color: var(--grisazulado);;
        color: black;
    }


    .lord-icon {
        width:200px;
        height:200px;
        display: block; 
        margin: 0px auto;
    }


    @media only screen and (max-width: 1000px) {

        #logo {
            width: 130px;
        }

        .titulo {
            font-size: 1.5em;
        }

        h2 {
            font-size: 1.5em;
        }

        #imagenBanner{
            width: 100%;
            height: 200px;
            object-fit: cover;
            object-position: right;
        }


        .imagenCarrusel {
            width: 100%;
            height: 400px;
            object-fit: cover;
            object-position: center;
        }


        .subtitulo {
            font-size: 1.4em;
        }

        #contenido {
            margin-top: 0px !important;
        }

        /* Sliders */

        .tituloCarrusel {
            font-size: 1.3em;
           
        }

        .subtituloCarrusel {
            display: none;
        }

        #imagenParallax {
            background-attachment: scroll !important;
            height: 300px !important;
        }

        .lord-icon {
            width:150px;
            height:150px;
        }
    

    }

    .vertical-align {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }

    /* Secciones */
    .seccionColorPrincipal{
        background-color: var(--grisoscuro);;
    }

    .seccionColorPrincipal .titulo, .seccionColorPrincipal p, .seccionColorPrincipal li{
        color: white;
    }

    .seccionColorSecundario{
        background-color: var(--grisazulado);;
    }

    /* Instalaciones */
    .galeria {
        -webkit-filter: brightness(75%); 
        transition: transform 2s, filter 0.2s ease-in-out;
        transform-origin: center center;
        filter: brightness(75%);
    }
  
    .galeria:hover {
        -webkit-filter: brightness(100%); 
        filter: brightness(100%);
    }
    
    
    /* testimonios */

    
    @media (max-width: 1200px) {
        .columna {
          flex: 33%;
          max-width: 33%;
        }
    }
    
    @media (max-width: 900px) {
        .columna {
          flex: 50%;
          max-width: 50%;
        }
    }
      
      @media (max-width: 600px) {
        .columna {
          flex: 100%;
          max-width: 100%;
        }
    }

    /* Contacto */
    .contact-link {
       color: #000000;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    .contact-link:hover {
        color: #0255B2;
        text-decoration: underline;
    }
    
    .btn-calendly {
       background-color: #000000;
        color: #fff;
        font-size: 1.2rem;
        padding: 12px 30px;
        border-radius: 5px;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }
    
    .btn-calendly:hover {
        background-color: #0255B2;
        color: #fff;
        text-decoration: none;
    }
    
    /* Parralax */
    #imagenParallax {
        background-image: url('../img/imagen-parallax-tallerplatinum.webp');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
    }

    /* The Loader */
    #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        overflow: hidden;
    }

    .no-js #loader-wrapper {
        display: none;
    }

    #loader {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 120px;
        height: 120px;
        margin: -75px 0 0 -75px;
        border-radius: 50%;
        border: 1px solid transparent;
        border-top-color: var(--grisclaro);
        -webkit-animation: spin 1.7s linear infinite;
                animation: spin 1.7s linear infinite;
        z-index: 11;    
    }

    #loader:before {
        content: "";
        position: absolute;
        top: 5px; 
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 1px solid transparent;
        border-top-color: white;
        -webkit-animation: spin-reverse .6s linear infinite;
                animation: spin-reverse .6s linear infinite;
    }
    
    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 1px solid transparent;
        border-top-color:  var(--grisclaro);
        -webkit-animation: spin 1s linear infinite;
                animation: spin 1s linear infinite;
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spin-reverse {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(-360deg);
        }
    }

    @keyframes spin-reverse {
        0% {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }

    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: var(--grisazulado);
        z-index: 10;
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded styles */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
                transform: translateX(100%);
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
    }

    .loaded #loader-wrapper {
        visibility: hidden;
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
        -webkit-transition: all 0.3s 1s ease-out;
                transition: all 0.3s 1s ease-out;
    }
    
    @media (max-width: 767px) {
        #loader {
            margin: -50px 0 0 -50px;
        }
    }