/* ==========================================================================
   igualdad-oportunidades-datos-2026  ·  scope #iodatos
   Infografía estática de igualdad, diversidad e inclusión.
   Figma: 980 `22175:1200` · 565 `22175:1832` · 290 `22175:2464`
   ========================================================================== */

/* ===== IberPangea (self-contained) ===== */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/igualdad-oportunidades-datos-2026/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/igualdad-oportunidades-datos-2026/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/igualdad-oportunidades-datos-2026/fonts/IberPangea-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/igualdad-oportunidades-datos-2026/fonts/IberPangea-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/igualdad-oportunidades-datos-2026/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/igualdad-oportunidades-datos-2026/fonts/IberPangeaText-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/igualdad-oportunidades-datos-2026/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/igualdad-oportunidades-datos-2026/fonts/IberPangeaText-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'IberPangea Text';src:url('/wcorp/gc/prod/es_ES/estaticos/igualdad-oportunidades-datos-2026/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* ===== Tokens (get_variable_defs) ===== */
#iodatos{
  --iod-green1:#007F33; --iod-green2:#008C39; --iod-green3:#26BF64; --iod-green4:#5BD38C;
  --iod-green:#00A443;  --iod-forest:#00402A; --iod-forest1:#DCEBE1;
  --iod-sky1:#007ACB;   --iod-sky2:#0792E5;   --iod-sky3:#3CC2FF;   --iod-sky4:#6BDAFF;
  --iod-sky:#0DA9FF;    --iod-sky3-20:#D8F3FF; --iod-sky2-30:#B4DEF7;
  --iod-sand:#FFF5EC;   --iod-sand1:#FFFEFF;  --iod-sand3:#D8CFC7;  --iod-sand7:#3A3735;
  --iod-sunset:#FF9C1A; --iod-white:#FFFFFF;
  /* ritmo (se sobreescribe en 290) */
  --iod-pad:24px;       /* padding del wrapper interno */
  --iod-gap:24px;       /* separación entre bloques */
}

/* ===== Contenedor =====
   El padding va en el WRAPPER INTERNO, no en #iodatos: @container no reestila
   su propio contenedor, solo descendientes. */
#iodatos{
  /* con NOMBRE: si no, cualquier descendiente con container-type (la barra) se
     convierte en el contenedor de referencia y las @container de dentro miran a él.
     Eso activaba el layout de 290 dentro de la barra en cuanto medía <430. */
  container-type:inline-size; container-name:iod;
  width:100%; max-width:980px; margin:0 auto;   /* sin margen vertical: la pieza se incrusta */
  box-sizing:border-box; text-align:left; position:relative;
  font-family:'IberPangea Text',Arial,sans-serif; color:var(--iod-forest);
  background:var(--iod-white);
  border:1px solid var(--iod-sand3); border-radius:15px;
}
#iodatos *,#iodatos *::before,#iodatos *::after{box-sizing:border-box;}
/* Blindaje frente al CSS del sitio anfitrión (Liferay): la HERENCIA pierde contra
   cualquier declaración directa del theme, aunque sea débil — un simple `p{color:#5a5a5a}`
   dejaba el texto de la tarjeta verde en gris. Declararlo como `inherit` es una
   declaración (gana al theme) que conserva el valor del padre y el responsive, así que
   no cambia nada de la pieza. Nuestras reglas `#iodatos .clase` siguen ganando a esta. */
#iodatos *{
  color:inherit; font:inherit; letter-spacing:inherit;
  text-align:inherit; text-transform:inherit; white-space:inherit;
  /* estas NO se heredan: se declaran en valor fijo porque el theme las pone directas.
     Medido en la plantilla `deccontenido`: text-indent sumaba +46px de alto y
     `div{margin-bottom}` +663px. */
  text-indent:0; text-decoration:none; margin:0; padding:0;
}
/* El marcador nativo del <li> es la causa del "doble bullet" (el gris junto al nuestro):
   apagarlo solo en el `ul` NO basta, porque eso se hereda y `li{list-style:disc}` del theme
   gana. `::marker` aparte, porque un `content` en el marcador se pinta aun con list-style:none. */
#iodatos ul,#iodatos ol,#iodatos li{list-style:none;}
#iodatos li::marker{content:none;}
/* Y la causa REAL del doble bullet en `deccontenido`: el theme pinta sus viñetas con
   `li::before{content:"•" !important}` dentro de una @media, o sea **en el mismo pseudo-elemento
   que usamos nosotros** para el punto verde → nos aparecía su glifo gris dentro de nuestro punto.
   No se puede "desactivar el suyo": hay que forzar nuestro `content`, y con !important porque el
   suyo lo lleva. Solo en `li` (donde el theme lo hace): un `content` global en `*::before`
   CREARÍA pseudo-elementos donde no hay. */
#iodatos li::before{content:'' !important; margin:0 !important;}
/* OJO, la lección de fondo: `#iodatos *` NO alcanza a los pseudo-elementos (`*` selecciona
   elementos), así que el blindaje de arriba NO protegía a `::before`/`::after`. El theme también
   les mete `margin-left:-18px`, que sacaba nuestro punto de su hueco. Estas reglas NO declaran
   `content`, así que no crean pseudos donde no hay. */
#iodatos *::before,#iodatos *::after{
  margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit;
}
#iodatos img,#iodatos svg{display:block;max-width:100%;}

/* -1px: el borde exterior no debe restar ancho de contenido (Figma: 932/517/258) */
#iodatos .iod__inner{padding:calc(var(--iod-pad) - 1px);}

/* ===== B1 · Titular ===== */
#iodatos .iod_title{
  font-family:'IberPangea',Arial,sans-serif; font-weight:400;
  font-size:32px; line-height:36px; color:var(--iod-green1) !important;
}
#iodatos .iod_title_r{font-weight:400;}
#iodatos .iod_title_b{font-weight:600;}   /* SmBold, como en Figma */

/* ===== Pila de bloques ===== */
#iodatos .iod_blocks{display:flex; flex-direction:column; gap:var(--iod-gap); margin-top:32px;}

/* Título de sección (los que van fuera de tarjeta: Reclutamiento, Formación, Encuesta) */
#iodatos .iod_h{
  font-family:'IberPangea',Arial,sans-serif; font-weight:400;
  font-size:24px; line-height:30px; color:var(--iod-forest);
}
/* Título dentro de una tarjeta de bloque (Distribución por…) */
#iodatos .iod_h--card{font-size:24px; line-height:30px;}

