/* =====================
   CHECK CARDS — 3 highlights bajo el hero
   ===================== */
.check-cards {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg-white);
}

.check-cards__inner {
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  padding-inline: calc(2rem + 30px);
}

.check-cards__swiper {
  width: 100%;
}

.check-cards__swiper .swiper-wrapper {
  align-items: stretch;
}

/* ≥576px: swiper queda deshabilitado (ver JS) y se muestra como fila normal */

/* Ventajas competitivas: sobre la foto el bloque de texto va anclado abajo, así
   que su alto decide dónde arranca el título. Reservar un mínimo no bastaba —el
   texto lo desbordaba en cuanto la columna se estrechaba— así que se fijan los
   dos: el título en 3 renglones exactos y la descripción en 7. Mínimo y máximo,
   no solo mínimo: con el máximo suelto un párrafo largo seguía empujando el
   bloque hacia arriba, y con el mínimo suelto uno corto lo dejaba caer.

   `line-clamp` corta por renglón y añade puntos suspensivos; recortar con
   `max-height` a secas partiría la última línea por la mitad.

   Solo de 769px en adelante: hasta 768 —el iPad en vertical— la tarjeta se
   apila y esto sobra. Ver el bloque de max-width al final del archivo. */
@media (min-width: 769px) {
  .advantages .product-card__title {
    min-height: calc(38px * 3);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
            line-clamp: 3;
    overflow: hidden;
  }

  .advantages .product-card__text {
    min-height: calc(30px * 7);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
            line-clamp: 7;
    overflow: hidden;
  }
}

@media (min-width: 576px) {
  .check-cards__swiper .swiper-wrapper {
    flex-direction: row;
    gap: 28px;
    transform: none !important;
  }

  .check-cards__swiper .swiper-slide {
    flex: 1 1 0 !important;
    width: auto !important;
  }
}

.check-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  min-height: 260px;
  padding: 25px;
  background-color: var(--color-white);
  border: 1.5px solid #e0e0e0;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.check-card__icon {
  width: 66px;
  height: 66px;
}

.check-card__text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 30px;
  color: var(--color-navy);
  margin: 0;
}

/* =====================
   ADVANTAGES — "Ventajas competitivas" (reusa .product-card)
   ===================== */
.advantages {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg-white);
}

.advantages__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  padding-inline: calc(2rem + 30px);
}

.advantages__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.advantages__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-navy);
  margin: 0;
}

.advantages__swiper {
  width: 100%;
}

.advantages__swiper .swiper-wrapper {
  align-items: stretch;
}

/* =====================
   SCOPE INTRO — "Alcance del servicio" (solo texto)
   ===================== */
.scope-intro {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg-white);
}

.scope-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  padding-inline: calc(2rem + 30px);
  text-align: center;
}

.scope-intro__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-navy);
  margin: 0;
}

.scope-intro__text {
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: 39px;
  color: var(--color-navy);
  max-width: 1064px;
  margin: 0;
}

.scope-intro__text strong {
  font-weight: var(--fw-semibold);
  color: var(--color-orange);
}

/* =====================
   PROCESS STEPS — Lista de 5 pasos del proyecto
   ===================== */
.process-steps {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg-white);
}

.process-steps__inner {
  max-width: 1064px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.process-steps__swiper {
  width: 100%;
}

.process-steps__swiper .swiper-wrapper {
  align-items: stretch;
}

/* ≥576px: swiper queda deshabilitado (ver JS) y se muestra como lista vertical normal */
@media (min-width: 576px) {
  .process-steps__swiper .swiper-wrapper {
    flex-direction: column;
    gap: 14px;
    transform: none !important;
  }

  .process-steps__swiper .swiper-slide {
    width: 100% !important;
  }
}

.process-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 28px;
  background-color: #f8f8f8;
  border-radius: 16px;
}

.process-step__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.process-step__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.process-step__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 30px;
  color: var(--color-navy);
  margin: 0;
}

.process-step__text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: #555;
  margin: 0;
}

