/*--------------------------------------------------------------
# Imports CSS
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import 'colors.css';
@import 'header.css';
@import 'home.css';
@import 'about.css';
@import 'divisor.css';
@import 'servicios.css';
@import 'contacto.css';

:root {
    background-color: var(--color-bg);
}

/*--------------------------------------------------------------
# Sección general
--------------------------------------------------------------*/
section {
    padding: 60px 0;
    overflow: hidden;
}

.seccion-titulo {
    padding-bottom: 40px;
}
.container{
    align-content: center;
}

.info-container{
    width: 80%;
}
.seccion-titulo h2 {
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    line-height: 1px;
    margin: 0 0 5px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-secundario);
    font-family: "Poppins", sans-serif;
}

.seccion-titulo h2 span {
    text-transform: none;
}

.seccion-titulo h2::after {
    content: "";
    width: 120px;
    height: 1px;
    display: inline-block;
    background: var(--color-terciario);
    margin: 4px 10px;
}

.seccion-titulo p {
    margin: 0;
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    font-family: "Playfair Display", serif;
    color: #1a2268;
}
.cita-divisor{
    padding-bottom: 120px;
    padding-top: 80px;
    color: #1a2268;
}
/*--------------------------------------------------------------
# Volver arriba botón
--------------------------------------------------------------*/
.volver-arriba {
    position: fixed;
    visibility: hidden;
    background-color: var(--color-bg-2);
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    width: 44px;
    height: 44px;
    transition: all 0.4s;
    border: 2px solid var(--color-principal);
}

.volver-arriba i {
    font-size: 28px;
    color: var(--color-principal);
    line-height: 0;
    border-top: 2px solid var(--color-principal);
    border-bottom: 2px solid var(--color-principal);
}

.volver-arriba:hover {
    background: var(--color-principal-light);
}

.volver-arriba:hover i {
    color: var(--color-terciario-hover);
}

.volver-arriba.activo {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Botón Cookies
--------------------------------------------------------------*/
.boton-cookies {
    position: fixed;
    visibility: visible;
    background-color: var(--color-bg-2);
    opacity: 1;
    left: 15px;
    bottom: 15px;
    z-index: 996;
    width: 44px;
    height: 44px;
    transition: all 0.4s;
    border: 2px solid var(--color-terciario);
    border-radius: 50%;
    cursor: pointer;
}

.boton-cookies:hover {
    background: var(--color-bg-2);
}

.boton-cookies #fill-1 {
    /* fill: #D4B783 */
    fill: var(--color-principal);
}

.boton-cookies .fill-circulo {
    /* fill: #89634A */
    fill:var(--color-secundario);
}
/*--------------------------------------------------------------
# Ajustes en acordeón de Bootstrap
--------------------------------------------------------------*/
#faq {
    /** Activar background si no hay divisor --color-bg & añadir class="bg-light" a servicios*/
    /*background-color: var(--color-bg) !important; */
}

#faq .accordion-item:first-of-type {
    border-radius: 0%;
}

#faq .accordion-button {
    box-shadow: none !important;
    border-radius: 0%;
}

#faq .accordion-item:last-of-type {
    border-radius: 0%;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer .footer-element #protechplus {
    text-decoration: none;
}

#footer .footer-element #protechplus span {
    color: var(--color-secundario);
    font-weight: 500;
}

#footer .footer-element #protechplus span:hover {
    color: var(--color-principal);
    font-weight: 500;
}

#footer .footer-element i {
    position: absolute;
    font-size: 10px;
}

#footer .footer-element a {
    color: var(--color-terciario);
}

#footer .footer-element a:hover {
    color: var(--color-terciario-hover);
}

@media (max-width: 446px) {
    #footer .footer-elements-container {
        display: flex;
        flex-direction: column;
    }
    #footer .footer-elements-container .separador-footer {
        display: none;
    }
}