/* Saltos de línea que dependen del tamaño (forzados en el diseño) */
#iodatos .iod_br290{display:none;}   /* solo 290 */
#iodatos .iod_br980{display:inline;} /* solo 980 */
#iodatos .iod_br565{display:none;}   /* solo la banda de 565 */

/* ==========================================================================
   B2 · Plantilla — 45.400 trabajadores / 33.867 hombres / 11.511 mujeres
   980: fila (badge 268 + gap 17 + caja 647, sobre 932)
   565: columna (badge y caja a ancho completo, gap 17), celdas aún en fila
   290: columna (gap 8) y celdas en columna (icono sobre texto)
   ========================================================================== */
#iodatos .iod_staff{display:flex; gap:17px; align-items:stretch; min-height:123px;}

#iodatos .iod_staff_badge{
  flex:268 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px; border-radius:15px; background:var(--iod-green4);
  color:var(--iod-forest); text-align:center; white-space:nowrap;
}
#iodatos .iod_staff_num{font-family:'IberPangea Text',Arial,sans-serif; font-weight:600; font-size:25px; line-height:20px;}
#iodatos .iod_staff_lbl{font-family:'IberPangea Text',Arial,sans-serif; font-weight:400; font-size:16px; line-height:20px;}
/* la caja de texto del badge mide 44px (2 líneas de 20 + 4 que Figma no expone) */
#iodatos .iod_staff_badge>*{display:block;}
#iodatos .iod_staff_num{padding-top:4px;}

#iodatos .iod_staff_box{
  flex:647 1 0; min-width:0;
  display:flex; align-items:center; gap:16px;
  padding:8px 8px 8px 33px;            /* asimetría intencionada del diseño */
  border:1px solid var(--iod-green3); border-radius:15px;
}
#iodatos .iod_staff_cell{flex:1 1 0; min-width:0; display:flex; align-items:center; gap:16px;}
#iodatos .iod_staff_ico{width:58px; height:59px; flex:0 0 auto;}
#iodatos .iod_staff_txt{font-family:'IberPangea',Arial,sans-serif; white-space:nowrap;}
#iodatos .iod_staff_n{font-weight:600; font-size:24px; line-height:27px; color:var(--iod-green1);}
#iodatos .iod_staff_l{font-weight:400; font-size:20px; line-height:27px; color:var(--iod-forest);}
#iodatos .iod_staff_txt>span{display:block;}

/* ==========================================================================
   Breakpoints — DOS puntos de cambio. Valores provisionales; se ajustan
   midiendo dónde deja de caber el contenido (ver plan.md).
   ========================================================================== */
/* ==========================================================================
   B3 · Matriz de representación
   980: cabecera de 3 etiquetas + fila mujeres + fila hombres (gutter de icono a la izq.)
   565/290: TRANSPUESTA — columna de etiquetas + 2 sub-columnas (mujeres / hombres)
   Un solo marcado: la rejilla recoloca las celdas con grid-area.
   ========================================================================== */
#iodatos .iod_mx{background:var(--iod-white); border:1px solid var(--iod-sand3); border-radius:15px; padding:24px 16px;}
#iodatos .iod_mx_grid{
  display:grid; column-gap:8px; row-gap:6px;
  grid-template-columns:57px repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto;
}
/* 980 · etiquetas en la fila 1 (columnas 2-4); iconos en el gutter (filas 2-3) */
#iodatos .iod_mx_lbl--1{grid-area:1/2;} #iodatos .iod_mx_lbl--2{grid-area:1/3;} #iodatos .iod_mx_lbl--3{grid-area:1/4;}
#iodatos .iod_mx_head--f{grid-area:2/1;} #iodatos .iod_mx_head--m{grid-area:3/1;}
#iodatos .iod_mx_cell--f.iod_mx_cell--r1{grid-area:2/2;}
#iodatos .iod_mx_cell--f.iod_mx_cell--r2{grid-area:2/3;}
#iodatos .iod_mx_cell--f.iod_mx_cell--r3{grid-area:2/4;}
#iodatos .iod_mx_cell--m.iod_mx_cell--r1{grid-area:3/2;}
#iodatos .iod_mx_cell--m.iod_mx_cell--r2{grid-area:3/3;}
#iodatos .iod_mx_cell--m.iod_mx_cell--r3{grid-area:3/4;}

#iodatos .iod_mx_lbl{
  background:var(--iod-sand); border-radius:15px; padding:16px;
  font-family:'IberPangea Text',Arial,sans-serif; font-weight:600; font-size:16px; line-height:20px;
  color:var(--iod-sand7); text-align:center;
  display:flex; align-items:center; justify-content:center;
}
#iodatos .iod_mx_head{position:relative; width:65px; display:flex; align-items:center;}
#iodatos .iod_mx_ico{
  width:48px; height:48px; flex:0 0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
#iodatos .iod_mx_ico img{width:48px; height:48px;}
#iodatos .iod_mx_ico--f{background:var(--iod-sunset);}
#iodatos .iod_mx_ico--m{background:var(--iod-green4);}
/* conector icono → fila (horizontal en 980) */
#iodatos .iod_mx_line{width:17px; height:1px; background:var(--iod-forest); flex:0 0 auto;}

#iodatos .iod_mx_cell{
  background:var(--iod-white); border:1px solid; border-radius:15px; padding:10px 8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;
}
#iodatos .iod_mx_cell--f{border-color:var(--iod-sunset);}
#iodatos .iod_mx_cell--m{border-color:var(--iod-green3);}
#iodatos .iod_mx_pct{font-family:'IberPangea Text',Arial,sans-serif; font-weight:600; font-size:22px; line-height:23px; color:var(--iod-forest);}
#iodatos .iod_mx_who{font-family:'IberPangea Text',Arial,sans-serif; font-weight:400; font-size:16px; line-height:20px; color:var(--iod-forest);}

/* ==========================================================================
   B4 / B5 · Barras de distribución
   Tramos PROPORCIONALES al dato real (Figma los tiene dibujados a mano).
   La barra crece desde su extremo PLANO; el extremo redondeado es la meta.
   ========================================================================== */
#iodatos .iod_dist{border-radius:15px; padding:18px 29px 24px;}
#iodatos .iod_dist--age{background:var(--iod-forest1);}
#iodatos .iod_dist--cat{background:var(--iod-sky3-20);}
#iodatos .iod_dist_h{
  font-family:'IberPangea',Arial,sans-serif; font-weight:500; font-size:24px; line-height:30px;
  color:var(--iod-forest);
}
#iodatos .iod_dist_body{display:flex; flex-direction:column; gap:8px; margin-top:36px;}

