/* ============================================================
   THE HUMAN ELEMENT — THE HUMAN ELEMENT PASS
   ============================================================ */

.breadcrumb {
  display: flex;
  padding: 12px 40px;
  border-bottom: 1px solid var(--he-grey);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--he-grey-dark);
}
.breadcrumb a { color: var(--he-grey-dark); text-decoration: none; }
.breadcrumb a:hover { color: var(--he-orange); }

.pass-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border-bottom: 1.5px solid var(--he-ink);
}
.pass-hero__copy {
  padding: 72px 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  border-right: 1.5px solid var(--he-ink);
}
.pass-hero__eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--he-teal-deep); font-weight: 700; }
.pass-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.pass-hero__title em { font-family: var(--font-serif); font-style: italic; text-transform: lowercase; font-weight: 400; color: var(--he-teal-deep); }
.pass-hero__lead { margin: 0; max-width: 480px; font-size: 18px; line-height: 1.55; color: var(--he-ink-soft); }
.pass-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.pass-hero__media { position: relative; background: var(--he-teal-tint); overflow: hidden; min-height: 420px; }
.pass-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.pass-section { border-bottom: 1.5px solid var(--he-ink); }
.pass-section__eyebrow { padding: 40px 40px 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--he-ink-soft); }
.pass-section__head { padding: 56px 40px 8px; display: flex; flex-direction: column; gap: 10px; }
.pass-section__label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--he-ink-soft); }
.pass-section__title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 4.5vw, 44px); line-height: 1.0; letter-spacing: -0.02em; text-transform: uppercase; }
.pass-section__title em { font-family: var(--font-serif); font-style: italic; text-transform: lowercase; font-weight: 400; color: var(--he-teal-deep); }
.pass-section__title--orange em { color: var(--he-orange); }
.pass-section__lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--he-ink-soft); max-width: 560px; }
.pass-section__cta { padding: 32px 40px 40px; }

/* (01) why-choose */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 32px 0 0;
  border-top: 1px solid var(--he-grey);
  margin-top: 32px;
}
.why-item { padding: 40px; border-right: 1px solid var(--he-grey); display: flex; flex-direction: column; gap: 16px; }
.why-item:last-child { border-right: none; }
.why-item__shape { width: 44px; height: 44px; }
.why-item__shape--circle { border-radius: var(--radius-pill); background: var(--he-teal); }
.why-item__shape--square { background: var(--he-orange); }
.why-item__shape--tab { height: 22px; border-radius: 999px 999px 0 0; background: var(--he-lilac); }
.why-item__title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; font-family: var(--font-display); }
.why-item__body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--he-ink-soft); }

/* (02) transforms grid */
.transform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 32px;
  border-top: 1px solid var(--he-grey);
}
.transform-item { padding: 32px 32px 40px; border-right: 1px solid var(--he-grey); display: flex; flex-direction: column; gap: 10px; }
.transform-item:last-child { border-right: none; }
.transform-item__num { font-size: 13px; font-weight: 700; }
.transform-item__title { font-size: 18px; font-weight: 800; text-transform: uppercase; font-family: var(--font-display); letter-spacing: -0.005em; }
.transform-item__body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--he-ink-soft); }
.pass-section__link { padding: 32px 40px 40px; }
.pass-section__link a { font-size: 14px; font-weight: 600; color: var(--he-teal-deep); text-decoration: none; }

