/* =============================================================================
   ¿Cómo funciona la generación distribuida?  ·  estático de iberdrola.com
   Dos anchos de diseño: 565 (escena con etiquetas) y 290 (escena sola).
   Un solo punto de cambio de layout: @container 565.
   Medidas: specs/generacion-distribuida/design/  (Figma es la única fuente)
   ============================================================================= */

/* ===== IberPangea + IberPangea Text (self-contained) =========================
   Las SEIS caras. Sin la fuente real el ancho de línea cambia, y con él el nº de
   líneas de cada tarjeta, que es quien gobierna el alto del panel. La Italic la
   usa el contador «N de 5». */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/generacion-distribuida/fonts/IberPangea-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/generacion-distribuida/fonts/IberPangea-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/generacion-distribuida/fonts/IberPangea-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/generacion-distribuida/fonts/IberPangeaText-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/generacion-distribuida/fonts/IberPangeaText-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/generacion-distribuida/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

#distribgen{
  --dg-forest:#00402A;   --dg-green1:#007F33;  --dg-green:#00A443;
  --dg-cont:#008C39;     /* cifra del contador en ≥565 (D06: 4,36:1, desviación aceptada) */
  --dg-sand1:#FFFEFF;    --dg-sand3:#D8CFC7;   /* Sand 3: trazo de la caja exterior */
  --dg-sunset2:#E3850D;  --dg-foco:#0792E5;
}

/* ===== Marco de la pieza =====================================================
   `margin:0 auto` SIN margen vertical: la pieza se incrusta y el sitio destino
   pone su propio espaciado (RD-07). El tramo se decide por el HUECO con
   `container-type`, no por la ventana: dentro del portal la pieza casi nunca
   ocupa el ancho de la pantalla. */
#distribgen{
  /* Contenedor CON NOMBRE: dentro hay otro (`.dg_escena`) para el `cqi` de los
     números, y sin nombre las @container de la pieza pasarían a medir contra él. */
  container-name:dg; container-type:inline-size;
  width:100%; max-width:980px; margin:0 auto; box-sizing:border-box;
  background:#FFF;
  position:relative; text-align:left;
  /* Caja exterior de la pieza (Figma, los dos frames: `border 1px #D8CFC7`,
     `rounded 15px`, `bg white`). El trazo va como SOMBRA INTERIOR, no como
     `border`, y no es un capricho: con `border:1px` el `inline-size` de este
     contenedor pasa de 565 a 563, así que a 565 —el ancho donde se revisa— la
     @container de 565 NO entraría y la pieza se quedaría en la disposición de
     móvil. Y además el padding de `.dg_inner` mediría desde 1px más adentro y
     encogería la tarjeta 2px. La sombra interior deja intactos el ancho y todos
     los insets, y se ve exactamente igual que el trazo interior de Figma. */
  border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--dg-sand3);
}

/* ===== Blindaje frente al theme de Liferay (docs/VALIDACION.md) ==============
   La herencia PIERDE contra cualquier declaración del theme, por débil que sea.
   `inherit` sí es una declaración: gana al theme y conserva el valor del padre,
   así que no cambia nada visualmente y no rompe el responsive. */
#distribgen *{color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit;
  text-transform:inherit; white-space:inherit; text-indent:0; text-decoration:none;
  margin:0; padding:0; box-sizing:border-box;}
#distribgen ul,#distribgen ol,#distribgen li{list-style:none;}
#distribgen li::marker{content:none;}
#distribgen li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#distribgen *` NO alcanza a los pseudo-elementos: se blindan aparte y SIN
   `content`, para no crear pseudos donde no hay. El theme les mete margen negativo. */
#distribgen *::before,#distribgen *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#distribgen img{display:block; max-width:100%; border:0;}
#distribgen svg{display:block;}
#distribgen button{font:inherit; cursor:pointer; border:0; background:transparent;
  color:inherit; appearance:none; -webkit-appearance:none;}
#distribgen noscript{display:block !important;}
/* La RAÍZ tiene que declarar todo lo heredable: si no, hereda del portal y el
   `inherit` de arriba propaga fielmente el valor del theme hacia dentro. */