/* Pista de %: columnas PROPORCIONALES a los tramos → cada % centrado sobre el suyo.
   Pista de etiquetas: cajas del tamaño de su contenido con gap 36 (así lo hace Figma;
   proporcional no vale porque "liderazgo" no cabe en el 6%). */
#iodatos .iod_dist_pcts{display:flex;}
#iodatos .iod_dist_lbls{display:flex; gap:36px;}
#iodatos .iod_dist_p{min-width:0; text-align:center;}
#iodatos .iod_dist_l{min-width:0;}
#iodatos .iod_dist_l--1,#iodatos .iod_dist_l--3{flex:0 0 auto;}
#iodatos .iod_dist_l--2{flex:1 1 auto;}
#iodatos .iod_dist_p{font-family:'IberPangea',Arial,sans-serif; font-weight:700; font-size:24px; line-height:28px;}
#iodatos .iod_dist--age .iod_dist_p{color:var(--iod-green1);}
#iodatos .iod_dist--cat .iod_dist_p{color:var(--iod-sky1);}
#iodatos .iod_dist_l{font-family:'IberPangea',Arial,sans-serif; font-weight:500; font-size:18px; line-height:22px; color:var(--iod-forest);}

/* reparto 18/62/20 y 6/43/52 — un solo sitio donde vive el dato */
#iodatos .iod_dist--age .iod_dist_p--1{flex:18;}
#iodatos .iod_dist--age .iod_dist_p--2{flex:62;}
#iodatos .iod_dist--age .iod_dist_p--3{flex:20;}
/* categoría: Figma dibuja el liderazgo casi al doble de su dato (ver D19); si se usa el
   6% real, el tramo desaparece. Los % de la pista de arriba siguen al tramo. */
#iodatos .iod_dist--cat .iod_dist_p--1{flex:10.20;}
#iodatos .iod_dist--cat .iod_dist_p--2{flex:39.68;}
#iodatos .iod_dist--cat .iod_dist_p--3{flex:50.12;}
/* acumulados: 18 / 18+62 / 100  y  6 / 6+43 / 100 */
#iodatos .iod_dist--age .iod_bar_seg--1{width:18%;}
#iodatos .iod_dist--age .iod_bar_seg--2{width:80%;}
#iodatos .iod_dist--age .iod_bar_seg--3{width:100%;}
#iodatos .iod_dist--cat .iod_bar_seg--1{width:10.20%;}
#iodatos .iod_dist--cat .iod_bar_seg--2{width:49.88%;}
#iodatos .iod_dist--cat .iod_bar_seg--3{width:100%;}

/* la barra: 26 de grosor, radio 11.218 SOLO en el extremo de llegada (derecha) */
/* Los tramos se SOLAPAN (como en Figma): todos arrancan en el extremo plano y
   cada uno lleva el radio en su lado de avance, así las transiciones también
   salen redondeadas y no solo el final de la barra. */
#iodatos .iod_bar{position:relative; height:26px; display:flex; container-type:inline-size;}
/* .iod_bar_reveal es la capa que CRECE y RECORTA. Tiene que ser `position:relative`:
   el track va en absoluto DENTRO de ella, porque un elemento absoluto solo lo recorta
   el ancestro que le sirve de referencia de posicionamiento. Si el track se refiriese a
   .iod_bar (fuera de la capa), el overflow no lo tocaría y la barra se vería entera.
   El track conserva su tamaño completo con 100cqw = ancho de .iod_bar. */
#iodatos .iod_bar_reveal{position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:0 11.218px 11.218px 0;}
#iodatos .iod_bar_track{position:absolute; left:0; top:0; height:100%; width:100cqw;}
#iodatos .iod_bar_seg{
  position:absolute; left:0; top:0; bottom:0;
  border-radius:0 11.218px 11.218px 0;
}
#iodatos .iod_bar_seg--3{z-index:1;} #iodatos .iod_bar_seg--2{z-index:2;} #iodatos .iod_bar_seg--1{z-index:3;}
#iodatos .iod_dist--age .iod_bar_seg--1{background:var(--iod-green4);}
#iodatos .iod_dist--age .iod_bar_seg--2{background:var(--iod-green);}
#iodatos .iod_dist--age .iod_bar_seg--3{background:var(--iod-green1);}
#iodatos .iod_dist--cat .iod_bar_seg--1{background:var(--iod-sky4);}
#iodatos .iod_dist--cat .iod_bar_seg--2{background:var(--iod-sky);}
#iodatos .iod_dist--cat .iod_bar_seg--3{background:var(--iod-sky1);}

/* saltos de línea que solo existen en 565 y 290 */
#iodatos .iod_brsm{display:none;}

/* ==========================================================================
   B7 · Tarjetas de cifras
   ========================================================================== */
#iodatos .iod_cards{display:flex; gap:14px; align-items:stretch;}
#iodatos .iod_cards_col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:14px;}
#iodatos .iod_card{border-radius:15px;}
#iodatos .iod_card--orange{background:var(--iod-sunset); padding:18px 16px 24px;}
#iodatos .iod_card--blue{background:var(--iod-sky); padding:18px 16px 24px; display:flex; flex-direction:column; gap:8px;}
#iodatos .iod_card--green{background:var(--iod-green1); padding:16px; flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:10px; color:var(--iod-white);}
#iodatos .iod_card_row{display:flex; align-items:center; gap:26px;}
#iodatos .iod_card_row--top{flex:1 1 auto; align-items:center; gap:24px;}
#iodatos .iod_card_icorow{display:flex; justify-content:center;}
#iodatos .iod_card_ico{width:65px; height:65px; flex:0 0 auto;}
#iodatos .iod_card_pair{display:flex; gap:8px; align-items:stretch;}
#iodatos .iod_card_pair>*{flex:1 1 0; min-width:0;}
#iodatos .iod_card_lead{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px;}
#iodatos .iod_card_n{font-family:'IberPangea',Arial,sans-serif; font-weight:600; font-size:24px; line-height:27px;}
#iodatos .iod_card_l{font-family:'IberPangea',Arial,sans-serif; font-weight:400; font-size:22px; line-height:24px;}
#iodatos .iod_card_stack{display:flex; flex-direction:column; gap:8px;}

