/* ---------------------------
   FIX FINAL: Alinear BENEFICIOS
   con SITIOS y CONTACTO (996px)
   --------------------------- */

/* box-sizing global (previene sorpresas por padding/margin heredado) */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* Asegurarnos que la sección use el mismo flujo que las otras */
#beneficios {
  padding: 3.125rem 0;             /* 50px */
  background: #F5F5F7;
  margin-bottom: 3.75rem !important; /* 60px */
  display: block;
}

.bordescontactoh{
  padding-top: 40px
}

.bordescontactop{
  padding-bottom: 15px;
}

/* CONTENEDOR INTERNO: ancho útil igual a 996px y centrado EXACTO */
#beneficios .benefits-grid {
  max-width: 62.25rem;             /* 996px */
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;              /* 20px */
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;                    /* 20px */
  align-items: stretch;
}

/* Tarjeta */
#beneficios .benefit-card {
  background-color: #F5F5F7;
  border-radius: .8244rem;
  padding: 1.25rem;
  box-shadow: 0 0 0 0.0625rem #E0E0E0 inset; /* 1px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  text-align: center;
}

/* Títulos / texto */
#beneficios .benefit-num {
  color:#A4A4A4;
  font-weight:700;
  font-size:2.9rem;
  margin-bottom:0.625rem;          /* 10px */
}

#beneficios .benefit-card h3 {
  font-size:1.64rem;
  font-weight:700;
  margin:0.375rem 0;               /* 6px */
}

#beneficios .benefit-card p {
  font-size:1.125rem;
  color:#000;
  line-height:1.3;
  margin:0.5rem 0 0;               /* 8px */
  max-width:44ch;
  margin-left:auto;
  margin-right:auto;
  padding-bottom: 20px;
}

/* Contenedor de la imagen */
#beneficios .benefit-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:14.375rem;                /* 230px */
  box-sizing:border-box;
}

/* Imagen */
#beneficios .benefit-icon img {
  width: 13.5rem;                  /* 216px */
  height: 13.5rem;
  object-fit: contain;
  transition: transform .4s ease;
}

#beneficios .benefit-icon img:hover {
  transform: scale(1.08);
}

/* ===== RESPONSIVE ===== */

/* small desktops */
@media (max-width: 75rem) {         /* 1200px */
  #beneficios .benefits-grid {
    gap:1rem;                      /* 16px */
    width:95%;
  }
  #beneficios .benefit-icon {
    height:12.5rem;                /* 200px */
  }
  #beneficios .benefit-icon img {
    width:12.5rem;
    height:12.5rem;
  }
}

/* tablets: 2 columnas */
@media (max-width: 64rem) {         /* 1024px */
  #beneficios .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    width: 90%;
    gap: 1.25rem;                  /* 20px */
    padding: 0 1.125rem;           /* 18px */
  }
  #beneficios .benefit-icon {
    height:12.5rem;                /* 200px */
  }
}

/* móviles: 1 columna */
@media (max-width: 48rem) {         /* 768px */
  #beneficios .benefits-grid {
    grid-template-columns: 1fr;
    width: 90%;
    gap: 1.25rem;                  /* 20px */
    padding: 0 1rem;               /* 16px */
  }
  #beneficios .benefit-icon {
    height:11.25rem;               /* 180px */
  }
  #beneficios .benefit-icon img {
    width:11.25rem;
    height:11.25rem;
  }
}

/* móviles pequeños */
@media (max-width: 30rem) {         /* 480px */
  #beneficios {
    padding: 2.5rem 0;             /* 40px */
  }
  #beneficios .benefit-card h3 {
    font-size: 1rem;
  }
  #beneficios .benefit-card p {
    font-size: 14px;
    padding-bottom: 5px;
  }
  #beneficios .benefit-icon {
    height:10rem;                  /* 160px */
  }
  #beneficios .benefit-icon img {
    width: 119.48px;                /* 150px */
    height: 119.48px;
  }
  #beneficios .benefit-num{
    font-size: 22px;
  }

  #beneficios .benefits-grid{
    grid-template-columns: 1fr;
    width: 80%;
    gap: 1.25rem;                  /* 20px */
    padding: 0 1rem;
  }
  .bordescontactop{
    padding-bottom: 10px;
  }
  
}


/* móviles pequeños */
@media (max-width: 23.4375rem) {         /* 375px */
  #beneficios {
    padding: 2.5rem 0;             /* 40px */
  }

  #beneficios .benefit-card {
    width: 100%;
    max-width: 20rem; /* opcional (~320px) */
    margin: 0 auto;
  }

  #beneficios .benefit-card h3 {
    font-size: 1rem;
  }
  #beneficios .benefit-card p {
    font-size: 14px;
    padding-bottom: 5px;
    text-align: center;
    max-width: 18rem;   /* 🔥 clave */
    margin-left: auto;
    margin-right: auto;
  }
  #beneficios .benefit-icon {
    height:10rem;                  /* 160px */
  }
  #beneficios .benefit-icon img {
    width: 119.48px;                /* 150px */
    height: 119.48px;
  }
  #beneficios .benefit-num{
    font-size: 22px;
  }

  #beneficios .benefits-grid{
    grid-template-columns: 1fr;
    width: 100%;
    gap: 1.25rem;                  /* 20px */
    padding: 0 1rem;
  }
  .bordescontactop{
    padding-bottom: 10px;
  }
  
}


/* móviles pequeños */
@media (max-width: 350px) {         /* 350px */
  #beneficios {
    padding: 2.5rem 0;             /* 40px */
  }
  .benefit-card{
    width: 319px;
    margin: 0 auto;
  }
  #beneficios .benefit-card h3 {
    font-size: 1rem;
  }
  #beneficios .benefit-card p {
    font-size: 14px;
    padding-bottom: 5px;
  }
  #beneficios .benefit-icon {
    height:10rem;                  /* 160px */
  }
  #beneficios .benefit-icon img {
    width: 119.48px;                /* 150px */
    height: 119.48px;
  }
  #beneficios .benefit-num{
    font-size: 22px;
  }

  #beneficios .benefits-grid{
    grid-template-columns: 1fr;
    width: 100%;
    gap: 1.25rem;                  /* 20px */
    padding: 0 1rem;
  }
  .bordescontactop{
    padding-bottom: 10px;
  }
  


}