/* Los widgets mineros (portal/widgets.py). Se acomodan al ancho de donde los pongan, con consultas de contenedor: sirven igual a lo ancho y en
   la columna. Gramática de imprenta: filetes, tinta y un solo acento para lo elegido. Sin radios ni sombras. */
.widget { container-type: inline-size; padding-block: 8px 48px; min-width: 0; }
.lateral .widget { padding-block: 0; }
.w-bajada { max-width: 62ch; margin-bottom: 18px; font-size: var(--t-base); line-height: 1.5; color: var(--tinta-2); }
.w-cuerpo { display: grid; gap: 20px; align-items: start; }
.w-pie, .w-nota { margin-top: 14px; font: 500 var(--t-meta)/1.45 var(--sans); color: var(--tinta-2); }
.w-pie a, .w-enlace a { color: var(--rojo); text-decoration: underline; text-underline-offset: 3px; }
.w-enlace { margin-top: 12px; font: 600 var(--t-ui)/1.3 var(--sans); }
.w-cifra { font: 700 min(2.5rem, var(--letra-max))/1 var(--fuente-titular); color: var(--rojo); font-variant-numeric: lining-nums; }
.w-marco { display: grid; justify-items: center; gap: 10px; margin: 0; padding: 16px; background: var(--papel-2); }
.w-marco figcaption { justify-self: start; font: 500 var(--t-meta)/1.4 var(--sans); color: var(--tinta-2); }
.w-marco figcaption b { font: 700 1.75rem/1 var(--fuente-titular); color: var(--tinta); font-variant-numeric: lining-nums; }
.w-mapa { height: auto; width: min(100%, 340px); max-height: 460px; }
.w-marco--mini { padding: 8px; }
.w-marco--mini .w-mapa { max-height: 220px; }
.widget--unidad .mapa__mina.es-elegida { r: 10; }
.mapa__mina.es-activo { fill: var(--rojo); }
.w-marco--acento .mapa__mina { fill: var(--rojo); }
.mapa__mina { fill-opacity: .9; }
.widget--mineral .mapa__mina:not(.es-activo) { fill: var(--tinta); fill-opacity: .16; }
.w-pin { fill: var(--papel); font: 700 8px var(--sans); text-anchor: middle; pointer-events: none; }
.w-detalle { min-width: 0; }
.w-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.w-lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--filete); }
.w-lista li[hidden] { display: none; }
.w-lista a { font: 600 var(--t-s)/1.3 var(--fuente-titular); }
.w-lista a:hover { color: var(--rojo); }
.w-lista span { font: 500 var(--t-meta)/1.5 var(--sans); color: var(--tinta-2); }
.w-detalle .w-lista { max-height: 420px; overflow-y: auto; scrollbar-width: thin; padding-right: 8px; }
.w-lista--suelta { margin: 6px 0 12px; }
.w-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.w-chip { min-height: 40px; padding: 0 10px; border: 1px solid var(--filete); background: var(--papel); color: var(--tinta); font: 600 var(--t-meta)/1 var(--sans); cursor: pointer; }
.w-chip b { font-family: var(--fuente-titular); font-size: 1rem; }
.w-chip span { margin-left: 2px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.w-chip:hover { border-color: var(--tinta); }
.w-chip[aria-pressed="true"] { border-color: var(--rojo); background: var(--rojo); color: var(--sobre-acento); }
.w-chip[aria-pressed="true"] span { color: inherit; }

/* Perú en 3D: una maqueta dibujada a tinta */
.relieve { margin: 0; padding: 12px; background: var(--papel-2); }
.relieve svg { display: block; width: 100%; max-height: 560px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.relieve svg.es-girando { cursor: grabbing; }
.relieve__sombra { fill: #b9b4a9; }
.relieve__tierra { fill: #e3e0d8; stroke: #b9b4a9; stroke-width: 1; }
.relieve__col { cursor: pointer; outline: 0; }
.relieve__cara--0 { fill: var(--tinta); }
.relieve__cara--1 { fill: color-mix(in srgb, var(--tinta) 72%, var(--papel)); }
.relieve__tapa { fill: color-mix(in srgb, var(--tinta) 45%, var(--papel)); }
.relieve__col:hover .relieve__tapa { fill: var(--rojo); }
.relieve__col.es-activo .relieve__cara--0 { fill: color-mix(in srgb, var(--rojo) 78%, #000); }
.relieve__col.es-activo .relieve__cara--1 { fill: var(--rojo); }
.relieve__col.es-activo .relieve__tapa { fill: color-mix(in srgb, var(--rojo) 55%, var(--papel)); }
.relieve__col:focus-visible .relieve__tapa { stroke: var(--rojo); stroke-width: 2; }
.relieve__rotulo { fill: var(--tinta); stroke: var(--papel-2); stroke-width: 3px; paint-order: stroke; font: 700 12px var(--sans); text-anchor: middle; pointer-events: none; }
.w-giro { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

/* Regiones en mosaico: el cuadro se oscurece con el número, y lo elegido va en el acento */
.mosaico { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; max-width: 420px; }
.mosaico__celda { display: grid; align-content: center; justify-items: center; aspect-ratio: 1; padding: 0; border: 1px solid var(--filete); background: color-mix(in srgb, var(--tinta) var(--tono), var(--papel)); color: var(--tinta); font: 600 clamp(.6875rem, 2.8cqw, .8125rem)/1.1 var(--sans); cursor: pointer; }
.mosaico__celda b { font: 700 1.0625rem/1.1 var(--fuente-titular); font-variant-numeric: lining-nums; }
.mosaico__celda[style*="--tono:5"], .mosaico__celda[style*="--tono:6"], .mosaico__celda[style*="--tono:7"], .mosaico__celda[style*="--tono:8"], .mosaico__celda[style*="--tono:9"], .mosaico__celda[style*="--tono:100"] { color: var(--papel); }
.mosaico__celda:disabled { background: var(--papel-2); color: var(--tinta-2); cursor: default; }
.mosaico__celda:hover:not(:disabled) { border-color: var(--rojo); }
.mosaico__celda.es-activo { border-color: var(--rojo); background: var(--rojo); color: var(--sobre-acento); }

/* Tabla de minerales */
.tabla-min { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.elemento { display: grid; grid-template-columns: 1fr auto; padding: 8px; border: 1px solid var(--tinta); background: var(--papel); color: var(--tinta); text-align: left; cursor: pointer; font-family: var(--sans); }
.elemento i { grid-column: 1; font: 500 var(--t-rotulo)/1.2 var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.elemento b { grid-column: 1 / -1; font: 700 2rem/1.1 var(--fuente-titular); }
.elemento span { grid-column: 1 / -1; font: 500 var(--t-rotulo)/1.3 var(--sans); }
.elemento em { grid-column: 2; grid-row: 1; font: 700 var(--t-meta)/1.2 var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.elemento:hover { border-color: var(--rojo); color: var(--rojo); }
.elemento.es-activo { border-color: var(--rojo); background: var(--rojo); color: var(--sobre-acento); }

/* Los grupos en barras */
.barras { margin: 0; padding: 0; list-style: none; }
.barras > li { border-top: 1px solid var(--filete); }
.barras summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 9px 0; cursor: pointer; list-style: none; }
.barras summary::-webkit-details-marker, .testigo summary::-webkit-details-marker { display: none; }
.barras__nombre { font: 600 var(--t-s)/1.3 var(--fuente-titular); }
.barras__pista { grid-column: 1 / -1; grid-row: 2; display: block; height: 10px; background: var(--papel-2); }
.barras__pista i { display: block; height: 100%; background: var(--tinta); }
.barras > li:first-child .barras__pista i { background: var(--rojo); }
.barras summary b { font: 700 var(--t-m)/1 var(--fuente-titular); font-variant-numeric: lining-nums; }
.barras summary:hover .barras__nombre { color: var(--rojo); }

/* Quién es dueño: la mina entera es el 100 % */
.socios { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.socios .titular span { margin-left: 4px; font: 500 var(--t-meta)/1.3 var(--sans); color: var(--tinta-2); }
.socios__barra { display: flex; height: 18px; margin: 8px 0; gap: 2px; }
.socios__parte { display: block; min-width: 2px; }
.socios__parte--0 { background: var(--rojo); }
.socios__parte--1 { background: var(--tinta); }
.socios__parte--2 { background: color-mix(in srgb, var(--tinta) 55%, var(--papel)); }
.socios__parte--3 { background: color-mix(in srgb, var(--tinta) 25%, var(--papel)); }
.socios__parte--resto { background: repeating-linear-gradient(135deg, var(--filete) 0 3px, var(--papel) 3px 6px); }
.socios__nombres { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font: 500 var(--t-meta)/1.4 var(--sans); }
.socios__nombres i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; }
.socios__nombres b { font-variant-numeric: tabular-nums; }

/* Proyectos en cartera */
.widget--cartera .subtitulo { margin: 16px 0 4px; }
.widget--cartera .w-bajada { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.cartera { display: grid; margin: 0; padding: 0; list-style: none; column-gap: 32px; }
.cartera li { display: grid; gap: 2px; align-content: start; padding: 10px 0; border-top: 1px solid var(--filete); }
.cartera a:hover { color: var(--rojo); }
.cartera span { font: 500 var(--t-meta)/1.4 var(--sans); color: var(--tinta-2); }
.cartera__dueno { color: var(--tinta) !important; }

/* Testigo de perforación */
.testigo { margin: 0; padding: 0; list-style: none; }
.testigo summary { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; cursor: pointer; list-style: none; }
.testigo__capa { display: block; height: var(--alto); border: 1px solid var(--tinta); border-top-width: 0; background-color: var(--papel-2); }
.testigo > li:first-child .testigo__capa { border-top-width: 1px; }
.testigo__capa--cu { background-image: repeating-linear-gradient(45deg, var(--rojo) 0 2px, transparent 2px 7px); }
.testigo__capa--au { background-image: radial-gradient(var(--tinta) 1.5px, transparent 2px); background-size: 8px 8px; }
.testigo__capa--ag { background-image: repeating-linear-gradient(0deg, var(--tinta) 0 1px, transparent 1px 6px); }
.testigo__capa--zn { background-image: repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 6px); }
.testigo__capa--pb { background-image: repeating-linear-gradient(135deg, var(--tinta) 0 3px, transparent 3px 7px); }
.testigo__capa--fe { background-color: color-mix(in srgb, var(--tinta) 75%, var(--papel)); }
.testigo__capa--mo, .testigo__capa--sn { background-image: repeating-linear-gradient(45deg, var(--tinta) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, var(--tinta) 0 1px, transparent 1px 5px); }
.testigo summary > span { font: 500 var(--t-meta)/1.4 var(--sans); color: var(--tinta-2); }
.testigo summary strong { display: block; font: 600 var(--t-s)/1.25 var(--fuente-titular); color: var(--tinta); }
.testigo summary:hover strong { color: var(--rojo); }
.testigo .w-lista--suelta { margin: 4px 0 10px 70px; }

/* La unidad de hoy */
.unidad { display: grid; gap: 16px; }
.unidad a:hover { color: var(--rojo); }
.unidad__ficha { display: grid; gap: 8px; margin: 12px 0 0; }
.unidad__ficha dt { font: 700 var(--t-rotulo)/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.unidad__ficha dd { margin: 1px 0 0; font: 500 var(--t-ui)/1.4 var(--sans); }

/* Las noticias en el mapa */
.pines { margin: 0; padding: 0; list-style: none; counter-reset: pin; }
.pines li { counter-increment: pin; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 8px; padding: 10px 0; border-top: 1px solid var(--filete); }
.pines li::before { content: counter(pin); grid-row: span 2; font: 700 1.25rem/1 var(--fuente-titular); color: var(--rojo); font-variant-numeric: lining-nums; }
.pines strong { font: 600 var(--t-meta)/1.4 var(--sans); color: var(--tinta-2); }
.pines a { font: 600 var(--t-s)/1.3 var(--fuente-titular); }
.pines a:hover { color: var(--rojo); }

/* Dos mapas, uno al lado del otro cuando hay ancho */
.dos-mapas { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

@container (min-width: 640px) {
  .w-cuerpo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; }
  .widget--mosaico .w-cuerpo, .widget--tabla .w-cuerpo { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .cartera { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .unidad { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
  .barras { columns: 2; column-gap: 40px; }
  .barras > li { break-inside: avoid; }
}
@container (max-width: 320px) { .dos-mapas { grid-template-columns: minmax(0, 1fr); } }

/* Precios de los metales (portal/cotizaciones.py). Sutiles: tinta, filetes y números tabulares. Sube y baja se dicen con flecha y signo,
   no con verde y rojo: el sistema tiene un solo acento, y en cada medio es otro color. */
.precio__cambio { white-space: nowrap; font: 600 var(--t-meta)/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.precio__cambio.es-sube, .precio__cambio.es-baja { color: var(--tinta); }
.precio__cambio > span[aria-hidden] { font-size: .75em; }
.precio__curva { width: 60px; height: 18px; overflow: visible; }
.precio__curva polyline { fill: none; stroke: var(--tinta); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.precio__curva circle { fill: var(--rojo); }

/* La franja: una cinta que corre sola. Arriba queda debajo de la cabecera; abajo, justo antes del pie. */
.widget--franja-precios { padding-block: 0; }
.zona--abajo .widget--franja-precios { margin-top: 24px; }
.zona--arriba .widget--franja-precios { margin-bottom: 8px; }
.precios { display: flex; align-items: stretch; min-height: 44px; border-block: 1px solid var(--filete); font-family: var(--sans); }
.precios__rotulo { display: flex; flex-direction: column; justify-content: center; flex: none; gap: 1px; padding: 4px 14px 4px 0; border-right: 1px solid var(--filete); font: 500 .75rem/1.15 var(--sans); color: var(--tinta-2); }
.precios__rotulo b { font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta); }
.precios__ventana { position: relative; flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.precios__ventana:focus-visible { outline-offset: -2px; }
.precios__cinta { display: flex; width: max-content; height: 100%; animation: precios-corren var(--precios-tiempo, 48s) linear infinite; }
.precios__ventana:is(:hover, :focus-within) .precios__cinta { animation-play-state: paused; }
.precios__lista { display: flex; margin: 0; padding: 0; list-style: none; }
.precio { display: flex; align-items: center; gap: 7px; padding: 0 22px; border-right: 1px solid var(--filete); white-space: nowrap; font-size: var(--t-meta); }
.precio__simbolo { min-width: 2.2em; padding: 2px 4px; border: 1px solid var(--tinta); font: 700 .75rem/1 var(--sans); text-align: center; }
.precio__nombre { font-weight: 600; }
.precio__valor { font: 700 1.0625rem/1 var(--fuente-titular); font-variant-numeric: lining-nums tabular-nums; }
.precio__unidad { color: var(--tinta-2); font-size: .75rem; }
.precios__fuente { display: flex; align-items: center; flex: none; padding-left: 14px; border-left: 1px solid var(--filete); font: 600 .75rem/1.2 var(--sans); color: var(--tinta-2); }
.precios__fuente:hover { color: var(--rojo); }
@keyframes precios-corren { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .precios__ventana { overflow-x: auto; mask-image: none; scrollbar-width: thin; }
  .precios__cinta { animation: none; }
  .precios__lista[aria-hidden] { display: none; }
}
@media (max-width: 640px) {
  .precios__rotulo span, .precio__curva, .precio__nombre, .precios__fuente span { display: none; }
  .precios__fuente { padding-left: 10px; }
  .precio { padding: 0 14px; }
}
.lateral .precios { flex-wrap: wrap; }
.lateral .precios__rotulo { flex-direction: row; align-items: baseline; gap: 8px; width: 100%; padding: 8px 0; border-right: 0; border-bottom: 1px solid var(--filete); }
.lateral .precios__ventana { min-height: 44px; }
.lateral .precios__fuente { width: 100%; padding: 6px 0; border-left: 0; border-top: 1px solid var(--filete); }
.lateral .precios .precio__curva, .lateral .precios .precio__nombre { display: none; }

/* Los gráficos: línea en tinta sobre papel de archivo, el último punto en el acento */
.grafico { margin: 0; min-width: 0; }
.grafico__svg { display: block; width: 100%; height: clamp(140px, 34cqw, 240px); background: var(--papel-2); border-bottom: 1px solid var(--tinta); }
.grafico__linea { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; }
.grafico__area { fill: color-mix(in srgb, var(--tinta) 7%, transparent); }
.grafico__eje { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font: 500 .75rem/1.3 var(--sans); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.grafico__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 10px; font-family: var(--sans); }
.grafico__nombre { font: 700 var(--t-s)/1.2 var(--fuente-titular); }
.grafico__nombre span, .grafico__cifra { font: 500 var(--t-meta)/1.3 var(--sans); color: var(--tinta-2); }
.grafico__cifra b { font: 700 1.75rem/1 var(--fuente-titular); color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }

/* Gráficos que rotan: se deslizan con el dedo; con JavaScript, además pasan solos */
.carrusel__botones { margin-bottom: 12px; }
.carrusel__pista { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__panel { scroll-snap-align: start; }
.carrusel__pausa { margin-left: auto; }

/* La tabla del día */
.cotizaciones { width: 100%; border-collapse: collapse; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.cotizaciones th, .cotizaciones td { padding: 9px 8px 9px 0; border-top: 1px solid var(--filete); text-align: left; vertical-align: middle; }
.cotizaciones thead th { padding-top: 0; border-top: 0; font: 600 .75rem/1.2 var(--sans); color: var(--tinta-2); text-transform: uppercase; letter-spacing: .06em; }
.cotizaciones tbody th { font: 600 var(--t-s)/1.25 var(--fuente-titular); }
.cotizaciones tbody th b { display: inline-block; min-width: 2.2em; margin-right: 4px; padding: 2px 4px; border: 1px solid var(--tinta); font: 700 .75rem/1 var(--sans); text-align: center; vertical-align: 2px; }
.cotizaciones__valor { font: 700 1.0625rem/1 var(--fuente-titular); font-variant-numeric: lining-nums tabular-nums; }
.cotizaciones__unidad { display: block; margin-top: 2px; font-size: .75rem; color: var(--tinta-2); }
.cotizaciones td:last-child, .cotizaciones th:last-child { padding-right: 0; }
@container (max-width: 440px) { .cotizaciones__curva { display: none; } .cotizaciones tbody th b { display: none; } }

/* Mes a mes: siete metales, doce barras cada uno */
.meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 24px 28px; }
.mes { margin: 0; padding-top: 10px; border-top: 1px solid var(--tinta); min-width: 0; }
.mes figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 10px; }
.mes__nombre { font: 600 var(--t-s)/1.2 var(--fuente-titular); }
.mes__nombre b { margin-right: 4px; font: 700 .75rem/1 var(--sans); color: var(--tinta-2); }
.mes__cifra { font: 700 1.0625rem/1 var(--fuente-titular); font-variant-numeric: lining-nums tabular-nums; }
.mes__cifra span { font: 500 .75rem var(--sans); color: var(--tinta-2); }
.mes figcaption .precio__cambio { width: 100%; }
.mes__barras { position: relative; display: flex; gap: 3px; height: 84px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--filete); }
.mes__barras::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px solid var(--tinta); }
.mes__barras li { position: relative; flex: 1; }
.mes__barras i { position: absolute; inset: auto 0 50%; height: var(--alto); background: color-mix(in srgb, var(--tinta) 40%, var(--papel)); }
.mes__barras .es-baja i { inset: 50% 0 auto; background: color-mix(in srgb, var(--tinta) 22%, var(--papel)); outline: 1px solid color-mix(in srgb, var(--tinta) 40%, var(--papel)); outline-offset: -1px; }
.mes__barras li:last-child i { background: var(--rojo); outline: 0; }
.mes__eje { display: flex; justify-content: space-between; margin-top: 5px; font: 500 .75rem/1.3 var(--sans); color: var(--tinta-2); }

/* El metal del día */
.ficha-precio { display: grid; gap: 20px; }
@container (min-width: 620px) { .ficha-precio { grid-template-columns: minmax(220px, 4fr) minmax(0, 8fr); align-items: end; gap: 32px; } }
.ficha-precio__nombre { font: 700 var(--t-m, 1.25rem)/1.2 var(--fuente-titular); }
.ficha-precio__nombre b { margin-right: 6px; padding: 2px 5px; border: 1px solid var(--tinta); font: 700 .8125rem/1 var(--sans); vertical-align: 3px; }
.ficha-precio__nombre span { font: 500 var(--t-meta) var(--sans); color: var(--tinta-2); }
.ficha-precio__cifra { margin: 10px 0 14px; }
.ficha-precio__cifra .w-cifra { color: var(--tinta); }
.ficha-precio__unidad { font: 500 var(--t-meta) var(--sans); color: var(--tinta-2); }
.ficha-precio__cambios { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0; }
.ficha-precio__cambios div { padding: 8px 0; border-top: 1px solid var(--filete); }
.ficha-precio__cambios dt { font: 500 .75rem/1.3 var(--sans); color: var(--tinta-2); }
.ficha-precio__cambios dd { margin: 2px 0 0; font: 700 var(--t-ui)/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.ficha-precio__grafico .grafico__svg { height: clamp(150px, 30cqw, 240px); }