/* ==========================================================================
   PORQUE-ELEGIRNOS.CSS
   Sección de razones para elegir a New House. Se diferencia a propósito
   de la grilla de servicios (icono arriba) usando un listado con
   borde izquierdo, como una planilla de especificaciones técnicas.
   ========================================================================== */

.why {
  background: var(--color-navy);
  color: #ffffff;
  clip-path: polygon(
    0 28px,
    28px 0,
    100% 0,
    100% calc(100% - 28px),
    calc(100% - 28px) 100%,
    0 100%
  );
}

.why .section__header h2,
.why .section__header p {
  color: #ffffff;
}

.why .section__header p {
  color: rgba(255, 255, 255, 0.72);
}

.why__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.why__item {
  background: var(--color-navy);
  padding: var(--space-3);
  border-left: 3px solid var(--color-blue-light);
}

.why__item h3 {
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.why__item p {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.72);
}