: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(1rem, 0.95rem + 0.5vw, 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;
    /* background-color: cornflowerblue; */
    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;}
.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
{
    /* background-color: #A76F6F; */
    border-radius: 0 20px 20px 0;
    display: grid;
    /* grid-template-columns: repeat(auto-fit,minmax(min(100%,20%),1fr)); */
    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(1rem, 0.95rem + 0.5vw, 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{display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: #F8BD19; color: #1A1612; padding: 0.58rem 1.1rem; border-radius: 4px; text-decoration: none; width: max-content;
    transition: background 0.2s ease;}
.detailsRight a:hover{background: #D2A115;}
.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;}

/* ═══════════════════════════════════════
   CONTACT FORM
═══════════════════════════════════════ */
.contact-grid{grid-column: 1 / -1; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3em; margin: 30px; align-items: start;}

.contact-info__title{color: var(--colorPrincipal); font-size: 1.5em; margin-bottom: 0.6em;}
.contact-info__text{color: #555; line-height: 1.7; margin-bottom: 1.5em;}
.contact-channel{display: flex; align-items: center; gap: 0.85em; padding: 1em; background: #f2f2f2; border-radius: 10px; text-decoration: none; transition: background 0.2s ease;}
.contact-channel:hover{background: #e5e5e5;}
.contact-channel__icon{display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--colorPrincipal); color: #fff; font-size: 1.2em;}
.contact-channel__label{display: block; font-size: 0.75em; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; color: #777;}
.contact-channel__value{display: block; font-size: 1em; color: #000; font-weight: 500;}

.contact-form{background: #fff; border: 1px solid #e5e5e5; border-radius: 20px; padding: 2em; box-shadow: 0 4px 24px rgba(0,0,0,0.08);}
.form-row{display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em;}
.form-field{margin-bottom: 1.2em;}
.form-label{display: block; font-size: 0.8em; font-weight: bold; letter-spacing: 0.02em; color: #000; margin-bottom: 0.4em;}
.form-input,
.form-textarea{width: 100%; font-size: 1em; color: #000; background: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; padding: 0.75em 0.9em; transition: border-color 0.2s ease; font-family: inherit;}
.form-input:focus,
.form-textarea:focus{outline: none; border-color: var(--colorPrincipal);}
.form-textarea{resize: vertical; min-height: 130px;}
.form-honeypot{position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;}
.form-submit{display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; width: 100%; font-weight: bold; font-size: 0.9em; letter-spacing: 0.04em; text-transform: uppercase; background: var(--colorPrincipal); color: #fff; border: none; border-radius: 8px; padding: 0.9em 1.6em; cursor: pointer; transition: background 0.2s ease;}
.form-submit:hover{background: var(--colorSecundario);}
.form-submit:disabled{opacity: 0.6; cursor: not-allowed;}

.form-status{margin-top: 1em; padding: 0.75em 1em; border-radius: 8px; font-size: 0.9em; display: none;}
.form-status--ok{display: block; background: #e7f3e9; color: #2f7a3d;}
.form-status--error{display: block; background: #fbeae8; color: #a80e06;}

.contact-recaptcha-note{font-size: 0.75em; color: #888; margin-top: 1em; line-height: 1.5;}
.contact-recaptcha-note a{color: var(--colorPrincipal);}

@media (max-width: 860px){
  .contact-grid{grid-template-columns: 1fr; margin: 20px;}
  .form-row{grid-template-columns: 1fr;}
}