/* declare the var --font-size-h5 */
:root {
    --font-size-h1: clamp(48px, calc(5vw + 32px), 128px);
    --font-size-h2: clamp(32px, calc(4vw + 19.2px), 96px);
    --font-size-h3: clamp(28px, calc(3.75vw + 16px), 64px);
    --font-size-h4: clamp(24px, calc(2.5vw + 16px), 48px);
    --font-size-h5: clamp(20px, calc(1.25vw + 16px), 32px);
    --font-size-h6: clamp(18px, calc(0.625vw + 16px), 24px);
    --font-size-p: clamp(16px, calc(0.4167vw + 14.67px), 20px);
    --font-size-i: clamp(14px, calc(0.4167vw + 12.67px), 18px);
    --font-size-s: clamp(12px, calc(0.25vw + 11.2px), 16px);
    --line-height-h1: 1.1;
    --line-height-h2: 1.15;
    --line-height-h3: 1.25;
    --line-height-h4: 1.50;
    --line-height-h5: 1.75;
    --line-height-h6: 1.8;
    --line-height-p: 1.75;
    --line-height-i: 1.75;
    --line-height-s: 1.75;
    --font-weight-h1: 800;
    --font-weight-h2: 800;
    --font-weight-h3: 800;
    --font-weight-h4: 800;
    --font-weight-h5: 700;
    --font-weight-h6: 700;
    --font-weight-p: 400;
    --font-weight-i: 800;
    --font-weight-2: 400;
    --letter-spacing-h1: 0px;
    --letter-spacing-h2: 0px;
    --letter-spacing-h3: 0px;
    --letter-spacing-h4: 0px;
    --letter-spacing-h5: 0px;
    --letter-spacing-h6: 0px;
    --letter-spacing-p: 0px;
    --letter-spacing-i: 0.5px;
    --letter-spacing-s: 1px;
    --gutter-0: clamp(4px, calc(0.442vw + 2.343px), 8px);
    --gutter-1: clamp(6px, calc(0.663vw + 3.514px), 12px);
    --gutter-2: clamp(8px, calc(0.884vw + 4.685px), 16px);
    --gutter-3: clamp(12px, calc(1.326vw + 7.028px), 24px);
    --gutter-4: clamp(16px, calc(1.768vw + 9.37px), 32px);
    --gutter-5: clamp(24px, calc(2.652vw + 14.06px), 48px);
    --gutter-6: clamp(32px, calc(3.536vw + 18.74px), 64px);
    --gutter-7: clamp(48px, calc(5.304vw + 28.11px), 96px);
    --gutter-8: clamp(64px, calc(7.072vw + 37.48px), 128px);
    --gutter-9: clamp(96px, calc(10.61vw + 56.22px), 192px);
    --gutter-10: clamp(128px, calc(14.14vw + 74.96px), 256px);
    --gutter-auto: clamp(16px, calc(15.38vw - 39.38px), 256px);
    --gutter-auto-2: clamp(16px, calc(23.59vw - 68.92px), 384px);
    --radius-0: 4px;
    --radius-1: 8px;
    --radius-2: 12px;
    --radius-3: 16px;
    --radius-4: 32px;
    --radius-5: 100vw;
    --shadow-1: #00000024 0px 2px 2px 0px, #0000001f 0px 1px 5px 0px;
    --shadow-2: #00000024 0px 4px 5px 0px, #0000001f 0px 1px 10px 0px;
    --shadow-3: 0px 2px 6px #00000014;
    --shadow-4: 0px 2px 32px #0000001f;
    --color-primary-50: #e6f6ee;
    --color-primary-100: #c3ead4;
    --color-primary-200: #9cdcb9;
    --color-primary-300: #70cf9d;
    --color-primary-400: #4cc488;
    --color-primary-500: #1db973;
    --color-primary-600: #14aa68;
    --color-primary-700: #07975a;
    --color-primary-800: #007e57;
    --color-primary-900: #00663a;
    --color-secondary-50: #e4e8ed;
    --color-secondary-100: #bac6d3;
    --color-secondary-200: #8ea2b6;
    --color-secondary-300: #647e99;
    --color-secondary-400: #426486;
    --color-secondary-500: #184c75;
    --color-secondary-600: #0f456d;
    --color-secondary-700: #033c63;
    --color-secondary-800: #003256;
    --color-secondary-900: #02223e;
    --color-neutral-50: #fafafa;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #eee;
    --color-neutral-300: #e0e0e0;
    --color-neutral-400: #bdbdbd;
    --color-neutral-500: #9e9e9e;
    --color-neutral-600: #757575;
    --color-neutral-700: #616161;
    --color-neutral-800: #424242;
    --color-neutral-900: #212121;
    --color-neutral2-50: #d7f5fb;
    --color-neutral2-100: #bbe0e2;
    --color-neutral2-200: #9cc8cd;
    --color-neutral2-300: #7bafb5;
    --color-neutral2-400: #619ca3;
    --color-neutral2-500: #478a92;
    --color-neutral2-600: #3b7a81;
    --color-neutral2-700: #2d656b;
    --color-neutral2-800: #1f5258;
    --color-neutral2-900: #0d3c41;
    --color-red-50: #ffebee;
    --color-red-100: #ffcdd2;
    --color-red-200: #ef9a9a;
    --color-red-300: #e57373;
    --color-red-400: #ef5350;
    --color-red-500: #f44336;
    --color-red-600: #e53935;
    --color-red-700: #d32f2f;
    --color-red-800: #c62828;
    --color-red-900: #b71c1c;
    --color-black: #000;
    --color-white: #fff;
    --color-blue-match: #0099b1;
    --color-blue-match-light: #95c3d0;
    --color-red-power: #f37c7d;
    --color-red-power-light: #ff9ea2;
    --outline-size: clamp(2px, calc(0.3125vw + 1px), 5px);
    --border-size: 2px;
    --max-layout-width: 1920px;
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 100;
    src: url(assets/Montserrat-Thin.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: italic;
    font-weight: 100;
    src: url(assets/Montserrat-ThinItalic.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 200;
    src: url(assets/Montserrat-ExtraLight.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: italic;
    font-weight: 200;
    src: url(assets/Montserrat-ExtraLightItalic.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 300;
    src: url(assets/Montserrat-Light.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: italic;
    font-weight: 300;
    src: url(assets/Montserrat-LightItalic.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    src: url(assets/Montserrat-Regular.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: italic;
    font-weight: 400;
    src: url(assets/Montserrat-Italic.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    src: url(assets/Montserrat-Medium.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: italic;
    font-weight: 500;
    src: url(assets/Montserrat-MediumItalic.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    src: url(assets/Montserrat-SemiBold.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: italic;
    font-weight: 600;
    src: url(assets/Montserrat-SemiBoldItalic.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 700;
    src: url(assets/Montserrat-Bold.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: italic;
    font-weight: 700;
    src: url(assets/Montserrat-BoldItalic.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 800;
    src: url(assets/Montserrat-ExtraBold.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: italic;
    font-weight: 800;
    src: url(assets/Montserrat-ExtraBoldItalic.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 900;
    src: url(assets/Montserrat-Black.ttf);
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: italic;
    font-weight: 900;
    src: url(assets/Montserrat-BlackItalic.ttf);
}

* {
    font-family:Montserrat;
}

body {
    background-color: var(--color-white);
    overflow-x: hidden;
    position: relative;
    z-index: -1;
}
/*
body {
    font-family:Montserrat;
    font-style:normal;
    font-weight:100;
    margin: 0;
    padding: 0;
    background: white;
    color: #333;
    scroll-behavior: smooth;
}*/



header {
    text-align: center;
    padding: 100px 20px;
    /*background: #022b3a;*/
    color: #fff;
}

/* Gatsby */

.gatsby-image-wrapper {
    position: relative;
    overflow: hidden;
}

.gatsby-image-d2bh {
    display: block;
    max-height: 100vh;
    min-height: 500px;
}

.gatsby-mobile-image-d2bh {
    display: none;
    max-height: 100vh;
}


@media screen and (max-width: 499px) {
    .gatsby-image-d2bh {
        display: none;
    }
}

@media screen and (max-width: 499px) {
    .gatsby-mobile-image-d2bh {
        display: block;
    }
}





.gatsby-image-wrapper [data-main-image] {
    opacity: 0;
    transform: translateZ(0);
    transition: opacity .25s linear;
    will-change: opacity;
}

.gatsby-image-wrapper img {
    bottom: 0;
    height: 100%;
    left: 0;
    margin: 0;
    max-width: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

/**/

.content-section {
    padding: 100px 20px;
    text-align: center;
    /*background: #ffffff;*/
    margin: 50px auto;
    max-width: 800px;
    /*border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);*/
}

h1 {
    /*color: #05668D;*/
    font-weight: 800;
}
h2 {
    /*color: #05668D;*/
    font-weight: 500;
}

.scroll-down {
    width: 50px;
    height: 50px;
    background: var(--color-primary-700);
    border-radius: 50%;
    position: relative;
    margin: 30px auto 0;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.scroll-down:first-of-type {
    margin-top: 20px;
}

.scroll-down::after {
    content: '↓';
    color: #fff;
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
}

footer {
    background: #05668D;
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 50px;
}


.hero-section {
    background: url('assets/01-Header.avif') no-repeat center center/cover;
    color: white;
    text-align: center;
    padding: 60px 20px;
    position: relative;
}
.logo {
    /*(min-width: 92px) 92px, 100vw*/

    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
}

.top_header {
    color: white;
}

.h2_1 {
    font-size: 40px;
    font-weight: 800;
}

.h2_white {
    color: white;
}

.montserrat_light {
    font-weight: 300;
}
.margin_0 {
    margin: 0;
}
.size_18 {
    font-size: 18px;
}
.size_28 {
    font-size: 28px;
}
.size_38 {
    font-size: 38px;
}
.size_48 {
    font-size: 48px;
}
.size_58 {
    font-size: 58px;
}
.size_88 {
    font-size: 88px;
}

.size_5rem {
    font-size: 5rem;
}

.hero-content {
    width: 50%;
    /* center it*/
    margin: 0 auto;

}

/* ACCORDION */

.accordion {
    /*border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;*/
    overflow: hidden;
   /* display: flex;*/
}

.accordion button {
    font-size: 18px;
    display: flex;
    justify-content: center;
    
    align-items: flex-start;
    width: 100%;
    background: inherit;
    border: none;
    padding: 15px;
    /*text-align: left;*/
    cursor: pointer;
   /* outline: none;*/
    
;
}

.accordion-title {
    margin-left: 10px;
}

.icon {
    /*transition: transform 0.3s ease;*/
    color: var(--color-black);
    width: var(--gutter-6);
    height: var(--gutter-6);
    margin-right: var(--gutter-0);
    transition: .5s cubic-bezier(.645,.045,.355,1);
}

.accordion.active .icon {
    transform: rotate(180deg);
}

.content {
    padding: 15px;
    /*background: #fff;*/
    display: none;
    /*border-top: 1px solid #ddd;*/
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.accordion:nth-child(odd) {
    background-color: #f5f5f5;
}
.accordion:nth-child(even) {
    background-color: white;
}
/*
.full-width {
    width: 100%;
}*/

.content-section-bulletpoints-full-width {
    max-width: 100%;
    padding-right: 0px;
    padding-left: 0px;
}

.no-bottom-padding {
    padding-bottom: 0;
}

.no-top-padding {
    padding-top: 0;
}   

.content p {
    /*  centered without full width */
    text-align: center;
    margin: 0 auto;
    max-width: 800px;    
    font-size: var(--font-size-h6);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-h6);
    line-height: var(--line-height-h6);

}

.accordion-title {
    font-size: var(--font-size-h5);
    font-weight: 800;
    letter-spacing: var(--letter-spacing-h5);
    line-height: var(--line-height-h5);
}

.paragraph {    
    font-size: var(--font-size-h6);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-h6);
    line-height: var(--line-height-h6);
}


/****************************************************
 * 
 *  v2
 * 
 ****************************************************/

/*
header {    
    border: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}*/

/*
div {    
    border: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}
*/
.overlay-d2bh {
    align-items: center;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: center;
    margin-left: var(--gutter-auto);
    margin-right: var(--gutter-auto);
    position: absolute;
    text-align: center;
}

.hero-content-z9p0 h1 b {
    font-weight: 800;
}

.hero-content-z9p0 h2 {
    font-size: var(--font-size-h5);
    font-weight: 300;
    letter-spacing: var(--letter-spacing-h4);
    margin: 0;
}

.hero-content-z9p0 h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-h1);
    letter-spacing: var(--letter-spacing-h1);
    line-height: 1;
    margin: 0;
}


.nav-74qa {
    background-color: initial;
    border-bottom: 1px solid #0000;
    color: var(--color-white);
    left: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    top: 0;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(.645,.045,.355,1);
    z-index: 3;
}

.nav-left-74qa {
    align-items: center;
    display: flex
;
    flex: 1 0 auto;
}

.nav-cont-74qa {
    align-items: stretch;
    display: flex
;
    justify-content: flex-start;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-layout-width);
    min-height: 64px;
    padding-left: var(--gutter-2);
    padding-right: var(--gutter-2);
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}


a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, button, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, input, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, select, small, span, strike, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    border: 0;
    box-sizing: border-box;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}


.layout-6jam {
    color: var(--font-color);
    overflow-x: hidden;
    transition: all 5s ease-in;
}

p {
    margin-bottom: 1.12rem;
}

.font-h3, h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h3);
    letter-spacing: var(--letter-spacing-h3);
    line-height: var(--line-height-h3);
}

.blank-x5d9 {
    padding: var(--gutter-5) var(--gutter-auto);
    text-align: center;
}


.header-u2zf {
    align-items: center;
    display: flex
;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    text-align: center;
    width: 100%;
}

.bottom-u2zf {
    /*padding-top: 60px;*/
}

.visible-u2zf.fade-in-u2zf.section-u2zf .content-u2zf {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-u2zf.section-u2zf .content-u2zf {
    opacity: 0;
    transform: translateY(100px);
    transition-duration: 1s;
}

.content-u2zf {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-layout-width);
}

.chars-h6-80 p {
    font-size: var(--font-size-h6);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-h6);
    line-height: var(--line-height-h6);
}

.black-background-dun6 {
    background-color: #000;
}
.blank-x5d9 {
    padding: var(--gutter-5) var(--gutter-auto);
    text-align: center;
}
.logo-container-3js8 {
    align-items: center;
    column-gap: var(--gutter-4);
    display: flex
;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--gutter-6);
}

/* grid img logos */


.grid-container {
    margin-top: 30px;
    display: flex;
    flex-direction: column; /* Móvil: vertical */
    background: black;
    padding: 10px;
    gap: 10px;
    align-items: center; /* Centrar imágenes */
    width: 100%;
    /*max-width: 900px;*/
}
.grid-container img {
    /* width: 100%; Ajusta el ancho dentro del div */
    max-width: 300px;
    border-radius: 8px;
}
@media (min-width: 768px) {
    .grid-container {
        flex-direction: row; /* Escritorio: horizontal */
        justify-content: center;
    }
}
.logo_mondadori {
    max-height: 30px;
    width: auto;
}
.logo_adkaora {
    max-height: 50px;
    width: auto;
}
.logo_google2 {
    max-height: 70px;
    width: auto;
}
.logo_hej {
    max-height: 45px;
    width: auto;
}

/* video section */

.section-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.section-container2 {
    display: flex;
    flex-direction: column;
    height: 136vh;
    overflow: hidden;
}
.video-section {
    background: url('assets/Rgazzo_tatuato_qudrato.avif') no-repeat center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    position: relative;
}

.video-section2 {
    background: url('assets/bg2.png') no-repeat center/cover;
}

.video-container {
    width: 40%;
    max-width: 400px;
    position: absolute;
    background-color: #111;
    border: 1px solid #555;
    border-radius: var(--gutter-3);
    box-shadow: 0 0 0 1px #999;
    overflow: hidden;
    padding: var(--gutter-1) var(--gutter-0);
    top: 95px;
}



.video-container video {
    width: 100%;
    border-radius: 10px;
}
/*
.text-section {
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    position: relative;
}*/
.text-slide, .text-slide2 {
    display: none;
}
.text-slide.active, .text-slide2.active {
    display: flex;
    flex-direction: column;
}
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    /*position: absolute;*/
    bottom: 20px;
}
.dot, .dot2 {
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.5; 
    background-color: var(--color-neutral-300);
}
.dot.active, .dot2.active {
    opacity: 1;
    background-color: var(--color-primary-700);
}
@media (min-width: 768px) {
    .section-container, .section-container2 {
        flex-direction: row;
    }
    .video-section, .text-section {
        width: 50%;
        height: 100vh;
    }
    .video-container {
        width: 80%;
        max-width: 500px;
        top: 15px;
    }
}

.our_formats_mobile {
    position: absolute;
    top: 18px;
    font-size: var(--font-size-h2);
    color: white;
}

.sub-title-t99q {
    color: var(--color-primary-600);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-h4);
    letter-spacing: var(--letter-spacing-h4);
    line-height: var(--line-height-h4);
    margin-bottom: var(--gutter-4);
    margin-top: 0;
}
/*
@media screen and (max-width: 1199px) {
    .description-t99q, .description-t99q li, .description-t99q p {
        font-size: var(--font-size-i);
        font-weight: 400;
        letter-spacing: var(--letter-spacing-i);
        line-height: var(--line-height-i);
    }
}
@media screen and (max-width: 1600px) {
    .description-t99q, .description-t99q li, .description-t99q p {
        font-size: var(--font-size-p);
        font-weight: var(--font-weight-p);
        letter-spacing: var(--letter-spacing-p);
        line-height: var(--line-height-p);
    }
}*/
.description-t99q, .description-t99q li, .description-t99q p {
    font-size: var(--font-size-i);
    font-weight: 400 /*var(--font-weight-p)*/;
    letter-spacing: var(--letter-spacing-i);
    line-height: var(--line-height-i);
}

@media screen and (max-width: 500px) {
    .text-section {
        padding: var(--gutter-9) var(--gutter-4) var(--gutter-1);
    }
}

@media screen and (max-width: 800px) {
    .text-section {
        padding: var(--gutter-8) var(--gutter-4) var(--gutter-1);
    }
}

/* hide our_formats_desktop on mobile */
@media screen and (max-width: 800px) {
    .our_formats_desktop {
        display: none;
    }
}
/* hide our_formats_mobile on desktop */
@media screen and (min-width: 801px) {
    .our_formats_mobile {
        display: none;
    }
}

.dots_height {
    height: 279px;
}

.dots_height2 {
    height: 511px;
}
.green {
    color: var(--color-primary-700);
}


.rich-56aq {
    display: block;
}
.font-h6, h6 {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-h6);
    letter-spacing: var(--letter-spacing-h6);
    line-height: var(--line-height-h6);
}
.chars-h6-80 {
    max-width: 980px;
}
.chars-h6-80, .max-width>* {
    margin-left: auto;
    margin-right: auto;
}
.chars-h6-80 p {
    font-size: var(--font-size-h6);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-h6);
    line-height: var(--line-height-h6);
}

.hero-d2bh {
    position: relative;
}

.text-section-more-height {
    height: 100vh;
}


/*    */

.footer-tgt8 {
    padding-top: 32px;
    position: relative;
}

.back-to-top-h2fr.visible {
    opacity: 1;
    visibility: visible;
}
.back-to-top-h2fr {
    position: absolute;
    right: var(--gutter-4);
    top: 18px;
    z-index: 1;
}

.btt-container-h2fr {
    align-items: center;
    background-color: var(--color-white);
    border: 2px solid var(--color-neutral-400);
    border-radius: var(--radius-5);
    display: flex
;
    height: 56px;
    justify-content: center;
    transition-duration: .2s;
    width: 56px;
}

.header-u2zf {
    align-items: center;
    display: flex
;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    text-align: center;
    width: 100%;
}

.top-u2zf {
    padding-bottom: 60px;
}

.tab-u2zf {
    background-color: var(--color-white);
    border-radius: var(--radius-5);
    bottom: 0;
    color: var(--color-neutral-900);
    cursor: pointer;
    height: 120px;
    position: absolute;
    transform: translateY(50%);
    width: 120px;
    z-index: 1;
}

.content-u2zf.full-width-u2zf {
    max-width: 100%;
}
.content-u2zf {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-layout-width);
}

.footer-mw-1-tgt8 {
    background-color: var(--color-primary-700);
    padding-top: var(--gutter-8);
}

@media screen and (max-width: 1280px) {
    .footer-container-tgt8 {
        grid-template-columns: auto;
    }
}

.footer-container-tgt8 {
    display: grid
;
    grid-template-columns: auto auto;
    justify-content: space-around;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-layout-width);
}

.left-tgt8, .right-tgt8 {
    padding-bottom: var(--gutter-6);
    padding-left: var(--gutter-4);
    padding-right: var(--gutter-4);
}

.left-tgt8 {
    width: -moz-fit-content;
    width: fit-content;
}

.generic-link-hb2c:is(:link,:visited) {
    display: inline-block;
    -webkit-text-decoration: none;
    text-decoration: none;
}

a:link, a:visited {
    border-radius: var(--radius-2);
    color: var(--color-primary-700);
    font-weight: 600;
    outline-offset: 5px;
    -webkit-text-decoration: none;
    text-decoration: none;
}
.logo-tgt8 {
    display: block;
    margin-bottom: var(--gutter-3);
}

.right-tgt8 {
    align-self: flex-end;
}
.left-tgt8, .right-tgt8 {
    padding-bottom: var(--gutter-6);
    padding-left: var(--gutter-4);
    padding-right: var(--gutter-4);
}

@media screen and (max-width: 399px) {
    .sitemap-gck6 {
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 799px) {
    .sitemap-gck6 {
        grid-template-columns: repeat(2, 1fr);
    }
}
.sitemap-gck6 {
    column-gap: var(--gutter-2);
    display: grid
;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
}

@media screen and (max-width: 399px) {
    .sitemap-gck6>li {
        margin-bottom: var(--gutter-4);
    }
}
.sitemap-gck6>li {
    margin-bottom: var(--gutter-2);
    margin-right: var(--gutter-2);
}

.footer-mw-2-tgt8 {
    background-color: var(--color-primary-900);
}

.legal-info-tgt8 {
    color: var(--color-white);
    font-size: var(--font-size-s);
    padding: var(--gutter-3) var(--gutter-auto);
    text-align: center;
}

.generic-link-hb2c.text-hb2c:is(:link,:visited) {
    margin-bottom: 2px;
    position: relative;
}
@media screen and (max-width: 399px) {
    .list-title-gck6:link, .list-title-gck6:visited {
        font-size: var(--font-size-h4);
        letter-spacing: var(--letter-spacing-h4);
        line-height: 1.5;
    }
}
.list-title-gck6:link, .list-title-gck6:visited {
    color: var(--color-white);
    display: inline-block;
    font-size: var(--font-size-p);
    font-weight: 800;
    letter-spacing: var(--letter-spacing-p);
    line-height: 1.5;
    white-space: nowrap;
}
.generic-link-hb2c:is(:link,:visited) {
    display: inline-block;
    -webkit-text-decoration: none;
    text-decoration: none;
}

.sub-list-gck6 {
    list-style: none;
    margin-bottom: var(--gutter-0);
}

article#legal {
    font-size: var(--font-size-s);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-s);
    line-height: var(--line-height-s);
    margin: 0;
    padding: 20px;
}

/* grid de logos */

.logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas por defecto (móvil) */
    gap: 16px;
    padding: 20px;
    justify-items: center;
}

.logo-grid img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    background-color: #fff;
    padding: 10px;
    /*border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/
}

/* Estilos para escritorio (5 columnas) */
@media (min-width: 768px) {
    .logo-grid {
        grid-template-columns: repeat(10, 1fr);
    }
}

/* logo google */
.gatsby-image-wrapper-constrained {
    display: inline-block;
    vertical-align: top;
}

.gatsby-image-wrapper {
    position: relative;
    overflow: hidden;
}
.logo-google {
    margin: 10px 300px 25px;
}
@media screen and (max-width: 500px) {
    .logo-google {
        margin: 10px 60px 25px;
    }
    .hide-on-mobile {
        display: none;
    }
    .scroll-down-big-margin {
        margin: 80px auto ;
    }
}

.contact_button {
    display: block;
    margin: 30px auto;
    width: 275px;
    background-color: var(--color-primary-700);
    border-radius: var(--radius-2);
    color: var(--color-white);
    cursor: pointer;
    font-size: var(--font-size-h6);
    font-weight: 800;
    letter-spacing: var(--letter-spacing-h6);
    line-height: var(--line-height-h6);
    padding: var(--gutter-2) var(--gutter-4);
    text-align: center;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.645,.045,.355,1);
}

.slider-dots2 {
    margin-top: 50px;
    margin-bottom: 20px;
}


@media screen and (min-width: 400px) {

    /* DESKTOP */
    /*.sitemap-gck6 {
        grid-template-columns: 1fr;
    }*/

    .hide-on-desktop {
        display: none;
    }

    .description-t99q > p {
        font-size: var(--font-size-h6) !important;
        padding-right: 280px;
    }  

    #sectionFormats > div.text-section, #sectionCreativeStudio > div.text-section {
        margin: 30px;
    }

    .h3-bigger-margin-top {
        margin-top: 100px;
    }    

    #sectionTopPublishers {
        padding-bottom: 307px;
    }

    .logo-grid {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 300px;
        margin-top: 71px;
        grid-template-columns: repeat(9, 1fr);
    }

    .scroll-down-big-margin {
        margin: 80px auto 48px;
    }

    h2.our_formats_desktop {
        font-weight: bold;
        font-size: var(--font-size-h5);
    }

    .hide-on-desktop {
        display: none;
    }

    .section-container2
    {
        height: 100vh;
    }

    .contact_button {
        width: 450px;
    }

    .section-contact {
        padding: 50px;
    }

    .logo_google2 {
        max-height: 100px;
    }
}

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