/******************************************************************
 * UNISOL MÉXICO
 * unisol.css
 *
 * Archivo de personalización.
 * Cargar DESPUÉS de:
 *   - css/main.css
 *   - css/media-queries.css
 *
 * No modificar main.css para las personalizaciones de Unisol.
 ******************************************************************/

/* ================================================================
   01. VARIABLES
   ================================================================ */

:root {
    --unisol-primary: #00aeef;
    --unisol-primary-dark: #008fc5;
    --unisol-secondary: #222222;
    --unisol-text: #555555;
    --unisol-muted: #888888;
    --unisol-border: #e5e5e5;
    --unisol-white: #ffffff;
    --unisol-light: #f7f7f7;

    --unisol-container: 1170px;

    --unisol-transition: .30s ease;
    --unisol-shadow: 0 8px 20px rgba(0, 0, 0, .10);

    --unisol-logo-width: 220px;
    --unisol-logo-width-sticky: 180px;
}


/* ================================================================
   02. BASE
   ================================================================ */

img {
    max-width: 100%;
}

a {
    transition:
        color var(--unisol-transition),
        background-color var(--unisol-transition),
        border-color var(--unisol-transition),
        opacity var(--unisol-transition);
}


/* ================================================================
   03. HEADER
   ================================================================ */

/*
 * El HTML real de Unisol utiliza:
 *
 * #head.navbar-default.sticky-header
 * .mega-menu-wrapper
 * .navbar-header
 * .navbar-brand
 *
 * No modificamos la estructura original.
 */

#head {
    background-color: var(--unisol-white);
    z-index: 1040;
}

/*
 * Cuando main.js añade "on", el header pasa a position:fixed
 * mediante main.css.
 */
#head.sticky-header.on {
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}


/* ================================================================
   04. LOGO
   ================================================================ */

/*
 * El tema original utiliza:
 *
 * .navbar-header {
 *     position:absolute;
 *     height:100%;
 * }
 *
 * Por eso NO utilizamos flex en .navbar-header.
 *
 * Conservamos el sistema original y controlamos únicamente
 * el tamaño del SVG.
 */

#head .navbar-brand {
    height: inherit;
    padding: 0;
    display: block;
}

#head .navbar-brand>img {
    position: relative;
    top: 50%;
    left: 0;

    display: block;

    width: var(--unisol-logo-width);
    max-width: 100%;
    height: auto;

    transform: translateY(-50%);

    transition:
        width var(--unisol-transition);
}


/*
 * Estado sticky/animado.
 *
 * IMPORTANTE:
 * El tema utiliza "animated", no "header-scrolled".
 */
#head.sticky-header.on.animated .navbar-brand>img {
    width: var(--unisol-logo-width-sticky);
}


/* ================================================================
   05. NAVBAR
   ================================================================ */

#head .navbar-nav>li>a {
    transition:
        color var(--unisol-transition),
        background-color var(--unisol-transition);
}

#head .navbar-nav>li>a:hover,
#head .navbar-nav>li.current>a {
    color: var(--unisol-primary);
}


/*
 * El tema reduce el padding del menú cuando aparece
 * la clase "animated".
 */
#head.animated .navbar-nav>li>a {
    transition:
        padding var(--unisol-transition),
        color var(--unisol-transition),
        background-color var(--unisol-transition);
}


/* ================================================================
   06. SUBMENÚ
   ================================================================ */

#head .sub-menu {
    z-index: 1050;
}

#head .sub-menu a {
    transition:
        color var(--unisol-transition),
        background-color var(--unisol-transition);
}

#head .sub-menu a:hover {
    color: var(--unisol-primary);
}


/* ================================================================
   07. BOTÓN RESPONSIVE
   ================================================================ */

#head .navbar-toggle {
    transition:
        background-color var(--unisol-transition),
        border-color var(--unisol-transition);
}

#head .navbar-toggle:hover,
#head .navbar-toggle:focus {
    background-color: #eeeeee;
}


