@import url('https://use.typekit.net/tnu7qfj.css');



/* Normalizacion de estilos */

/* Reset general para márgenes, paddings y box-sizing */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Definir base de REMs */
html {
  font-size: 62.5%; /* 1rem = 10px (porque 62.5% de 16px ≈ 10px) */
}

/* WIAS Color Palette */
:root {
    /* Primary Colors */
    --p100: #81B5FE;
    --p200: #036CFC;
    --p300: #004aad;
    --p400: #004CB2;
    --p500: #011E46;

    /* Secondary Colors */
    --s100: #A4DAF4;
    --s200: #55BBEB;
    --s300: #1893CD;
    --s400: ##1893CD;
    
    /* Accent Colors */
    --f10: #D0ECE4;
    --f20: #29AF87;
    --f30: #CDEEFE;
    --f40: #0075BF;
    --f50: #FEE8E8;
    --f60: #ff631f;
    
    /* Neutral Colors */
    --n100:#ffffff;
    --n200:#F4F4F4;
    --n300:#D5D5D5;
    --n400:#999999;
    --n500:#666666;
    --n600:#333333;
    --n700:#000000;

}

body {
  font-family: "tt-commons-pro", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.6rem;  /* = 16px */
  font-weight: 200;
  line-height: 1.5;
  font-style: normal;
  color: var(--n500);
  background-color: #fff;
}




/* Complementos */

.container-fluid{padding: 0!important;}

.img-100 {
    width: 100%;
    height: auto;
    /* display: block; */
}

/* Contenido */

.carousel-caption {
  position: absolute;
  top: 50%;               
  left: 5%;              
  transform: translateY(-50%);  
  text-align: left;       
  width: 50%;
  z-index: 10;             
}

.carousel-caption h1,
.carousel-caption p {
  text-align: left;
}

.carousel-caption .btn {
  margin-top: 1rem;
}

.carousel-caption h1{
    font-family: "tt-commons-pro", sans-serif;
    font-weight: 600;
    font-size: 4.3rem;
}

.carousel-item::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--p500);
    opacity: .2;
}

.contenido-header-principal {
    background-color: var(--p300);
    color: var(--white);
}

.contenido-header-principal header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    align-items: center;
    padding: 1.5rem 0;
}

.contenido-header-principal nav ul{
    display: flex;
    justify-content: center;
    padding: 0;
    list-style: none;
    margin: 0;
}

.contenido-header-principal nav ul li a{
    font-family: "tt-commons-pro", sans-serif;
    padding: 1rem 2rem;
    text-decoration: none;
    color: var(--n100);
    font-size: 1.6rem;
    font-weight: 300;
}

.logo-header img{
    height: 6rem;
}
.contenido-somos-wias{
    max-width: 192rem!important;
    background-color: var(--n200);
    font-size: 1.6rem;
    padding: 0!important;
    font-weight: 200;
}
.contenido-somos-wias .row{align-items: center;}
.contenido-que-buscamos{font-size: 1.7rem;}
.somos-wias{padding: 6rem; max-width: 68rem; font-size: 1.7rem;}
.somos-wias h2{
    color: var(--f60);
    font-size: 2.8rem;
    font-family: "tt-commons-pro", sans-serif;
    font-weight: 600;
    padding-bottom: 3rem;

}
.imagen-somos-wias{
    /* background-image: url('../img/common/us.jpg'); */
    height: 65rem;
    background-position: center;
    background-size: cover;
}

.que-buscamos{
    max-width: 192rem!important;
    background-color: var(--f60);
    color: var(--p500);
    font-size: 1.6rem;
    padding: 6rem!important;
    font-weight: 200;
}

.que-buscamos .container .row{align-items: center;}

.que-buscamos h2{
    font-family: "tt-commons-pro", sans-serif;
    font-size: 2.8rem;
    font-weight: 600;
    padding-bottom: 3rem;
    color: var(--p500);
}



/* Blog Home */

.contenido-blog-home{padding: 6rem 0;}

.blog-card{
    position: relative;
    margin-left: 1.5rem;
}


.blog-card:first-child{
    margin-left: 0;
}

.extra-card{
    position: absolute;
    z-index: 10;
    bottom: 0;
    padding: 1.5rem;
}

.extra-card h4{
    color: var(--n100);
    font-size: 1.6rem;
    font-weight: 700;
}

.extra-card span{
    color: var(--s100);
    font-size: 1.2rem;
}

.blog-gradient{
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 57%, rgba(0, 0, 0, 0.74) 100%);
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
}

