/*
Theme Name: Témini
Theme URI: https://themes.muffingroup.com/betheme
Author: Invbit Diseño y Desarrollo Web
Author URI: https://www.invbit.com/
Description: Témini is Invbit’s custom child theme for Betheme, designed to build custom web projects on a robust foundation, optimizing performance, maintenance, and future scalability.
Template: betheme
Version: 1.0.0
*/

:root {
    /* Colores */
    --primary: #C2D500;
    --secondary: #45C2B1;
    --complementary-1: #E54360;
    --complementary-2: #FFC629;

    --primary-light: #D8EB1C;
    --primary-dark: #ACBC09;
    --secondary-light: #6DDCCD;
    --secondary-dark: #199C8A;

	--black: #1F1F1F;
    --dark-grey: #4A4A4A;
    --grey: #6B6B6B;
    --light-grey: #E9E9E9;
    --white: #FCFCFC;

    /* Tamaños de texto */
    --size-h1: 4rem;
    --size-h2: 3rem;
    --size-h3: 2.125rem;
    --size-h4: 1.75rem;
    --size-h5: var(--size-p-large);
    --size-h6: var(--size-p-medium);

    --size-p-large: 1.25rem;
    --size-p-medium: 1rem;
    --size-p-small: 0.75rem;
    --size-a-nav: 1.125rem;

    --size-p-extralarge: 1.5rem;
    --size-p-featured: 1.5rem;
    --size-a-btn: 1.125rem;

    /* Fuentes*/
    --font-titles: 'Poppins', sans-serif;
    --font-text: 'Poppins', sans-serif;
    --font-decorative: 'Poppins', sans-serif;

    /* Espaciados */
    --120: 120px;
    --80: 82px;
    --60: 64px;
    --50: 54px;
    --40: 42px;
    --30: 34px;
    --20: 24px;

    /* Medidas */
    --container-width: 1600px;
    --pad-lateral: 33px;

    --half-section: min(calc(var(--container-width) / 2), calc(50dvw - var(--pad-lateral)));

    --admin-bar-height: 32px;

    /* Otros */
    --cookie-button-size: 40px;
    --cookie-button-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

    /* Responsive */
    @media only screen and (max-width: 1239px) {  
        --container-width: 940px;
    }
    
    @media only screen and (max-width: 959px) {
        --container-width: 708px;
    }
    
    @media only screen and (max-width: 782px) {
        --admin-bar-height: 46px;
    }
    
    @media only screen and (max-width: 767px) {
        --container-width: 550px;

        --cookie-button-size: 30px;
    }
    
    @media only screen and (max-width: 480px) {
        --pad-120: 54px 0px;
        --120: 54px;
        --80: 48px;
        --60: 34px;
        --50: 24px;
        --40: 24px;
        --30: 24px;
        --20: 12px;
    }

    /* Scrollbar */
    scrollbar-color: var(--primary) var(--white);
    scrollbar-width: thin;
}

/* Fuentes por defecto */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    height: auto;

    @media only screen and (max-width: 1440px) {
        font-size: 15px;
    }

    @media only screen and (max-width: 767px) {
        font-size: 14px;
    }

    @media only screen and (max-width: 580px) {
        font-size: 13px;
    }
}

h1, #Subheader .title, .h1 {
    font-family: var(--font-titles);
    font-size: var(--size-h1);
    line-height: 1;
    font-weight: 700;
}

h2, .h2 {
    font-family: var(--font-titles);
    font-size: var(--size-h2);
    line-height: 1.2;
    font-weight: 600;
}

h3, .h3 {
    font-family: var(--font-titles);
    font-size: var(--size-h3);
    line-height: 1.2;
    font-weight: 600;
}

h4, .h4 {
    font-family: var(--font-titles);
    font-size: var(--size-h4);
    line-height: 1.2;
    font-weight: 600;
}

