/**
 * Témini — estilos de componentes y plantilla
 */

/* Fuentes por defecto */
html {
    font-size: 16px;
    /* Native smooth scroll fights GSAP ScrollSmoother and makes the page jump. */
    scroll-behavior: auto;
    height: auto;

    @media (prefers-reduced-motion: no-preference) {
        &:not(.has-scroll-smoother) {
            scroll-behavior: smooth;
        }
    }

    @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;
    }
}

body.admin-bar {
    --admin-bar-height: 32px;

    @media only screen and (max-width: 782px) { --admin-bar-height: 46px; }
}

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

h2, .h2, .column_heading.h2 .title {
    font-family: var(--font-decorative);
    font-size: var(--h2);
    line-height: 1.2;
    font-weight: 700;
}

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

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

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

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

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

.lead, .lead p, .big, .big p, .column_heading.big .title {
    font-family: var(--font-titles);
    font-size: var(--p-l);
    line-height: 1.6;
    font-weight: 400;
}

.extrabig, .extrabig p, .column_heading.extrabig .title {
    font-family: var(--font-text);
    font-size: var(--p-xl);
    line-height: 1.4;
    font-weight: 400;
}

.small, .small p, .column_heading.small .title,
#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(--p-s);
    line-height: 1.6;
    font-weight: 400;
}

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