#distribgen{
  font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--dg-forest);
  letter-spacing:normal; text-transform:none; white-space:normal; text-decoration:none;
}
/* `display` NO se hereda, así que `inherit` no vale: se declara elemento a elemento
   y con `!important`. Sólo se reafirma en cada tramo lo que de verdad cambia. */
#distribgen{display:block !important;}
#distribgen .dg_inner{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#distribgen .dg_cab{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:flex-start; justify-content:flex-start;}
#distribgen .dg_title,#distribgen .dg_intro,#distribgen .dg_texto{display:block !important;}
#distribgen .dg_escena{display:block !important;}
#distribgen .dg_arte{display:block !important;}
#distribgen .dg_guias{display:none !important;}         /* sólo ≥565 */
#distribgen .dg_etiqueta{display:none !important;}      /* sólo ≥565 */
#distribgen .dg_num{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center;}
#distribgen .dg_circ{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center;}
#distribgen .dg_slider{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#distribgen .dg_pastilla{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center;}
#distribgen .dg_pie{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:space-between; gap:8px;}
#distribgen .dg_cont{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center;}
#distribgen .dg_arrows{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:flex-start; justify-content:flex-start; gap:16px;}
#distribgen .dg_arrow{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center;}
#distribgen .dg_ico{display:block !important;}
/* El valor del contador va envuelto en UN solo elemento: si el «1» y el « de 5»
   fuesen dos items flex hermanos, el espacio inicial del segundo se colapsa (es
   principio de bloque) y se leería «1de 5». Dentro del mismo item sobrevive. */
#distribgen .dg_val,#distribgen .dg_cur{display:inline !important;}
#distribgen b{font-weight:600;}
/* Los cinco paneles APILADOS en la MISMA celda de rejilla: la celda mide lo que el
   más alto a ese ancho y en ese idioma, así que el panel no cambia de alto al
   navegar (RF-08) sin clavar ningún `min-height` a mano. `minmax(0,1fr)` y no
   `1fr` a secas: `1fr` es `minmax(auto,1fr)` y su mínimo es el min-content, que
   ensancharía la pista con el texto más largo. */
#distribgen .dg_panels{display:grid !important; grid-template-areas:"s";
  grid-template-columns:minmax(0,1fr); grid-auto-flow:row; gap:0;
  align-items:stretch; justify-items:stretch; justify-content:start; align-content:start;}
#distribgen .dg_panel{display:flex !important; grid-area:s; flex-wrap:nowrap;
  flex-direction:column; align-items:center; justify-content:center;
  visibility:hidden; opacity:0;}

/* Sólo para lectores de pantalla (el contador dentro de la región viva). */
#distribgen .dg_sr{position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;}

/* =============================================================================
   TRAMO BASE = 290 (móvil).  El padding va DENTRO, en `.dg_inner`: `@container`
   no reestila el propio contenedor, sólo sus descendientes.
   Márgenes laterales del frame de 290: 16 cabecera, 13 escena, 2 tarjeta.
   ============================================================================= */
#distribgen .dg_inner{padding:32px 2px;}
#distribgen .dg_cab{margin-inline:14px; gap:16px;}       /* 2+14 = 16 ✔ */
#distribgen .dg_escena{margin-inline:11px; margin-top:25px;}   /* 2+11 = 13 ✔ */
/* La caja de la ilustración y la tarjeta se solapan 6 px en el diseño (la caja
   acaba en 622 y la tarjeta arranca en 616). La zona solapada está vacía, así que
   no se ve; se respeta para no mover ni la una ni la otra. */
#distribgen .dg_slider{margin-top:-6px;}

/* ===== Cabecera ==============================================================
   Los saltos de línea de Figma NO se copian: el texto reflowa solo.
   !important en el color del título: en móvil el theme pinta los h2 con
   `#427314 !important`. */
#distribgen .dg_title{font-family:'IberPangea',sans-serif; font-weight:400;
  font-size:32px; line-height:36px; color:var(--dg-green1) !important;}
