/* =============================================================================
   Historia de la inteligencia artificial  ·  estático de iberdrola.com
   Slider de 15 hitos con línea del tiempo y eras. Dos anchos de diseño: 565 y
   290. Un solo punto de cambio de disposición: @container ih 500px (D09).
   Medidas: specs/historia-ia/design/  (Figma es la única fuente)
   Todo el estado sale de `data-active` en la raíz.
   ============================================================================= */

/* ===== IberPangea (self-contained) ===========================================
   Sin la fuente real cambia el ancho de línea, y con él el nº de líneas de cada
   hito, que es quien decide su alto. La Italic de IberPangea Text sólo la usa el
   contador «N de 15». */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/historia-ia/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/historia-ia/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/historia-ia/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/historia-ia/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

#iahistory{
  --ih-forest:#00402A;  --ih-green1:#007F33;  --ih-sand1:#FFFEFF;  --ih-sand3:#D8CFC7;
  --ih-sand7:#3A3735;
  /* Las cuatro eras (textos.md): trazo de la pastilla y de la caja del hito. */
  --ih-e1:#5BD38C;  --ih-e2:#6BDAFF;  --ih-e3:#FFCD52;  --ih-e4:#D8CFC7;
}

/* ===== Marco de la pieza =====================================================
   `margin:0 auto` SIN margen vertical: se incrusta y el sitio pone su espaciado.
   Crece hasta 980 (D06 revisado, 1 oct 2026): el diseno se hizo a 565 y en la
   columna de contenido del portal se quedaba corta. Desviacion autorizada por
   quien encarga; de 565 a 980 solo se ensancha el texto del hito, porque el
   dibujo (140) y el pie tienen medida propia y el resto va en % o en `clamp()`
   ya topado. El trazo exterior va como sombra interior:
   con `border` el `inline-size` del contenedor bajaría 2 px y el corte de 500
   no caería donde debe (RD-11). */
#iahistory{
  container-name:ih; container-type:inline-size;
  width:100%; max-width:980px; margin:0 auto; box-sizing:border-box;
  position:relative; background:var(--ih-sand1); border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--ih-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 sin cambiar nada visualmente. */
#iahistory *{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;}
#iahistory ul,#iahistory ol,#iahistory li{list-style:none;}
#iahistory li::marker{content:none;}
#iahistory li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#iahistory *` NO alcanza a los pseudo-elementos: se blindan aparte, sin `content`. */
#iahistory *::before,#iahistory *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#iahistory img{max-width:none; border:0;}
#iahistory button{font:inherit; cursor:pointer; border:0; background:transparent;
  color:inherit; appearance:none; -webkit-appearance:none; border-radius:0; min-width:0;
  min-height:0; box-shadow:none;}
/* La RAÍZ declara todo lo heredable: si no, hereda del portal y el `inherit` de
   arriba propaga fielmente el valor del theme hacia dentro. */
#iahistory{
  font-family:'IberPangea',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--ih-forest);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none;
}
/* `display` NO se hereda: se declara elemento a elemento y con `!important`. En
   cada flex, también dirección y hueco. Lo que cambia de tramo se reafirma en él. */
#iahistory{display:block !important;}
#iahistory .ih_in{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:flex-start; justify-content:flex-start; gap:29px;}
#iahistory .ih_title{display:block !important;}
#iahistory .ih_era{display:block !important;}
#iahistory .ih_era_t{display:none !important;}
#iahistory .ih_body{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:24px; align-self:stretch;}
#iahistory .ih_line{display:block !important;}
#iahistory .ih_raya,#iahistory .ih_dot{display:block !important;}
#iahistory .ih_year{display:none !important;}
#iahistory .ih_pie{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:space-between; gap:16px;}
#iahistory .ih_cont{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center;}
#iahistory .ih_cont_v,#iahistory .ih_cur{display:inline !important;}
#iahistory .ih_arrows{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start; gap:16px;}
#iahistory .ih_arrow{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center;}
#iahistory .ih_arrow svg{display:block !important;}
#iahistory .ih_viewport{display:block !important;}
/* `align-items:flex-start` es imprescindible: con `stretch` todos los hitos
   medirían lo que el de 2011 y el alto no cambiaría (A-002). */