#iodatos .iod_box{
  background:var(--iod-sand); border-radius:15px; padding:8px 16px;
  color:var(--iod-forest); display:flex; flex-direction:column; gap:10px; justify-content:center;
}
#iodatos .iod_box_n{font-family:'IberPangea',Arial,sans-serif; font-weight:600; font-size:24px; line-height:27px;}
#iodatos .iod_box_n--it{font-style:italic;}
#iodatos .iod_box_l{font-family:'IberPangea',Arial,sans-serif; font-weight:400; font-size:17px; line-height:19px;}
#iodatos .iod_box_split{display:flex; gap:24px; font-family:'IberPangea',Arial,sans-serif; font-weight:400; font-size:17px; line-height:27px;}
#iodatos .iod_box_split b{font-weight:600;}

/* ==========================================================================
   B6 · Distribución por género y categoría profesional
   Ilustración compuesta (círculos CSS + figuras SVG + anillo) y 3 barras apiladas.
   Los círculos son CSS: solo la figura es asset (decisión D12).
   ========================================================================== */
#iodatos .iod_gen{background:var(--iod-sand); border-radius:15px; padding:24px 31px 16px;}
#iodatos .iod_gen_body{display:flex; flex-direction:column; gap:24px; margin-top:16px;}
#iodatos .iod_gen_row{display:flex; justify-content:space-between; align-items:flex-end; gap:16px;}
#iodatos .iod_gen_note{
  font-family:'IberPangea Text',Arial,sans-serif; font-weight:400; font-size:16px; line-height:20px;
  color:var(--iod-forest); text-align:right;
}

/* ── ilustración: caja proporcional con hijos en %.
   Geometría exacta en specs/011-.../design/b6-genero/anillo.md ── */
#iodatos .iod_gen_ill{position:relative; flex:0 0 auto; width:55.17%; aspect-ratio:480/117.07;}
/* .iod_fig ES el disco; la figura lo desborda por arriba */
#iodatos .iod_fig{position:absolute; width:19.79%; aspect-ratio:1;}
#iodatos .iod_fig_circle{display:block; width:100%; height:100%; border-radius:50%;}
/* Centrado con margin auto, NO con transform: la animación usa transform y lo pisaría.
   Además se compensa el descentrado del propio dibujo dentro del SVG (medido con el
   centroide de píxeles): la mujer tiene la masa 2,50 px a la izquierda de su lienzo y el
   hombre 0,74 px a la derecha. Se corrige en % para que escale en los 3 tamaños. */
#iodatos .iod_fig_person{
  position:absolute; margin:0 auto; width:auto;
  left:var(--iod-fig-l,0); right:var(--iod-fig-r,0); bottom:var(--iod-fig-b,0);
}
/* --iod-fig-b compensa el hueco que el dibujo deja al fondo de su lienzo: medido,
   el hombre deja 0,88 de 118 y la mujer 0,25 de 112. Sin esto asoma una franja del
   círculo por debajo de la figura (al hombre se le nota más porque su base es
   #FFF5EC, el mismo color que el fondo de la tarjeta). Valores finales afinados a ojo. */
#iodatos .iod_fig--mujer{--iod-fig-l:5.254%; --iod-fig-b:-0.10%;}
#iodatos .iod_fig--hombre{--iod-fig-r:1.545%; --iod-fig-b:-1%;}
#iodatos .iod_fig--mujer{left:0; top:16.60%;}
#iodatos .iod_fig--mujer .iod_fig_circle{background:var(--iod-sunset);}
#iodatos .iod_fig--hombre{left:80.21%; top:18.65%;}
#iodatos .iod_fig--hombre .iod_fig_circle{background:var(--iod-sky3);}
/* alto de la figura respecto a su disco (constante en los 3 tamaños) */
#iodatos .iod_fig--mujer .iod_fig_person{height:117.68%;}
#iodatos .iod_fig--hombre .iod_fig_person{height:123.23%;}

/* anillo: disco azul + cuña naranja de 90° + agujero del color de la tarjeta */
/* anillo: cuña naranja de 90° exactos; el hueco va PINTADO del color de la tarjeta
   (así está en Figma, no es transparente) */
#iodatos .iod_gen_ring{
  position:absolute; left:42.08%; top:13.12%; width:17.99%; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from var(--iod-ring-from,234.67deg),
             #FF9A18 0deg 90deg, var(--iod-sky3) 90deg 360deg);
}
#iodatos .iod_gen_ring::after{
  content:''; position:absolute; inset:11.19%; border-radius:50%; background:var(--iod-sand);
}
#iodatos .iod_gen_line{position:absolute; height:1px; width:22.08%; background:var(--iod-sunset);}
#iodatos .iod_gen_line--f{left:22.29%; top:62.67%;}
#iodatos .iod_gen_line--m{left:56.04%; top:21.67%; background:var(--iod-sky3);}
#iodatos .iod_gen_tag{
  position:absolute; font-family:'IberPangea',Arial,sans-serif; font-weight:400;
  font-size:19px; line-height:24px; color:var(--iod-forest); white-space:nowrap;
}
#iodatos .iod_gen_tag--f{left:21.88%; top:38.75%;}
#iodatos .iod_gen_tag--m{left:62.92%; top:22.52%;}

/* ── 3 barras apiladas (azul arriba / naranja abajo, base plana) ── */
#iodatos .iod_gen_bars{display:flex; gap:16px; align-items:flex-end; flex:0 0 40.8%;}
#iodatos .iod_gen_bar{flex:1 1 0; min-width:0; position:relative;}
#iodatos .iod_gen_part{
  position:absolute; left:0; right:0; bottom:0;
  border-radius:11.218px 11.218px 0 0;   /* ambos redondeados por arriba = lado de avance */
}
#iodatos .iod_gen_part--b{height:100%; z-index:1;}
#iodatos .iod_gen_part--o{z-index:2;}
#iodatos .iod_gen_bar--1{height:137px;} #iodatos .iod_gen_bar--2{height:119px;} #iodatos .iod_gen_bar--3{height:155px;}
/* Las cifras NO van centradas en su tramo: Figma las ancla a una altura fija de la
   barra y las alinea entre las tres. Si se centran, la azul cae pegada al naranja. */
