/* Gráficos de producto en SVG/HTML (20DEDOS, 13/11/2026) */
.grafico-arco { max-width: 1000px; margin: 30px auto 0; }
.grafico-arco__svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-arco .g-arc { fill: none; stroke-width: 24; }
.grafico-arco .g-dots { stroke: #19c3fd; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0 17; }
.grafico-arco .g-ring { fill: #fff; stroke: #19c3fd; stroke-width: 5; }
.grafico-arco .g-label { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 21px; fill: #78787e; }
.grafico-arco .g-brand { font-family: 'Montserrat', sans-serif; font-weight: 200; font-size: 96px; fill: #8a8a8a; letter-spacing: 2px; }
.grafico-arco .g-reg { font-size: 34px; }
.grafico-arco__lista { display: none; list-style: none; padding: 0; margin: 0; text-align: left; }
.grafico-arco__lista li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid #eef2f6; color: #3a3a3a; font-size: 15px; line-height: 1.4; }
.grafico-arco__lista li:before { content: ""; position: absolute; left: 4px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(#00abff, #00e0fc); box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px #19c3fd; }
.grafico-arco__lista li:first-child { font-weight: 500; color: #175296; }
@media (max-width: 767px) {
  .grafico-arco__svg { display: none; }
  .grafico-arco__lista { display: block; }
}