/* =============================================================================
   Reactores SMR de un vistazo: datos y magnitudes clave
   Estático de iberdrola.com. Replica partes-centro-transformacion (029) bajo su scope.
   Dos anchos de diseño: 565 y 290. Un solo punto de cambio de layout: @container 565.
   Medidas: specs/reactores-smr/design/
   ============================================================================= */

/* ===== IberPangea + IberPangea Text (dos familias, RD-14) ====================
   Sin la fuente real cambia el ancho de línea, y con él el de las etiquetas —que se ajustan
   a su contenido— y el número de líneas de las tarjetas. */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/reactores-smr/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/reactores-smr/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/reactores-smr/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/reactores-smr/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/reactores-smr/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* tokens.json */
#reactoressmr{
  --rs-green1:#007F33;  --rs-ibergreen:#00A443;  --rs-forest:#00402A;
  --rs-sand1:#FFFEFF;   --rs-sand3:#D8CFC7;      --rs-ibersand:#FFF5EC;
  --rs-sky2:#0792E5;    --rs-blanco:#FFFFFF;
}

/* ===== Marco =================================================================
   El trazo va como `box-shadow: inset`, NO como `border`: en Figma el trazo no consume
   layout (RD-13). Igual en etiquetas, cuerpo de la tarjeta y contador.
   `box-sizing` incluye la RAÍZ: `#scope *` no alcanza al propio scope.
   La raíz NO lleva padding: es el contenedor del @container y su ancho tiene que ser el
   del marco entero; el padding va en `rs_inner`. */
#reactoressmr,#reactoressmr *,
#reactoressmr *::before,#reactoressmr *::after{box-sizing:border-box;}
#reactoressmr{
  container-type:inline-size; container-name:rs;
  width:100%; max-width:980px; margin:0 auto; padding:0;
  background:var(--rs-sand1); border:0; border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--rs-sand3);
  position:relative; text-align:left;
}

/* ===== Blindaje frente al theme de Liferay (F4, P4) ==========================
   La herencia PIERDE contra cualquier declaración del theme; `inherit` sí es una
   declaración: gana y conserva el valor del padre. */
#reactoressmr *{color:inherit; font:inherit; font-size:inherit; line-height:inherit;
  letter-spacing:inherit; text-align:inherit; text-transform:inherit; white-space:inherit;
  text-indent:0; text-decoration:none; margin:0; padding:0;}
#reactoressmr ul,#reactoressmr ol,#reactoressmr li{list-style:none;}
#reactoressmr li::marker{content:none;}
#reactoressmr li::before{content:'' !important; display:none !important; margin:0 !important;}
#reactoressmr *::before,#reactoressmr *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#reactoressmr img{max-width:100%;}
/* Los `button` (spec §8): el theme les pone caja, sombra, transición y mayúsculas. Esto es la
   base; cada clase declara encima su trazo y su foco. */
#reactoressmr button{font:inherit; cursor:pointer; border:0; border-radius:0;
  background:transparent; box-shadow:none; color:inherit; width:auto; min-width:0;
  height:auto; min-height:0; transition:none; transform:none; outline:0;
  appearance:none; -webkit-appearance:none; text-transform:none;}
/* La RAÍZ declara todo lo heredable: si no, hereda de los `div` del portal. */
#reactoressmr{
  font-family:'IberPangea',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--rs-forest);
  letter-spacing:normal; text-transform:none; white-space:normal; text-decoration:none;
  font-synthesis:none;
}
/* `display` NO se hereda: se declara elemento a elemento y con `!important`. Lo que cambia
   entre tramos (conectores, saltos de línea) se reafirma en cada tramo, más abajo. */
#reactoressmr{display:block !important;}
#reactoressmr .rs_titulo,#reactoressmr .rs_lienzo,#reactoressmr .rs_arte,
#reactoressmr .rs_etiquetas,#reactoressmr .rs_tarjeta_tit,#reactoressmr .rs_tarjeta_txt{display:block !important;}
#reactoressmr .rs_arte svg,#reactoressmr .rs_arte img,#reactoressmr .rs_ico{display:block !important;}
#reactoressmr .rs_defs{display:none !important;}
#reactoressmr .rs_tit1,#reactoressmr .rs_esp,#reactoressmr .rs_tit2,
#reactoressmr .rs_et{display:inline !important;}
/* El contador es UN solo item flex (`.rs_val`) con dos inlines dentro: colgados del flex,
   se blockifican y el navegador se come el espacio de « de 7» (lección de la 022). */