h5, .h5 {
    font-family: var(--font-titles);
    font-size: var(--size-h5);
    line-height: 1.2;
    font-weight: 600;
}

h6, .h6 {
    font-family: var(--font-titles);
    font-size: var(--size-h6);
    line-height: 1.2;
    font-weight: 600;
}

body, p, .medium {
    font-family: var(--font-text);
    font-size: var(--size-p-medium);
    line-height: 1.6;
    font-weight: 400;
}

.lead, .lead p, .big, .big p {
    font-family: var(--font-text);
    font-size: var(--size-p-large);
    line-height: 1.6;
    font-weight: 500;
}

.small, .small p,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
    font-family: var(--font-text);
    font-size: var(--size-p-small);
    line-height: 1.4;
    font-weight: 400;
}

#menu > ul > li > a, #overlay-menu ul li a {
    font-family: var(--font-text);
    font-size: var(--size-a-nav);
    line-height: 1.4;
    font-weight: 400;
}

/* Espaciados por defecto */
.pad-lateral { padding-left: var(--pad-lateral); padding-right: var(--pad-lateral); }
.pad-120 { padding: var(--120) 0; }
.pad-120-top { padding-top: var(--120); }
.pad-120-bottom { padding-bottom: var(--120); }
.pad-60-bottom { padding-bottom: var(--60); }
.pad-50-bottom { padding-bottom: var(--50); }
.pad-30-bottom { padding-bottom: var(--30); }
.pad-20-bottom { padding-bottom: var(--20); }

/* Clases auxiliares */
.decorative { font-family: var(--font-decorative); }
.primary { color: var(--primary); }
.secondary { color: var(--secondary); }
.black { color: var(--black); }
.white { color: var(--white); }

/* Navegación entre páginas fluida */
@view-transition { navigation: auto; }
.container { view-transition-name: page; }
::view-transition-old(page) { animation: fade 0.2s linear forwards;  }
::view-transition-new(page) { animation: fade 0.3s linear reverse; }
    
/* FIX: Slick slider */
.slick-list { width: 100%; } 
.slick-track { display: flex; }

/* FIX: Hotspot */
.mfn-image-hotspot .hotspot-point { transform: translate(-50%, -50%); }

/* Otros estilos generales */
.validate_email_against_bot, .screen-reader-text { display: none; }

.mobile-side-slide { overflow-x: clip !important; }

p:empty { 
    margin: 0; 
    display: none; 
    visibility: hidden; 
    opacity: 0; 
}

a { 
    transition: all .3s ease;

    &:hover { 
        text-decoration: none; 
    }
}

.admin-bar .full-screen .section_wrapper { min-height: calc( 100dvh - var(--admin-bar-height) ); }

.style-simple, .style-simple .mfn-header-tmpl { 
    --mfn-column-gap-bottom: 0; 
    --mfn-column-gap-top: 0; 
    --mfn-column-gap-right: 0; 
    --mfn-column-gap-left: 0; 
}

.the_content_wrapper { 
    width: 100%; 
    margin: 0; 
}

.section_wrapper, .container {
    max-width: var(--container-width);
    padding-left: var(--pad-lateral);
    padding-right: var(--pad-lateral);
}

@media only screen and (max-width: 767px) {
    .content_wrapper .section_wrapper, .container, .four.columns .widget-area {
        max-width: var(--container-width) !important;
        padding-left: var(--pad-lateral);
        padding-right: var(--pad-lateral);
    }
}


/*********************************\
            COMPLIANZ
\*********************************/
/* Cookies button */
body #cmplz-manage-consent .cmplz-manage-consent {
    background: var(--white);
    right: unset !important;
    left: 10px;
    font-size: 0;
    line-height: 0;
    color: var(--black);
    bottom: 10px !important;
    padding: 0;
    width: var(--cookie-button-size);
    height: var(--cookie-button-size);
    border-radius: 100px;
    min-width: 0px;
    box-shadow: var(--cookie-button-shadow);

    &:before {
        content: "\e901";
        font-family: 'invbit';
        font-size: calc(var(--cookie-button-size) * 0.6);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    &:hover:before { transform: translate(-50%, -50%); }
}

