/* --------------------------------------------------
   Ajuste de ancho mínimo y máximo de las cards
   -------------------------------------------------- */
.fppd-painpoints .card {
  width: 90%;               /* Ocupa el 90% del ancho de su columna */
  max-width: 600px;         /* Pero no pase de 600px */
}

/* Opcional: en pantallas muy grandes, que no queden gigantescas */
@media (min-width: 1200px) {
  .fppd-painpoints .card {
    width: 70%;
    max-width: 650px;
  }
}

/* --------------------------------------------------
   Iconos personalizados para las listas (CSS corregido)
   -------------------------------------------------- */

/* Lista Dolor: usamos cross.png */
.fppd-block--pain .card ul {
  list-style: none;
  padding-left: 0;
}
.fppd-block--pain .card ul li {
  position: relative;
  padding-left: 2em; /* espacio para el icono */
  margin-bottom: 0.75em;
}
.fppd-block--pain .card ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.2em;
  height: 1.2em;
  background-image: url("../img/cross.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Lista Solución: usamos palomita-verde.png */
.fppd-block--solution .card ul {
  list-style: none;
  padding-left: 0;
}
.fppd-block--solution .card ul li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.75em;
}
.fppd-block--solution .card ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.2em;
  height: 1.2em;
  background-image: url("../img/palomita-verde.png");
  background-size: contain;
  background-repeat: no-repeat;
}



/* --------------------------------------------------
   Corrección para móvil (sin cambiar estructura)
   -------------------------------------------------- */
@media (max-width: 767px) {
  .fppd-painpoints-section .row {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .fppd-painpoints-section .col-md-6 {
    width: 100% !important;
    position: relative !important;
  }
  
  .fppd-painpoints-section .card.position-absolute {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 90% !important;
    margin: 20px auto !important;
    max-width: 100% !important;
  }

}

.fppd-painpoints-section {
  padding: 0px !important;
}


/* --------------------------------------------------
   Estilos para la Onda de Canvas
   -------------------------------------------------- */

.fppd-painpoints-section {
  padding: 0px !important; /* Asegura que no haya padding global si la onda lo gestiona */
}

/* Contenedor del Canvas */
.section-divider__wave-canvas-wrapper {
    position: relative;
    width: 100%;
    height: 100px; /* Altura del área donde se dibujará la onda. Ajusta esto según el efecto deseado. */
    margin-top: -70px; /* Negativo para superponer sobre el elemento siguiente (el título) */
    z-index: 2; /* Para que la onda esté por encima del título */
    overflow: hidden; /* Muy importante para recortar la parte de la onda que sale del área visible */
}

/* El elemento Canvas en sí */
#painpoints-wave-canvas {
    display: block; /* Elimina cualquier espacio extra debajo del canvas */
    width: 100%;
    height: 100%; /* El canvas toma la altura de su wrapper */
    position: absolute;
    bottom: 0; /* Asegura que la base de la onda esté pegada a la parte inferior del wrapper */
    left: 0;
}

/* Ajustes para el título */
.container-fluid.px-0 h2 {
    margin-bottom: 0 !important; /* Elimina cualquier margen inferior predeterminado de Bootstrap */
    position: relative;
    z-index: 1; /* Asegura que el título esté debajo de la onda, si la onda lo superpone */
    /* El padding ya se maneja en el PHP como 'padding: 3rem 0 1.5rem;' */
}