/* (03) alternating feature rows */
.feature-rows { border-top: 1px solid var(--he-grey); }
.feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border-bottom: 1px solid var(--he-grey);
}
.feature-row__copy { padding: 44px 40px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.feature-row__num { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 1; }
.feature-row__title { font-size: 24px; font-weight: 800; text-transform: uppercase; font-family: var(--font-display); letter-spacing: -0.01em; }
.feature-row__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--he-ink-soft); max-width: 420px; }
.feature-row__link { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--he-teal-deep); text-decoration: none; border-bottom: 1.5px solid var(--he-teal-deep); align-self: flex-start; padding-bottom: 2px; }
.feature-row__media { min-height: 280px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.feature-row__media img { width: 100%; height: 100%; object-fit: cover; }
.feature-row__media--contain img { max-width: 55%; max-height: 75%; object-fit: contain; width: auto; height: auto; }
.feature-row__media--orange { background: var(--he-orange-tint); }
.feature-row__media--lilac { background: var(--he-lilac-tint); }
.feature-row__media--white { background: var(--he-white); border-left: 1px solid var(--he-grey); }
.feature-row__media--teal { background: var(--he-teal-tint); }
.feature-row--reverse .feature-row__media { order: -1; }

/* (04) impacto real */
.impact-section { background: var(--he-grey-light); }
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 32px; border-top: 1px solid var(--he-grey); }
.impact-col { padding: 40px; border-right: 1px solid var(--he-grey); display: flex; flex-direction: column; gap: 16px; }
.impact-col:last-child { border-right: none; }
.impact-col__title { font-size: 20px; font-weight: 800; text-transform: uppercase; font-family: var(--font-display); }
.impact-col__list { margin: 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.8; color: var(--he-ink-soft); }
.impact-section__closing { margin: 0; padding: 32px 40px 40px; font-size: 15px; line-height: 1.6; color: var(--he-ink-soft); max-width: 760px; border-top: 1px solid var(--he-grey); }

/* (05) planes */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 32px; border-top: 1px solid var(--he-grey); }
.plan-col { padding: 40px; border-right: 1px solid var(--he-grey); display: flex; flex-direction: column; gap: 16px; }
.plan-col:last-child { border-right: none; }
.plan-col__title { font-size: 22px; font-weight: 800; text-transform: uppercase; font-family: var(--font-display); }
.plan-col__list { margin: 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.75; color: var(--he-ink-soft); }

.credit-table-wrap { padding: 40px; border-top: 1px solid var(--he-grey); }
.credit-table-wrap__label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--he-ink-soft); margin-bottom: 20px; }
.credit-table { display: grid; grid-template-columns: minmax(90px,1fr) minmax(90px,1fr) minmax(110px,1fr) 2fr; }
.credit-table__head {
  display: contents;
}
.credit-table__head span {
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1.5px solid var(--he-ink);
  border-bottom: 1.5px solid var(--he-ink);
  border-right: 1px solid var(--he-grey);
}
.credit-table__head span:first-child { padding-left: 0; }
.credit-table__head span:last-child { border-right: none; }
.credit-table__row { display: contents; }
.credit-table__row span {
  padding: 16px;
  font-size: 14px;
  color: var(--he-ink-soft);
  border-bottom: 1px solid var(--he-grey);
  border-right: 1px solid var(--he-grey);
}
.credit-table__row span:first-child { padding-left: 0; font-weight: 700; }
.credit-table__row span:last-child { border-right: none; line-height: 1.5; }
.credit-table__row--essential span:first-child { color: var(--he-orange); }
.credit-table__row--plus span:first-child { color: var(--he-lilac-deep); }
.credit-table__row--premium span:first-child { color: var(--he-blue); }
.credit-table__row--grupo span:first-child { color: var(--he-teal-deep); }

/* mid newsletter band */
.pass-newsletter {
  border-bottom: 1.5px solid var(--he-ink);
  padding: 64px clamp(20px, 5vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 40px;
  align-items: center;
  background: var(--he-grey);
}
.pass-newsletter__copy { display: flex; flex-direction: column; gap: 14px; }
.pass-newsletter__title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 5vw, 38px); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.02em; }
.pass-newsletter__title em { font-family: var(--font-serif); font-style: italic; text-transform: lowercase; font-weight: 400; color: var(--he-teal-deep); }
.pass-newsletter__body { margin: 0; font-size: 16px; line-height: 1.5; color: var(--he-ink-soft); max-width: 480px; }

@media (max-width: 640px) {
  .pass-hero__copy { border-right: none; border-bottom: 1.5px solid var(--he-ink); }
  .credit-table { grid-template-columns: 100px 90px 110px 1fr; font-size: 13px; }
}