#distribgen .dg_intro{font-size:18px; line-height:24px; color:var(--dg-forest);}

/* ===== Escena ================================================================
   El escenario NO es el ancho del arte (RD-10). En 290 el escenario es la caja
   blanca `Rectangle 12` (263 × 273) y el arte (273 de ancho) se sale 5 px por
   cada lado. Todo lo que va encima se ancla en % del escenario, así que acompaña
   al dibujo cuando escala. */
#distribgen .dg_escena{position:relative; aspect-ratio:263/273;
  background:var(--dg-sand1); border-radius:15px;
  container-name:dgesc; container-type:inline-size;}  /* el `cqi` mide contra ESTE hueco */
#distribgen .dg_arte{position:absolute; left:-1.9011%; top:4.3956%; width:104.1825%;}
#distribgen .dg_arte svg,#distribgen .dg_arte img{width:100%; height:auto;}
#distribgen .dg_art--desk{display:none !important;}

/* ===== Los cinco números =====================================================
   El `<button>` es la diana táctil de 44 × 44 y NO se ve; el círculo visible es
   el `<span>` de dentro. Se separan a propósito: la atenuación (A-002) va en el
   círculo, así el `outline` del foco queda FUERA de la opacidad y sigue viéndose
   sobre un número al 20 %. */
#distribgen .dg_num{position:absolute; width:44px; height:44px;
  transform:translate(-50%,-50%); padding:0; background:transparent; cursor:pointer;}
/* El círculo se liga al hueco del escenario con `cqi`, así CASA LOS DOS FRAMES sin
   un segundo breakpoint: a 290 el escenario mide 264 y sale 21 exactos; a partir
   de 417 se topa en los 33,2063 del tramo de 565, así que al cruzar el punto de
   cambio el número no da ningún salto de tamaño. Entre medias acompaña al dibujo,
   que sí escala — si se quedara en 21 px, a 500 sería una mota sobre el dibujo.
   El clamp va escrito aquí y no en una variable de la raíz: una variable derivada
   se sustituye donde se DECLARA y su `cqi` mediría contra el contenedor de fuera. */
#distribgen .dg_circ{
  width:clamp(21px, 7.9545cqi, 33.2063px); height:clamp(21px, 7.9545cqi, 33.2063px);
  border-radius:50%; background:var(--dg-sunset2); color:var(--dg-sand1);
  font-family:'IberPangea',sans-serif; font-weight:600;
  font-size:clamp(16px, calc(12.549px + 1.3072cqi), 18px); line-height:1.071;
  opacity:.2;}
#distribgen[data-active="1"] .dg_num[data-go="1"] .dg_circ,
#distribgen[data-active="2"] .dg_num[data-go="2"] .dg_circ,
#distribgen[data-active="3"] .dg_num[data-go="3"] .dg_circ,
#distribgen[data-active="4"] .dg_num[data-go="4"] .dg_circ,
#distribgen[data-active="5"] .dg_num[data-go="5"] .dg_circ{opacity:1;}
#distribgen .dg_num:focus-visible{outline:3px solid var(--dg-foco); outline-offset:3px;
  border-radius:4px;}
@media (hover:hover){
  #distribgen .dg_num:hover .dg_circ{opacity:1;}
}
/* Centros en % del escenario de 290 (263 × 273). */
#distribgen .dg_num[data-go="1"]{left:12.7376%; top:54.0293%;}
#distribgen .dg_num[data-go="2"]{left:35.5513%; top:15.9341%;}
#distribgen .dg_num[data-go="3"]{left:34.0304%; top:65.0183%;}
#distribgen .dg_num[data-go="4"]{left:58.3650%; top:80.7692%;}
#distribgen .dg_num[data-go="5"]{left:54.1825%; top:40.4762%;}

/* ===== Etiquetas del 565 (aquí ocultas) ======================================
   La caja se ajusta a su texto (`max-content`) y se topa en el ancho que le da
   Figma, que es donde parte cada línea. NUNCA un ancho fijo: cambia por idioma. */