/* =====================
   RELATED PRODUCTS — "Otros productos"
   (header reusa .cases__header / .cases__title / .cases__arrows)
   ===================== */
.related-products {
  padding-block: var(--space-3xl);
  background-color: var(--color-bg-white);
}

.related-products__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: calc(var(--container-max) + 4rem);
  margin-inline: auto;
  padding-inline: calc(2rem + 30px);
}

.related-products__swiper {
  width: 100%;
}

.related-products__swiper .swiper-wrapper {
  align-items: stretch;
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 10px;
  background-color: var(--color-white);
  border-radius: 16px;
}

.related-card__media {
  height: 176px;
  border-radius: 8px;
  overflow: hidden;
}

.related-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 30px;
  color: var(--color-navy);
  margin: 0;
  /* Los títulos van de uno a tres renglones según el producto; se reserva el
     alto del más largo para que los enlaces "Ver más" queden alineados. */
  min-height: calc(30px * 3);
}

.related-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-icon);
}

.related-card__cta svg {
  width: 20px;
  height: 20px;
}

/* =====================
   RESPONSIVE — PRODUCTO INTERIOR
   ===================== */
@media (max-width: 991.98px) {
  .scope-intro__text {
    font-size: var(--fs-lg);
    line-height: 32px;
  }

  .process-step {
    flex-direction: column;
  }
}

@media (max-width: 575.98px) {
  .advantages__title,
  .scope-intro__title {
    font-size: 24px;
    line-height: 34px;
  }

  .scope-intro__text {
    font-size: var(--fs-md);
    line-height: 28px;
  }

  .process-step {
    padding: 20px;
  }
}

/* ---- Reset mobile: el padding alineado al navbar (calc(2rem + 30px)) solo aplica en desktop; en mobile se usa el gutter estándar ---- */
@media (max-width: 991.98px) {
  .check-cards__inner {
    padding-inline: var(--container-pad);
  }

  .advantages__inner {
    padding-inline: var(--container-pad);
  }

  .scope-intro__inner {
    padding-inline: var(--container-pad);
  }

  .related-products__inner {
    padding-inline: var(--container-pad);
  }
}

/* ---- Ventajas competitivas hasta 768px: imagen arriba, texto debajo ----

   Sobre la foto, el bloque de texto va anclado abajo y crece hacia arriba, así
   que el título arranca a distinta altura en cada tarjeta según cuántos
   renglones ocupe. La reserva de `min-height` lo tapaba mientras el texto cupo
   en 2 y 5 renglones; en una columna de 296px se va a 3 o 4 y deja de alcanzar.
   A 768px —el iPad en vertical— la tarjeta mide 358px y un título ya se va a 3
   renglones, así que el apilado llega hasta ahí. De 769 en adelante el defecto
   sigue: medido en BESS, 38px de desfase a 992 y 68px a 1200; solo desaparece
   a partir de ~1320, donde la tarjeta llega a 383px y todos los títulos caben
   en 2 renglones. Queda anotado en la deuda técnica.

   Apilando —imagen, título, descripción— el título empieza siempre justo
   debajo de la imagen, que mide igual en todas. No hay números que ajustar y no
   se rompe cuando alguien edita un texto. */
@media (max-width: 768px) {
  .advantages .product-card {
    height: auto;
    justify-content: flex-start;
    gap: 16px;
    padding: 0;
    overflow: visible;
  }

  /* La imagen deja de ser fondo y pasa a ser el primer bloque de la columna. */
  .advantages .product-card__media {
    position: static;
    z-index: auto;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
  }

  /* El degradado solo existía para que el texto blanco se leyera sobre la foto. */
  .advantages .product-card::after {
    content: none;
  }

  /* La reserva de alto no aplica acá, pero se anula por si el corte se mueve:
     apilado y reserva juntos dejarían un hueco entre título y descripción. */
  .advantages .product-card__title {
    font-size: 22px;
    line-height: 30px;
    color: var(--color-navy);
    min-height: 0;
  }

  .advantages .product-card__text {
    color: var(--color-navy-light);
    min-height: 0;
  }
}