#iodatos .iod_gen_v{
  position:absolute; left:0; right:0; z-index:3; text-align:center;
  font-family:'IberPangea Text',Arial,sans-serif; font-weight:600; font-size:14px; line-height:17px;
  color:var(--iod-forest);
}
#iodatos .iod_gen_v--b{top:19.40%;}
#iodatos .iod_gen_v--o{top:auto; bottom:3.8px;}
#iodatos .iod_gen_part--b{background:var(--iod-sky3);}
#iodatos .iod_gen_part--o{background:var(--iod-sunset);}
/* Alturas del naranja tal como las dibuja Figma (no son las del dato: ver decisiones D17).
   980: 42 / 52 / 30,25 px sobre barras de 137 / 119 / 155. */
#iodatos .iod_gen_bar--1 .iod_gen_part--o{height:30.66%;}
#iodatos .iod_gen_bar--2 .iod_gen_part--o{height:43.70%;}
#iodatos .iod_gen_bar--3 .iod_gen_part--o{height:19.52%;}

/* la caja sand ocupa el resto de la fila (Figma: 336 de 427) */
#iodatos .iod_card_row>.iod_box{flex:1 1 0; min-width:0;}

/* ==========================================================================
   B8 · Reclutamiento y Selección 2025
   Tarjetas de fondo transparente con borde de color.
   ========================================================================== */
#iodatos .iod_rec{display:flex; flex-direction:column; gap:16px;}
/* padding 15 = 16 - 1 del borde: Figma mide el padding incluyendo el trazo.
   Con 16 el texto pierde 2px y el bullet largo se va a 4 líneas en vez de 3. */
#iodatos .iod_rec_card{display:flex; gap:24px; padding:15px; border:1px solid; border-radius:15px;}
#iodatos .iod_rec_card--1{border-color:var(--iod-green);}
#iodatos .iod_rec_card--2{border-color:var(--iod-sky);}
#iodatos .iod_rec_ill{flex:0 0 auto;}
#iodatos .iod_rec_ill--1{width:90px; height:106px;}
#iodatos .iod_rec_ill--2{width:90px; height:98px;}
#iodatos .iod_rec_body{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px;}
#iodatos .iod_rec_t{
  font-family:'IberPangea',Arial,sans-serif; font-weight:500; font-size:18px; line-height:22px;
  color:var(--iod-green1);
}
#iodatos .iod_rec_list{display:flex; flex-direction:column; gap:8px;}
/* Figma limita los bullets de la tarjeta 1 a 526 en 980 (en 565 sí van a ancho completo) */
#iodatos .iod_rec_card--1 .iod_rec_list{max-width:526px;}
#iodatos .iod_rec_list li{
  position:relative; padding-left:18px;
  font-family:'IberPangea Text',Arial,sans-serif; font-weight:400; font-size:16px; line-height:20px;
  color:var(--iod-sand7);
}
/* punto 8×8 centrado sobre la primera línea (lh 20 → top 6) */
#iodatos .iod_rec_list li::before{
  content:''; position:absolute; left:0; top:6px; width:8px; height:8px;
  border-radius:50%; background:var(--iod-green);
}

/* ==========================================================================
   B9 · Formación 2025   ·   B10 · Resultados Encuesta Global 2025
   ========================================================================== */
#iodatos .iod_sec{display:flex; flex-direction:column; gap:16px;}

#iodatos .iod_train{display:flex; gap:15px; align-items:stretch;}
#iodatos .iod_train_card{
  flex:1 1 0; min-width:0; background:var(--iod-sand); border-radius:15px; padding:14px 10px;
  display:flex; align-items:stretch; gap:15px;
}
#iodatos .iod_train_ico{width:72px; height:72px; flex:0 0 auto; align-self:center;}
/* 980/565: [icono | línea vertical | (título sobre cifras)] */
#iodatos .iod_train_body{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px; justify-content:center;
  border-left:1px solid var(--iod-sand3); padding-left:27px;
}
#iodatos .iod_train_t{
  font-family:'IberPangea',Arial,sans-serif; font-weight:600; font-size:23px; line-height:29px;
  color:var(--iod-green1);
}
#iodatos .iod_train_data{display:flex; gap:16px;}
#iodatos .iod_train_fig{display:flex; flex-direction:column; gap:4px;}
#iodatos .iod_train_n{font-family:'IberPangea',Arial,sans-serif; font-weight:600; font-size:20px; line-height:24px; color:var(--iod-sand7);}
#iodatos .iod_train_l{font-family:'IberPangea',Arial,sans-serif; font-weight:400; font-size:16px; line-height:20px; color:var(--iod-sand7);}

#iodatos .iod_poll{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
#iodatos .iod_poll_card{
  background:var(--iod-sand1); border:1px solid var(--iod-sand3); border-radius:15px; padding:16px;
  display:flex; flex-direction:column; gap:16px;
}
#iodatos .iod_poll_top{display:flex; align-items:flex-start; gap:8px; flex:1 1 auto;}
#iodatos .iod_poll_ico{width:48px; height:48px; flex:0 0 auto;}
#iodatos .iod_poll_t{font-family:'IberPangea',Arial,sans-serif; font-weight:500; font-size:18px; line-height:22px; color:var(--iod-forest);}
#iodatos .iod_pill{
  border-radius:15px; padding:16px; text-align:center;
  font-family:'IberPangea',Arial,sans-serif; font-weight:600; font-size:28px; line-height:36px;
}
#iodatos .iod_pill--orange{background:var(--iod-sunset); color:var(--iod-forest);}
#iodatos .iod_pill--green{background:var(--iod-green1); color:var(--iod-white);}
#iodatos .iod_pill--blue{background:var(--iod-sky); color:var(--iod-forest);}

