:root
{ /*variables*/
 --colorPrincipal:#2D4356;
 --colorSecundario:#A76F6F;
}
img{max-inline-size:100%;  object-fit: cover; aspect-ratio: attr(width) / attr(height); width: 100%; height: auto;}

.titulo-h1 h1{color:var(--colorPrincipal); font-size: clamp(3em,3.125vw,4em); margin-bottom: 20px;}
h2{color:var(--colorPrincipal); font-size: clamp(24px,3.125vw,24px); margin-bottom: 20px;}
p{line-height: 27px; font-size: clamp(1.2em,3.125vw,1.2em);}
.products a{font-size: inherit;}
.btnMasinfo{margin-top: 3em;}

.icon_helmet::before
{
    content: url(../images/icon-helmet.webp);
}
.containerPpal
{
    display: grid;
    max-width: 1600px;
    margin: auto;
    width: 90%;
    overflow: hidden;
}

.bannerPpal
{
       display: grid;
       grid-gap:2em;
       grid-template-columns: repeat(1,1fr);
       margin-bottom: 30px;
}
.bannerPpal__texto{width: 95%; text-align: center;}
.bannerPpal img
{
  align-self: center;
}
main
{
   display: grid;
   grid-template-columns: 20% 80%;
   border-radius: 20px;
}
.text1{display: grid; grid-column: 1/-1; margin:30px 30px;}
.text1 ol li{font-size: clamp(1.2em,3.125vw,1.2em); line-height: 30px; margin-left: 40px;}
.menuLeft
{
    display: grid;
    background-color: #f2f2f2;
    border-right: solid 1px #999;
    background-color: var(--colorPrincipal);
    padding: 2em;
    border-radius: 20px 0 0 20px;
    align-items: start;
    grid-template-columns: 100%;
    height: max-content;
}
.products
{
    border-radius: 0 20px 20px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(16em,1fr));
    gap: 20px;
    padding-left: 10px;
    height: max-content;
}
.products a{text-decoration: none; border-radius: 10px; color: #000; border: solid 1px #f2f2f2; padding: 24px;}
.products a:hover{background: var(--colorPrincipal); color: #fff;}
.products img{border-radius: 20px; margin-bottom: 20px;}
.product_titleName{font-size: 20px; font-weight: bold; margin-bottom: 10px;}
.product__minDescription{margin-bottom: 10px;}
.product__price{font-size: 24px; font-weight: bold;}

.menuLeft__item{display:grid;}
.menuLeft__item ul{display:grid;}
.menuLeft__item a{color: #fff; border-radius: 10px; padding: 0.7em; font-size: 1.2em; text-decoration: none;}
.menuLeft__item a:hover{background-color:#bd8686}
.menuLeft__titleProduct{color: #fff; font-size: 1.4em; font-weight: bold; margin: 25px 0;}
.activado{background-color: var(--colorSecundario)}


.productDetails
{
    background-color:var(--colorPrincipal);
    grid-column: 1/-1;
    padding: 34px;
    border-radius: 20px;
    margin-top: 20px;
}
.productDetails__details{display: grid;grid-template-columns: 22% 76%; background: #fff; border-radius: 20px; margin-bottom: 34px; padding: 30px;}
.productDetails__details li{font-size: clamp(1.2em,3.125vw,1.2em); margin-left: 30px;}
.productDetails__description{overflow: scroll; height: 250px;}
.productDetails__description h3{margin-bottom: 10px; font-size: clamp(1.2em,3.125vw,1.3em);}
.productDetails__img img{border-radius: 20px; width: max-content;}
.detailsRight a{background: #a74242; border-radius: 10px; font-size: 18px; padding: 16px; width: max-content; width: max-content; margin-top: 20px; color: #fff; text-decoration: navajowhite;
    font-weight: bold;}
.detailsRight a:hover{background:var(--colorSecundario);}
.detailsLeft{display: grid; align-items: center;}
.detailsRight{display: grid;}
.features{font-size: 18px; margin-top: 20px;}
.features table th{background-color: #deefff; padding: 7px; border-radius: 10px;}
.features table td{padding: 7px; border-radius: 10px; background: #f2f2f2;}
.features ul{display: flex;}
.features li{list-style: none; background: #f2f2f2;}