#reactoressmr .rs_val,#reactoressmr .rs_cur{display:inline !important;}
/* En una caja flex no basta con `display`: el theme mete `div{flex-direction:column-reverse;
   gap:0; align-items:flex-end…}` y pisa lo que no declaremos. */
#reactoressmr .rs_inner,#reactoressmr .rs_cuerpo{
  display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#reactoressmr .rs_escenario{display:block !important;}
#reactoressmr .rs_etiqueta{
  display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start;}
/* Las rejillas también: el `align-items:flex-end` del theme deja la cabecera sin estirar. */
#reactoressmr .rs_tarjetas,#reactoressmr .rs_tarjeta{display:grid !important;
  align-items:stretch; justify-items:stretch; align-content:start; justify-content:stretch; gap:0;}
#reactoressmr .rs_tarjeta_cab{
  display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start;}
#reactoressmr .rs_tarjeta_cuerpo{
  display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch;}
#reactoressmr .rs_pie{
  display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:space-between;}
#reactoressmr .rs_flechas{
  display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-end;}
#reactoressmr .rs_contador,#reactoressmr .rs_num,#reactoressmr .rs_tnum{
  display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center;}
#reactoressmr .rs_flecha{display:block !important;}

/* =============================================================================
   TRAMO MÓVIL (base) — diseño de 290
   ============================================================================= */
#reactoressmr .rs_inner{padding:32px 16px 24px; gap:32px;}
#reactoressmr .rs_cuerpo{gap:24px;}

/* ===== Título (RD-07) ========================================================
   En móvil la línea que lleva el espacio entre las dos partes va a 32/36, como en Figma:
   la caja mide 104 = 34 + 36 + 34. El color con `!important`: el theme pinta los `h2` en
   verde oscuro en móvil (P4). */
#reactoressmr .rs_titulo{font-family:'IberPangea',sans-serif; font-weight:600;
  font-size:30px; line-height:34px; color:var(--rs-green1) !important;}
#reactoressmr .rs_esp{font-size:32px; line-height:36px;}
#reactoressmr .rs_tit2{font-weight:400;}

/* ===== Escenario (RD-03, RD-04, RD-05) =======================================
   Abajo escala ENTERO —dibujo, conectores, etiquetas y su texto— con `cqi`: 1 px de diseño
   son 100/258 = 0,387597cqi del escenario (el contenido a 290). El lienzo de Figma mide 262
   sobre 258 y arranca en el borde izquierdo: sobresale 4 unidades hacia el padding derecho
   (RD-05). Se topa cuando el lienzo mide 400 (400 × 258 / 262 = 393,89) y se centra.
   Se centra con `align-self`, no con `margin:auto` (lección 022/027). */
#reactoressmr .rs_escenario{position:relative; width:100%; max-width:393.8931px;
  align-self:center; aspect-ratio:258/344; container-type:inline-size;}
#reactoressmr .rs_lienzo{position:absolute; left:0; top:0;
  width:101.5504cqi; height:133.3333cqi;}

/* El dibujo: un solo SVG (viewBox 518×323) para los dos tamaños. Su origen va 0,5 a la
   izquierda del de Figma (el trazo del suelo) y arriba de su borde: se coloca para que el
   suelo caiga donde lo pone Figma. Abajo, a ×259/517. */
#reactoressmr .rs_arte{position:absolute; left:-0.0969cqi; top:41.4144cqi;
  width:100.5823cqi; height:62.7183cqi;}
#reactoressmr .rs_arte svg,#reactoressmr .rs_arte img{width:100%; height:100%;}

/* ===== Las capas del dibujo (RI-02, A-001) ===================================
   El JS sólo mueve `data-activa`; la opacidad la pone el CSS. En el 7 todo encendido.
   La parte 6 son sólo los silos; la nave, la pasarela y el edificio alto (`data-parte="0"`)
   sólo se encienden en el 7, como en los frames del paso 6. */
#reactoressmr .rs_arte [data-parte]{opacity:.2; transition:opacity 200ms ease;}
#reactoressmr[data-activa="1"] .rs_arte [data-parte="1"],
#reactoressmr[data-activa="2"] .rs_arte [data-parte="2"],
#reactoressmr[data-activa="3"] .rs_arte [data-parte="3"],
#reactoressmr[data-activa="4"] .rs_arte [data-parte="4"],
#reactoressmr[data-activa="5"] .rs_arte [data-parte="5"],
#reactoressmr[data-activa="6"] .rs_arte [data-parte="6"],
#reactoressmr[data-activa="7"] .rs_arte [data-parte]{opacity:1;}
@media (prefers-reduced-motion: reduce){
  #reactoressmr .rs_arte [data-parte]{transition:none;}
}