/* Cookies banner */
#cmplz-cookiebanner-container {
    .cmplz-body { scrollbar-width: none; }

    .cmplz-cookiebanner {
        grid-row-gap: 5px;
        padding: var(--20);
    }

    .cmplz-header { display: none; }   

    p {
        margin: 0;
        font-size: var(--size-p-small);
    }   
    
    .cmplz-buttons .cmplz-btn {
        letter-spacing: 0;
        font-size: var(--size-p-small) !important;
        line-height: 1.2 !important;
        text-transform: none;
        justify-content: center;
        height: auto;
    }
    
    .cmplz-categories .cmplz-category {
        &:not(:last-child) { margin-bottom: 5px; }

        .cmplz-category-header .cmplz-category-title { 
            font-size: var(--size-p-small);
            line-height: 1; 
            font-weight: 500;
        }

        .cmplz-category-header .cmplz-always-active {
            font-size: calc(var(--size-p-small) * 0.8);
            line-height: 1;
        }
    }
}

/* Complianz documents */
#cmplz-document {
    max-width: 100%;
    padding: var(--pad-120);
    text-align: justify;

    p, li, td {
        font-size: var(--size-p-medium);
        line-height: 1.4;
        font-weight: 400;
    }

    h2, h3, h4 {
        font-weight: 600;
        border: 0;
        padding: 0;
        margin: 0 0 var(--20);
        line-height: 1.2;
    }

    h2 {
        font-size: var(--size-h2);
        margin-top: var(--30);
    
        &:first-child { margin-top: 0; }
    }
    
    h3 { font-size: var(--size-h3); }
    
    h4 {
        font-size: var(--size-h4);
        font-weight: 700;
    }
}


/*********************************\
             HEADER
\*********************************/
/* Subheader por defecto */
#Subheader { 
    overflow: visible; 
    padding: var(--40) 0;

    ul.breadcrumbs {
        display: flex; 
        flex-wrap: wrap; 
        align-items: center; 
        justify-content: center; 
        gap: 10px;

        li {
            display: flex; 
            align-items: center; 
            justify-content: flex-start; 
            color: var(--black); 
            text-decoration: none;
            width: fit-content; 
            gap: 10px;

            a { color: var(--black); }

            span {
                display: flex; 
                align-items: center; 
                justify-content: center;
                margin: 0; 
                opacity: 1; 

                i {
                    line-height: 0;

                    &::before { 
                        font-family: 'invbit';
                        content: "\e90d";
                    }
                }
            }
        }
    }
}


/*********************************\
              FOOTER
\*********************************/
/* Back to top */
#back_to_top.sticky {
    bottom: 10px;
    right: 10px !important;
    width: var(--cookie-button-size);
    height: var(--cookie-button-size);
    font-size: calc(var(--cookie-button-size) * 0.6) !important;
    line-height: 1;
    padding: 0;
    border-radius: 100px;
    box-shadow: var(--cookie-button-shadow);

    &:before { content: none; }
}

/*Kit digital*/
body #mfn-footer-template .financiacion {
    display: grid;
    grid-template-columns: 1fr 1fr 5fr;
    gap: var(--20);
    text-align: left;
    align-items: center;

    & > div {
        line-height: 0;

        img {
            max-height: 50px;
            width: auto;
        }

        p {
            font-size: var(--size-p-small);
            line-height: 1.2;
            margin-bottom: 0;
        }
    }

    @media only screen and (max-width: 959px) {
        grid-template-columns: 1fr 1fr;
        text-align: center;
        gap: 5px;

        & > div:last-child {
            grid-column: 1 / span 2;
        }
    }
}