/* ── BP-A · layout de 565 (y de todo lo que baje de 720) ──────────────── */
@container iod (max-width:719px){
  #iodatos .iod_brsm{display:inline;}
  #iodatos .iod_br980{display:none;}

  /* B8: tarjetas más juntas */
  #iodatos .iod_rec{gap:8px;}
  #iodatos .iod_rec_card--1 .iod_rec_list{max-width:none;}

  /* B6 · 565: ilustración y barras en fila con gap 16; barras de igual alto */
  #iodatos .iod_gen_body{gap:16px;}
  #iodatos .iod_gen_row{justify-content:flex-start; align-items:center;}
  #iodatos .iod_gen_ill{width:51.68%; aspect-ratio:235.14/133.10;}
  #iodatos .iod_gen_bars{flex:1 1 auto; gap:8px;}
  #iodatos .iod_gen_bar--1,#iodatos .iod_gen_bar--2,#iodatos .iod_gen_bar--3{height:143px;}
  /* En 565 y 290 Figma dibuja el naranja con LOS MISMOS porcentajes (30,66 / 43,70 / 22,86),
     que no son los del dato (31,4 / 34,6 / 17,1). Se sigue Figma: con el dato real los tres
     tramos quedan casi idénticos en 290 y no se distinguen. Sin min-height: ya respiran. */
  #iodatos .iod_gen_v--b{top:18.07%;}
  #iodatos .iod_gen_bar--1 .iod_gen_part--o{height:30.66%;}
  #iodatos .iod_gen_bar--2 .iod_gen_part--o{height:43.70%;}
  #iodatos .iod_gen_bar--3 .iod_gen_part--o{height:22.86%;}
  /* la cuña gira 32.16° respecto al 980: 234.67 + 32.16 = 266.83 */
  #iodatos .iod_gen_ring{--iod-ring-from:266.83deg;}
  /* geometría del frame 565 (anillo.md §7.3) */
  #iodatos .iod_fig{width:32.24%;}
  #iodatos .iod_fig--mujer{left:0; top:35.56%;}
  #iodatos .iod_fig--hombre{left:65.15%; top:13.09%;}
  /* el anillo va CENTRADO en el hueco entre las dos figuras (mujer 0-32.24%,
     hombre 65.15-97.4%): centro del hueco 48.7% -> left 36.03%. Antes se metía
     por debajo del círculo del hombre. */
  #iodatos .iod_gen_ring{left:40.04%; top:50.49%; width:25.34%;}
  #iodatos .iod_gen_tag--f{left:24.94%; top:23.81%;}
  #iodatos .iod_gen_tag--m{left:auto; right:0; top:72.44%;}
  /* el conector de mujeres NO es una recta: es un CODO ortogonal */
  #iodatos .iod_gen_line--f{
    left:31.05%; top:42.69%; width:17.64%; height:10.19%; background:none;
    border-top:1px solid var(--iod-sunset); border-right:1px solid var(--iod-sunset);
  }
  #iodatos .iod_gen_line--m{left:60.06%; top:89.95%; width:37.75%;}

  /* B2: la raíz pasa a columna; badge y caja a ancho completo */
  #iodatos .iod_staff{flex-direction:column; min-height:0;}
  #iodatos .iod_staff_badge{flex:0 0 auto; padding:16px 10px;}
  #iodatos .iod_staff_box{flex:0 0 auto; padding:19px 8px 19px 33px;}  /* 19+59+19 = 97 */

  /* B3: la matriz se TRANSPONE — etiquetas en columna, mujeres/hombres en 2 sub-columnas */
  #iodatos .iod_mx{border:0; border-radius:0; padding:0; background:none;}
  #iodatos .iod_mx_grid{
    grid-template-columns:273fr 111fr 111fr;
    grid-template-rows:auto auto auto auto;
    column-gap:8px; row-gap:8px;
  }
  #iodatos .iod_mx_lbl--1{grid-area:2/1;} #iodatos .iod_mx_lbl--2{grid-area:3/1;} #iodatos .iod_mx_lbl--3{grid-area:4/1;}
  #iodatos .iod_mx_head--f{grid-area:1/2;} #iodatos .iod_mx_head--m{grid-area:1/3;}
  #iodatos .iod_mx_cell--f.iod_mx_cell--r1{grid-area:2/2;}
  #iodatos .iod_mx_cell--f.iod_mx_cell--r2{grid-area:3/2;}
  #iodatos .iod_mx_cell--f.iod_mx_cell--r3{grid-area:4/2;}
  #iodatos .iod_mx_cell--m.iod_mx_cell--r1{grid-area:2/3;}
  #iodatos .iod_mx_cell--m.iod_mx_cell--r2{grid-area:3/3;}
  #iodatos .iod_mx_cell--m.iod_mx_cell--r3{grid-area:4/3;}
  /* la cabecera pasa a columna: icono con la línea colgando hacia abajo */
  #iodatos .iod_mx_head{width:auto; flex-direction:column; align-items:center; justify-content:flex-start;
    margin-bottom:-8px;}   /* Figma no deja gap entre la cabecera y la primera celda */
  #iodatos .iod_mx_line{width:1px; height:14px;}

  /* B4/B5: título más pequeño y menos aire */
  #iodatos .iod_dist_h{font-weight:400; font-size:21px; line-height:24px;}
  #iodatos .iod_gen .iod_dist_h{font-weight:500; font-size:24px; line-height:30px;}
  #iodatos .iod_dist_body{margin-top:24px;}
  #iodatos .iod_dist_l{text-align:left;}
  /* categoría · 565: 10,68 / 43,57 / 45,75 */
  #iodatos .iod_dist--cat .iod_dist_p--1{flex:10.68;}
  #iodatos .iod_dist--cat .iod_dist_p--2{flex:43.57;}
  #iodatos .iod_dist--cat .iod_dist_p--3{flex:45.75;}
  #iodatos .iod_dist--cat .iod_bar_seg--1{width:10.68%;}
  #iodatos .iod_dist--cat .iod_bar_seg--2{width:54.25%;}

  /* B7: sigue en 2 columnas pero más apretado; las cajas del azul se apilan */
  #iodatos .iod_cards{gap:8px;}
  #iodatos .iod_cards_col{gap:8px;}
  #iodatos .iod_card--blue{padding:8px 8px 16px;}
  #iodatos .iod_card_pair{flex-direction:column;}
  #iodatos .iod_card_pair .iod_box{gap:4px;}
  #iodatos .iod_card_row{gap:8px;}
  #iodatos .iod_card_row--top{gap:8px;}
  #iodatos .iod_box_n{font-size:19px; line-height:20px;}
  #iodatos .iod_card_l{font-size:20px; line-height:22px;}
  #iodatos .iod_box_split{flex-direction:column; gap:0;}

  /* B9: tarjetas apiladas */
  #iodatos .iod_train{flex-direction:column; gap:8px;}
  #iodatos .iod_train_card{padding:10px 14px;}
  #iodatos .iod_train_card:last-child{padding:16px 14px;}
  /* Figma 565: gap icono→línea 15 en la tarjeta 1 y 8 en la 2 */
  #iodatos .iod_train_card{gap:15px;}
  #iodatos .iod_train_card:last-child{gap:8px;}
  #iodatos .iod_train_body{padding-left:16px;}
  #iodatos .iod_train_card:first-child .iod_train_body{padding-top:4px; padding-bottom:4px;}
  #iodatos .iod_train_n{font-size:19px;}
  #iodatos .iod_train_data{gap:24px;}

  /* B10: tarjetas apiladas */
  #iodatos .iod_poll{grid-template-columns:minmax(0,1fr); gap:8px;}
}