#iahistory .ih_track{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:flex-start; justify-content:flex-start; gap:20px;}
#iahistory .ih_hito{display:block !important;}
#iahistory .ih_meta{display:block !important;}
#iahistory .ih_meta_y,#iahistory .ih_meta_e{display:inline-block !important;}
#iahistory .ih_caja{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:16px;}
#iahistory .ih_fila{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start; gap:16px;}
#iahistory .ih_img{display:block !important;}
#iahistory .ih_img img{display:block !important;}
#iahistory .ih_txt{display:block !important;}
#iahistory .ih_v,#iahistory .ih_en{display:inline !important;}
#iahistory strong{display:inline !important; font-weight:600;}

/* Sólo para lectores de pantalla. */
#iahistory .ih_sr,
#iahistory[data-js] .ih_meta{position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;}

/* =============================================================================
   TRAMO BASE = 290 (móvil). El padding va en el wrapper `.ih_in`: `@container`
   no reestila al propio contenedor. Laterales 16 → 32 y título 30 → 32 se
   interpolan con `cqi` entre 290 y 565 (RD-03); escrito aquí y no en una
   variable de la raíz, que mediría contra el contenedor de fuera.
   ============================================================================= */
#iahistory .ih_in{padding:24px clamp(16px, calc(5.81818cqi - 0.87273px), 32px);}

/* ===== Título ================================================================
   !important en el color: en móvil el theme pinta los h2 con `#427314 !important`. */
#iahistory .ih_title{font-weight:600; font-size:clamp(30px, calc(0.72727cqi + 27.89091px), 32px);
  line-height:34px; color:var(--ih-green1) !important; align-self:stretch;}

/* ===== Pastilla de era =======================================================
   IberPangea Medium 16 (D02) con alto de línea 19: mide 39 como en Figma (T8). */
#iahistory .ih_era{padding:10px 16px; border-radius:40px;
  box-shadow:inset 0 0 0 1px var(--ih-era-act);
  font-weight:500; font-size:16px; line-height:19px; color:var(--ih-sand7); white-space:nowrap;}
#iahistory:is([data-active="1"],[data-active="2"],[data-active="3"],[data-active="4"],
  [data-active="5"],[data-active="6"],[data-active="7"]){--ih-era-act:var(--ih-e1);}
#iahistory:is([data-active="8"],[data-active="9"],[data-active="10"],[data-active="11"]){--ih-era-act:var(--ih-e2);}
#iahistory:is([data-active="12"],[data-active="13"],[data-active="14"]){--ih-era-act:var(--ih-e3);}
#iahistory[data-active="15"]{--ih-era-act:var(--ih-e4);}
#iahistory:is([data-active="1"],[data-active="2"],[data-active="3"],[data-active="4"],
  [data-active="5"],[data-active="6"],[data-active="7"]) .ih_era_t[data-era="1"],
#iahistory:is([data-active="8"],[data-active="9"],[data-active="10"],[data-active="11"]) .ih_era_t[data-era="2"],
#iahistory:is([data-active="12"],[data-active="13"],[data-active="14"]) .ih_era_t[data-era="3"],
#iahistory[data-active="15"] .ih_era_t[data-era="4"]{display:inline !important;}

/* ===== Línea del tiempo (móvil) ==============================================
   Alto 46: año en y 0–25, puntos con centro en 40,5, raya de y 40 a 41. Dos
   tramos (D05): 1–6 y 7–15, que cambian de golpe (D15). Puntos en % de la raya
   (D16): a 290 dan los px de Figma. */
#iahistory .ih_line{position:relative; height:46px;}
#iahistory .ih_raya{position:absolute; left:0; right:0; top:40px; height:1px;
  background:var(--ih-forest);}
#iahistory .ih_dot{position:absolute; top:40.5px; width:5px; height:5px; border-radius:50%;
  background:var(--ih-forest); transform:translate(-50%,-50%);}
#iahistory .ih_year{position:absolute; top:0; font-weight:500; font-size:20px;
  line-height:25px; color:var(--ih-forest); white-space:nowrap; transform:translateX(-50%);}