/* ================================================================
   08. SLIDER / HERO
   ================================================================ */

.slide-top,
.slider-section,
.home-slider {
    position: relative;
}

.item img {
    max-width: 100%;
}


/*
 * Evita que imágenes de contenido se deformen.
 */
.img-responsive {
    height: auto;
}


/* ================================================================
   09. SECCIONES
   ================================================================ */

.unisol-section {
    position: relative;
    padding-top: 70px;
    padding-bottom: 70px;
}

.unisol-section--light {
    background-color: var(--unisol-light);
}

.unisol-section--white {
    background-color: var(--unisol-white);
}


/* ================================================================
   10. TÍTULOS
   ================================================================ */

.unisol-section-title {
    margin: 0 0 15px;
    color: var(--unisol-secondary);
    font-weight: 700;
}

.unisol-section-subtitle {
    margin: 0 auto 35px;
    max-width: 850px;
    color: var(--unisol-text);
}


/* ================================================================
   11. BOTONES UNISOL
   ================================================================ */

.btn-unisol {
    display: inline-block;

    padding: 12px 28px;

    border: 1px solid var(--unisol-primary);
    border-radius: 3px;

    background-color: var(--unisol-primary);
    color: var(--unisol-white);

    font-weight: 600;
    line-height: 1.4;

    text-align: center;

    cursor: pointer;

    transition:
        background-color var(--unisol-transition),
        border-color var(--unisol-transition),
        color var(--unisol-transition),
        transform var(--unisol-transition);
}

.btn-unisol:hover,
.btn-unisol:focus {
    background-color: var(--unisol-primary-dark);
    border-color: var(--unisol-primary-dark);
    color: var(--unisol-white);
    text-decoration: none;
}

.btn-unisol:active {
    transform: translateY(1px);
}


/* Botón transparente */

.btn-unisol-outline {
    display: inline-block;

    padding: 11px 27px;

    border: 1px solid var(--unisol-primary);
    border-radius: 3px;

    background-color: transparent;
    color: var(--unisol-primary);

    font-weight: 600;

    transition:
        background-color var(--unisol-transition),
        color var(--unisol-transition);
}

.btn-unisol-outline:hover,
.btn-unisol-outline:focus {
    background-color: var(--unisol-primary);
    color: var(--unisol-white);
    text-decoration: none;
}


/* ================================================================
   12. TARJETAS
   ================================================================ */

.card-unisol {
    position: relative;

    background-color: var(--unisol-white);

    border: 1px solid var(--unisol-border);

    transition:
        box-shadow var(--unisol-transition),
        transform var(--unisol-transition);
}

.card-unisol:hover {
    box-shadow: var(--unisol-shadow);
    transform: translateY(-3px);
}

.card-unisol img {
    width: 100%;
    height: auto;
}

.card-unisol-content {
    padding: 25px;
}

.card-unisol-title {
    margin: 0 0 10px;
    color: var(--unisol-secondary);
    font-weight: 700;
}


/* ================================================================
   13. PORTFOLIO / PRODUCTOS
   ================================================================ */

.portfolio-item {
    position: relative;
}

.portfolio-thumb {
    position: relative;
    overflow: hidden;
}

.portfolio-thumb img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .45s ease;
}

.portfolio-item:hover .portfolio-thumb img {
    transform: scale(1.02);
}


/* ================================================================
   14. NEWS / CONTENIDO
   ================================================================ */

.nws-item {
    position: relative;
}

.nws-thumb {
    overflow: hidden;
}

.nws-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.news-head h4 {
    color: var(--unisol-secondary);
}


/* ================================================================
   15. FORMULARIOS
   ================================================================ */

.unisol-form .form-control {
    min-height: 44px;

    border: 1px solid var(--unisol-border);

    border-radius: 2px;

    box-shadow: none;

    transition:
        border-color var(--unisol-transition),
        box-shadow var(--unisol-transition);
}

