/* LSARF · home (front-page) — 5 sections traced from lsarf.com.
   Accent BLUE (#024e79). Hero + final band are dark blue; the rest sit on white/off-white. */

/* ============================================================
   Shared section head
   ============================================================ */
.rx-sec-head { text-align: center; max-width: 720px; margin: 0 auto var(--rx-space-5); }
.rx-sec-head__title {
  font-family: var(--rx-font-head); font-weight: var(--rx-fw-bold);
  font-size: var(--rx-text-2xl); color: var(--rx-blue); line-height: 1.12; text-wrap: balance;
}

/* ============================================================
   1) HERO — dark-blue, 1 column, image + blue scrim, centered
   ============================================================ */
.rx-hero {
  position: relative; isolation: isolate;
  background-color: var(--rx-blue);
  padding: clamp(3.5rem, 9vw, 6.5rem) 0;
  overflow: hidden;
}
.rx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(120deg, rgba(2, 78, 121, 0.92) 0%, rgba(1, 42, 64, 0.82) 100%), var(--hero-img, none);
  background-size: cover; background-position: center;
}
.rx-hero__inner { max-width: 760px; text-align: center; }
.rx-hero__title {
  color: #fff; font-family: var(--rx-font-head); font-weight: var(--rx-fw-bold);
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; margin-bottom: var(--rx-space-3); text-wrap: balance;
}
.rx-hero__text {
  color: #e9eef3; font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: var(--rx-leading-normal);
  margin-bottom: var(--rx-space-4); max-width: 56ch; margin-inline: auto;
}
.rx-hero__cta { display: flex; flex-wrap: wrap; gap: var(--rx-space-2); justify-content: center; }
/* white-outline ghost variant for dark hero */
.rx-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.rx-btn--ghost-light:hover { background: #fff; color: var(--rx-blue); border-color: #fff; }

/* ============================================================
   2) CALIDAD E INNOVACIÓN — 3 image cards with bottom scrim + text
   ============================================================ */
.rx-innov { background: var(--rx-white); padding-block: var(--rx-space-6); }
.rx-innov__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.75rem); }
.rx-innov-card {
  position: relative; display: block; min-height: 320px; border-radius: var(--rx-radius-lg);
  overflow: hidden; box-shadow: var(--rx-shadow-md); color: #fff;
  transition: transform 0.28s var(--rx-ease), box-shadow 0.28s var(--rx-ease);
}
.rx-innov-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(2, 78, 121, 0.28); }
.rx-innov-card__media { position: absolute; inset: 0; z-index: 0; }
.rx-innov-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--rx-ease); }
.rx-innov-card:hover .rx-innov-card__media img { transform: scale(1.06); }
.rx-innov-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2, 78, 121, 0.05) 0%, rgba(1, 36, 56, 0.86) 100%);
}
.rx-innov-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 320px; padding: var(--rx-space-3); gap: 0.4rem; }
.rx-innov-card__title { font-family: var(--rx-font-head); font-weight: var(--rx-fw-bold); font-size: var(--rx-text-lg); letter-spacing: 0.01em; }
.rx-innov-card__desc { color: #e3e9ee; font-size: var(--rx-text-sm); line-height: 1.5; }

/* ============================================================
   3) NUESTRA PROPUESTA — image (left) + 3 feature rows (right)
   ============================================================ */
.rx-prop { background: var(--rx-grey-100); padding-block: var(--rx-space-6); }
.rx-prop__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.rx-prop__media { border-radius: var(--rx-radius-lg); overflow: hidden; box-shadow: var(--rx-shadow-md); aspect-ratio: 4 / 3; }
.rx-prop__media img { width: 100%; height: 100%; object-fit: cover; }
.rx-prop__title { font-family: var(--rx-font-head); font-weight: var(--rx-fw-bold); font-size: var(--rx-text-xl); color: var(--rx-blue); line-height: 1.15; margin-bottom: var(--rx-space-3); }
.rx-prop__title span { color: var(--rx-ink-soft); font-weight: var(--rx-fw-regular); font-size: 0.7em; display: block; margin-top: 0.2rem; }
.rx-prop__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rx-space-2); }
.rx-prop__item { display: flex; align-items: center; gap: var(--rx-space-2); }
.rx-prop__icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--rx-radius); background: var(--rx-blue); color: #fff; display: grid; place-items: center; }
.rx-prop__icon svg { width: 26px; height: 26px; }
.rx-prop__label { font-family: var(--rx-font-head); font-weight: var(--rx-fw-semibold); color: var(--rx-ink-900); font-size: var(--rx-text-md); }

/* ============================================================
   4) ÁREAS DE ESPECIALIZACIÓN — 3 solid-blue cards with icon
   ============================================================ */
.rx-areas { background: var(--rx-white); padding-block: var(--rx-space-6); }
.rx-areas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.75rem); }
.rx-area-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--rx-space-2);
  background: var(--rx-blue); color: #fff; border-radius: var(--rx-radius-lg);
  padding: var(--rx-space-5) var(--rx-space-3);
  transition: transform 0.25s var(--rx-ease), box-shadow 0.25s var(--rx-ease), background 0.25s var(--rx-ease);
}
.rx-area-card:hover { transform: translateY(-5px); background: var(--rx-blue-dark); box-shadow: 0 18px 40px rgba(2, 78, 121, 0.3); }
.rx-area-card__icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; }
.rx-area-card__icon svg { width: 32px; height: 32px; }
.rx-area-card__title { font-family: var(--rx-font-head); font-weight: var(--rx-fw-bold); font-size: var(--rx-text-lg); letter-spacing: 0.02em; }
.rx-area-card__desc { color: #dbe6ee; font-size: var(--rx-text-sm); line-height: 1.5; max-width: 28ch; }

/* ============================================================
   5) FINAL CTA — dark-blue band, image + scrim, centered
   ============================================================ */
.rx-final {
  position: relative; isolation: isolate; background-color: var(--rx-blue);
  padding: clamp(3rem, 8vw, 5.5rem) 0; text-align: center; overflow: hidden;
}
.rx-final::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(180deg, rgba(2, 78, 121, 0.88) 0%, rgba(1, 36, 56, 0.9) 100%), var(--cta-img, none);
  background-size: cover; background-position: center;
}
.rx-final__inner { max-width: 680px; }
.rx-final__title { color: #fff; font-family: var(--rx-font-head); font-weight: var(--rx-fw-bold); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; text-wrap: balance; }
.rx-final__text { color: #e9eef3; font-size: var(--rx-text-md); margin: var(--rx-space-2) 0 var(--rx-space-3); }
.rx-final__cta { margin-top: var(--rx-space-2); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .rx-innov__grid { grid-template-columns: 1fr; }
  .rx-areas__grid { grid-template-columns: 1fr; }
  .rx-prop__inner { grid-template-columns: 1fr; }
  .rx-prop__media { order: -1; }
}
@media (max-width: 600px) {
  .rx-hero__cta { flex-direction: column; }
  .rx-hero__cta .rx-btn { width: 100%; }
}