/* ===== Conectores (RD-09, D-08) =============================================
   En CSS, sin ficheros (D-08), como en east-anglia-three: los trazados de Figma pasados a
   segmentos de 2 de grueso y un punto de ⌀ 10,67, en Forest. Encima del dibujo y debajo de
   las etiquetas por orden de DOM. Abajo en `cqi`: escalan con todo el lienzo. No cambian
   con el estado. */
#reactoressmr .rs_conectores{display:block !important; position:absolute; left:0; top:0;
  width:100%; height:100%;}
#reactoressmr .rs_c,#reactoressmr .rs_cp{display:block !important; position:absolute;
  background:var(--rs-forest);}
#reactoressmr .rs_cp{width:4.1344cqi; height:4.1344cqi; border-radius:50%;}
#reactoressmr .rs_c6h{display:none !important;}   /* el 6 de móvil es sólo vertical */
#reactoressmr .rs_c1v{left:19.9612cqi; top:34.4961cqi; width:0.7752cqi; height:23.2589cqi;}
#reactoressmr .rs_c1p{left:18.2816cqi; top:55.6878cqi;}
#reactoressmr .rs_c2v{left:51.938cqi; top:97.2868cqi; width:0.7752cqi; height:28.6822cqi;}
#reactoressmr .rs_c2h{left:51.938cqi; top:125.1938cqi; width:32.9457cqi; height:0.7752cqi;}
#reactoressmr .rs_c2p{left:50.2584cqi; top:95.2196cqi;}
#reactoressmr .rs_c3v{left:27.1318cqi; top:91.0853cqi; width:0.7752cqi; height:17.4419cqi;}
#reactoressmr .rs_c3h{left:27.1318cqi; top:91.0853cqi; width:8.9147cqi; height:0.7752cqi;}
#reactoressmr .rs_c3p{left:33.9793cqi; top:89.4057cqi;}
#reactoressmr .rs_c4v{left:74.4186cqi; top:36.4341cqi; width:0.7752cqi; height:28.6822cqi;}
#reactoressmr .rs_c4h{left:74.4186cqi; top:36.4341cqi; width:12.7907cqi; height:0.7752cqi;}
#reactoressmr .rs_c4p{left:72.739cqi; top:63.0491cqi;}
#reactoressmr .rs_c5v{left:82.9457cqi; top:82.5581cqi; width:0.7752cqi; height:18.6047cqi;}
#reactoressmr .rs_c5h{left:70.5426cqi; top:82.5581cqi; width:13.1783cqi; height:0.7752cqi;}
#reactoressmr .rs_c5p{left:68.4754cqi; top:80.8785cqi;}
#reactoressmr .rs_c6v{left:59.4961cqi; top:15.8915cqi; width:0.7752cqi; height:33.9147cqi;}
#reactoressmr .rs_c6p{left:57.8165cqi; top:47.739cqi;}
#reactoressmr .rs_c7v{left:44.5736cqi; top:10.0775cqi; width:0.7752cqi; height:57.7519cqi;}
#reactoressmr .rs_c7p{left:42.8941cqi; top:65.7623cqi;}

/* ===== Etiquetas navegables (RD-08) ==========================================
   Tamaño según su contenido, con los saltos forzados de Figma. Ancladas por el lado que
   las toca su conector: 1, 2, 3, 6 y 7 por la izquierda; 4 y 5 por la derecha. */
#reactoressmr .rs_etiqueta{position:absolute; padding:3.8760cqi; gap:3.8760cqi;
  border-radius:5.8140cqi; background:var(--rs-sand1);
  box-shadow:inset 0 0 0 1px var(--rs-sand3); text-align:left;}
#reactoressmr .rs_etiqueta--1{left:2.3256cqi;  top:19.3798cqi;}
#reactoressmr .rs_etiqueta--2{left:50.7752cqi; top:114.7287cqi;}
#reactoressmr .rs_etiqueta--3{left:0;          top:97.2868cqi;}
#reactoressmr .rs_etiqueta--4{right:0;         top:25.5814cqi;}
#reactoressmr .rs_etiqueta--5{right:1.1628cqi; top:88.3721cqi;}
#reactoressmr .rs_etiqueta--6{left:47.6744cqi; top:3.4884cqi;}
#reactoressmr .rs_etiqueta--7{left:7.7519cqi;  top:0;}