.unisol-form .form-control:focus {
    border-color: var(--unisol-primary);

    box-shadow:
        0 0 0 2px rgba(0, 174, 239, .10);
}


/* ================================================================
   16. FOOTER
   ================================================================ */

.unisol-footer {
    background-color: var(--unisol-secondary);
    color: var(--unisol-white);
}

.unisol-footer a {
    color: var(--unisol-white);
}

.unisol-footer a:hover {
    color: var(--unisol-primary);
}


/* ================================================================
   17. UTILIDADES
   ================================================================ */

.unisol-text-primary {
    color: var(--unisol-primary);
}

.unisol-text-secondary {
    color: var(--unisol-secondary);
}

.unisol-bg-primary {
    background-color: var(--unisol-primary);
}

.unisol-bg-light {
    background-color: var(--unisol-light);
}

.unisol-mt-0 {
    margin-top: 0 !important;
}

.unisol-mt-20 {
    margin-top: 20px !important;
}

.unisol-mt-40 {
    margin-top: 40px !important;
}

.unisol-mb-0 {
    margin-bottom: 0 !important;
}

.unisol-mb-20 {
    margin-bottom: 20px !important;
}

.unisol-mb-40 {
    margin-bottom: 40px !important;
}

.unisol-text-center {
    text-align: center;
}


/* ================================================================
   18. ACCESIBILIDAD
   ================================================================ */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(0, 174, 239, .45);
    outline-offset: 2px;
}


/* ================================================================
   19. ANIMACIONES
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

}


/* ================================================================
   20. RESPONSIVE
   ================================================================ */

@media (max-width: 1199px) {

    :root {
        --unisol-logo-width: 200px;
        --unisol-logo-width-sticky: 170px;
    }

}


@media (max-width: 991px) {

    :root {
        --unisol-logo-width: 190px;
        --unisol-logo-width-sticky: 160px;
    }

    .unisol-section {
        padding-top: 55px;
        padding-bottom: 55px;
    }

}


@media (max-width: 767px) {

    :root {
        --unisol-logo-width: 175px;
        --unisol-logo-width-sticky: 155px;
    }

    .unisol-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .unisol-section-title {
        font-size: 26px;
    }

    .card-unisol-content {
        padding: 20px;
    }

}


/* ================================================================
   21. MOBILE NAVBAR
   ================================================================ */

@media (max-width: 767px) {

    #head .navbar-brand>img {
        width: var(--unisol-logo-width);
    }

    #head.sticky-header.on.animated .navbar-brand>img {
        width: var(--unisol-logo-width-sticky);
    }

}

/* ============================================================
   UNISOL - CORRECCIÓN HEADER HOME
   ============================================================ */

/*
 * El Home utiliza .slide-overlay, cuyo pseudo-elemento
 * crea una capa absoluta sobre el slider.
 *
 * El header necesita su propio contexto de apilamiento
 * desde el primer momento, no solamente cuando se hace sticky.
 */

#head {
    position: relative;
    z-index: 1040;
}


/* ============================================================
   LOGO SVG
   ============================================================ */

/*
 * main.css contiene esta regla:
 *
 * .bordered .navbar-brand img:first-child {
 *     width: 70px;
 *     opacity: .7;
 * }
 *
 * Esa regla estaba pensada para otra variante del tema.
 * La anulamos específicamente para el logo de Unisol.
 */

#head .navbar-brand img:first-child {
    width: 220px;
    max-width: none;
    height: auto;
    opacity: 1;
}


/* ============================================================
   LOGO CUANDO EL HEADER SE HACE STICKY
   ============================================================ */

#head.sticky-header.on .navbar-brand img:first-child {
    width: 180px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    #head {
        position: relative;
        z-index: 1040;
        width: 100%;
    }

    #head .navbar-brand img:first-child {
        width: 175px;
        max-width: none;
        height: auto;
        opacity: 1;
    }

    #head.sticky-header.on .navbar-brand img:first-child {
        width: 155px;
    }

}

/* ================================================================
   FIN
   ================================================================ */