#iahistory[data-active="1"] .ih_dot[data-h="1"],
#iahistory[data-active="2"] .ih_dot[data-h="2"],
#iahistory[data-active="3"] .ih_dot[data-h="3"],
#iahistory[data-active="4"] .ih_dot[data-h="4"],
#iahistory[data-active="5"] .ih_dot[data-h="5"],
#iahistory[data-active="6"] .ih_dot[data-h="6"],
#iahistory[data-active="7"] .ih_dot[data-h="7"],
#iahistory[data-active="8"] .ih_dot[data-h="8"],
#iahistory[data-active="9"] .ih_dot[data-h="9"],
#iahistory[data-active="10"] .ih_dot[data-h="10"],
#iahistory[data-active="11"] .ih_dot[data-h="11"],
#iahistory[data-active="12"] .ih_dot[data-h="12"],
#iahistory[data-active="13"] .ih_dot[data-h="13"],
#iahistory[data-active="14"] .ih_dot[data-h="14"],
#iahistory[data-active="15"] .ih_dot[data-h="15"]{width:11px; height:11px;
  background:var(--ih-green1);}
#iahistory[data-active="1"] .ih_year[data-h="1"],
#iahistory[data-active="2"] .ih_year[data-h="2"],
#iahistory[data-active="3"] .ih_year[data-h="3"],
#iahistory[data-active="4"] .ih_year[data-h="4"],
#iahistory[data-active="5"] .ih_year[data-h="5"],
#iahistory[data-active="6"] .ih_year[data-h="6"],
#iahistory[data-active="7"] .ih_year[data-h="7"],
#iahistory[data-active="8"] .ih_year[data-h="8"],
#iahistory[data-active="9"] .ih_year[data-h="9"],
#iahistory[data-active="10"] .ih_year[data-h="10"],
#iahistory[data-active="11"] .ih_year[data-h="11"],
#iahistory[data-active="12"] .ih_year[data-h="12"],
#iahistory[data-active="13"] .ih_year[data-h="13"],
#iahistory[data-active="14"] .ih_year[data-h="14"],
#iahistory[data-active="15"] .ih_year[data-h="15"]{display:block !important;}
/* Tramo que no toca: fuera. */
#iahistory:is([data-active="1"],[data-active="2"],[data-active="3"],[data-active="4"],
  [data-active="5"],[data-active="6"]) .ih_dot:is([data-h="7"],[data-h="8"],[data-h="9"],
  [data-h="10"],[data-h="11"],[data-h="12"],[data-h="13"],[data-h="14"],[data-h="15"]),
#iahistory:not([data-active="1"],[data-active="2"],[data-active="3"],[data-active="4"],
  [data-active="5"],[data-active="6"]) .ih_dot:is([data-h="1"],[data-h="2"],[data-h="3"],
  [data-h="4"],[data-h="5"],[data-h="6"]){display:none !important;}
#iahistory [data-h="1"]:is(.ih_dot,.ih_year){left:13.0155%;}
#iahistory [data-h="2"]:is(.ih_dot,.ih_year){left:28.6822%;}
#iahistory [data-h="3"]:is(.ih_dot,.ih_year){left:41.9302%;}
#iahistory [data-h="4"]:is(.ih_dot,.ih_year){left:52.7752%;}
#iahistory [data-h="5"]:is(.ih_dot,.ih_year){left:59.2016%;}
#iahistory [data-h="6"]:is(.ih_dot,.ih_year){left:64.0194%;}
#iahistory [data-h="7"]:is(.ih_dot,.ih_year){left:13.0155%;}
#iahistory [data-h="8"]:is(.ih_dot,.ih_year){left:23.4806%;}
#iahistory [data-h="9"]:is(.ih_dot,.ih_year){left:41.3101%;}
#iahistory [data-h="10"]:is(.ih_dot,.ih_year){left:46.7364%;}
#iahistory [data-h="11"]:is(.ih_dot,.ih_year){left:52.1628%;}
#iahistory [data-h="12"]:is(.ih_dot,.ih_year){left:62.6279%;}
#iahistory [data-h="13"]:is(.ih_dot,.ih_year){left:66.1163%;}
#iahistory [data-h="14"]:is(.ih_dot,.ih_year){left:69.6047%;}
#iahistory [data-h="15"]:is(.ih_dot,.ih_year){left:73.9031%;}