#distribgen .dg_etiqueta{position:absolute; width:max-content;
  padding:8px; border-radius:15px; background:var(--dg-sand1);
  box-shadow:inset 0 0 0 1px var(--dg-forest);
  font-size:16px; line-height:20px; color:var(--dg-forest); text-align:center;}

/* ===== Tarjeta (slider) ======================================================
   290: columna de 247 dentro de 287 → 20 de relleno lateral. */
#distribgen .dg_slider{padding:35px 20px 20px; gap:18px;}
#distribgen .dg_pastilla{padding:7px 22px; border-radius:20px;
  background:var(--dg-forest); color:var(--dg-sand1);
  font-family:'IberPangea',sans-serif; font-weight:500; font-size:18px; line-height:22px;
  text-align:center;}
/* El relleno inferior de Figma (52) no se alcanza: la caja va con alto fijo 222 y
   el contenido acaba 29 px antes del borde. Ese 29 es el hueco REAL del diseño. */
#distribgen .dg_panel{padding:10px 22px 29px 19px; border-radius:20px;
  box-shadow:inset 0 0 0 1px var(--dg-forest); gap:14px; text-align:center;}
#distribgen .dg_ico{width:89px; height:89px; flex:0 0 auto;}
#distribgen .dg_texto{font-size:16px; line-height:20px; color:var(--dg-forest);}
/* El hueco entre la caja y el pie sale de los dos rellenos de 20+20+15 de Figma. */
#distribgen .dg_pie{margin-top:37px; height:32px;}
#distribgen .dg_cont{height:32px; padding:5px 16px; border-radius:24px;
  box-shadow:inset 0 0 0 1px var(--dg-forest);
  font-style:italic; font-size:14px; line-height:18px; color:var(--dg-forest);
  white-space:nowrap;}
/* En 290 la cifra va en Green 1 (5,14:1, cumple AA). En ≥565 el diseño usa otro
   verde; cada tramo mantiene el suyo (D06). */
#distribgen .dg_cur{color:var(--dg-green1);}

/* ===== Flechas ===============================================================
   Un solo dibujo: el `disabled` de Figma es literalmente el default al 50 %, y el
   hover cambia el círculo a relleno verde y la punta a blanco. Todo en CSS. */
#distribgen .dg_arrow{width:32px; height:32px; flex:0 0 auto; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--dg-forest); color:var(--dg-forest);
  background:transparent;}
#distribgen .dg_arrow svg{width:32px; height:32px; fill:currentColor;}
#distribgen .dg_prev svg{transform:rotate(180deg);}
@media (hover:hover){
  #distribgen .dg_arrow:not(:disabled):hover{background:var(--dg-green);
    box-shadow:none; color:var(--dg-sand1);}
}
#distribgen .dg_arrow:disabled{opacity:.5; cursor:default;}
#distribgen .dg_arrow:focus-visible{outline:3px solid var(--dg-foco); outline-offset:3px;}

/* ===== Paneles: el que toca ==================================================
   `visibility` (no `display`) para que los cinco sigan ocupando la celda y el alto
   no cambie; `inert` lo pone el JS como cinturón para el foco y los clics. */
#distribgen[data-active="1"] .dg_panel[data-slide="1"],
#distribgen[data-active="2"] .dg_panel[data-slide="2"],
#distribgen[data-active="3"] .dg_panel[data-slide="3"],
#distribgen[data-active="4"] .dg_panel[data-slide="4"],
#distribgen[data-active="5"] .dg_panel[data-slide="5"]{visibility:visible; opacity:1;}

/* ===== Animaciones (animations.md) ===========================================
   Las transiciones sólo entran con `data-anim`, que el JS pone DESPUÉS del primer
   fotograma: si el estado inicial las llevara, la primera pintada animaría al
   revés (lección de la 011). */
#distribgen[data-anim] .dg_panel{transition:opacity .2s ease, visibility .2s ease;}
#distribgen[data-anim] .dg_circ{transition:opacity .2s ease;}
#distribgen[data-anim] .dg_arrow{transition:background-color .15s ease, color .15s ease,
  box-shadow .15s ease, opacity .15s ease;}
