/* ------------ ESTILOS PÁGINAS SECUNDARIAS ------------ */


.innerPage {
    text-align: center;
  }
  
  .hero {
    text-align: center;
    max-height: repeat(3, var(--L));
    padding: var(--XXL);
    color: var(--White);
    background-size: cover;
  }

  #pymes {
    background-image: url(../assets/banner_pymes.png);
  }
  #personas {
    background-image: url(../assets/banner_personas.png);
  }
  #contacto {
    background-image: url(../assets/contacto_banner.png);
  }

  #nosotros {
    background-image: url(../assets/Capa\ 55\ copia.png);
  }
  
  .subHero {
    text-align: center;
    min-height: 300px;
    padding: var(--XL);
    background-color: #BCDAEF;
    margin-bottom: -160px;
  }
  .containerGrid{
    display: inline-grid;
    background-color: #E5E5E5;
    padding: var(--L) 0px;
    margin: 0px auto;
    text-align: center;
    width: 90%;
    justify-content: center;
  }

  .containerGridTitle {
    padding-bottom: var(--XL);
  }

  .borderBottom {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #68728600, #687286, #68728600) 1;
  }
  
  .rowContainerGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .borderRight {
    border-right: 3px solid transparent;
    border-image: linear-gradient(to bottom, #68728600 0%, #687286 100%) 1;
  }


  .borderRightInvert {
    border-right: 3px solid transparent;
    border-image: linear-gradient(to top, #68728600 0%, #687286 100%) 1;
  }

  .borderRightFull {
    border-right: 3px solid #687286;
  }

  
  
  .rowContainerGridBox {
    flex: 1;
    display: grid;
    grid-gap: var(--S);
    justify-items: center;
    padding: var(--L);
    align-content: space-between;
  }
  
  .gridTitle {
    font-size: var(--MM);
    font-weight: 700;
    color: var(--priColor);
  
  }

  .aditionalText{
    font-size: 14px;
  }
  
  .gridText {
    margin: 0px;
    color: var(--Grey);
    font-weight: 600;
  }
  
  .gridBtn {
    font-size: var(--M);
    text-decoration: none;
    margin-top: var(--L);
    background-color: var(--secColor);
    font-weight: 600;
    color: var(--White);
    padding: var(--S) var(--XL);
    border-radius: var(--XL);
    height: fit-content;
  }
  
  .gridBtn:hover {
    background-color: var(--priColor);
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.276);
  }
  
  .gridSeparator {
    width: 90%;
  }

  @media screen and (max-width: 768px) {
    .rowContainerGrid {
      grid-template-columns: 1fr;
    }
    .borderRight, .borderRightInvert, .borderBottom, .borderRightFull{
      border: 0px;
    }
    
    .twoColsForm{
      display: block;
    }

    #formContact > * {
      width: 100%;
      margin-bottom: auto;
    }

    .subHero {
      flex-direction: column;
      
    }

    .innerIcon {
      display: none;
    }
  }

  @media screen and (max-width: 400px) {
    .hero{
      padding: var(--XL) !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .formContainerBox{
      padding: var(--M) 0px;
    }
    .twoColsForm{
      width: 100%;
    }
  }