/* ── Banda intermedia (565) · la tarjeta de encuesta pasa a FILA ───────── */
@container iod (min-width:430px) and (max-width:719px){
  #iodatos .iod_br565{display:inline;}
  /* Figma: la CAJA sigue midiendo 273 como las otras dos; lo que mide 122 es solo el
     nodo de texto, centrado dentro (texto en x=75,5 = (273-122)/2). */
  #iodatos .iod_mx_lbl--1 span{display:block; max-width:122px; margin-inline:auto;}
  #iodatos .iod_poll_card{flex-direction:row; align-items:center; padding:16px 16px 16px 8px;}
  #iodatos .iod_poll_top{flex:1 1 auto; align-items:flex-start;}
  #iodatos .iod_pill{flex:0 0 123px; width:123px;}
}

/* ── BP-B · layout de 290 ─────────────────────────────────────────────── */
@container iod (max-width:429px){
  /* OJO: las variables van en .iod__inner, NO en #iodatos: @container no reestila
     su propio contenedor. Puestas en #iodatos no se aplicaban y el 290 quedaba
     16px más estrecho de la cuenta. */
  #iodatos .iod__inner{--iod-pad:16px; --iod-gap:16px;}
  #iodatos .iod_br290{display:inline;}

  /* B1: el 290 no usa el token del DS, baja a 30/34 */
  #iodatos .iod_title{font-size:30px; line-height:34px;}

  /* B2: gap 8 y celdas en columna (icono sobre texto, todo centrado) */
  #iodatos .iod_staff{gap:8px;}
  #iodatos .iod_staff_box{gap:4px; padding:4px 8px 16px;}
  #iodatos .iod_staff_cell{flex-direction:column; gap:4px; text-align:center;}
  #iodatos .iod_staff_txt{text-align:center;}

  /* B3: columnas más estrechas, tipografía menor y sin la palabra mujeres/hombres.
     El texto se mantiene en el DOM (oculto visualmente) para el lector de pantalla. */
  #iodatos .iod_mx_grid{grid-template-columns:131fr 52fr 52fr; column-gap:4px; row-gap:4px;}
  #iodatos .iod_mx_lbl{font-size:14px; line-height:16px; padding:16px 8px; text-align:left; justify-content:flex-start;}
  #iodatos .iod_mx_pct{font-size:17px; line-height:17px;}
  #iodatos .iod_mx_who{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  #iodatos .iod_mx_cell{padding:10px 4px;}
  #iodatos .iod_mx_head{margin-bottom:-4px;}   /* row-gap 4 en 290 */

  /* B4/B5: la barra pasa a VERTICAL.
     3 pistas en fila: [% 51][barra 26][etiquetas 133], y cada pista de abajo arriba
     (column-reverse) para que el primer tramo quede en el lado plano = abajo. */
  #iodatos .iod_dist{padding:18px 16px 24px;}
  #iodatos .iod_dist_body{flex-direction:row; gap:8px; height:226px; margin-top:16px;}
  #iodatos .iod_dist_pcts{flex:0 0 51px; flex-direction:column-reverse;}
  #iodatos .iod_dist_lbls{flex:1 1 auto; flex-direction:column-reverse; gap:0;}
  #iodatos .iod_dist_p,#iodatos .iod_dist_l{display:flex; align-items:center;}
  #iodatos .iod_dist_p{justify-content:center; font-size:20px;}
  #iodatos .iod_dist_l{font-size:14px; line-height:16px; text-align:left;}
  /* en vertical las etiquetas SÍ son proporcionales (la columna tiene ancho fijo) */
  #iodatos .iod_dist--age .iod_dist_l--1{flex:18;}
  #iodatos .iod_dist--age .iod_dist_l--2{flex:62;}
  #iodatos .iod_dist--age .iod_dist_l--3{flex:20;}
  #iodatos .iod_dist--cat .iod_dist_l--1{flex:6;}
  #iodatos .iod_dist--cat .iod_dist_l--2{flex:43;}
  #iodatos .iod_dist--cat .iod_dist_l--3{flex:52;}
  #iodatos .iod_bar{flex:0 0 26px; height:auto; width:26px; flex-direction:column;
    justify-content:flex-end; container-type:size;}
  #iodatos .iod_bar_reveal{width:100%; height:100%; border-radius:11.218px 11.218px 0 0;}
  #iodatos .iod_bar_track{left:0; top:auto; bottom:0; width:100%; height:100cqh;}
  #iodatos .iod_bar_seg{
    top:auto; bottom:0; left:0; right:0; width:auto !important;
    border-radius:11.218px 11.218px 0 0;      /* redondeado arriba = lado de avance */
  }
  #iodatos .iod_dist--age .iod_bar_seg--1{height:18%;}
  #iodatos .iod_dist--age .iod_bar_seg--2{height:80%;}
  #iodatos .iod_dist--age .iod_bar_seg--3{height:100%;}
  /* categoría · 290: 12,39 / 44,69 / 42,92 */
  #iodatos .iod_dist--cat .iod_dist_p--1,#iodatos .iod_dist--cat .iod_dist_l--1{flex:12.39;}
  #iodatos .iod_dist--cat .iod_dist_p--2,#iodatos .iod_dist--cat .iod_dist_l--2{flex:44.69;}
  #iodatos .iod_dist--cat .iod_dist_p--3,#iodatos .iod_dist--cat .iod_dist_l--3{flex:42.92;}
  #iodatos .iod_dist--cat .iod_bar_seg--1{height:12.39%;}
  #iodatos .iod_dist--cat .iod_bar_seg--2{height:57.08%;}
  #iodatos .iod_dist--cat .iod_bar_seg--3{height:100%;}

  /* B7: una sola columna */
  #iodatos .iod_cards{flex-direction:column; gap:8px;}
  #iodatos .iod_cards_col{gap:8px;}
  #iodatos .iod_card--blue{padding:4px 12px 16px;}
  #iodatos .iod_card_row{gap:16px;}
  #iodatos .iod_box{padding:8px 12px;}
  #iodatos .iod_box_split{flex-direction:row; gap:16px;}

  /* B9: la tarjeta se reordena — [icono | título] arriba, línea HORIZONTAL, cifras en fila */
  #iodatos .iod_train_card{
    display:grid; grid-template-columns:72px minmax(0,1fr); column-gap:8px; row-gap:12px;
    padding:16px; align-items:center;
  }
  #iodatos .iod_train_ico{grid-area:1/1;}
  #iodatos .iod_train_body{display:contents;}
  #iodatos .iod_train_t{grid-area:1/2; font-size:20px; line-height:25px;}
  #iodatos .iod_train_data{
    grid-area:2/1/auto/span 2;
    flex-direction:column; gap:12px;
    border-left:0; border-top:1px solid var(--iod-sand3); padding-left:0; padding-top:16px;
  }
  #iodatos .iod_train_fig{flex-direction:row; align-items:baseline; gap:16px;}
  #iodatos .iod_train_n{font-size:17px;}

  /* B8 · 290: la ilustración se mete DENTRO del contenido y se reescala.
     T1: [ilustración | título] arriba y los bullets debajo a ancho completo.
     T2: título arriba y debajo [ilustración | texto], sin punto de bullet. */
  #iodatos .iod_rec_card{display:grid; column-gap:16px; row-gap:16px; align-items:center;}
  #iodatos .iod_rec_body{display:contents;}
  #iodatos .iod_rec_card--1{grid-template-columns:73px minmax(0,1fr);}
  #iodatos .iod_rec_card--1 .iod_rec_ill{grid-area:1/1; width:73px; height:86px;}
  #iodatos .iod_rec_card--1 .iod_rec_t{grid-area:1/2;}
  #iodatos .iod_rec_card--1 .iod_rec_list{grid-area:2/1/auto/span 2;}
  #iodatos .iod_rec_card--2{grid-template-columns:80px minmax(0,1fr); column-gap:8px;}
  #iodatos .iod_rec_card--2 .iod_rec_t{grid-area:1/1/auto/span 2;}
  #iodatos .iod_rec_card--2 .iod_rec_ill{grid-area:2/1; width:80px; height:86px;}
  #iodatos .iod_rec_card--2 .iod_rec_list{grid-area:2/2;}
  #iodatos .iod_rec_card--2 .iod_rec_list li{padding-left:0;}
  #iodatos .iod_rec_card--2 .iod_rec_list li::before{display:none;}

  /* B6 · 290: la ilustración va ENCIMA de las barras */
  #iodatos .iod_gen{padding:24px 16px 16px;}
  #iodatos .iod_gen .iod_dist_h{font-weight:400; font-size:21px; line-height:24px;}
  #iodatos .iod_gen_body{gap:8px;}
  #iodatos .iod_gen_row{flex-direction:column; align-items:stretch; gap:8px;}
  #iodatos .iod_gen_ill{width:100%; aspect-ratio:228.07/133.36;}
  /* geometría del frame 290 (anillo.md §7.4) */
  #iodatos .iod_fig{width:32.80%;}
  #iodatos .iod_fig--mujer{left:0; top:36.52%;}
  #iodatos .iod_fig--hombre{left:66.29%; top:12.89%;}
  #iodatos .iod_gen_ring{left:40.74%; top:47.55%; width:25.78%;}
  #iodatos .iod_gen_tag--f{left:25.38%; top:21.28%;}
  #iodatos .iod_gen_tag--m{left:auto; right:0; top:68.43%;}
  #iodatos .iod_gen_line--f{left:31.59%; top:39.88%; width:17.95%; height:10.04%;}
  #iodatos .iod_gen_line--m{left:61.11%; top:86.43%; width:31.42%;}
  #iodatos .iod_gen_bars{flex:1 1 auto; gap:16px;}
  #iodatos .iod_gen_bar--1,#iodatos .iod_gen_bar--2,#iodatos .iod_gen_bar--3{height:105px;}
  #iodatos .iod_gen_note{text-align:right;}

  /* B10 · 290: Figma saca el icono de la 2ª tarjeta 5px fuera del padding */
  #iodatos .iod_poll_card:nth-child(2) .iod_poll_ico{margin-left:-5px;}
  #iodatos .iod_poll_card:nth-child(2) .iod_poll_t{margin-left:-5px;}

  /* B10 vuelve a columna con la píldora a ancho completo */
  #iodatos .iod_h{font-weight:400; font-size:21px; line-height:24px;}
}