#reactoressmr .rs_num{flex:0 0 auto; width:9.6899cqi; height:9.6899cqi;
  border-radius:20.5426cqi; background:var(--rs-sand1);
  box-shadow:inset 0 0 0 1px var(--rs-green1);
  font-family:'IberPangea',sans-serif; font-weight:600; font-size:5.0388cqi; line-height:1.071;
  color:var(--rs-forest); text-align:center;}
#reactoressmr .rs_et{white-space:nowrap; font-family:'IberPangea',sans-serif; font-weight:500;
  font-size:4.6512cqi; line-height:5.4264cqi; color:var(--rs-forest);}
/* saltos propios de cada tamaño */
#reactoressmr .rs_bm{display:inline !important;}

/* activa: Iberdrola Sand con trazo Forest; número Green 1 con cifra Sand 1 */
#reactoressmr .rs_etiqueta[aria-pressed="true"]{
  background:var(--rs-ibersand); box-shadow:inset 0 0 0 1px var(--rs-forest);}
#reactoressmr .rs_etiqueta[aria-pressed="true"] .rs_num{
  background:var(--rs-green1); box-shadow:none; color:var(--rs-sand1);}
/* hover: Green 1 sin trazo en los dos tamaños (D-03), texto blanco; número Sand 1 sin
   trazo. Sólo con ratón y nunca sobre la activa: así en móvil no se queda pegado. */
@media (hover:hover){
  #reactoressmr .rs_etiqueta:not([aria-pressed="true"]):hover{
    background:var(--rs-green1); box-shadow:none;}
  #reactoressmr .rs_etiqueta:not([aria-pressed="true"]):hover .rs_et{color:var(--rs-blanco);}
  #reactoressmr .rs_etiqueta:not([aria-pressed="true"]):hover .rs_num{
    background:var(--rs-sand1); box-shadow:none; color:var(--rs-forest);}
}
#reactoressmr .rs_etiqueta:focus-visible{outline:3px solid var(--rs-sky2); outline-offset:3px;}

/* ===== Tarjetas (RD-10, RD-11) ===============================================
   Las siete apiladas en la misma celda, con subgrid: la fila de la cabecera mide la de la
   más alta y la del cuerpo la del más alto, a cualquier ancho. Ningún alto en px.
   La cabecera monta 11 sobre el cuerpo con margen negativo, y se pinta encima por ser
   `position:relative` (sin z-index). */
#reactoressmr .rs_tarjetas{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto;}
#reactoressmr .rs_tarjeta{grid-column:1; grid-row:1 / 3; grid-template-rows:subgrid;
  grid-template-columns:minmax(0,1fr);}
#reactoressmr .rs_tarjeta_cab{position:relative; grid-row:1; margin-bottom:-11px;
  padding:10px 16px; gap:16px; border-radius:15px; background:var(--rs-green1);}
/* El aro, como `border` (dentro de los 32 por el box-sizing): una sombra interior en una caja
   redonda deja un halo oscuro en el borde sobre el verde de la cabecera. */
#reactoressmr .rs_tnum{flex:0 0 auto; width:32px; height:32px; border-radius:53px;
  background:var(--rs-sand1); border:1px solid var(--rs-green1);
  font-family:'IberPangea',sans-serif; font-weight:600; font-size:18px; line-height:1.071;
  color:var(--rs-forest); text-align:center;}
#reactoressmr .rs_tarjeta_tit{flex:1 1 auto; min-width:0;
  font-family:'IberPangea Text',serif; font-weight:400; font-size:16px; line-height:18px;
  color:var(--rs-sand1);}
#reactoressmr .rs_tarjeta_cuerpo{grid-row:2; padding:34px 24px 16px;
  border-radius:0 0 15px 15px; background:var(--rs-sand1);
  box-shadow:inset 1px 0 0 var(--rs-sand3), inset -1px 0 0 var(--rs-sand3),
             inset 0 -1px 0 var(--rs-sand3);
  justify-content:flex-start;}
#reactoressmr .rs_tarjeta_txt{font-family:'IberPangea Text',serif; font-weight:400;
  font-size:16px; line-height:20px; color:var(--rs-forest);}