.tags-blog-home{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.tags-blog-home .tags{
    display: flex;
}

.tags-blog-home .tags .tag{
    padding: 1rem 2rem;
    background-color: var(--p100);
    color: var(--n100);
    font-size: 1.2rem;
    margin-right: 1.5rem;
    border-radius: 3rem;
    font-weight: 300;
}
.tags-blog-home .tag-active{
    background-color: var(--p300)!important;
}

.contenido-blog-home h2{
    color: var(--p300);
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 3rem;
}

.boton-vermas-blog{
    border: 2px solid var(--p300);
    padding: 1rem 3rem;
    color: var(--p300)!important;
    font-size: 1.6rem;
}

/* Eventos Home */

.contenido-eventos-home{
    background-color: var(--p300);
    padding: 9em 0!important;
}

.contenido-eventos-home h2{
    font-family: "tt-commons-pro", sans-serif;
    color: var(--n100);
    font-size: 2.8rem;
    font-weight: 600;
    margin-bottom: 3rem;
}

.contenido-eventos-home .boton-vermas-blog{
    border: 2px solid var(--n100);
    padding: 1.5rem 3rem;
    color: var(--n100)!important;
    font-size: 1.6rem;
}

.contenido-eventos-home .tags-blog-home .tags .tag{
    font-family: "tt-commons-pro", sans-serif;
    padding: 1rem 2rem;
    background-color: var(--p100);
    color: var(--p300);
    font-size: 1.2rem;
    margin-right: 1.5rem;
    border-radius: 3rem;
    font-weight: 300;
}

.contenido-eventos-home .tag-active{
    background-color: var(--n100)!important;
}

.contenido-eventos-home .extra-card{
    position: relative;
    background-color: var(--n100);
}
.contenido-eventos-home .extra-card h4{
    font-family: "tt-commons-pro", sans-serif;
    color: var(--p500);
    font-weight: 600;
}

.contenido-eventos-home .extra-card span{
    font-family: "tt-commons-pro", sans-serif;
    display: block;
    color: var(--p200);
    font-weight: 300;
}

.contenido-eventos-home .imagen-fondo{
    width: 100%;
    height: 26rem;
    background-size: cover;
    background-position: center center;
}

.blog-card .imagen-fondo{
    width: 100%;
    height: 24rem;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: auto;
}

.lista-blog a{
    margin-right: 1.5rem;
    text-decoration: none;
}
.lista-blog a:hover{
    text-decoration: none;
}

.lista-blog a:last-child{
    margin-right: 0;
}

/* .contenido-eventos-home .imagen-fondo img{
    min-height: 26rem;
} */

/* footer */

.contenido-footer{
    background-color: var(--n700);
    color: var(--n100);
    padding: 6rem 3rem!important;
    font-size: 1.4rem;
    font-weight: 200;
}



.footer-elementos .redes .fa-brands{
    color: var(--n100);
    font-size: 1.8rem;
}

.footer-elementos a{color: var(--f60); text-decoration: none;}

.logo-footer img{height: 5rem;}

.boton-primario{
    font-family: "tt-commons-pro", sans-serif;
    font-weight: 300;
    font-style: normal;
    display: table-caption;
    background-color: var(--p200);
    color: var(--n100);
    padding: 1.5rem 6rem;
    font-size: 1.6rem;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 1.5rem;
    
}

.contenido-mision-vision{
    background-color: var(--f60);
    color: var(--n100);
    font-size: 1.6rem;
    font-weight: 200;
    text-align: center;
}

.no-padding{padding: 0!important;}

.contenido-mision-vision h2{font-weight: 600; font-size: 2.2rem; margin-bottom: 1.5rem; font-family: "tt-commons-pro", sans-serif; color: var(--p300);}
.icono-valores{display: block; width: 12rem; margin: 0 auto; margin-bottom: 1.5rem;}
.item-valores{padding: 0 6rem!important; border-right: 1px solid var(--n100); padding: 6rem!important;}
.item-valores:last-child{border-right: none;}

.lista-comite .comite-card{position: relative;}
/* .lista-comite .comite-card:last-child{padding-right: 0;} */
.lista-comite .comite-card .imagen-fondo{max-height: fit-content;}
.lista-comite .extra-card{position: absolute; background-color: none; width: 100%;}
.lista-comite .extra-card .datos-comite{position: relative; background-color: none;}
.comite-card .blog-gradient{position: absolute; bottom: 0;left: 0; width: 100%;}
.contenido-comite{
    background-color: var(--p300);
    padding: 9em 0!important;
}

.contenido-comite h2{
    color: var(--n100);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 3rem;
}

.tags-blog-comite{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.tags-blog-comite .tags{
    display: flex;
}

.tags-blog-comite .tags .tag{
    padding: 1rem 2rem;
    background-color: var(--p100);
    color: var(--p200);
    font-size: 1.3rem;
    margin-right: 1.5rem;
    border-radius: 3rem;
    cursor: pointer;
}
.tag-active{
    background-color: var(--n100)!important;
    color: var(--p200);
}

.contenido-asociados{background-color: var(--n200); color: var(--n600); font-weight: 200; padding: 9em 0 !important;}
.contenido-asociados h2{
    color: var(--p300);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 3rem;
}
.contenido-asociados p{font-size: 1.6rem; margin-bottom: 3rem;}

.tags-empresas-asociadas{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.tags-empresas-asociadas .tags{
    display: flex;
}

.tags-empresas-asociadas .tags .tag{
    padding: 1rem 2rem;
    background-color: var(--p100);
    color: var(--p200);
    font-size: 1.2rem;
    margin-right: 1.5rem;
    border-radius: 3rem;
}
.tag-active{
    background-color: var(--n100)!important;
    color: var(--p200);
}

.lista-empresas{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.lista-empresas .item{
    background-color: var(--n100);
    margin: 1rem;
    -webkit-box-shadow: -1px -1px 22px 0px rgba(0,0,0,0.15); 
    box-shadow: -1px -1px 22px 0px rgba(0,0,0,0.15);
    height: 12rem;
}
.lista-empresas .item{
    display: flex;
    justify-content: center;
    align-items: center;
}

.lista-empresas .item a img{width: 18rem;}

.contenido-impacto{
    background-color: var(--f60);
    color: var(--p300);
    font-size: 1.6rem;
    font-weight: 200;
    text-align: center;
    padding: 4em 0 !important;
}

.contenido-impacto h2{
    font-family: "tt-commons-pro", sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 6rem;
}

.lista-hitos{
    display: flex;
    justify-content: center;
    align-items: center;
}

.lista-hitos .item-hito{
    padding: 0 3rem;
}

.lista-hitos .item-hito h3{
    font-size: 5rem;
    font-weight: 700;
}

.lista-hitos .item-hito span{
    font-weight: 600;
    color: var(--n100);
}

.contenido-objetivo{
    padding: 9rem 0!important;
}

.contenido-objetivo .row{align-items: center;}

.contenido-objetivo .principal-objetivo{
    font-size: 1.7rem;
    color: var(--n500);
    font-weight: 200;
    padding: 3rem 6rem;
}

.contenido-objetivo .principal-objetivo h2{
    font-family: "tt-commons-pro", sans-serif;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--f60);
}

.contenido-objetivo .principal-objetivo strong{
    font-weight: 700;
}

.contenido-sobre-organizacion{
    padding: 6rem 0!important;

}

.contenido-sobre-organizacion h1{
    color: var(--p300);
    font-family: "tt-commons-pro", sans-serif;
    font-weight: 600;
    font-size: 2.8rem;
    margin-bottom: 6rem;
    text-align: center;
}

.sobre-organizacion{
    font-size: 1.7rem;
    color: var(--n700);
    font-weight: 200;
    padding: 3rem 6rem;
}

.sobre-organizacion h2{
    font-family: "tt-commons-pro", sans-serif;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--f60);
}

.select-tags-blog-home{
    font-size: 1.6rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--n400);
    border-radius: 5px;
    color: var(--n600);
    font-weight: 200;
    width: 95%!important;
    margin: 3rem auto;
}

.imagen-miembro-comite{
    height: 30rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.titular-seccion{
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: var(--p300);
}

.fondo-n200{
    background-color: var(--n200);
}

.contenido-blog-detalle-container{
    background-color: var(--n100);
    padding: 0!important;
}

.swiper-slide {
    width: auto; /* Deja que Swiper calcule con breakpoints */
    display: flex;
    justify-content: center;
}
.comite-card-item {
    width: 100%;
    max-width: 300px; /* o lo que tu diseño necesite */
}

.swiper-slide {
    transition: opacity 0.3s ease;
}
.swiper-slide[style*="display: none"] {
    opacity: 0;
    pointer-events: none;
}

.titular-interior{
    padding: 6rem 3rem 0 0;
}
.titular-interior h2{
    color: var(--p300);
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 3rem;
}

/* Blog */

.contenido-blog-detalle{
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--n500);
}

.contenido-blog-detalle h1{
    display: block;
    font-size: 3.2rem;
    font-family: "tt-commons-pro", sans-serif;
    font-weight: 600;
    color: var(--n700);
}

.contenido-blog-detalle h2{
    font-weight: 700;
    margin-bottom: 3rem;
    margin-top: 3rem;
    color: var(--n700);
}

.titular-blog{
    padding: 3rem 3rem 0 3rem;
}

.titular-blog h1{
    font-size: 3.2rem;
    font-family: "tt-commons-pro", sans-serif;
    font-weight: 600;
    color: var(--n700);
    border-bottom: 1px solid var(--n300);
    padding-bottom: 3rem;
}

.extras-titular-blog{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 3rem;
}

.contenido-blog-detalle{
    padding: 3rem;
}

.fecha-publicacion{
    color: var(--n600);
    font-size: 1.2rem;
    font-weight: 300;
}

.contenido-detalle-blog{
    padding: 3rem 0;
}

.lista-blog-sidebar{display: block;}

.contenido-sidebar-publicacion{}
.contenido-sidebar-publicacion h2{
    font-size: 2rem;
    color: var(--p300);
    font-weight: 700;
    background-color: var(--n100);
    padding: 1.5rem 3rem;
    margin-bottom: 1.5rem;
}

.contenido-general{padding-bottom: 9rem;}
.perfil-modal h2{
    color: var(--p300);
    font-weight: 700;
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
}

.perfil-modal h4{
    color: var(--p500);
    font-weight: 500;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.perfil-modal p{
    color: var(--n600);
    font-weight: 300;
    font-size: 1.6rem;
}

.perfil-modal .descripcion-perfil{
    padding: 0 3rem;
}

.boton-perfil-linkedin{
    display: flex;
    padding: 1rem 3rem;
    color: var(--n100);
    background-color: var(--p300);
    border-radius: 1rem;
    margin-top: 1.5rem;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 400;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.boton-perfil-linkedin i{
    border: 1px solid var(--n100);
    border-radius: 2px;
    padding: 4px 12px;
    margin-right: 1.5rem;
    display: flex;
    justify-content: center;
}

.marco-perfil{border: 1px solid var(--p100);}
.creditos strong{font-family: "tt-commons-pro", sans-serif; font-weight: 600;}

/* Mediaqueries */

@media (min-width: 320px) {
    .show-mobile{display: block!important;}
    .show-desktop{display: none!important;}
    .tags-blog-home .tags{display: block;}
    .footer-elementos{display: block;}
    .contenido-eventos-home .boton-vermas-blog {
    width: 90%;
    border: 2px solid var(--n100);
    padding: 1.5rem 3rem;
    color: var(--n100) !important;
    font-size: 1.6rem;
    margin: 0 auto;
    }

    .contenido-blog-home .boton-vermas-blog {
    width: 90%;
    border: 2px solid var(--p400);
    padding: 1.5rem 3rem;
    color: var(--p400) !important;
    font-size: 1.6rem;
    margin: 0 auto;
    text-align: center;
    }

    .lista-empresas{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .boton-footer{
        display: inline-block;
        padding: 1rem 3rem;
        color: var(--n100)!important;
        background-color: var(--f60);
        border-radius: 3rem;
        margin-top: 1rem;
        text-decoration: none;
        font-weight: 400;
    }
    
    .contenido-que-buscamos{ padding: 1.5rem!important;}
    .que-buscamos{padding: 3rem!important;}

    .perfil-modal{padding: 1.5rem;}

}

@media (min-width: 768px) {
    .show-mobile{display: none!important;}
    .show-desktop{display: block!important;}
    .tags-blog-home .tags{display: flex;}
    .footer-elementos{
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 3rem;
    }
    .contenido-eventos-home .boton-vermas-blog {
    width: unset;
    border: 2px solid var(--n100);
    padding: 1.5rem 3rem;
    color: var(--n100) !important;
    font-size: 1.6rem;
    /* margin: 0 auto; */
    margin: unset;
    }
    .contenido-blog-home .boton-vermas-blog {
    width: unset;
    border: 2px solid var(--p400);
    padding: 1.5rem 3rem;
    color: var(--p400) !important;
    font-size: 1.6rem;
    margin: unset;
    text-align: center;
    }
    .tags-blog-home .tags{
    display: flex!important;
    }
    .lista-empresas{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .contenido-que-buscamos{ padding: 6rem!important;}
    .que-buscamos{padding: 6rem!important;}
    .perfil-modal{padding: 3rem;}
    /* .fancybox__slide > .fancybox__content {
    max-width: 72rem; 
    margin: 0 auto;
  } */
}

@media (min-width: 960px) {
  
    .lista-blog{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .lista-empresas{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

}