@media (prefers-reduced-motion: reduce){
  #distribgen[data-anim] .dg_panel,
  #distribgen[data-anim] .dg_circ,
  #distribgen[data-anim] .dg_arrow{transition:none;}
}

/* ===== Sin JS (RF-09) ========================================================
   Ningún control muerto y ningún contenido inalcanzable: se esconde la botonera y
   el contador, los números quedan decorativos (ya nacen con `tabindex="-1"`) y los
   cinco paneles se muestran apilados en flujo. */
#distribgen:not([data-js]) .dg_arrows,
#distribgen:not([data-js]) .dg_cont{display:none !important;}
#distribgen:not([data-js]) .dg_pie{display:none !important;}
#distribgen:not([data-js]) .dg_num{pointer-events:none;}
#distribgen:not([data-js]) .dg_circ{opacity:1;}
#distribgen:not([data-js]) .dg_panels{display:block !important;}
#distribgen:not([data-js]) .dg_panel{visibility:visible; opacity:1;}
#distribgen:not([data-js]) .dg_panel + .dg_panel{margin-top:18px;}

/* =============================================================================
   TRAMO ≥ 565.  Aquí aparecen las etiquetas y sus conectores, cambia el arte, los
   números pasan a Forest de 33,2 y la tarjeta pone el icono al lado del texto.
   Es el ÚNICO punto de cambio de disposición (RD-04).
   ============================================================================= */
