/* ========================= */
/* El cliente — Pelayo       */
/* ========================= */

/* ─── Hero ─── */
.cliente-hero {
  background-color: var(--color-bg-white);
}

.cliente-hero__desktop {
  position: relative;
  height: var(--hero-height);
}

.cliente-hero__illustration {
  position: absolute;
  right: clamp(10px, 5.5vw, 80px);
  top: 30px;
  width: clamp(380px, 42.2vw, 608px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.cliente-hero__content {
  position: relative;
  z-index: 1;
  padding-top: 210px;
  padding-left: var(--pad-section-x);
  max-width: var(--hero-content-max-width);
}

.cliente-hero__title {
  font-family: var(--ff-primary);
  font-size: var(--fs-5xl);
  line-height: var(--lh-4xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  width: var(--hero-title-width);
  margin: 0;
}

.cliente-hero__bar {
  background-color: var(--color-accent-red);
  margin-top: var(--space-xl);     /* 24px */
  margin-bottom: 18px;             /* Figma: 18px */
}

.cliente-hero__body {
  font-family: var(--ff-primary);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  width: var(--text-width-narrow);
  font-feature-settings: 'liga' 0;
  margin: 0;
}


/* ─── Pelayo y el cliente (intro) ─── */
.cliente-intro {
  background-color: var(--color-bg-light);
}

.cliente-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px var(--pad-page-x-mobile) 80px;
}

.cliente-intro__title {
  font-family: var(--ff-primary);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-align: center;
  max-width: 878px;
  margin: 0 0 var(--space-2xl) 0;
}

.cliente-intro__body {
  font-family: var(--ff-primary);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
  text-align: center;
  max-width: var(--text-width-wide);
  color: var(--color-text);
}

.cliente-intro__body p {
  margin: 0;
}

.cliente-intro__body p + p {
  margin-top: var(--lh-base);
}

/* ─── Datos clave ─── */
.cliente-datos {
  background-color: var(--color-bg-white);
}

.cliente-datos__title {
  font-family: var(--ff-primary);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin: 0;
}

.cliente-datos__title--desktop {
  padding-top: var(--space-7xl);
  padding-left: var(--pad-section-x);
  max-width: 928px;
}

/* Desktop stat rows */
.cliente-datos__rows {
  margin-top: 80px;
  max-width: 821px;
  margin-left: auto;
  margin-right: auto;
}

.cliente-datos__row {
  display: flex;
  justify-content: space-between;
}

.cliente-datos__row + .cliente-datos__row {
  margin-top: 75px;
}

.cliente-datos__stat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.cliente-datos__stat-icon {
  flex-shrink: 0;
  margin-top: var(--space-xs);
}

.cliente-datos__stat-icon img {
  display: block;
  width: 72px;
  height: 72px;
}

.cliente-datos__stat-text .stat-number {
  margin: 0;
}

.cliente-datos__stat-text .stat-label {
  margin-top: -8px;
  max-width: 227px;
}

/* ─── Tomadores de seguros por ramos ─── */
.cliente-tomadores {
  padding-left: var(--pad-page-x-mobile);
  padding-right: var(--pad-page-x-mobile);
  margin-top: 177px;
}

@media (min-width: 768px) {
  .cliente-tomadores {
    padding-left: var(--pad-section-x);
    padding-right: var(--pad-section-x);
    margin-top: 177px;
  }
}

.cliente-tomadores__title {
  font-family: var(--ff-primary);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin: 0;
  max-width: 464px;
}


/* Desktop tomadores grid */
.cliente-tomadores__grid {
  position: relative;
  height: 116px;
  margin-top: 104px;
}

.cliente-tomadores__item {
  flex: 1;
}

.cliente-tomadores__item .stat-number {
  margin: 0;
}

.cliente-tomadores__label {
  font-family: var(--ff-primary);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  margin-top: -5px;
  font-feature-settings: 'liga' 0;
}

.cliente-tomadores__color-bar {
  display: block;
  height: var(--bar-height);
  margin-top: 1px;
  width: 0;
  transition: width 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cliente-tomadores__grid .cliente-tomadores__item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Cascade fade-in */
.cliente-tomadores__grid.is-visible .cliente-tomadores__item:nth-child(1) {
  opacity: 1; transform: translateY(0); transition-delay: 0s;
}
.cliente-tomadores__grid.is-visible .cliente-tomadores__item:nth-child(2) {
  opacity: 1; transform: translateY(0); transition-delay: 0.3s;
}
.cliente-tomadores__grid.is-visible .cliente-tomadores__item:nth-child(3) {
  opacity: 1; transform: translateY(0); transition-delay: 0.6s;
}
.cliente-tomadores__grid.is-visible .cliente-tomadores__item:nth-child(4) {
  opacity: 1; transform: translateY(0); transition-delay: 0.9s;
}

/* Bar growth synced with fade-in */
.cliente-tomadores__grid.is-visible .cliente-tomadores__color-bar--autos {
  width: 56px; transition-delay: 0s;
}
.cliente-tomadores__grid.is-visible .cliente-tomadores__color-bar--hogar {
  width: 60px; transition-delay: 0.3s;
}
.cliente-tomadores__grid.is-visible .cliente-tomadores__color-bar--vida {
  width: 42px; transition-delay: 0.6s;
}
.cliente-tomadores__grid.is-visible .cliente-tomadores__color-bar--otros {
  width: 53px; transition-delay: 0.9s;
}

.cliente-tomadores__color-bar--autos {
  background-color: var(--color-primary);
}

.cliente-tomadores__color-bar--hogar {
  background-color: var(--color-accent-cream);
}

.cliente-tomadores__color-bar--vida {
  background-color: var(--color-accent-red);
}

.cliente-tomadores__color-bar--otros {
  background-color: var(--color-accent-teal);
}

/* Stacked proportion bar */
.cliente-tomadores__stacked-bar {
  display: flex;
  overflow: hidden;
  height: var(--space-2xl);
  margin-top: 22px;
  max-width: var(--content-width);
  border-radius: 0;
}

.cliente-tomadores__segment {
  flex-shrink: 0;
  height: 100%;
  width: 0;
  transition: width 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cliente-tomadores__stacked-bar.is-visible .cliente-tomadores__segment--autos {
  width: 75.55%; transition-delay: 0s;
}
.cliente-tomadores__stacked-bar.is-visible .cliente-tomadores__segment--hogar {
  width: 18.12%; transition-delay: 0.3s;
}
.cliente-tomadores__stacked-bar.is-visible .cliente-tomadores__segment--vida {
  width: 3.05%; transition-delay: 0.6s;
}
.cliente-tomadores__stacked-bar.is-visible .cliente-tomadores__segment--otros {
  width: 3.28%; transition-delay: 0.9s;
}

.cliente-tomadores__segment--autos {
  background-color: var(--color-primary);
}

.cliente-tomadores__segment--hogar {
  background-color: var(--color-accent-cream);
}

.cliente-tomadores__segment--vida {
  background-color: var(--color-accent-red);
}

.cliente-tomadores__segment--otros {
  background-color: var(--color-accent-teal);
}

/* Caption */
.cliente-tomadores__caption {
  font-family: var(--ff-primary);
  font-size: var(--fs-xs);
  line-height: var(--lh-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  margin: 48px 0 0 0;
  text-align: right;
}

/* Spacer to footer */
.cliente-datos__spacer {
  height: 52px;
}

/* ─── Responsive: tablet (768px) ─── */
@media (min-width: 768px) {
  .cliente-intro__inner {
    padding-left: var(--pad-page-x);
    padding-right: var(--pad-page-x);
  }

  .cliente-tomadores__grid {
    display: flex;
  }
}

/* ─── Tablet ─── */
@media (max-width: 1023px) {
  .cliente-hero__desktop {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 350px;
  }

  .cliente-hero__illustration {
    position: static;
    flex: 0 1 45%;
    width: 45%;
    height: auto;
    margin: 0;
  }

  .cliente-hero__content {
    flex: 1;
    order: -1;
    padding-top: var(--space-3xl);
  }

  .cliente-datos__title--desktop {
    width: auto;
  }

  .cliente-datos__stat {
    padding-left: var(--pad-page-x-mobile);
  }
}

/* ─── Mobile ─── */
@media (max-width: 767px) {
  .cliente-hero__desktop {
    flex-direction: column;
    min-height: auto;
  }

  .cliente-hero__content {
    order: -1;
  }

  .cliente-hero__illustration {
    flex: none;
    width: 100%;
    max-width: 500px;
    margin: var(--space-xl) auto 0;
  }

  .cliente-hero__title {
    font-size: var(--fs-3xl);
    line-height: var(--lh-3xl);
    letter-spacing: var(--ls-mobile);
  }

  .cliente-hero__body {
    width: auto;
    max-width: 85%;
  }

  .cliente-hero__content {
    padding-top: var(--space-9xl);
  }

  .cliente-intro__title {
    font-size: var(--fs-2xl);
    line-height: var(--lh-lg);
  }

  .cliente-datos__title--desktop {
    padding-left: var(--pad-page-x-mobile);
  }

  .cliente-datos__title {
    font-size: var(--fs-2xl);
    line-height: var(--lh-lg);
  }

  .cliente-datos__rows {
    margin-top: var(--space-3xl);
  }

  .cliente-datos__row {
    flex-direction: column;
    gap: var(--space-3xl);
  }

  .cliente-datos__row + .cliente-datos__row {
    margin-top: var(--space-3xl);
  }

  .cliente-datos__stat {
    width: 100%;
  }

  .cliente-datos__stat-icon img {
    width: 56px;
    height: 56px;
  }

  .cliente-tomadores__title {
    font-size: var(--fs-2xl);
    line-height: var(--lh-lg);
  }

  .cliente-tomadores__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    height: auto;
  }

  .cliente-datos__spacer {
    height: var(--space-3xl);
  }
}