.section-space{
    padding: 48px 0;
}

/*Etiquetas*/
body,
html{
    background-color: white;
}

/*Clases generales*/
.color-text-main{
    color:#00AF9C;
}
.color-text-secondary{
    color:#2E4097
}
.color-text-rosado{
    color:#E62252;
}
.color-text-gris{
    color: #232323;
}
.color-text-celeste{
    color:#28B1FA;
}
.color-text-blanco{
    color:#ffffff;
}
.color-text-amarillo{
    color:#F9B114;
}
.name-section{
    margin-bottom: 32px;
    display: inline-block;
}
.ft-zs-24{
    font-size: 24px!important;
}
.ft-zs-32{
    font-size: 32px!important;
}
.ft-zs-48{
    font-size: 48px!important;
}
.ft-zs-64{
    font-size: 64px!important;
}
.ft-zs-72{
    font-size: 72px!important;
}
.ft-zs-96{
    font-size: 96px!important;
}
/*Fonts*/

.chelsea{
  font-family: "Chelsea Market", system-ui;
  font-weight: 400;
  font-style: normal;
}
.antonio-font {
  font-family: "Antonio", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.exo-2 {
  font-family: "Exo 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/*Cintillo*/

.section-cintillo{
    background-color: #ffffff;
}
.box-logos{
    background-color: #fff;
    border-radius: 0 0 16px 16px;
    padding: 1.5em 0;
    margin-bottom: 1.5em;
}

/*Menu*/
.section-menu{
    background-color: #4B889E;
}
.section-menu .navbar{
    padding: 1.3em;
}

/* Navbar inicial transparente */
#mainNav {
  background-color: white;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#mainNav a{
    text-transform: uppercase;
}
.nav-link{
    color:#2E4097;
}
.nav-link.active,
.nav-link:hover{
    color: #374294!important;
}
.navbar-toggler{
    background-color:#76A9A3;
}
.navbar-nav{
    width: 100%;
    text-align: right;
    justify-content: flex-end;
}
/* Navbar con color cuando se hace scroll */
#mainNav.scrolled {
  background-color: white; /* o el color que quieras */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/*Chips*/
.section-informacion .box-info .box-title .name-section,
.section-afiches .box-info .box-title .name-section,
.section-experiencias .box-info .box-title .name-section,
.section-servicios .box-info .box-title .name-section,
.section-galeria .box-info .box-title .name-section{
    background-repeat: no-repeat;
    background-position: center center;
    padding: 4px 15px;
    text-transform: uppercase;
}

.section-informacion .box-info .box-title .name-section{
    background-image: url(../img/bg-title-campana.png);
}
.section-afiches .box-info .box-title .name-section{
    background-image: url(../img/bg-title-kit.png);
}
.section-experiencias .box-info .box-title .name-section{
    background-image: url(../img/bg-title-experiencias.png);
}
.section-servicios .box-info .box-title .name-section{
    background-image: url(../img/bg-title-historia.png);
}
.section-galeria .box-info .box-title .name-section{
    background-image: url(../img/bg-title-galeria.png);
}

/*Seccion información*/
.section-informacion{
    background-color: white;
}
.section-informacion{
    /*margin-bottom: 120px;*/
}

.section-informacion img{
    border-radius: 1em 1em 0 0;
}
.box-info{}
.box-info .box-title{}
.box-info .box-title .name-section{
    font-size: 24px;
    color: #ffffff;
}
.box-info .box-title .title-section{
    font-weight: bold;
    margin-bottom: 24px;
}
.box-info .box-parrafo-section{
    font-size: 22px;
}

.content-section-informacion {
    /*margin-top: -180px;*/
}
.content-informacion{
    padding: 2em;
    border-radius: 1em;
    margin-bottom: 2em;
}
.content-section-informacion .content-informacion{
    background-color: #28B1FA;
}
.content-section-informacion p{
    font-size: 20px;
}
.content-section-informacion h5{
    color: #5EDDCE;
    margin-bottom: 32px;
    font-weight: bold;
}
.title-machista{
    color: #ffffff;
    text-transform: uppercase;
    /*margin-bottom: -0.14em;*/
}
.title-machista span{
    font-weight: lighter;
}

.section-practicas-machistas{
    background-color: #016258;
    /*background: linear-gradient(0deg, rgba(75, 136, 158, 1) 1%, rgba(30, 54, 63, 1) 100%);*/
    /*background-position: 0px 100px;*/
    
}

/*Estadísticas*/

.section-estadisticas{
    background-color: #2E4097;
    background-image: url(../img/bg-estadisticas.png);
    background-repeat: repeat-x;
    background-position: center top;
    /*background-size: contain;*/
    /*margin-top: -140px;*/
    padding-top:140px!important;
}
.section-estadisticas .content-informacion{
    background-color: #550897;
    color: white;
}

.box-estadisticas{
    text-align: center;
    color: white;
    padding: 1em;
    transition: all 0.3s ease-in-out;
    cursor:pointer;
}
.box-estadisticas:hover{
    scale:1.3;
}

.box-estadisticas .number-estadisticas .number{
    font-size: 60px;
    font-weight: bold;   
}
.box-estadisticas .number-estadisticas .percent{
    font-size: 32px;
}
.box-estadisticas .parrafo-estadisticas{
    font-size: 22px;
}
.box-estadisticas .data-estadisticas{
    font-size: 14px;
}

/*Machometro*/

.section-machometro{
    background-color: #2E4097;
    background-image: url(../img/bg-machometro.png);
    background-repeat: repeat-x;
    background-size: cover;
    background-position: center center;
    /*padding-bottom: 200px;*/
}
.section-machometro .box-info{}
.section-machometro .box-info .box-title{}
.section-machometro .box-info .box-title .title-section{
    font-size: 64px;
    font-weight: bold;
}
.section-machometro .box-info .box-title .box-parrafo-section{}

.section-enlaces-machometro{
    padding: 0 2em;
    position: relative;
}
.section-enlaces-machometro a{
    display: block;
    padding: 1em;
    color: white;
    text-decoration: none;
    font-weight: bold;
    width: 90%;
    border-radius: 16px;
    /*position: absolute;*/
    line-height: 36px;
    background-color: #DA3154;
    bottom: -10px;
    left: 5%;
    background-image: url(../img/arrow-right.png); 
    background-repeat: no-repeat;
    background-position: 60% 80%;
    transition: all 0.3s ease-in-out;
}
.section-enlaces-machometro a:hover{
    background-image: url(../img/arrow-right.png); 
    background-repeat: no-repeat;
    background-position: 95% 80%;
}
.section-enlaces-machometro

.section-enlaces-machometro a span{
    font-size: 20px;
    display: block;
    color: rgba(0, 0, 0, 0.2);
}


/*Seccion afiches*/
.section-afiches{
    background-color: #00AF9C;
    background-image: url(../img/bg-kit.png);
    background-repeat: repeat-x;
    background-position: center top;
    padding-top: 12em;
    /*margin-top: -120px;
    padding-top:250px;*/
}
.section-afiches h3{
    /*font-size: 72px!important;*/
}
.section-contenido-afiches{
    background-color: #016257;
    padding: 2em;
    margin: 2em 0;
    border-radius: 1em;
}
.section-contenido-afiches img{
    border-radius: 1em;
}
.btn-descarga{
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-descarga:hover{
    font-weight: bold;
}

/*Section experiencias*/
.section-experiencias{
   background-color: #28B1FA;
   background-image: url(../img/bg-experiencias.png);
   background-size: contain;
   background-repeat: repeat;
}
.section-experiencias .testimonios{
    border-radius: 1em;
}
.section-experiencias .content-informacion{
    background-color: #189DE4;
}


/*Section servicios*/
.section-servicios{
    background-color: #4B889E;
}
.section-servicios .content-informacion{
    background-color: #2B738D;
}

.box-servicios{
    background-color: #2C6A80;
    padding: 1.5em 1em 0em;
    border-radius: 1em;
}
.box-servicio{
    position: relative;
}
.box-servicio img{
    border-radius: 0.5em;
}
.box-servicio-info{
    position: absolute;
    bottom: 0em;
    left: 0.5em;
    font-size: 14px;
}
.box-servicio-info p{
    font-size: 14px;
}
.btn-sumate{
    font-size: 20px;
    font-weight: bold;
    background-image: url(../img/icon-arrow-btn.png);
    background-repeat: no-repeat;
    background-position: 95% center;
    background-color: #6401BA;
    padding:0.5em 3em 0.5em 1em;
}
.btn-sumarte:hover{
    background-color: #470482;
    color: white;
}

.box-btn-sumate{
    text-align: right;
}
/*Section galería*/
.section-galeria{
    background-color: #00AF9C;
}

.section-fotos-galeria{
    columns: 3;
}

.section-galeria img{
    filter: grayscale(100%);
    transition: 0.8s ease all;
}
.section-galeria img:hover{
    filter: grayscale(0%);
}

/*Footer*/
footer{
    background: #BE1E40;
background: linear-gradient(0deg, rgba(190, 30, 64, 1) 1%, rgba(218, 49, 84, 1) 100%);
}
footer h3{
    font-size: 48px;
}
footer .section-data-footer{
    color: white;
    font-size: 16px;
}
footer .section-data-footer p{
    margin-bottom: 0;
}
footer .section-data-footer a{
    color: white;
    font-size: 32px;
    text-decoration: underline;
}

footer .menu-footer img{
    width: 48px;
    height: 48px;
    margin: 0 16px 0 0;
}

.navbar-toggler{
    padding: 0px 4px!important;
}

 .menu-footer a{
    text-decoration: none;
 }
/*Scroll top*/
.scroll-top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.scroll-top-btn:active { transform: translateY(1px) scale(.99); }
.scroll-top-btn:focus { outline: 3px solid rgba(21,156,228,0.25); }

/* Icono simple (flecha) */
.scroll-top-btn svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
  fill: currentColor;
}

/* Ajustes responsivos (si quieres moverlo en móviles) */
@media (max-width: 420px) {
  .scroll-top-btn { right: 12px; bottom: 12px; width: 44px; height: 44px; }
}


/*Listones de títulos*/



/*Media queries*/
/*// Small devices (landscape phones, 575px and down)*/
@media (max-width: 575px){
    #mainNav{
        /*background-color: orangered;*/
    }
    .nav-item{
        text-align: center;
    }
    .box-logos img{
        max-width: 75%;
    }
    .navbar-brand img{
        max-width: 65%;
    }
    .box-info .box-title .title-section{
        font-size: 32px!important;
    }
    .box-info .box-parrafo-section{
        font-size: 18px!important;
    }
    .section-space{
        padding: 32px;
    }
    .section-estadisticas{
        padding-top: 150px;
    }
    .box-estadisticas .number-estadisticas{
        font-size: 72px;
    }
    .section-estadisticas .box-info .box-title .title-section{
        font-size: 48px!important;
        text-align: center!important;
    }
    .section-machometro .box-info .box-title .title-section{
        font-size: 40px;
    }
    .section-enlaces-machometro a{
        font-size: 24px!important;
        text-align: center;
        background-image: none;
    }
    .title-machista{
        font-size: 32px!important;
    }
    .content-section-informacion h5{
        font-size: 24px!important;
    }
    .section-afiches{
        padding-top: 12em;
    }
    .section-afiches h3{
        font-size: 24px!important;
    }
    .box-btn-sumate{
        text-align: center;
    }
    .section-enlaces-machometro a{
        width: 100%;
    }
    footer{

    }
}
/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    #mainNav{
        /*background-color: red;*/
    }
    .nav-item{
        text-align: center;
    }
    .box-logos img{
        max-width: 75%;
    }
    .navbar-brand img{
        max-width: 65%;
    }
    .box-info .box-title .title-section{
        font-size: 32px!important;
    }
    .box-info .box-parrafo-section{
        font-size: 18px!important;
    }
    .section-space{
        padding: 32px;
    }
    .section-estadisticas{
        padding-top: 150px;
    }
    .box-estadisticas .number-estadisticas{
        font-size: 72px;
    }
    .section-estadisticas .box-info .box-title .title-section{
        font-size: 48px!important;
        text-align: center!important;
    }
    .section-machometro .box-info .box-title .title-section{
        font-size: 40px;
    }
    .section-enlaces-machometro a{
        font-size: 24px!important;
        text-align: center;
        background-image: none;
    }
    .title-machista{
        font-size: 32px!important;
    }
    .content-section-informacion h5{
        font-size: 24px!important;
    }
    .section-afiches{
        padding-top: 12em;
    }
    .section-afiches h3{
        font-size: 24px!important;
    }
    .box-btn-sumate{
        text-align: center;
    }
    .section-enlaces-machometro a{
        width: 100%;
    }
    footer{

    }
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    #mainNav{
        /*background-color: blue;*/
    }
    .section-estadisticas .box-info .box-title .title-section{
        font-size: 64px!important;
    }
    .box-servicio-info p{
        font-size: 14px;
        line-height: 12px;
    }
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    #mainNav{
        /*background-color: green;*/
    }
}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    #mainNav{
        /*background-color: purple;*/
    }
}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
    #mainNav{
        /*background-color: skyblue;*/
    }
}