/* ===== Pie: contador y flechas ===============================================
   En el DOM va ANTES del visor (orden de lectura = orden visual en móvil); en
   ≥500 se baja con `order`. */
#iahistory .ih_pie{min-height:32px;}   /* mínimo, no fijo: aguanta el espaciado de texto aumentado */
#iahistory .ih_cont{min-height:32px; padding:5px 16px; border-radius:24px;
  box-shadow:inset 0 0 0 1px var(--ih-forest);
  font-family:'IberPangea Text','IberPangea',sans-serif; font-style:italic;
  font-size:14px; line-height:18px; color:var(--ih-forest); white-space:nowrap;}
#iahistory .ih_cur{color:var(--ih-green1);}
/* Flechas (D14): normal = trazo y punta Forest; al pasar el ratón y al pulsar =
   relleno Green 1 y punta Sand 1; apagada = la normal a .5 y sin reaccionar. */
#iahistory .ih_arrow{width:32px; height:32px; flex:0 0 auto; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--ih-forest); color:var(--ih-forest);
  background:transparent;}
#iahistory .ih_arrow svg{width:32px; height:32px; fill:currentColor;}
#iahistory .ih_prev svg{transform:rotate(180deg);}
@media (hover:hover){
  #iahistory .ih_arrow:not([aria-disabled="true"]):hover{background:var(--ih-green1);
    box-shadow:none; color:var(--ih-sand1);}
}
#iahistory .ih_arrow:not([aria-disabled="true"]):active{background:var(--ih-green1);
  box-shadow:none; color:var(--ih-sand1);}
#iahistory .ih_arrow[aria-disabled="true"]{opacity:.5; cursor:default;}
#iahistory .ih_arrow:focus-visible{outline:3px solid var(--ih-forest) !important;
  outline-offset:2px !important;}

/* ===== Visor y carril (A-001, A-002) =========================================
   El carril se desplaza `(-100% - 20px) × (N-1)`: mide lo que el visor. Durante
   el arrastre el JS suma `--ih-drag` en px y al soltar lo vuelve a 0. */
#iahistory .ih_viewport{position:relative; overflow:hidden; touch-action:pan-y;}
#iahistory[data-js] .ih_viewport{cursor:grab;}
#iahistory[data-drag] .ih_viewport{cursor:grabbing;}
#iahistory[data-drag] .ih_viewport *{user-select:none; -webkit-user-select:none;}
#iahistory .ih_track{--ih-n:0;
  transform:translateX(calc((-100% - 20px) * var(--ih-n) + var(--ih-drag, 0px)));}
#iahistory[data-active="2"] .ih_track{--ih-n:1;}
#iahistory[data-active="3"] .ih_track{--ih-n:2;}
#iahistory[data-active="4"] .ih_track{--ih-n:3;}
#iahistory[data-active="5"] .ih_track{--ih-n:4;}
#iahistory[data-active="6"] .ih_track{--ih-n:5;}
#iahistory[data-active="7"] .ih_track{--ih-n:6;}
#iahistory[data-active="8"] .ih_track{--ih-n:7;}
#iahistory[data-active="9"] .ih_track{--ih-n:8;}
#iahistory[data-active="10"] .ih_track{--ih-n:9;}
#iahistory[data-active="11"] .ih_track{--ih-n:10;}
#iahistory[data-active="12"] .ih_track{--ih-n:11;}
#iahistory[data-active="13"] .ih_track{--ih-n:12;}
#iahistory[data-active="14"] .ih_track{--ih-n:13;}
#iahistory[data-active="15"] .ih_track{--ih-n:14;}
#iahistory .ih_hito{position:relative; flex:0 0 100%; min-width:0;}
/* En reposo, los hitos que esperan fuera del visor se encogen a cero: el visor ya
   los recorta, pero su caja seguiría saliéndose de la página y cualquier medidor
   de desbordes los contaría. `scale(0)` no toca el layout (el carril y el alto se
   calculan igual) y deja su caja en 0 × 0. Mientras se desliza o se arrastra, el
   JS les pone `transform:none` en línea a los que tienen que verse. */
