/* =========================================================
   V28 — PROBLEMAS / FRANJA / RESEÑAS / SEPARADORES / BURBUJAS
   ========================================================= */

.seccion-problemas { isolation: isolate; }

/* Imagen central */
.problemas-imagen {
  min-height: 438px;
  border-radius: 14px;
  overflow: hidden;
  background: #eef2f0;
  box-shadow: 0 10px 26px rgba(7, 63, 57, .08);
}
.problemas-imagen img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 42% !important;
  transform: none !important;
}

/* Botones pequeños más visibles */
.problema-texto button {
  min-height: 31px;
  padding: 5px 10px 5px 13px;
  border: 1px solid #d6dfdb;
  background: #e5ebe8;
  color: #0b5547;
  box-shadow: 0 3px 9px rgba(5, 45, 41, .08);
}
.problema-texto button:hover,
.problema-texto button:focus-visible {
  background: #dce4e0;
  color: var(--verde-oscuro);
  border-color: #c9d5cf;
}

/* Tablet: imagen arriba y 6 tarjetas en orden 01-06 en dos columnas */
@media (min-width: 721px) and (max-width: 1100px) {
  .problemas-escenario {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
  }
  .problemas-imagen {
    grid-column: 1 / -1;
    order: 0;
    min-height: 360px;
    max-height: 430px;
    aspect-ratio: 16 / 8.7;
  }
  .problemas-columna { display: contents; }

  .problemas-columna-izquierda .problema-tarjeta:nth-child(1) { order: 1; }
  .problemas-columna-derecha .problema-tarjeta:nth-child(1)   { order: 2; }
  .problemas-columna-izquierda .problema-tarjeta:nth-child(2) { order: 3; }
  .problemas-columna-derecha .problema-tarjeta:nth-child(2)   { order: 4; }
  .problemas-columna-izquierda .problema-tarjeta:nth-child(3) { order: 5; }
  .problemas-columna-derecha .problema-tarjeta:nth-child(3)   { order: 6; }

  .problema-tarjeta { min-height: 164px; }
}

/* Franja verde: pasos centrados y alineados */
@media (min-width: 1001px) {
  .proceso-pasos { align-items: start; }
  .proceso-pasos li {
    display: grid;
    grid-template-rows: 52px auto;
    align-items: start;
    justify-items: center;
  }
  .proceso-pasos li > span {
    grid-row: 1;
    margin: 0;
  }
  .proceso-pasos li p {
    grid-row: 2;
    margin-top: 7px;
  }
  .proceso-pasos li:not(:last-child)::after {
    top: 26px;
    left: calc(100% + 16px);
    transform: translate(-50%, -50%);
    line-height: 1;
  }
}

/* CTA evaluación con flecha y márgenes internos correctos */
.boton-evaluacion.btn-con-flecha {
  width: min(100%, 255px);
  min-height: var(--altura-boton, 52px);
  padding-left: 22px !important;
  padding-right: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}
.boton-evaluacion .texto-boton {
  position: static !important;
  left: auto !important;
  transform: none !important;
  flex: 1 1 auto;
  text-align: left;
}
.boton-evaluacion .btn-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  color: currentColor;
}
.boton-evaluacion .btn-flecha svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

/* Separador al terminar Problemas */
.problemas-separador-inferior {
  width: min(1180px, calc(100% - 48px));
  height: 1px;
  margin: 32px auto -28px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(7, 89, 76, .08) 12%,
    rgba(7, 89, 76, .28) 50%,
    rgba(7, 89, 76, .08) 88%,
    transparent 100%
  );
  box-shadow: 0 7px 18px rgba(7, 89, 76, .08);
}

/* Reseñas: reducir ligeramente bloque 5.0/mano */
.resenas-encabezado {
  grid-template-columns: minmax(225px, 270px) minmax(0, 1fr);
}
.resenas-calificacion {
  max-width: 270px;
  min-height: 186px;
  padding: 19px 20px 18px;
  border-radius: 20px;
}
.resenas-calificacion-titulo { font-size: 19px; }
.resenas-calificacion-valor { font-size: 53px; }
.resenas-estrellas {
  font-size: 20px;
  margin-bottom: 7px;
}
.resenas-calificacion-texto {
  max-width: 132px;
  font-size: 13.5px;
}
.resenas-mano {
  top: 45px;
  right: 8px;
  width: 122px;
}

@media (max-width: 1199px) and (min-width: 700px) {
  .resenas-encabezado {
    grid-template-columns: minmax(205px, 245px) minmax(0, 1fr);
  }
  .resenas-calificacion {
    max-width: 245px;
    min-height: 180px;
    padding: 18px 19px;
  }
  .resenas-calificacion-valor { font-size: 51px; }
  .resenas-mano {
    width: 112px;
    top: 44px;
  }
}
@media (max-width: 699px) {
  .resenas-calificacion {
    width: min(100%, 272px);
    max-width: 272px;
    min-height: 184px;
    padding: 19px 20px;
  }
  .resenas-calificacion-titulo { font-size: 19px; }
  .resenas-calificacion-valor { font-size: 52px; }
  .resenas-estrellas { font-size: 20px; }
  .resenas-calificacion-texto {
    max-width: 128px;
    font-size: 13.5px;
  }
  .resenas-mano {
    width: 120px;
    top: 45px;
    right: 7px;
  }
}

