/* ============================================================
   COLUMNA «CUANDO EL ÓPTIMO NO ES ÚNICO» — lo propio
   Va después de columna.css y vertimiento.css; namespace .dg-*
   ============================================================ */

/* ---------- el dibujo del hero ----------
   Un problema lineal: la región factible, las líneas de igual costo que
   avanzan hacia el óptimo y el borde dorado donde todas las soluciones
   cuestan lo mismo. Ocupa el lugar del canvas de las otras columnas, a la
   derecha y bajo el velo; en angosto se apaga por la misma razón que el
   canvas (columna.css): detrás del texto es trama sucia. Los largos de cada
   trazo (--len) y sus retardos (--d) vienen calculados desde Python. */
.dg-hero { position: absolute; z-index: 0; top: 50%; right: 3vw;
           height: min(80%, 840px); width: auto; max-width: 48vw;
           aspect-ratio: 800 / 640; transform: translateY(-50%);
           pointer-events: none; overflow: hidden; }
.dg-region { fill: rgba(78, 147, 166, .07); stroke: rgba(120, 190, 205, .42);
             stroke-width: 1.4; stroke-linejoin: round;
             animation: dg-fade 1.2s ease-out both .1s; }
.dg-vert { fill: rgba(120, 190, 205, .55); animation: dg-fade .8s ease-out both .4s; }
.dg-iso { stroke: rgba(159, 186, 199, .16); stroke-width: 1; stroke-dasharray: 5 7;
          animation: dg-fade .9s ease-out both var(--d); }
.dg-iso-in { stroke: rgba(168, 203, 213, .5); stroke-width: 1.3;
             stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
             animation: dg-trazo .7s cubic-bezier(.3,.6,.2,1) forwards var(--d); }
.dg-iso-opt { stroke: rgba(231, 200, 115, .3); }
.dg-opt { stroke: #E7C873; stroke-width: 4; stroke-linecap: round;
          stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
          filter: drop-shadow(0 0 10px rgba(231, 200, 115, .45));
          animation: dg-trazo .9s cubic-bezier(.3,.6,.2,1) forwards var(--d); }
.dg-sol { fill: #071828; stroke: #E7C873; stroke-width: 2.4;
          transform-box: fill-box; transform-origin: center;
          animation: dg-pop .45s cubic-bezier(.2,.9,.3,1.4) both var(--d); }
@keyframes dg-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes dg-trazo { to { stroke-dashoffset: 0; } }
@keyframes dg-pop   { from { opacity: 0; transform: scale(.2); }
                      to   { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .dg-hero * { animation: none !important; stroke-dashoffset: 0 !important; }
}
@media (max-width: 900px) { .dg-hero { display: none; } }

/* ---------- la presentación adjunta ----------
   La tarjeta del cierre de columna.css, con el peso del archivo al lado del
   botón: quien descarga en el teléfono quiere saberlo antes. */
.dg-adjunto .co-btn { margin-right: 14px; }
.dg-adjunto-meta { display: inline-block; font-size: 13px; letter-spacing: .04em;
                   color: #9FBAC7; vertical-align: middle; }

/* ---------- notas y fuentes ----------
   Numeradas como la lista del cuerpo, pero en letra chica y sin los
   círculos grandes: son referencias, no parte del argumento. */
.dg-notas-h { font-size: 15px !important; letter-spacing: .1em; text-transform: uppercase;
              color: var(--co-grey) !important; margin-top: 56px !important;
              padding-top: 26px; border-top: 1px solid var(--co-border); }
ol.dg-notas { margin-top: 0; }
ol.dg-notas li { font-size: 14px; line-height: 1.62; color: #4A5A63;
                 padding-left: 30px; margin-bottom: 12px; }
ol.dg-notas li::before { width: 20px; height: 20px; font-size: 11px; line-height: 20px;
                         top: 1px; }

/* ---------- la figura animada del despacho ----------
   Los puntos eligen un reparto; el que se ve va relleno. Son <g> dentro del
   SVG con role="button", así que el foco del teclado se dibuja aquí. */
.dg-dot { cursor: pointer; outline: none; }
.dg-dot .dg-dot-c { fill: #fff; stroke: #066174; stroke-width: 1.6; transition: fill .2s; }
.dg-dot.on .dg-dot-c { fill: #066174; }
.dg-dot:hover .dg-dot-c { fill: #A8CBD5; }
.dg-dot.on:hover .dg-dot-c { fill: #066174; }
.dg-dot:focus-visible .dg-dot-c { stroke: #C8912E; stroke-width: 2.4; }