/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
/*===== VARIABLES CSS =====*/
:root {
  --header-height: 3rem;
  --font-semi: 600;
  /*===== Colores =====*/
  /*Purple 260 - Red 355 - Blue 224 - Pink 340*/
  /* HSL color mode */
  --hue-color: 224;
  --first-color: #ff274b;
  --second-color: #fff;
  --bg-color-light: #fff;
  --bg-color-dark: #080808;
  /*===== Fuente y tipografia =====*/
  --body-font: 'Poppins', sans-serif;
  --big-font-size: 1.8rem;
  --h2-font-size: 1.25rem;
  --normal-font-size: .938rem;
  --smaller-font-size: .75rem;
  /*===== Margenes =====*/
  --mb-2: 1rem;
  --mb-4: 2rem;
  --mb-5: 2.5rem;
  --mb-6: 3rem;
  /*===== z index =====*/
  --z-back: -10;
  --z-fixed: 100;
}
.contenedor-redes div a {
    text-decoration: none;
    color: rgb(247, 244, 244);
  }
  .navbar {
    height: 100px;
    /* background-color: rgb(245, 219, 219) !important; */
  }

  .active {
    font-size: var(--h2-font-size);
    color: #efae0b !important;
  }

  .navbar-brand {
      height: 100px;
      width: 100%;
      text-align: center;
  }
  .navbar-brand img {
    height: 8rem;
  }
  /* Footer */
  .footer {
    background-color: white;
    color: var(--bg-color-dark);
    text-align: center;
    font-weight: var(--font-semi);
    padding: 2rem 0;
    margin-top: 20vh;
    box-shadow: 0px 0px 100vh rgba(157, 157, 157, 0.1);
    font-family: var(--body-font);
}
    
  .footer__title {
    font-size: var(--big-font-size);
  }
  
  .footer__icon {
    font-size: 1.5rem;
    color: var(--bg-color-dark);
    margin: 0 var(--mb-2);
  }
  .footer a {
    text-decoration: none;
  }
  
  .footer__icon:hover svg{
    color: #ff004f !important;
    transform: scale(1.2);
    transition: color 0.5s, transform 0.5s;
  }
  
  .footer__copy {
    font-size: var(--smaller-font-size);
  }
  .container__logo span, .footer__copy span, .footer__title span {
    color: var(--first-color);
    font-weight: bold;
}
  .punto__logo {
    font-size:40px;
  }
  /* ----------------- */
  .contenedor-redes div a svg {
    color: black;
}
.contenedor-redes:hover {
    cursor: pointer;
    font-weight: bold;
 }
 .contenedor-redes div {
    padding: 6px;
    border-radius: 5px;
    color: black;
}
@media only screen and (max-width:991px) {
    /*  */
    .navbar-nav {
        display: flex;
        align-items: center;
        height: 100vh;
        gap:30px;
        font-size: 1.8rem;
    }
    .navbar-nav div {
        display: flex;
        align-items: center;
        gap: 40px;
    }
    .navbar-toggler {
        border: none;
    }
    .navbar-toggler:active {
        border: none !important;
    }

    footer div {
        align-items: center;
    }
    footer div p {
        color: grey;
        font-size: 0.7rem;
    }
    .contenedor-redes {
        display: flex;
        gap: 10px;
    }
    .contenedor-redes div {
        padding: 6px;
        border-radius: 5px;
    }
    .contenedor-redes:hover {
       cursor: pointer;
       font-weight: bold;
    }
    .contenedor-redes div a {
      text-decoration: none;
      color: white;
    }
    
}
  /*  */
    

@media only screen and (min-width: 992px){
    .collapse{
        justify-content: center;
    }
    .navbar-nav {
        gap: 40px;
    }
    .navbar-nav div {
        display: flex;
        align-items: center;
    }
    .navbar-nav a:after{
        content: '';
        display: block;
        height: 1.5px;
        background: #FBC02D;
        transform: scaleX(0);
        transition: transform .3s;
    }
    .navbar-nav a:hover:after{
        transform: scaleX(1);
        transition: transform .3s;
    }
    .navbar-brand {
        width: 20%;
        padding-left: 100px;
    }
 
    footer div {
        align-items: center;
    }
    footer div p {
        color: grey;
    }
    .contenedor-redes {
        display: flex;
        gap: 30px;
    }

}