/* =====================
   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 {
    /* La reserva la declara cada producto en `advantages_titulo_renglones`, que
       el partial emite como propiedad personalizada. Un renglón por defecto:
       ninguno de los seis títulos llega a tres —medido: uno en Fotovoltaico,
       Microrredes y Electromovilidad; dos en BESS, UPS y el primero de Solfium
       Care— y reservar tres dejaba 76px de hueco muerto sobre la descripción.
       BESS pide dos, porque sus tres títulos los ocupan y así uno que se
       acorte no descoloca a sus vecinos.
       El tope de tres se queda: es lo que impide que un título largo desborde
       la tarjeta. */
    min-height: calc(38px * var(--advantages-titulo-renglones, 1));
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
            line-clamp: 3;
    overflow: hidden;
  }

  /* Mínimo y máximo con el mismo número, que cada producto declara en
     `advantages_texto_renglones`: el bloque va anclado abajo, así que si la
     descripción crece la tarjeta descoloca a sus vecinas. Siete era el valor
     único y ninguno de los seis pasa de cinco —medido a 353px de tarjeta:
     BESS 4/4/5, UPS 4/4/4, Microrredes 3/4/3 y tres a 3/3/3—, así que sobra
     en todos; se baja donde se pide. */
  .advantages .product-card__text {
    min-height: calc(30px * var(--advantages-texto-renglones, 7));
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--advantages-texto-renglones, 7);
            line-clamp: var(--advantages-texto-renglones, 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;
}

/* Los cinco títulos de ventajas son de dos renglones por diseño, y antes lo
   conseguían con un <br /> guardado en el campo. Sin él caben en una sola línea
   de hasta 1200px dentro del contenedor de 1252px, así que el corte lo tiene que
   pedir el CSS: este tope los obliga a dos renglones y `balance` los reparte. */
.advantages__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-navy);
  margin: 0;
  max-width: 700px;
}

.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);
}

/* Centrado y en caja alta, como el Figma. El `text-transform` evita tener que
   escribir el rótulo en mayúsculas en los seis productos, que además dejaría
   «GARANTÍA SOLFIUM» gritando en el admin y en el `<title>` si algún día se
   reutiliza el campo. */
.process-steps__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: 56px;
  color: var(--color-navy);
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 34px;
}

.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,
  .process-steps__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;
  }

  /* Solfium Care se queda con la tarjeta de escritorio: la foto de fondo, el
     velo y el texto blanco encima. El apilado de arriba no le aplica. */
  .advantages--sobre-foto .product-card {
    height: 528px;
    justify-content: flex-end;
    gap: 28px;
    padding: 24px;
    overflow: hidden;
  }

  .advantages--sobre-foto .product-card__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    height: 100%;
    border-radius: 0;
  }

  .advantages--sobre-foto .product-card::after {
    content: '';
  }

  .advantages--sobre-foto .product-card__title {
    font-size: 28px;
    line-height: 38px;
    color: var(--color-white-pure);
  }

  .advantages--sobre-foto .product-card__text {
    color: #f4f4f4;
  }
}