#iahistory[data-js] .ih_hito{transform:scale(0);}
#iahistory[data-active="1"] .ih_hito[data-h="1"],
#iahistory[data-active="2"] .ih_hito[data-h="2"],
#iahistory[data-active="3"] .ih_hito[data-h="3"],
#iahistory[data-active="4"] .ih_hito[data-h="4"],
#iahistory[data-active="5"] .ih_hito[data-h="5"],
#iahistory[data-active="6"] .ih_hito[data-h="6"],
#iahistory[data-active="7"] .ih_hito[data-h="7"],
#iahistory[data-active="8"] .ih_hito[data-h="8"],
#iahistory[data-active="9"] .ih_hito[data-h="9"],
#iahistory[data-active="10"] .ih_hito[data-h="10"],
#iahistory[data-active="11"] .ih_hito[data-h="11"],
#iahistory[data-active="12"] .ih_hito[data-h="12"],
#iahistory[data-active="13"] .ih_hito[data-h="13"],
#iahistory[data-active="14"] .ih_hito[data-h="14"],
#iahistory[data-active="15"] .ih_hito[data-h="15"]{transform:none;}

/* ===== Caja del hito (móvil) =================================================
   Trazo de su era. Dibujo encima del texto: la caja de 140 centrada en una de
   152 (6 px por lado, RD-10) y el texto en un bloque Sand 1 con padding 24. */
#iahistory .ih_hito[data-era="1"]{--ih-era:var(--ih-e1);}
#iahistory .ih_hito[data-era="2"]{--ih-era:var(--ih-e2);}
#iahistory .ih_hito[data-era="3"]{--ih-era:var(--ih-e3);}
#iahistory .ih_hito[data-era="4"]{--ih-era:var(--ih-e4);}
#iahistory .ih_caja{background:#FFF; border-radius:15px; padding:16px;
  box-shadow:inset 0 0 0 1px var(--ih-era);}
#iahistory .ih_fila{border-radius:8px; background:#FFF;}
#iahistory .ih_img{flex:0 0 auto; width:152px; height:152px; padding:6px;}
#iahistory .ih_img img{width:140px; height:140px; object-fit:contain;
  -webkit-user-drag:none; user-select:none;}
#iahistory .ih_txt{align-self:stretch; padding:24px; border-radius:15px;
  background:var(--ih-sand1); font-size:16px; line-height:20px; color:var(--ih-forest);}
#iahistory .ih_v{color:var(--ih-green1);}

/* ===== Animaciones (animations.md) ===========================================
   Sólo 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. */
#iahistory[data-anim] .ih_track{transition:transform .3s ease;}
#iahistory[data-anim] .ih_viewport{transition:height .3s ease;}
#iahistory[data-anim] .ih_arrow{transition:background-color .15s ease, color .15s ease,
  box-shadow .15s ease;}
#iahistory[data-drag] .ih_track,
#iahistory[data-anim] .ih_viewport[data-sin-anim]{transition:none;}
@media (prefers-reduced-motion: reduce){
  #iahistory[data-anim] .ih_track,
  #iahistory[data-anim] .ih_viewport,
  #iahistory[data-anim] .ih_arrow{transition:none;}
}

/* ===== Sin JS (RF-11) ========================================================
   Ningún control muerto: fuera flechas, contador, línea y pastilla, y los 15
   hitos apilados, cada uno con su año y su era visibles. Con la media query y no
   con `:not([data-js])`: así, con JS, no se ve ni un instante la columna de 15
   mientras se descarga el script. */
@media (scripting: none){
  #iahistory :is(.ih_era,.ih_line,.ih_pie){display:none !important;}
  #iahistory .ih_track{flex-direction:column; align-items:stretch; gap:24px; transform:none;}
  #iahistory .ih_hito{flex:0 0 auto;}
  #iahistory .ih_meta{display:flex !important; flex-direction:row; flex-wrap:wrap;
    align-items:center; justify-content:flex-start; gap:16px; margin-bottom:16px;}
}
#iahistory .ih_meta_y{font-weight:500; font-size:20px; line-height:25px; color:var(--ih-forest);}
#iahistory .ih_meta_e{padding:10px 16px; border-radius:40px;
  box-shadow:inset 0 0 0 1px var(--ih-era);
  font-weight:500; font-size:16px; line-height:19px; color:var(--ih-sand7); white-space:nowrap;}

