/* SALTA — "Less tour. More story." Typography, not icon cards. */

.why { background: var(--white); }
.why__head { margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.why__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}
.why__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.4rem);
  align-items: start;
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(0rem, 2vw, 2rem) clamp(1.6rem, 3vw, 2.6rem) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background var(--dur) var(--ease-out);
}
.why__item:nth-child(odd) { border-right: 1px solid var(--rule); }
.why__item:nth-child(odd) { padding-right: clamp(1.5rem, 3vw, 3rem); }
.why__item:nth-child(even) { padding-left: clamp(1.5rem, 3vw, 3rem); }
.why__num { color: var(--blue); padding-top: .45rem; }
.why__body { display: grid; gap: .5rem; }
.why__title {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  transition: translate var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.why__text { color: var(--muted); max-width: 34ch; }

@media (hover: hover) and (pointer: fine) {
  .why__item:hover { background: rgba(0, 111, 255, .04); }
  .why__item:hover .why__title { translate: 6px 0; color: var(--blue); }
}
@media (max-width: 760px) {
  .why__list { grid-template-columns: 1fr; }
  .why__item:nth-child(odd) { border-right: 0; padding-right: 0; }
  .why__item:nth-child(even) { padding-left: 0; }
}