/* Separador Reseñas / Blog */
.separador-resenas-blog {
  position: relative;
  z-index: 3;
  width: min(1240px, calc(100% - 48px));
  height: 1px;
  margin: -12px auto 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(7, 89, 76, .08) 10%,
    rgba(255, 195, 35, .48) 50%,
    rgba(7, 89, 76, .08) 90%,
    transparent 100%
  );
  box-shadow: 0 8px 20px rgba(7, 89, 76, .09);
}

/* Burbujas: reutilizan la animación flotar-problema existente */
.seccion-resenas,
.seccion-blog-inicio {
  position: relative;
}
.burbujas-flotantes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.burbujas-flotantes span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: .23;
  background: var(--amarillo);
  animation: flotar-problema 7.2s ease-in-out infinite;
}
.burbujas-flotantes span:nth-child(2n) {
  width: 6px;
  height: 6px;
  background: var(--verde-medio);
  opacity: .18;
}
.burbujas-flotantes span:nth-child(3n) {
  width: 11px;
  height: 11px;
  opacity: .12;
}

/* Posiciones Reseñas */
.burbujas-resenas span:nth-child(1) { left: 2.5%; top: 13%; }
.burbujas-resenas span:nth-child(2) { left: 7%; top: 48%; animation-delay: -1.2s; }
.burbujas-resenas span:nth-child(3) { left: 3%; bottom: 15%; animation-delay: -3.1s; }
.burbujas-resenas span:nth-child(4) { right: 4%; top: 19%; animation-delay: -4.4s; }
.burbujas-resenas span:nth-child(5) { right: 8%; top: 58%; animation-delay: -2.3s; }
.burbujas-resenas span:nth-child(6) { right: 2%; bottom: 14%; animation-delay: -.8s; }
.burbujas-resenas span:nth-child(7) { left: 18%; bottom: 5%; animation-delay: -5.3s; }
.burbujas-resenas span:nth-child(8) { right: 19%; top: 8%; animation-delay: -2.8s; }

/* Posiciones Blog */
.burbujas-blog span:nth-child(1) { left: 2%; top: 12%; animation-delay: -.6s; }
.burbujas-blog span:nth-child(2) { left: 5%; top: 68%; animation-delay: -3.5s; }
.burbujas-blog span:nth-child(3) { left: 15%; bottom: 4%; animation-delay: -1.8s; }
.burbujas-blog span:nth-child(4) { right: 3%; top: 17%; animation-delay: -4.6s; }
.burbujas-blog span:nth-child(5) { right: 7%; top: 58%; animation-delay: -2.1s; }
.burbujas-blog span:nth-child(6) { right: 2%; bottom: 9%; animation-delay: -5.2s; }
.burbujas-blog span:nth-child(7) { left: 29%; top: 6%; animation-delay: -3.8s; }
.burbujas-blog span:nth-child(8) { right: 28%; bottom: 3%; animation-delay: -1s; }

.seccion-resenas > .contenedor,
.seccion-blog-inicio > .contenedor {
  position: relative;
  z-index: 1;
}

/* Móvil */
@media (max-width: 720px) {
  .problemas-separador-inferior {
    width: calc(100% - 32px);
    margin-top: 24px;
    margin-bottom: -18px;
  }
  .separador-resenas-blog {
    width: calc(100% - 32px);
    margin-top: -8px;
  }
  .burbujas-flotantes span:nth-child(7),
  .burbujas-flotantes span:nth-child(8) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .burbujas-flotantes span {
    animation: none !important;
  }
}


/* =========================================================
   V29 — ajuste fino del gráfico/mano de Reseñas
   ========================================================= */
.resenas-mano {
  right: -13px !important;
}

@media (max-width: 1199px) and (min-width: 700px) {
  .resenas-mano {
    right: -11px !important;
  }
}

@media (max-width: 699px) {
  .resenas-mano {
    right: -12px !important;
  }
}


/* =========================================================
   V30 — mover TODO el bloque de calificación hacia la derecha
   y devolver la mano a su posición interna correcta.
   ========================================================= */

/* La mano vuelve a su posición natural dentro de la tarjeta. */
.resenas-mano {
  right: 8px !important;
}

@media (max-width: 1199px) and (min-width: 700px) {
  .resenas-mano {
    right: 8px !important;
  }
}

@media (max-width: 699px) {
  .resenas-mano {
    right: 7px !important;
  }
}

/* Se mueve el conjunto completo: tarjeta + mano + contenido. */
@media (min-width: 1200px) {
  .resenas-calificacion {
    margin-left: 28px;
  }
}

@media (min-width: 700px) and (max-width: 1199px) {
  .resenas-calificacion {
    margin-left: 22px;
  }
}

@media (max-width: 699px) {
  .resenas-calificacion {
    margin-left: 14px;
  }
}