@import url(_css-color.css);
*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}
html{
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
strong, i{
      color: var(--color-text-p);
}
.header-title{
    font-size: 34px;
      text-transform: uppercase;
      color: var(--primary-color);
      font-weight:bold;
}
h1{
      font-size: 36px;
      text-transform: uppercase;
      color: var(--primary-color-dark);
      font-weight:bold;
}
h2{
      font-size: 30px;
      padding-top: 10px ;
      padding-bottom: 20px;
      color: var(--primary-color-dark);
}
h3{
      font-size: 26px;
      padding-bottom: 10px;
      color: var(--gray-color-dark);
}
a{
      text-decoration: none;
      color: var(--btn-color-texto);
      padding:24px;
}
li{
      list-style: none;
      line-height: 1.5;
}
p{
      padding-bottom: 10px;
      font-size: 20px;
      line-height: 1.5;
      text-align: justify;
}
.resaltar{
      color: red;
}
hr{
      width: 50%;
      margin: auto;
}
img{
      width: 100%;
      height: 100%;
      border-radius: 10px;
}
button{
      font-size: 24px;
      margin: 15px auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border: none;
      background-color: var(--btn-color);
      /*padding: 15px 25px;*/
      border-radius: 15px;
      box-shadow: 2px 2px 5px var(--gray-color-dark);
      cursor: pointer;
}
button:hover{
      background-color: var(--btn-color-dark);
}
.col-text-img{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
}

/******* Header *****/
header, main, footer{
      width: 100%;
}
header{
      background-color: #fff;
      text-align: center;
      border-bottom: var(--primary-color) 2px solid;
}
.header-container{
      width: 80%;
      margin: auto;
      padding: 20px 0;
      display: grid;
      grid-template-columns: 2fr 1fr;
      align-items: center;
}
header .logo-icono{
      width:100%;
      display: flex;
      flex-direction: row;
      justify-content:flex-start;
      gap: 20px;
      align-items: center;
}
header .icon-logo{
      width: 80px;
}

header div button {
      text-decoration: none;
      font-weight: bold;
      color: var(--btn-color-texto);
      align-items: center;
}
header div button a {
      text-decoration: none;
      color: var(--btn-color-texto);
}

/******* Cuerpo *******/
main{
      width: 80%;
      margin: auto;
      padding-top: 30px;
      display: grid;
      grid-template-columns: 1fr;
      /*gap: 20px;*/
      
}
main .text-principal{
      padding-bottom: 20px;
}
article{
      width: 100%;
      padding: 15px 15px 20px 15px;
      margin: auto auto 44px auto;
      display: grid;
      grid-template-columns: 300px 5fr;
      align-items:center ;
      gap: 30px;
      border:1px solid var(--gray-color);
      box-shadow: 2px 2px 5px var(--secundary-color-dark);
      border-radius: 5px;
}
article .img-container{
      border-radius: 10px;
      overflow: hidden;
      background-size:cover;
      background-position: center center;
}
article .col-lista{
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      padding-bottom: 10px;
}
article div .lista{
      width: 30%;
      font-size: 18px;
}
/**** Botón Wsp ******/
.btn-wsp{
      width: 55px;
      position: fixed;
      right: 25px;
      bottom: 20px;
}
.texto-wsp{
      position: fixed;
      right: 8px;
      bottom: 80px;
      background-color: var(--secundary-color-dark);
      color: beige;
      border-radius: 5px;
      padding: 5px 10px;
      font-size: 14px;
}
.list-gasf{
      width: 80%;
      margin-left: 30px;
}
.enlace-btn{
display: flex;
    /* width: auto; */
    justify-content: space-around;
    flex-direction: row;
}
/*******  FOOTER *****/
footer{
      padding: 20px 0;
      background-color: var(--gray-color);
      color: var(--gray-color-dark);
}
footer section{
      width: 90%;
      margin: 44px auto;
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: 20px;
      line-height: 1.5;
      font-size: 18px;
}
footer .sub-title-footer{
      padding-bottom: 20px;
      font-size: 22px;
      font-weight: bold;
      color: var(--primary-color);
}
footer p, footer li{
      color: black;
}
footer .col-footer{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;     
}
footer .col-footer-hijo{
      width: 30%;
      gap: 10px;
}
footer .line{
      border-right: 1px solid var(--secundary-color-dark);
}
/****** responsive *********/
@media (min-width: 320px) and (max-width: 768px) {
    .header-title {
    font-size: 24px;
    }
    a{
        padding: 20px;
    }
      h1{
            font-size: 30px;
      }
      h2{
            font-size: 26px;
      }
      .header-container{
            grid-template-columns: 1fr;
      }
      header .logo-icono{
            flex-direction: column;
            gap: 5px;
      }
      header div button{
            width: 256px;
      }
      main{
            width: 90%;
            grid-template-columns: 1fr;
      }
      .col-text-img{
            grid-template-columns: 1fr;
            gap: 5px;
      }
      article{
            width: 100%;
            grid-template-columns: 1fr;
      }
      article h2{
            font-size: 26px;
      }
      article h4{
            font-size: 26px;
      }
      article .col-lista, .enlace-btn{
            flex-direction: column;
      }
      article div .lista{
            width: 100%;
      }
      footer section{
            grid-template-columns: 1fr;
      }
      footer .col-footer{
            width: 100%;
            flex-direction: column;
      }
      footer div .col-footer-hijo{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 22%;
      }
      footer .line{
            border-right: none;
            border-bottom: 1px solid var(--secundary-color-dark);
            padding-bottom: 20px;
      }   
    }       
    @media (min-width: 769px) and (max-width: 920px) {
      .header-container{
            grid-template-columns: 1fr 1fr;
      }
      main{
            width: 90%;
      }
      article{
            width: 100%;
            grid-template-columns: 1fr;
      }
      article h2{
            font-size: 30px;
      }
      article h4{
            font-size: 28px;
      }
      .enlace-btn{
            flex-direction: column;
      }
      footer section{
            grid-template-columns: 1fr;
            text-align: center;
      }
      footer .line{
            border-right: none;
            border-bottom: 1px solid var(--secundary-color-dark);
            padding-bottom: 20px;
      }
    }