@container dg (min-width: 565px){
  /* Márgenes del frame de 565: 32 cabecera e ilustración, 15 tarjeta. */
  #distribgen .dg_inner{padding:43px 15px 42px;}
  #distribgen .dg_cab{margin-inline:17px; gap:24px;}     /* 15+17 = 32 ✔ */

  /* El escenario se topa en su ancho de diseño y se centra: por encima de 565 el
     dibujo no sigue creciendo, sólo reflowa el texto (RD-05). Con 501 fijos los
     números van en px y el px es exacto (RD-11). */
  /* Se centra con `align-self`, NO con `margin-inline:auto`: el escenario es un
     item flex y un margen `auto` deja el valor sin resolver hasta que algo fuerza
     un recálculo — el theme mete una hoja, `marginLeft` pasa de «0px» a «224,5px»
     y la puerta de aislamiento lo ve como que el theme nos ha movido la pieza,
     aunque no se mueva ni un píxel. Con `align-self` no hay nada que resolver. */
  #distribgen .dg_escena{width:501px; height:598.2157px; aspect-ratio:auto;
    align-self:center; margin-inline:0; margin-top:43px;
    background:none; border-radius:0;}
  #distribgen .dg_arte{left:4.0017px; top:104.627px; width:462px;}
  #distribgen .dg_art--desk{display:block !important;}
  #distribgen .dg_art--mob{display:none !important;}
  #distribgen .dg_guias{display:block !important; position:absolute; inset:0;
    width:100%; height:100%; pointer-events:none;}
  #distribgen .dg_etiqueta{display:block !important;}

  /* El tamaño lo sigue poniendo el `clamp` de arriba (a 501 de escenario ya está
     topado en 33,2063 y en 18); aquí sólo cambian el color y el grosor, que es lo
     que de verdad cambia entre los dos frames. */
  #distribgen .dg_circ{background:var(--dg-forest); font-weight:400;}
  /* Centros en px dentro del escenario de 501 × 598,2157. */
  #distribgen .dg_num[data-go="1"]{left:62.6050px; top:317.2301px;}
  #distribgen .dg_num[data-go="2"]{left:172.6049px; top:147.2302px;}
  #distribgen .dg_num[data-go="3"]{left:163.6037px; top:378.2302px;}
  #distribgen .dg_num[data-go="4"]{left:254.6031px; top:451.2301px;}
  #distribgen .dg_num[data-go="5"]{left:256.6045px; top:267.2300px;}

  /* Cada etiqueta anclada POR EL LADO QUE TOCA: las 4 y la 5 están pegadas al
     margen derecho, así que crecen hacia dentro cuando el idioma las alarga. Las
     4 y 5 además se anclan por su centro vertical, que es donde llega su flecha. */
  #distribgen .dg_etiqueta[data-et="1"]{left:0; top:388.3437px; max-width:143px;}
  #distribgen .dg_etiqueta[data-et="2"]{left:73.2727px; bottom:545.2157px; max-width:173px;}
  #distribgen .dg_etiqueta[data-et="3"]{left:18.3187px; top:542.2157px; max-width:296px;}
  #distribgen .dg_etiqueta[data-et="4"]{right:0.2734px; top:519.9341px;
    transform:translateY(-50%); max-width:174px;}
  #distribgen .dg_etiqueta[data-et="5"]{right:0; top:128.6270px;
    transform:translateY(-50%); max-width:171px;}

  /* ── Ajustes por idioma ────────────────────────────────────────────────────
     Con `:lang()` sobre el scope y NUNCA con `[lang="xx"]`: el portal sirve
     `en-US` y `pt-BR` y la coincidencia exacta no casaría. Van DENTRO de este
     tramo: las etiquetas sólo existen aquí, así que un ajuste de idioma no se
     puede colar en el tramo estrecho.
     Sólo cambia el ANCHO al que parte cada caja (y, en PT, el anclaje de las dos
     que crecen mucho): el arte, los cinco números y los cinco conectores son
     IDÉNTICOS en los tres idiomas, así que los anclajes se dejan como en ES y el
     hueco entre cada flecha y su etiqueta no cambia. Los 2-3 px que bailan las
     cajas 4 y 5 entre frames son ruido del diseño, no una decisión: si se
     copiaran, en EN la etiqueta 4 se saldría 2,73 px del margen derecho. */
  /* La 1 no lleva ajuste: en EN y en PT su texto cabe de sobra en una línea, así
     que la caja se ajusta sola. (La caja de PT mide 146,5 en Figma porque está
     estirada a mano —su relleno sale 15,3 × 6,5 en vez de 8—; el texto de dentro
     son 117 px y la caja buena son 133.) */
  #distribgen:lang(en) .dg_etiqueta[data-et="5"]{max-width:173px;}
  #distribgen:lang(pt) .dg_etiqueta[data-et="2"]{left:51px; max-width:241px;}
  #distribgen:lang(pt) .dg_etiqueta[data-et="3"]{left:31px; max-width:266px;}
  #distribgen:lang(pt) .dg_etiqueta[data-et="4"]{max-width:171px;}
  #distribgen:lang(pt) .dg_etiqueta[data-et="5"]{max-width:184px;}

  /* ===== Tarjeta de 565 ======================================================
     535 de ancho (15 de margen), relleno 20 y hueco 6: pastilla 40 + panel 100 +
     pie 32 + 2×6 + 2×20 = 224, el alto exacto del frame. */
  #distribgen .dg_slider{margin-top:39.7843px; padding:20px; gap:6px;}
  #distribgen .dg_pastilla{padding:9px 27px 9px 28px; border-radius:30px;}
  #distribgen .dg_panel{flex-direction:row; padding:20px 10px; gap:20px;
    border-radius:15px;}
  #distribgen .dg_ico{width:60px; height:60px;}
  /* El texto se topa en 359: con la fuente real es el ancho que deja las CINCO
     tarjetas en dos líneas. Figma le da a cada una el suyo (312/330/346/337/359)
     y por eso la 1 le sale en tres, la misma anomalía que D01 ya unificó; se
     unifica también el corte (decidido por quien encarga). Por encima de 565 la
     tarjeta crece pero el texto no, así que los cortes no cambian. */
  #distribgen .dg_texto{max-width:359px;}
  #distribgen .dg_pie{margin-top:0;}
  /* 71 es el ancho de la píldora en Figma; el texto por sí solo da 68,75. En 290
     el diseño la deja crecer con el contenido, así que el mínimo va sólo aquí. */
  #distribgen .dg_cont{height:27px; min-width:71px; padding:4px 16px 3px 17px;
    border-radius:30px;}
  #distribgen .dg_cur{color:var(--dg-cont);}
  #distribgen:not([data-js]) .dg_panel + .dg_panel{margin-top:6px;}
}