/* ==========================================================================
   Animaciones (ver specs/011-.../animations.md)

   Se anima el ANCHO de .iod_bar_reveal, la capa que recorta. NO se usa `clip-path`:
   Chrome no interpola `clip-path: inset(... round ...)` —salta al valor final— y sin
   `round` la punta de avance no saldría redondeada.
   Se usa `animation` y no `transition` porque una transition solo interpola si el
   navegador ya pintó el valor de partida, y con la pieza visible al cargar el disparo
   cae en el mismo fotograma.
   `prefers-reduced-motion` lo resuelve main.js (no añade .iod--js), no un @media.
   ========================================================================== */
@keyframes iod-bar-h{ from{ width:0; }  to{ width:100%; } }
@keyframes iod-bar-v{ from{ height:0; } to{ height:100%; } }
@keyframes iod-fade{  from{ opacity:0; } to{ opacity:1; } }

/* estado inicial mientras el bloque no ha entrado en pantalla */
#iodatos.iod--js .iod_bar_reveal{width:0;}
#iodatos.iod--js .iod_fig_person{opacity:0;}

/* A-001 / A-002 · la barra crece desde su extremo plano, con la punta redondeada */
#iodatos.iod--js [data-anim="bar"].is-in .iod_bar_reveal{
  width:100%;
  animation:iod-bar-h 1200ms cubic-bezier(.22,.61,.36,1) 150ms both;
}

/* A-003 · las figuras aparecen dentro de su círculo (solo fundido) */
#iodatos.iod--js [data-anim="figs"].is-in .iod_fig_person{
  opacity:1;
  animation:iod-fade 900ms cubic-bezier(.22,.61,.36,1) 250ms both;
}
#iodatos.iod--js [data-anim="figs"].is-in .iod_fig--hombre .iod_fig_person{animation-delay:450ms;}

/* en vertical (290) crece de ABAJO hacia arriba */
@container iod (max-width:429px){
  #iodatos.iod--js .iod_bar_reveal{width:100%; height:0;}
  #iodatos.iod--js [data-anim="bar"].is-in .iod_bar_reveal{height:100%; animation-name:iod-bar-v;}
}