.eyebrow, .eyebrow p, .column_heading.eyebrow .title {
    font-family: var(--font-titles);
    font-size: var(--p-eyebrow);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Espaciados por defecto */
.section { 
    padding-top: var(--section-pad); 
    padding-bottom: var(--section-pad); 

    &.the_content, &.section-page-footer,
    &:has(#cmplz-document) { 
        padding-top: 0; 
        padding-bottom: 0; 
    }

    &.section-pad-s {
        padding-top: var(--section-pad-s);
        padding-bottom: var(--section-pad-s);
    }

    &.section-pad-s-top { padding-top: var(--section-pad-s); }
    &.section-pad-s-bottom { padding-bottom: var(--section-pad-s); }
}

@media only screen and (max-width: 767px) {
    .content_wrapper .mcb-column-inner { margin: 0; }
}

.lateral-pad.section,
.lateral-pad > .mcb-wrap-inner,
.lateral.pad > .mcb-column-inner { 
    padding-left: var(--lateral-pad); 
    padding-right: var(--lateral-pad); 
}

/* XXL */
.pad-xxl.section,
.pad-xxl > .mcb-wrap-inner,
.pad-xxl > .mcb-column-inner { padding-top: var(--size-xxl); padding-bottom: var(--size-xxl); }
.pad-xxl-top.section,
.pad-xxl-top > .mcb-wrap-inner,
.pad-xxl-top > .mcb-column-inner { padding-top: var(--size-xxl); }
.pad-xxl-bottom.section,
.pad-xxl-bottom > .mcb-wrap-inner,
.pad-xxl-bottom > .mcb-column-inner { padding-bottom: var(--size-xxl); }
.pad-xxl-lateral.section,
.pad-xxl-lateral > .mcb-wrap-inner,
.pad-xxl-lateral > .mcb-column-inner { padding-left: var(--size-xxl); padding-right: var(--size-xxl); }
.pad-xxl-right.section,
.pad-xxl-right > .mcb-wrap-inner,
.pad-xxl-right > .mcb-column-inner { padding-right: var(--size-xxl); }
.pad-xxl-left.section,
.pad-xxl-left > .mcb-wrap-inner,
.pad-xxl-left > .mcb-column-inner { padding-left: var(--size-xxl); }

.mar-xxl.section,
.mar-xxl > .mcb-wrap-inner,
.mar-xxl > .mcb-column-inner { margin-top: var(--size-xxl); margin-bottom: var(--size-xxl); }
.mar-xxl-top.section,
.mar-xxl-top > .mcb-wrap-inner,
.mar-xxl-top > .mcb-column-inner { margin-top: var(--size-xxl); }
.mar-xxl-bottom.section,
.mar-xxl-bottom > .mcb-wrap-inner,
.mar-xxl-bottom > .mcb-column-inner { margin-bottom: var(--size-xxl); }
.mar-xxl-lateral.section,
.mar-xxl-lateral > .mcb-wrap-inner,
.mar-xxl-lateral > .mcb-column-inner { margin-left: var(--size-xxl); margin-right: var(--size-xxl); }
.mar-xxl-right.section,
.mar-xxl-right > .mcb-wrap-inner,
.mar-xxl-right > .mcb-column-inner { margin-right: var(--size-xxl); }
.mar-xxl-left.section,
.mar-xxl-left > .mcb-wrap-inner,
.mar-xxl-left > .mcb-column-inner { margin-left: var(--size-xxl); }

/* XL */
.pad-xl.section,
.pad-xl > .mcb-wrap-inner,
.pad-xl > .mcb-column-inner { padding-top: var(--size-xl); padding-bottom: var(--size-xl); }
.pad-xl-top.section,
.pad-xl-top > .mcb-wrap-inner,
.pad-xl-top > .mcb-column-inner { padding-top: var(--size-xl); }
.pad-xl-bottom.section,
.pad-xl-bottom > .mcb-wrap-inner,
.pad-xl-bottom > .mcb-column-inner { padding-bottom: var(--size-xl); }
.pad-xl-lateral.section,
.pad-xl-lateral > .mcb-wrap-inner,
.pad-xl-lateral > .mcb-column-inner { padding-left: var(--size-xl); padding-right: var(--size-xl); }
.pad-xl-right.section,
.pad-xl-right > .mcb-wrap-inner,
.pad-xl-right > .mcb-column-inner { padding-right: var(--size-xl); }
.pad-xl-left.section,
.pad-xl-left > .mcb-wrap-inner,
.pad-xl-left > .mcb-column-inner { padding-left: var(--size-xl); }

.mar-xl.section,
.mar-xl > .mcb-wrap-inner,
.mar-xl > .mcb-column-inner { margin-top: var(--size-xl); margin-bottom: var(--size-xl); }
.mar-xl-top.section,
.mar-xl-top > .mcb-wrap-inner,
.mar-xl-top > .mcb-column-inner { margin-top: var(--size-xl); }
.mar-xl-bottom.section,
.mar-xl-bottom > .mcb-wrap-inner,
.mar-xl-bottom > .mcb-column-inner { margin-bottom: var(--size-xl); }
.mar-xl-lateral.section,
.mar-xl-lateral > .mcb-wrap-inner,
.mar-xl-lateral > .mcb-column-inner { margin-left: var(--size-xl); margin-right: var(--size-xl); }
.mar-xl-right.section,
.mar-xl-right > .mcb-wrap-inner,
.mar-xl-right > .mcb-column-inner { margin-right: var(--size-xl); }
.mar-xl-left.section,
.mar-xl-left > .mcb-wrap-inner,
.mar-xl-left > .mcb-column-inner { margin-left: var(--size-xl); }

/* L */
.pad-l.section,
.pad-l > .mcb-wrap-inner,
.pad-l > .mcb-column-inner { padding-top: var(--size-l); padding-bottom: var(--size-l); }
.pad-l-top.section,
.pad-l-top > .mcb-wrap-inner,
.pad-l-top > .mcb-column-inner { padding-top: var(--size-l); }
.pad-l-bottom.section,
.pad-l-bottom > .mcb-wrap-inner,
.pad-l-bottom > .mcb-column-inner { padding-bottom: var(--size-l); }
.pad-l-lateral.section,
.pad-l-lateral > .mcb-wrap-inner,
.pad-l-lateral > .mcb-column-inner { padding-left: var(--size-l); padding-right: var(--size-l); }
.pad-l-right.section,
.pad-l-right > .mcb-wrap-inner,
.pad-l-right > .mcb-column-inner { padding-right: var(--size-l); }
.pad-l-left.section,
.pad-l-left > .mcb-wrap-inner,
.pad-l-left > .mcb-column-inner { padding-left: var(--size-l); }

.mar-l.section,
.mar-l > .mcb-wrap-inner,
.mar-l > .mcb-column-inner { margin-top: var(--size-l); margin-bottom: var(--size-l); }
.mar-l-top.section,
.mar-l-top > .mcb-wrap-inner,
.mar-l-top > .mcb-column-inner { margin-top: var(--size-l); }
.mar-l-bottom.section,
.mar-l-bottom > .mcb-wrap-inner,
.mar-l-bottom > .mcb-column-inner { margin-bottom: var(--size-l); }
.mar-l-lateral.section,
.mar-l-lateral > .mcb-wrap-inner,
.mar-l-lateral > .mcb-column-inner { margin-left: var(--size-l); margin-right: var(--size-l); }
.mar-l-right.section,
.mar-l-right > .mcb-wrap-inner,
.mar-l-right > .mcb-column-inner { margin-right: var(--size-l); }
.mar-l-left.section,
.mar-l-left > .mcb-wrap-inner,
.mar-l-left > .mcb-column-inner { margin-left: var(--size-l); }

/* M */
.pad-m.section,
.pad-m > .mcb-wrap-inner,
.pad-m > .mcb-column-inner { padding-top: var(--size-m); padding-bottom: var(--size-m); }
.pad-m-top.section,
.pad-m-top > .mcb-wrap-inner,
.pad-m-top > .mcb-column-inner { padding-top: var(--size-m); }
.pad-m-bottom.section,
.pad-m-bottom > .mcb-wrap-inner,
.pad-m-bottom > .mcb-column-inner { padding-bottom: var(--size-m); }
.pad-m-lateral.section,
.pad-m-lateral > .mcb-wrap-inner,
.pad-m-lateral > .mcb-column-inner { padding-left: var(--size-m); padding-right: var(--size-m); }
.pad-m-right.section,
.pad-m-right > .mcb-wrap-inner,
.pad-m-right > .mcb-column-inner { padding-right: var(--size-m); }
.pad-m-left.section,
.pad-m-left > .mcb-wrap-inner,
.pad-m-left > .mcb-column-inner { padding-left: var(--size-m); }

.mar-m.section,
.mar-m > .mcb-wrap-inner,
.mar-m > .mcb-column-inner { margin-top: var(--size-m); margin-bottom: var(--size-m); }
.mar-m-top.section,
.mar-m-top > .mcb-wrap-inner,
.mar-m-top > .mcb-column-inner { margin-top: var(--size-m); }
.mar-m-bottom.section,
.mar-m-bottom > .mcb-wrap-inner,
.mar-m-bottom > .mcb-column-inner { margin-bottom: var(--size-m); }
.mar-m-lateral.section,
.mar-m-lateral > .mcb-wrap-inner,
.mar-m-lateral > .mcb-column-inner { margin-left: var(--size-m); margin-right: var(--size-m); }
.mar-m-right.section,
.mar-m-right > .mcb-wrap-inner,
.mar-m-right > .mcb-column-inner { margin-right: var(--size-m); }
.mar-m-left.section,
.mar-m-left > .mcb-wrap-inner,
.mar-m-left > .mcb-column-inner { margin-left: var(--size-m); }

/* S */
.pad-s.section,
.pad-s > .mcb-wrap-inner,
.pad-s > .mcb-column-inner { padding-top: var(--size-s); padding-bottom: var(--size-s); }
.pad-s-top.section,
.pad-s-top > .mcb-wrap-inner,
.pad-s-top > .mcb-column-inner { padding-top: var(--size-s); }
.pad-s-bottom.section,
.pad-s-bottom > .mcb-wrap-inner,
.pad-s-bottom > .mcb-column-inner { padding-bottom: var(--size-s); }
.pad-s-lateral.section,
.pad-s-lateral > .mcb-wrap-inner,
.pad-s-lateral > .mcb-column-inner { padding-left: var(--size-s); padding-right: var(--size-s); }
.pad-s-right.section,
.pad-s-right > .mcb-wrap-inner,
.pad-s-right > .mcb-column-inner { padding-right: var(--size-s); }
.pad-s-left.section,
.pad-s-left > .mcb-wrap-inner,
.pad-s-left > .mcb-column-inner { padding-left: var(--size-s); }

.mar-s.section,
.mar-s > .mcb-wrap-inner,
.mar-s > .mcb-column-inner { margin-top: var(--size-s); margin-bottom: var(--size-s); }
.mar-s-top.section,
.mar-s-top > .mcb-wrap-inner,
.mar-s-top > .mcb-column-inner { margin-top: var(--size-s); }
.mar-s-bottom.section,
.mar-s-bottom > .mcb-wrap-inner,
.mar-s-bottom > .mcb-column-inner { margin-bottom: var(--size-s); }
.mar-s-lateral.section,
.mar-s-lateral > .mcb-wrap-inner,
.mar-s-lateral > .mcb-column-inner { margin-left: var(--size-s); margin-right: var(--size-s); }
.mar-s-right.section,
.mar-s-right > .mcb-wrap-inner,
.mar-s-right > .mcb-column-inner { margin-right: var(--size-s); }
.mar-s-left.section,
.mar-s-left > .mcb-wrap-inner,
.mar-s-left > .mcb-column-inner { margin-left: var(--size-s); }

/* XS */
.pad-xs.section,
.pad-xs > .mcb-wrap-inner,
.pad-xs > .mcb-column-inner { padding-top: var(--size-xs); padding-bottom: var(--size-xs); }
.pad-xs-top.section,
.pad-xs-top > .mcb-wrap-inner,
.pad-xs-top > .mcb-column-inner { padding-top: var(--size-xs); }
.pad-xs-bottom.section,
.pad-xs-bottom > .mcb-wrap-inner,
.pad-xs-bottom > .mcb-column-inner { padding-bottom: var(--size-xs); }
.pad-xs-lateral.section,
.pad-xs-lateral > .mcb-wrap-inner,
.pad-xs-lateral > .mcb-column-inner { padding-left: var(--size-xs); padding-right: var(--size-xs); }
.pad-xs-right.section,
.pad-xs-right > .mcb-wrap-inner,
.pad-xs-right > .mcb-column-inner { padding-right: var(--size-xs); }
.pad-xs-left.section,
.pad-xs-left > .mcb-wrap-inner,
.pad-xs-left > .mcb-column-inner { padding-left: var(--size-xs); }

.mar-xs.section,
.mar-xs > .mcb-wrap-inner,
.mar-xs > .mcb-column-inner { margin-top: var(--size-xs); margin-bottom: var(--size-xs); }
.mar-xs-top.section,
.mar-xs-top > .mcb-wrap-inner,
.mar-xs-top > .mcb-column-inner { margin-top: var(--size-xs); }
.mar-xs-bottom.section,
.mar-xs-bottom > .mcb-wrap-inner,
.mar-xs-bottom > .mcb-column-inner { margin-bottom: var(--size-xs); }
.mar-xs-lateral.section,
.mar-xs-lateral > .mcb-wrap-inner,
.mar-xs-lateral > .mcb-column-inner { margin-left: var(--size-xs); margin-right: var(--size-xs); }
.mar-xs-right.section,
.mar-xs-right > .mcb-wrap-inner,
.mar-xs-right > .mcb-column-inner { margin-right: var(--size-xs); }
.mar-xs-left.section,
.mar-xs-left > .mcb-wrap-inner,
.mar-xs-left > .mcb-column-inner { margin-left: var(--size-xs); }

/* XXS */
.pad-xxs.section,
.pad-xxs > .mcb-wrap-inner,
.pad-xxs > .mcb-column-inner { padding-top: var(--size-xxs); padding-bottom: var(--size-xxs); }
.pad-xxs-top.section,
.pad-xxs-top > .mcb-wrap-inner,
.pad-xxs-top > .mcb-column-inner { padding-top: var(--size-xxs); }
.pad-xxs-bottom.section,
.pad-xxs-bottom > .mcb-wrap-inner,
.pad-xxs-bottom > .mcb-column-inner { padding-bottom: var(--size-xxs); }
.pad-xxs-lateral.section,
.pad-xxs-lateral > .mcb-wrap-inner,
.pad-xxs-lateral > .mcb-column-inner { padding-left: var(--size-xxs); padding-right: var(--size-xxs); }
.pad-xxs-right.section,
.pad-xxs-right > .mcb-wrap-inner,
.pad-xxs-right > .mcb-column-inner { padding-right: var(--size-xxs); }
.pad-xxs-left.section,
.pad-xxs-left > .mcb-wrap-inner,
.pad-xxs-left > .mcb-column-inner { padding-left: var(--size-xxs); }

.mar-xxs.section,
.mar-xxs > .mcb-wrap-inner,
.mar-xxs > .mcb-column-inner { margin-top: var(--size-xxs); margin-bottom: var(--size-xxs); }
.mar-xxs-top.section,
.mar-xxs-top > .mcb-wrap-inner,
.mar-xxs-top > .mcb-column-inner { margin-top: var(--size-xxs); }
.mar-xxs-bottom.section,
.mar-xxs-bottom > .mcb-wrap-inner,
.mar-xxs-bottom > .mcb-column-inner { margin-bottom: var(--size-xxs); }
.mar-xxs-lateral.section,
.mar-xxs-lateral > .mcb-wrap-inner,
.mar-xxs-lateral > .mcb-column-inner { margin-left: var(--size-xxs); margin-right: var(--size-xxs); }
.mar-xxs-right.section,
.mar-xxs-right > .mcb-wrap-inner,
.mar-xxs-right > .mcb-column-inner { margin-right: var(--size-xxs); }
.mar-xxs-left.section,
.mar-xxs-left > .mcb-wrap-inner,
.mar-xxs-left > .mcb-column-inner { margin-left: var(--size-xxs); }

/* No padding */
.no-pad.section { padding-top: 0; padding-bottom: 0; }
.no-pad-top.section { padding-top: 0; }
.no-pad-bottom.section { padding-bottom: 0; }

/* Botones */
.button, .wc-block-components-button:not(.is-link), 
.woocommerce a.added_to_cart, .wp-block-button__link, 
button, input[type=button], 
input[type=reset], input[type=submit] {
    font-family: var(--font-titles);
    font-size: var(--a-btn);
    line-height: 1;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 0;
    gap: var(--size-s);
    border-width: 0;
    border-radius: 0;
    text-transform: uppercase;
    transition: all .3s ease;

    .button_icon {
        line-height: 0;
        position: relative;
        padding-left: calc(1.6em - 5px);
        transition: all .3s ease;

        i { 
            font-size: 1.6em;
            transition: all .3s ease;
        }

        &:before {
            content: "";
            display: block;
            position: absolute;
            height: .1em;
            width: 50%;
            background: var(--white);
            top: 50%;
            transform: translateY(-50%);
            border-radius: 100px;
            right: 40%;
        }
    }

    &:hover .button_icon { padding-left: 0; }
}

.button, .widget a.button, 
.wp-block-button__link, button, 
input[type=button], input[type=reset],
.button.action_button, a.button.action_button {
    background: transparent;
    color: var(--white);
    border-color: transparent;

    i { color: var(--white); }
}

.button:hover, .widget a.button:hover, 
.wp-block-button__link:hover, button:hover, 
input[type=button]:hover, input[type=reset]:hover,
.button-animation-slide .button:before,
.button.action_button:hover, a.button.action_button:hover,
.button-animation-slide .action_button:before {
    background: transparent;
    color: var(--white);
    border-color: transparent;

    i { color: var(--white); }
}

.button.button_theme, a.button.button_theme, input[type=submit] {
    background: transparent;
    color: var(--black);
    border-color: transparent;

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

.button.button_theme:hover, a.button.button_theme:hover, input[type=submit]:hover,
.button-animation-slide .button_theme:before {
    background: transparent;
    color: var(--black);
    border-color: transparent;

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

/* Clases auxiliares */
.decorative { font-family: var(--font-decorative); }
.rec, .column_heading.rec .title { color: var(--rec); }
.black, .column_heading.black .title { color: var(--black); }
.dark-grey, .column_heading.dark-grey .title { color: var(--dark-grey); }
.grey, .column_heading.grey .title { color: var(--grey); }
.light-grey, .column_heading.light-grey .title { color: var(--light-grey); }
.white, .column_heading.white .title { 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; 
    }
}

.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; 
}

.has_content .the_content_wrapper { margin-bottom: 0; }

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

.four.columns .widget-area, .mfn-header-tmpl .section_wrapper,
.mfn-footer-tmpl .mcb-section .section_wrapper,
.section.lateral-pad-s > .section_wrapper { 
    padding-left: var(--lateral-pad-s) !important; 
    padding-right: var(--lateral-pad-s) !important; 
}

@media only screen and (max-width: 767px) {
    .mfn-footer-tmpl .mcb-section:not(.full-width) {
        padding-left: 0;
        padding-right: 0;
    }
}

/*********************************\
            RESPONSIVE
\*********************************/
@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; }
}