/* Accesibilidad */
body #pojo-a11y-toolbar {
    top: auto !important;
    bottom: calc( var(--cookie-button-size) + 20px ) !important;

    .pojo-a11y-toolbar-toggle a {
        font-size: calc(var(--cookie-button-size) * 0.6);
        padding: 8px;
        border-radius: 100px;
        box-shadow: var(--cookie-button-shadow);
    }

    .pojo-a11y-toolbar-overlay p.pojo-a11y-toolbar-title {
        line-height: 1.2;
    }

    &.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle {
        left: 190px;
        bottom: 0;
    }

    &.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle {
        right: 190px;
        bottom: 0;
    }
}


/*********************************\
          FLUENT FORMS
\*********************************/
.fluentform {
    .ff-el-group.politicas {
        margin: 0;
    
        p { 
            font-size: var(--size-p-small); 
            line-height: 1.4; 
            opacity: .6;
            color: var(--black); 
        }
    }
}


/*********************************\
               BLOG
\*********************************/
/* Archive - Paginación */
.pager{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: var(--20); 
    margin-top: var(--50); 

    .pages {
        margin: 0; 
        background-image: unset; 
        background-color: unset; 
        padding: 0; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        gap: 18px;

        a.page {
            --page-size: 36px;

            border-radius: 50%; 
            width: var(--page-size); 
            height: var(--page-size); 
            line-height: var(--page-size); 
            font-size: var(--size-a-nav); 
            border: 1px solid var(--black); 
            color: var(--black); 
            margin: 0; 
            font-weight: 400;

            &:hover, &.active {
                background-color: var(--primary); 
                color: var(--black); 
                border-color: var(--primary); 
            }

            &:before { content: none; }

            &.next_page, &.prev_page {
                font-size: 0; 
                color: transparent; 
                width: var(--page-size); 
                height: var(--page-size); 
                line-height: var(--page-size); 
                transition: all 1s ease; 
                position: relative;

                &:before {
                    font-family: 'invbit';
                    font-size: calc(var(--page-size) * 0.8);
                    color: var(--black);
                }
            }

            &.next_page {
                &:before { content: "\e906"; }
                &:hover { transform: translateX(10px); }
            }

            &.prev_page {
                &:before { content: "\e90a"; }
                &:hover { transform: translateX(-10px); }
            }
        }
    }
}

/* Single - Tag cloud */
.column_tag_cloud .mfn-tag-cloud { 
    gap: 5px;
    
    &:before {
        content: "";
        font-family: 'invbit';
        content: "\e910";
        font-size: var(--40);
        line-height: 1;
        color: var(--black);
        width: var(--40);
        height: var(--40);
    }

    li a {
        background-color: var(--primary);
        color: var(--black);
        line-height: 1;
        padding: 7px 15px;
        transition: all .3s ease;
        border-radius: 100px;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        &:hover { transform: scale(1.02); }
    }
}

/* Single - Share */
.cont-share{ 
    border-top: 1px solid var(--black); 
    margin-top: var(--30); 
    padding-top: var(--30); 

    .mcb-wrap-inner{ align-items: center; 
        .one.column{ width: fit-content; }
    }

    .mfn-share-post .mfn-share-post-button{ 
        border: unset; 
        padding: 0; 
        border-radius: 0; 
        color: var(--black); 
        font-size: var(--size-a-nav); 
        transition: all .3s ease; 

        &:hover { transform: translateY(-5px); }
    }
}

/*********************************\
            RESPONSIVE
\*********************************/
@media only screen and (max-width: 1239px) {}

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

@media only screen and (max-width: 959px) {
    /* FIX: Desactivar delay de animaciones */
    body .animate { animation-delay: 0ms !important; }

    /* FIX: Ocultar botón de accesibilidad al abrir el menú lateral */
    html.mfn-header-tmpl-burger-sidebar-opened #pojo-a11y-toolbar { display: none; }
}

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

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

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