/* =============================================================================
   TRAMO ≥ 500 (tablet). Caja con el dibujo AL LADO del texto, pie DEBAJO de la
   caja y línea COMPLETA. Es el ÚNICO punto de cambio de disposición (RD-04).
   ============================================================================= */
@container ih (min-width: 500px){
  #iahistory .ih_body{gap:16px;}
  #iahistory .ih_line{order:1;}
  #iahistory .ih_viewport{order:2;}
  #iahistory .ih_pie{order:3;}

  /* Línea: alto 41, año en y 0–25, puntos con centro en 35,5, raya de y 35 a 36. */
  #iahistory .ih_line{height:41px;}
  #iahistory .ih_raya{top:35px;}
  #iahistory .ih_dot{top:35.5px;}
  /* Los 15 a la vez: se anula el tramo de móvil (misma especificidad, va después). */
  #iahistory:is([data-active="1"],[data-active="2"],[data-active="3"],[data-active="4"],
    [data-active="5"],[data-active="6"]) .ih_dot:is([data-h="7"],[data-h="8"],[data-h="9"],
    [data-h="10"],[data-h="11"],[data-h="12"],[data-h="13"],[data-h="14"],[data-h="15"]),
  #iahistory:not([data-active="1"],[data-active="2"],[data-active="3"],[data-active="4"],
    [data-active="5"],[data-active="6"]) .ih_dot:is([data-h="1"],[data-h="2"],[data-h="3"],
    [data-h="4"],[data-h="5"],[data-h="6"]){display:block !important;}
  #iahistory [data-h="1"]:is(.ih_dot,.ih_year){left:3.2934%;}
  #iahistory [data-h="2"]:is(.ih_dot,.ih_year){left:14.2715%;}
  #iahistory [data-h="3"]:is(.ih_dot,.ih_year){left:20.8583%;}
  #iahistory [data-h="4"]:is(.ih_dot,.ih_year){left:26.2475%;}
  #iahistory [data-h="5"]:is(.ih_dot,.ih_year){left:29.4411%;}
  #iahistory [data-h="6"]:is(.ih_dot,.ih_year){left:31.8363%;}
  #iahistory [data-h="7"]:is(.ih_dot,.ih_year){left:64.2715%;}
  #iahistory [data-h="8"]:is(.ih_dot,.ih_year){left:69.6607%;}
  #iahistory [data-h="9"]:is(.ih_dot,.ih_year){left:78.8423%;}
  #iahistory [data-h="10"]:is(.ih_dot,.ih_year){left:81.6367%;}
  #iahistory [data-h="11"]:is(.ih_dot,.ih_year){left:84.4311%;}
  #iahistory [data-h="12"]:is(.ih_dot,.ih_year){left:89.8204%;}
  #iahistory [data-h="13"]:is(.ih_dot,.ih_year){left:91.6168%;}
  #iahistory [data-h="14"]:is(.ih_dot,.ih_year){left:93.4132%;}
  #iahistory [data-h="15"]:is(.ih_dot,.ih_year){left:95.6267%;}
  /* El año del primero arranca con la raya y el del último acaba con ella. */
  #iahistory .ih_year[data-h="1"]{left:0; transform:none;}
  #iahistory .ih_year[data-h="15"]{left:auto; right:0; transform:none;}

  /* Caja: dibujo de 140 al lado del texto, fila con padding 8 16 y radio 8. */
  #iahistory .ih_fila{flex-direction:row; align-items:center; padding:8px 16px;}
  #iahistory .ih_img{width:140px; height:140px; padding:0;}
  #iahistory .ih_txt{flex:1 1 0; min-width:0; align-self:auto; padding:0;
    border-radius:0; background:transparent;}

  @media (scripting: none){ #iahistory .ih_track{gap:16px;} }
}