/** Shopify CDN: Minification failed

Line 133:10 Unexpected "{"
Line 133:19 Expected ":"

**/
/* --- section-percentage-results.css --- */
.percentage-results {
  /* --- Variables de Configuración --- */
  --circle-size: 65px;         /* Tamaño del círculo */
  --circle-border-width: 5px;  /* Grosor del borde/relleno del círculo */
  --circle-bg-color: #e9e9e9;  /* Color de fondo del círculo (gris claro) */
  --circle-progress-color: #65b947; /* Color del progreso (verde) */
  --circle-text-color: #333333; /* Color del texto % (gris oscuro) */
  --text-color: inherit;       /* Color del texto descriptivo (heredado) */
  --line-color: rgba(0, 0, 0, 0.1); /* Color líneas divisorias */
  --gap-size: 20px;            /* Espacio entre círculo y texto */
  --item-spacing: 15px;        /* Espacio vertical entre elementos */
  /* --- Fin Variables --- */
}

.percentage-results .page-width {
  max-width: 750px;
}

.percentage-results__title {
  margin: 0 auto 30px auto;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.3;
}
.percentage-results__title.text-left { margin-left: 0; }
.percentage-results__title.text-right { margin-right: 0; }

.percentage-results__list {
  display: flex;
  flex-direction: column;
  gap: var(--item-spacing);
}

/* --- Contenedor de cada item (Círculo + Texto) --- */
.percentage-results__item {
  display: flex; /* IMPORTANTE: Pone los hijos (círculo y texto) en fila */
  align-items: center; /* Centra verticalmente el círculo y el texto */
  gap: var(--gap-size); /* Espacio entre el círculo y el texto */
  padding-bottom: var(--item-spacing);
}

.percentage-results__item--with-line {
   border-bottom: 1px solid var(--line-color);
}
.percentage-results__item:last-child {
  border-bottom: none;
   padding-bottom: 0;
}

/* Contenedor específico del gráfico circular */
.percentage-results__circle-container {
  flex-shrink: 0; /* Evita que el círculo se encoja si el texto es largo */
}

/* --- Estilo del Círculo con Relleno (conic-gradient) --- */
.percentage-results__circle-graphic {
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  display: grid; /* Usado para centrar fácilmente el contenido */
  place-items: center; /* Centra el div interior */
  /* Dibuja el fondo y el progreso verde basado en el ángulo calculado */
  background: conic-gradient(
    var(--circle-progress-color) var(--angle),
    var(--circle-bg-color) var(--angle)
  );
  position: relative;
}

/* Círculo interior blanco para crear el efecto de anillo */
.percentage-results__circle-inner {
  width: calc(var(--circle-size) - (var(--circle-border-width) * 2));
  height: calc(var(--circle-size) - (var(--circle-border-width) * 2));
  background-color: var(--section-background, #fff); /* Blanco o fondo de sección */
  border-radius: 50%;
  display: grid; /* Usado para centrar el texto del porcentaje */
  place-items: center; /* Centra el texto */
}

/* Texto del porcentaje dentro del círculo */
.percentage-results__percentage-text {
  font-size: calc(var(--circle-size) * 0.28);
  font-weight: bold;
  color: var(--circle-text-color);
  line-height: 1;
}

/* --- Contenedor del Texto Descriptivo --- */
.percentage-results__text-content {
  flex-grow: 1; /* Permite que ocupe el espacio restante */
}

.percentage-results__text {
  margin: 0;
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.5;
}
.percentage-results__text p {
    margin: 0;
}

/* Alineación general del texto (Izquierda/Centro/Derecha) */
.percentage-results.text-left .percentage-results__item { justify-content: flex-start; }
.percentage-results.text-center .percentage-results__item { justify-content: center; }
.percentage-results.text-center .percentage-results__text-content { text-align: center; }
.percentage-results.text-right .percentage-results__item { justify-content: flex-end; text-align: right;}
.percentage-results.text-right .percentage-results__text-content { text-align: right; }

/* Responsividad básica */
@media screen and (max-width: 749px) {
  .percentage-results {
    --circle-size: 55px;
    --gap-size: 15px;
  }
  .percentage-results__title {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }
   .percentage-results__text {
     font-size: 0.95rem;
   }
}

/* Padding de la sección */
.section-{{ section.id }}-padding {
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
}