/* sólo se ve la activa; las demás, fuera del árbol de accesibilidad y guardando su alto */
#reactoressmr .rs_tarjeta{visibility:hidden;}
#reactoressmr[data-activa="1"] .rs_tarjeta[data-n="1"],
#reactoressmr[data-activa="2"] .rs_tarjeta[data-n="2"],
#reactoressmr[data-activa="3"] .rs_tarjeta[data-n="3"],
#reactoressmr[data-activa="4"] .rs_tarjeta[data-n="4"],
#reactoressmr[data-activa="5"] .rs_tarjeta[data-n="5"],
#reactoressmr[data-activa="6"] .rs_tarjeta[data-n="6"],
#reactoressmr[data-activa="7"] .rs_tarjeta[data-n="7"]{visibility:visible;}

/* ===== Pie (RD-12) ===========================================================
   Contador bicolor: el número en Green 1 y « de 7» en Forest. */
#reactoressmr .rs_pie{height:32px; gap:8px;}
#reactoressmr .rs_contador{height:32px; padding:0 16px; border-radius:24px;
  box-shadow:inset 0 0 0 1px var(--rs-forest);
  font-family:'IberPangea Text',serif; font-weight:400; font-style:italic;
  font-size:14px; line-height:18px; color:var(--rs-forest); white-space:nowrap;}
#reactoressmr .rs_cur{color:var(--rs-green1);}
#reactoressmr .rs_flechas{gap:16px;}
/* Flechas en CSS (D-08): círculo con trazo de 1 por dentro y la flecha del SVG en línea.
   Desactivada, todo al 50 % (Figma); hover, Iberdrola Green con la flecha en Sand 1, sólo
   con ratón y nunca en una desactivada. */
#reactoressmr .rs_flecha{flex:0 0 auto; width:32px; min-width:32px; height:32px; min-height:32px;
  border-radius:50%; background:transparent; color:var(--rs-forest);
  box-shadow:inset 0 0 0 1px var(--rs-forest);}
#reactoressmr .rs_ico{width:32px; height:32px; fill:currentColor;}
/* la anterior es la misma girada */
#reactoressmr .rs_prev{transform:rotate(180deg);}
#reactoressmr .rs_flecha:disabled{cursor:default; opacity:.5;}
@media (hover:hover){
  #reactoressmr .rs_flecha:not(:disabled):hover{background:var(--rs-ibergreen);
    box-shadow:none; color:var(--rs-sand1);}
}
#reactoressmr .rs_flecha:focus-visible{outline:3px solid var(--rs-sky2); outline-offset:3px;}

/* ===== Si el texto no cabe en el dibujo (WCAG 1.4.12) =======================
   Con el espaciado de texto ampliado por la persona (interlineado, interletrado), las
   etiquetas crecen y a 290 se tapan unas a otras. main.js lo detecta y pone `rs--apiladas`:
   el dibujo queda entero arriba, sin conectores, y las etiquetas en una lista debajo. Nunca
   pasa con el texto tal como lo dibuja Figma. */
#reactoressmr.rs--apiladas .rs_escenario{aspect-ratio:auto; height:auto; max-width:100%;
  width:100%; container-type:normal;}
#reactoressmr.rs--apiladas .rs_lienzo{position:relative; width:100%; height:auto;}
#reactoressmr.rs--apiladas .rs_arte{position:relative; left:0; top:0; width:100%; height:auto;
  aspect-ratio:518/323;}
#reactoressmr.rs--apiladas .rs_conectores{display:none !important;}
#reactoressmr.rs--apiladas .rs_etiquetas{display:flex !important; flex-direction:row;
  flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; gap:8px; margin-top:16px;}
#reactoressmr.rs--apiladas .rs_etiqueta{position:relative; left:auto; right:auto; top:auto;
  padding:10px; gap:10px; border-radius:15px;}
#reactoressmr.rs--apiladas .rs_num{width:25px; height:25px; font-size:13px;}
#reactoressmr.rs--apiladas .rs_et{font-size:12px; line-height:14px;}

/* Alto contraste de Windows: las sombras interiores desaparecen, así que la etiqueta activa
   y las flechas llevan un borde real del sistema. No cambia nada en el modo normal. */
@media (forced-colors: active){
  #reactoressmr .rs_etiqueta{outline:1px solid CanvasText;}
  #reactoressmr .rs_etiqueta[aria-pressed="true"]{outline:3px solid Highlight;}
  #reactoressmr .rs_flecha,#reactoressmr .rs_contador{outline:1px solid CanvasText;}
}

/* Sólo para lectores de pantalla (RA-04) */
#reactoressmr .rs_anuncio{display:block !important; position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}

