@font-face {
    font-family: 'franklingothicurw-dem';
    font-display: swap;
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/franklingothicurw-dem.ttf');
}

@font-face {
    font-family: 'FRANKGO';
    font-display: swap;
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/FRANKGO.ttf');
}

@font-face {
    font-family: 'Franklin Gothic Medium';
    font-display: swap;
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/Franklin Gothic Medium.ttf');
}

@font-face {
    font-family: 'FranklinGothic';
    font-display: swap;
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/FranklinGothic.ttf');
}

@font-face {
    font-family: 'FranklinGothicITALIC';
    font-display: swap;
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/FranklinGothicITALIC.ttf');
}

@font-face {
    font-family: 'FranklinGothic-Light';
    font-display: swap;
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/FranklinGothic-Light.ttf');
    font-display: swap;
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'FranklinGothicLight';
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/Franklin Gothic Demi Regular.ttf');
}

@font-face {
    font-family: 'franklingothicurw-dem';
    font-display: swap;
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/franklingothicurw-dem.ttf');
}

@font-face {
    font-family: 'Franklin-Gothic-Condensed';
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/Franklin Gothic Condensed.ttf');

}

@font-face {
    font-family: 'FranklinGothicCondensed';
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/FranklinGothicCondensed.ttf');
}

@font-face {
    font-family: 'franklingothicurw-boo';
    font-style: normal;
    font-weight: normal;
    src: local('Franklin Gothic Condensed'), url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/franklingothicurw-boo.ttf');
    ;
}

@font-face {
    font-family: 'franklingothicurwcon-boo';
    font-style: normal;
    font-weight: normal;
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/franklingothicurwcon-boo.ttf');
}

@font-face {
    font-family: 'franklingothicurwcon-dem';
    font-style: normal;
    font-weight: normal;
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/franklingothicurwcon-dem.ttf');
}

@font-face {
    font-family: 'franklingothicurw-med';
    font-style: normal;
    font-weight: normal;
    src: url('/content/dam/multibrand/ar/es/contenido/test-puma/fonts/franklingothicurw-med.ttf');
}


:root {
    --color-primario: #0F5756;
    --color-secundario: #3E3E3E;
    --color-efecto: #C5DEDE;
}





.main-container {
    font-family: 'franklingothicurw-boo' !important;
    overflow: hidden;
}

.main-container,
h1,
h2,
h3,
h4,
h5,
h6,
p,
b,
strong {
    font-family: 'franklingothicurw-boo' !important;
    text-align: start;
}

.uppercase {
    text-transform: uppercase;
}

.texto-chico {
    font-size: 14px
}

.texto-muy-chico {
    font-size: 12px
}

.centrado,
.centrado p {
    text-align: center;
}

button {
    background-color: var(--color-primario);
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    border: none;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase
}

button:hover {
    background-color: var(--color-efecto);
    color: var(--color-secundario);
    box-shadow: 1px 1px 5px var(--color-secundario);
    transition: background-color, color, box-shadow;

}

button:hover {
    transition: .3s;
}

p {
    font-size: 17px;
}

h1 {
    font-weight: 600;
    font-size: 50px;
}

h3 {
    font-size: 20px;
}

h5 {
    font-size: 15px;
}

h6 {
    font-size: 13px;
}

.seccion-referencias h5 {
    text-align: start !important;
}

#columnas-puma-score {

    z-index: 10;
}

.header-columns {
    margin-top: 20px
}

.columna-1 h6 {
    color: var(--color-primario);
}

.columna-1 h3 {
    text-align: start;
    z-index: 2;
}


.columna-2 {
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: -1;
}

.header-img {
    width: 80%;
}

.seccion-trazo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 160px 0;
    z-index: -1;
}

.seccion-trazo img {
    position: absolute;
    width: 200%;
    margin-bottom: 140px;
    z-index: -1;
}


.seccion-trazo h3 {
    max-width: 800px;
}


.seccion-disclaimer .item {
    margin-bottom: 0;
}

.seccion-disclaimer h5 {
    color: var(--color-primario);
    text-align: center;
    margin: 50px 0 30px 0
}

.seccion-referencias {
    margin-top: 100px;
}

.seccion-referencias h6 {
    margin: 20px 0 40px 0;
}

#mostrarReferencias{
    display:flex;
  align-items:center;
  gap:5px;
  
  }
#mostrarReferencias {
  margin-left:-4px;
  }

.footer {
    background-color: black;
}




@media(max-width: 1200px) {
    .header-img {
        width: 50%;
        margin-top: 70px;
    }
}

@media(max-width: 1000px) {
    .seccion-trazo img {
        width: 300%;
    }
}


@media (max-width: 992px) {

    .seccion-trazo img {
        width: 500%;
    }

    .seccion-trazo {
        margin: 100px 0;
    }
}


@media(max-width: 700px) {
    .seccion-trazo img {
        width: 400%;
    }
}

@media(max-width: 500px) {
    .header-img {
        width: 80%;
        margin-top: 70px;
    }

    .seccion-trazo img {
        width: 600%
    }
}

@media (max-width: 590px) {

    .seccion-trazo img {

        width: 700%;

    }

    .seccion-trazo {
        margin: 50px 0;
    }

}

@media (max-width: 450px) {

    .seccion-trazo img {

        width: 900%;

    }
}

@media(max-width: 380px) {
    .seccion-trazo img {
        display: none;
    }

}




/*Puma Test Score*/

.puma-score-cabecera {
    margin-top: -30px;
}

.puma-score-cabecera h4 {
    margin-top: 60px
}

.htmlAsset {
    margin-bottom: 200px;
}

.puma-test-cabecera {
    position: relative;
    padding: 20px 0 100px 0;
}

.puma-test-cabecera img {
    position: absolute;
    transform: translate(-30%, -57%);

}

.puma-test-cabecera p {
    text-align: center;
    max-width: 900px;
    margin: auto;
}

.puma-test-background {
    height: 350px;
    background-position: center center;
}

.htmlAsset {
    margin-top: -100px;
}

.puma-test-cabecera p {
    margin-top: -20px
}


.puma-test-background {
    padding: 1px;
}



@media(max-width: 450px) {
    .puma-test-background {
        background-image: none !important;
        background-color: var(--color-efecto);
        height: auto;
        margin-bottom: 150px;
    }

    .puma-test-background p {
        margin: 0
    }

    .puma-test-cabecera {
        padding: 20px;
    }

}
@media(max-width: 1200px){
.d-none-mobile{
    display:none !important;
}
}