/* =============================================================================
   TRAMO GRANDE — diseño de 565, hasta 980
   El escenario se queda en 517×448,38 y se centra; título, tarjeta y pie crecen.
   ============================================================================= */
@container rs (min-width: 565px){
  #reactoressmr .rs_inner{padding:32px 24px 24px;}

  #reactoressmr .rs_titulo{font-size:32px; line-height:36px;}

  #reactoressmr .rs_escenario{width:517px; max-width:100%; aspect-ratio:auto; height:448.384px;}
  #reactoressmr .rs_lienzo{width:517px; height:448.384px;}
  #reactoressmr .rs_arte{left:-0.5px; top:77.368px; width:518px; height:323px;}

  #reactoressmr .rs_cp{width:10.6667px; height:10.6667px;}
  #reactoressmr .rs_c6h{display:block !important;}
  #reactoressmr .rs_c1v{left:113.784px; top:74.282px; width:2px; height:101.988px;}
  #reactoressmr .rs_c1p{left:109.451px; top:170.937px;}
  #reactoressmr .rs_c2v{left:230.588px; top:381.087px; width:2px; height:51.785px;}
  #reactoressmr .rs_c2h{left:230.588px; top:430.872px; width:35.63px; height:2px;}
  #reactoressmr .rs_c2p{left:226.255px; top:375.754px;}
  #reactoressmr .rs_c3v{left:143.505px; top:339.547px; width:2px; height:56.185px;}
  #reactoressmr .rs_c3h{left:143.505px; top:339.547px; width:48.297px; height:2px;}
  #reactoressmr .rs_c3p{left:186.469px; top:335.214px;}
  #reactoressmr .rs_c4v{left:379.613px; top:98.795px; width:2px; height:105.643px;}
  #reactoressmr .rs_c4h{left:379.613px; top:98.795px; width:40.387px; height:2px;}
  #reactoressmr .rs_c4p{left:375.28px; top:199.105px;}
  #reactoressmr .rs_c5v{left:381.235px; top:313.327px; width:2px; height:47.741px;}
  #reactoressmr .rs_c5h{left:309.663px; top:313.327px; width:73.572px; height:2px;}
  #reactoressmr .rs_c5p{left:304.33px; top:308.994px;}
  #reactoressmr .rs_c6v{left:312.663px; top:28.163px; width:2px; height:95.352px;}
  #reactoressmr .rs_c6h{left:312.663px; top:28.163px; width:43.837px; height:2px;}
  #reactoressmr .rs_c6p{left:308.33px; top:118.182px;}
  #reactoressmr .rs_c7v{left:180.039px; top:20.729px; width:2px; height:160.16px;}
  #reactoressmr .rs_c7p{left:175.706px; top:175.556px;}
  #reactoressmr .rs_bm{display:none !important;}

  #reactoressmr .rs_etiqueta{padding:10px; gap:10px; border-radius:15px;}
  #reactoressmr .rs_etiqueta--1{left:20.939px;  top:55.790px;}
  #reactoressmr .rs_etiqueta--2{left:263.956px; top:396.384px;}
  #reactoressmr .rs_etiqueta--3{left:25.135px;  top:371.609px;}
  #reactoressmr .rs_etiqueta--4{right:2.068px;  top:62.199px;}
  #reactoressmr .rs_etiqueta--5{right:2.208px;  top:332.906px;}
  #reactoressmr .rs_etiqueta--6{left:347.623px; top:0;}
  #reactoressmr .rs_etiqueta--7{left:171.599px; top:1.054px;}
  #reactoressmr .rs_num{width:32px; height:32px; border-radius:53px; font-size:18px;}
  #reactoressmr .rs_et{font-size:12px; line-height:14px;}

  #reactoressmr .rs_tarjeta_tit{font-size:18px; line-height:24px;}
  #reactoressmr .rs_tarjeta_cuerpo{justify-content:center;}
  /* D-07: el ancho de texto de Figma, 452 a 565 (17 menos que el cuerpo) y 484 en la 6. Sólo en
     ES: son los cortes del español; EN y PT usan el ancho entero del cuerpo. Con `:lang()`, nunca
     `[lang]`: el portal sirve `es-ES`. */
  #reactoressmr:lang(es) .rs_tarjeta_txt{margin-right:17px;}
  #reactoressmr:lang(es) .rs_tarjeta[data-n="6"] .rs_tarjeta_txt{margin-right:-15px;}
}