/* GENERADO desde la-memoria-recobrada por gen-estaticos.js — no editar */
/* =============================================================================
   De las primeras iniciativas de recuperación histórica al proyecto
   ‘Desvelando memorias’  ·  estático de iberdrola.com
   Línea del tiempo con un slider de 4 tramos. Dos anchos de diseño: 565 y 290.
   Un solo punto de cambio de disposición: @container 416px (lo fija el título
   del tramo 3 en ES a la derecha de su etiqueta; EN pide 394 y PT 410).
   Todo el estado sale de `data-active` (el tramo visible) y `data-own` (el tramo
   de la página, fijo por estático) en la raíz.
   ESTA ES LA FUENTE: los otros dos estáticos se generan de ella (gen-estaticos.js).
   ============================================================================= */

/* ===== IberPangea (self-contained) =========================================== */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/recovered-memories/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/recovered-memories/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/recovered-memories/fonts/IberPangea-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/recovered-memories/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/recovered-memories/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/recovered-memories/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/recovered-memories/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

/* Tokens de Figma (design/tokens.json), con su nombre. */
#recmemories{
  --rcm-green-1:#007F33;  --rcm-forest:#00402A;  --rcm-iberdrola-green:#00A443;
  --rcm-sand:#FFF5EC;  --rcm-sand-1:#FFFEFF;  --rcm-sand-3:#D8CFC7;
}

/* ===== Marco de la pieza =====================================================
   `margin:0 auto` SIN margen vertical: se incrusta y el sitio pone su espaciado.
   Sin `max-width` (F3: crece). El trazo va en un `::after` POR ENCIMA de la
   ilustración, como en Figma, y no consume layout (el `cqi` es el ancho entero). */
#recmemories{
  container-name:rcm-card; container-type:inline-size;
  width:100%; margin:0 auto; box-sizing:border-box;
  position:relative; overflow:hidden; background:var(--rcm-sand-1); border-radius:15px;
  font-synthesis:none;
}

/* ===== Blindaje frente al theme de Liferay (F4) ==============================
   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. */
#recmemories *{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;}
#recmemories ul,#recmemories ol,#recmemories li{list-style:none;}
#recmemories li::marker{content:none;}
#recmemories li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#recmemories *` NO alcanza a los pseudo-elementos: se blindan aparte, sin `content`. */
#recmemories *::before,#recmemories *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#recmemories img{max-width:none; border:0;}
#recmemories 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. */
#recmemories{
  font-family:'IberPangea',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--rcm-forest);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none;
}
/* El trazo de la tarjeta (su propio `::after`, que el blindaje de pseudos no toca). */
#recmemories::after{content:'' !important; display:block !important; position:absolute !important;
  inset:0 !important; margin:0 !important; border:1px solid var(--rcm-sand-3) !important;
  border-radius:inherit !important; pointer-events:none !important; z-index:1 !important;}
/* `display` NO se hereda: se declara elemento a elemento y con `!important`. En
   cada flex, también dirección y hueco. Lo que cambia en el corte se reafirma en él. */
#recmemories{display:block !important;}
#recmemories .rcm_in{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:0;}
#recmemories .rcm_title,#recmemories .rcm_intro{display:block !important;}
#recmemories .rcm_line{display:block !important;}
#recmemories .rcm_raya,#recmemories .rcm_dot,#recmemories .rcm_year{display:block !important;}
#recmemories .rcm_viewport{display:block !important;}
#recmemories .rcm_track{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start; gap:20px;}
#recmemories .rcm_tramo{display:grid !important;}
#recmemories .rcm_foto{display:block !important;}
#recmemories .rcm_foto img{display:block !important;}
#recmemories .rcm_cab{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:flex-start; justify-content:flex-start; gap:8px;}
#recmemories .rcm_tag{display:block !important;}
#recmemories .rcm_name{display:block !important;}
#recmemories .rcm_box{display:block !important;}
#recmemories .rcm_txt{display:block !important;}
/* El botón, en bloque y no en flex: el flex se come el espacio entre el texto y su
   cursiva («exposición ‘Recovered Memories’»). */
#recmemories .rcm_btn{display:block !important;}
#recmemories .rcm_pie{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:space-between; gap:16px;}
#recmemories .rcm_cont{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center; gap:0;}
#recmemories .rcm_cont_v,#recmemories .rcm_cont_n{display:inline !important;}
#recmemories .rcm_arrows{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:flex-start; gap:16px;}
#recmemories .rcm_arrow{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:center; gap:0;}
#recmemories .rcm_arrow svg{display:block !important;}
#recmemories .rcm_illu{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:flex-start; justify-content:flex-end; gap:0;}
#recmemories .rcm_illu img{display:block !important;}
#recmemories :is(strong,em,.rcm_b){display:inline !important;}
#recmemories strong{font-weight:600;}
#recmemories em{font-style:italic;}

/* Sólo para lectores de pantalla. */
#recmemories .rcm_sr{display:inline !important; 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 `.rcm_in`: `@container`
   no reestila al propio contenedor. Lo que Figma cambia entre 290 y 565 se
   interpola con `cqi` y se topa fuera (RD-12):
     laterales 16 → 32 · huecos línea/visor/pie 16 → 24 · título 30/34 → 32/36 ·
     interlineado de la entradilla 22 → 24 · margen derecho del título 0 → −25.
   ============================================================================= */
#recmemories .rcm_in{--rcm-gap:clamp(16px, calc(2.90909cqi + 7.56364px), 24px);
  padding:32px clamp(16px, calc(5.81818cqi - 0.87273px), 32px) 0;}

/* ===== Cabecera ==============================================================
   !important en el color: en móvil el theme pinta los h2 con `#427314 !important`.
   En 565 la caja del título mide 526 (25 más que la columna, como en Figma) para
   que corte igual (RD-03). */
#recmemories .rcm_title{font-weight:400;
  font-size:clamp(30px, calc(0.72727cqi + 27.89091px), 32px);
  line-height:clamp(34px, calc(0.72727cqi + 31.89091px), 36px);
  color:var(--rcm-green-1) !important;
  margin-right:clamp(-25px, calc(26.36364px - 9.09091cqi), 0px);}
/* En inglés, con esa caja, ‘Unveiling se quedaba pegado al borde: el título inglés va
   al ancho de la columna (D16). */
#recmemories .rcm_title:lang(en){margin-right:0;}
#recmemories .rcm_b{font-weight:600;}
#recmemories .rcm_intro{margin-top:24px; font-family:'IberPangea Text','IberPangea',sans-serif;
  font-size:18px; line-height:clamp(22px, calc(0.72727cqi + 19.89091px), 24px);
  color:var(--rcm-forest);}

/* ===== Línea del tiempo (RD-05, bloques.md) ==================================
   Bloque de 50: años arriba (Medium 20/25), raya de 1 px en y 39–40 y puntos con
   el centro en y 40. Puntos y años por su CENTRO en % de la raya; en móvil, la
   separación de 2017 / desde 2017 va en px sobre su % (no crece con el ancho).
   Los centros son los de Figma estado a estado (T4). */
#recmemories .rcm_line{position:relative; height:50px; margin-top:24px;}
#recmemories .rcm_raya{position:absolute; left:0; right:0; top:39px; height:1px;
  background:var(--rcm-forest);}
#recmemories .rcm_dot{position:absolute; top:40px; width:8.61137px; height:8.61137px;
  border-radius:50%; background:var(--rcm-forest); transform:translate(-50%,-50%);}
#recmemories .rcm_year{position:absolute; top:0; font-weight:500; font-size:20px;
  line-height:25px; color:var(--rcm-forest); white-space:nowrap; transform:translateX(-50%);}
#recmemories .rcm_dot[data-t="1"]{left:14.922%;}
#recmemories[data-active="1"] .rcm_dot[data-t="1"]{left:14.601%;}
#recmemories .rcm_dot[data-t="2"]{left:50.101%;}
#recmemories[data-active="2"] .rcm_dot[data-t="2"]{left:50%;}
#recmemories .rcm_dot[data-t="3"]{left:53.295%;}
#recmemories[data-active="2"] .rcm_dot[data-t="3"]{left:calc(53.295% + 5px);}
#recmemories[data-active="3"] .rcm_dot[data-t="3"]{left:calc(53.295% + 6.5px);}
#recmemories .rcm_dot[data-t="4"]{left:86.826%;}
#recmemories[data-active="4"] .rcm_dot[data-t="4"]{left:87.097%;}
#recmemories .rcm_year[data-y="2016"]{left:14.729%;}
#recmemories .rcm_year[data-y="2017"]{left:50.775%;}
#recmemories .rcm_year[data-y="2018"]{left:86.822%;}
/* El del tramo visible: Ø 20 en Iberdrola Green (A-002: sin animación). */
#recmemories[data-active="1"] .rcm_dot[data-t="1"],
#recmemories[data-active="2"] .rcm_dot[data-t="2"],
#recmemories[data-active="3"] .rcm_dot[data-t="3"],
#recmemories[data-active="4"] .rcm_dot[data-t="4"]{width:20px; height:20px;
  background:var(--rcm-iberdrola-green);}

/* ===== Visor y carril (A-001, RF-07) =========================================
   Carril en fila con `align-items:stretch`: el tramo más alto marca el de todos,
   sin alto en px ni por JS (aguanta zoom, espaciado de texto y fuentes tardías).
   Se desplaza `(-100% - 20px) × (N-1)`; durante el arrastre el JS suma `--rcm-drag`. */
#recmemories .rcm_viewport{position:relative; overflow:hidden; touch-action:pan-y;
  margin-top:var(--rcm-gap);}
#recmemories[data-js] .rcm_viewport{cursor:grab;}
#recmemories[data-drag] .rcm_viewport{cursor:grabbing;}
#recmemories[data-drag] .rcm_viewport *{user-select:none; -webkit-user-select:none;}
#recmemories .rcm_track{--rcm-n:0;
  transform:translateX(calc((-100% - 20px) * var(--rcm-n) + var(--rcm-drag, 0px)));}
#recmemories[data-active="2"] .rcm_track{--rcm-n:1;}
#recmemories[data-active="3"] .rcm_track{--rcm-n:2;}
#recmemories[data-active="4"] .rcm_track{--rcm-n:3;}
#recmemories .rcm_tramo{position:relative; flex:0 0 100%; min-width:0;}
/* En reposo, los tramos que esperan fuera del visor se encogen a cero: el visor
   ya los recorta, pero su caja se saldría de la página y cualquier medidor de
   desbordes la contaría. `scale(0)` no toca el layout (el alto se calcula igual).
   Mientras se desliza o se arrastra, el JS les pone `transform:none` en línea. */
#recmemories[data-js] .rcm_tramo{transform:scale(0);}
#recmemories[data-active="1"] .rcm_tramo[data-t="1"],
#recmemories[data-active="2"] .rcm_tramo[data-t="2"],
#recmemories[data-active="3"] .rcm_tramo[data-t="3"],
#recmemories[data-active="4"] .rcm_tramo[data-t="4"]{transform:none;}

/* ===== Caja del tramo (móvil) ================================================
   Rejilla: [foto + cabecera] arriba (cabecera en columna, arriba: Figma
   `items-start`), caja blanca debajo que CRECE hasta el botón, y el botón a todo
   el ancho. Lo que sobra al igualar altos queda en la caja blanca. */
#recmemories .rcm_tramo{gap:16px; padding:16px; border-radius:15px; background:var(--rcm-sand);
  grid-template-columns:90px minmax(0,1fr); grid-template-rows:auto 1fr auto;
  grid-template-areas:"foto cab" "box box" "btn btn";}
#recmemories .rcm_foto{grid-area:foto; width:90px; height:90px; border-radius:50%;
  overflow:hidden; background:var(--rcm-sand-1);}
#recmemories .rcm_foto img{width:90px; height:90px; -webkit-user-drag:none; user-select:none;}
#recmemories .rcm_cab{grid-area:cab; align-self:start; min-width:0;}
#recmemories .rcm_tag{flex:0 0 auto; padding:4px 16px; border-radius:100px;
  border:1px solid var(--rcm-forest); font-weight:500; font-size:18px; line-height:22px;
  color:var(--rcm-forest); white-space:nowrap;}
/* !important en el color: en móvil el theme pinta los h3 con `#427314 !important`. */
#recmemories .rcm_name{min-width:0; font-weight:500; font-size:18px; line-height:22px;
  color:var(--rcm-forest) !important;}
#recmemories .rcm_box{grid-area:box; padding:16px; border-radius:15px; background:var(--rcm-sand-1);}
#recmemories .rcm_txt{font-family:'IberPangea Text','IberPangea',sans-serif; font-size:16px;
  line-height:20px; color:var(--rcm-forest);}
#recmemories .rcm_btn{grid-area:btn; min-height:36px; padding:8px 16px; border-radius:100px;
  background:var(--rcm-green-1); font-family:'IberPangea Text','IberPangea',sans-serif;
  font-size:12px; line-height:20px; color:var(--rcm-sand-1); text-decoration:none; cursor:pointer;}
/* Al pasar el ratón y al pulsar, invertido y sin transición (A-004, D06b). */
@media (hover:hover){
  #recmemories .rcm_btn:hover{background:var(--rcm-sand-1);
    box-shadow:inset 0 0 0 1px var(--rcm-green-1); color:var(--rcm-green-1);}
}
#recmemories .rcm_btn:active{background:var(--rcm-sand-1);
  box-shadow:inset 0 0 0 1px var(--rcm-green-1); color:var(--rcm-green-1);}

/* ===== El tramo de la página (RF-02) =========================================
   Fondo Green 1, etiqueta rellena Forest sin trazo, título Sand 1 y sin botón: la
   caja blanca no crece y lo que sobra queda debajo. Por `data-own`, para los tres
   estáticos; el tramo 1 (2016) nunca. */
#recmemories[data-own="2"] .rcm_tramo[data-t="2"],
#recmemories[data-own="3"] .rcm_tramo[data-t="3"],
#recmemories[data-own="4"] .rcm_tramo[data-t="4"]{background:var(--rcm-green-1);
  grid-template-rows:auto 1fr; grid-template-areas:"foto cab" "box box";}
#recmemories[data-own="2"] .rcm_tramo[data-t="2"] .rcm_box,
#recmemories[data-own="3"] .rcm_tramo[data-t="3"] .rcm_box,
#recmemories[data-own="4"] .rcm_tramo[data-t="4"] .rcm_box{align-self:start;}
#recmemories[data-own="2"] .rcm_tramo[data-t="2"] .rcm_tag,
#recmemories[data-own="3"] .rcm_tramo[data-t="3"] .rcm_tag,
#recmemories[data-own="4"] .rcm_tramo[data-t="4"] .rcm_tag{border:0; background:var(--rcm-forest);
  color:var(--rcm-sand-1);}
#recmemories[data-own="2"] .rcm_tramo[data-t="2"] .rcm_name,
#recmemories[data-own="3"] .rcm_tramo[data-t="3"] .rcm_name,
#recmemories[data-own="4"] .rcm_tramo[data-t="4"] .rcm_name{color:var(--rcm-sand-1) !important;}

/* ===== Pie: contador y flechas (RD-10) ======================================= */
#recmemories .rcm_pie{min-height:32px; margin-top:var(--rcm-gap);}   /* mínimo: aguanta 1.4.12 */
/* El trazo del contador no ocupa (en Figma mide texto + 32: 69/72/72/73): sombra interior. */
#recmemories .rcm_cont{flex:0 0 auto; min-height:32px; padding:5px 16px; border-radius:24px;
  box-shadow:inset 0 0 0 1px var(--rcm-forest);
  font-family:'IberPangea Text','IberPangea',sans-serif; font-style:italic;
  font-size:14px; line-height:18px; color:var(--rcm-forest); white-space:nowrap;}
#recmemories .rcm_cont_n{color:var(--rcm-green-1);}
/* Flechas («Boton-flecha»): normal = trazo y punta Forest; al pasar el ratón y al
   pulsar = relleno Iberdrola Green y punta Sand 1; apagada = la normal a .5. */
#recmemories .rcm_arrow{width:32px; height:32px; flex:0 0 auto; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--rcm-forest); color:var(--rcm-forest);
  background:transparent;}
#recmemories .rcm_arrow svg{width:32px; height:32px; fill:currentColor;}
#recmemories .rcm_prev svg{transform:rotate(180deg);}
@media (hover:hover){
  #recmemories .rcm_arrow:not([aria-disabled="true"]):hover{background:var(--rcm-iberdrola-green);
    box-shadow:none; color:var(--rcm-sand-1);}
}
#recmemories .rcm_arrow:not([aria-disabled="true"]):active{background:var(--rcm-iberdrola-green);
  box-shadow:none; color:var(--rcm-sand-1);}
#recmemories .rcm_arrow[aria-disabled="true"]{opacity:.5; cursor:default;}
/* En alto contraste (forced-colors) la sombra interior desaparece: un contorno
   transparente de 1 px, que ese modo sí pinta, devuelve el círculo y la píldora. */
@media (forced-colors: active){
  #recmemories :is(.rcm_arrow,.rcm_cont){outline:1px solid transparent; outline-offset:-1px;}
}
/* Foco: siempre cae sobre Sand 1 o Iberdrola Sand (≈ 11:1). */
#recmemories :is(.rcm_arrow,.rcm_btn):focus-visible{outline:3px solid var(--rcm-forest) !important;
  outline-offset:2px !important;}

/* ===== Ilustración (RD-11) ===================================================
   A sangre, 16 por debajo del pie. En 565 llena la tarjeta; en 290 mide 317 y se
   recorta por la izquierda, con su borde derecho en el de la tarjeta; por encima
   de 565, topada y pegada a la esquina de abajo a la derecha, para que su corte
   recto siga en el borde como en el diseño (D14, en vez de centrada como dice F3).
   En 290 Figma la corta 4 px por abajo (de −4 a 0 entre 290 y 565): el recorte
   lo hace su propio marco, como el de la izquierda. */
#recmemories .rcm_illu{width:min(100%, 565px); margin:16px 0 0 auto; overflow:hidden;}
#recmemories .rcm_illu img{flex:none; width:max(100%, 317px); height:auto;
  margin-bottom:clamp(-4px, calc(1.45455cqi - 8.21818px), 0px);
  -webkit-user-drag:none; user-select:none;}

/* ===== Animaciones (animations.md) ===========================================
   Sólo con `data-anim`, que el JS pone DESPUÉS del primer fotograma: el tramo de
   la página no se anima al cargar. */
#recmemories[data-anim] .rcm_track{transition:transform .3s ease;}
#recmemories[data-anim] .rcm_arrow{transition:background-color .15s ease, color .15s ease,
  box-shadow .15s ease;}
#recmemories[data-drag] .rcm_track{transition:none;}
@media (prefers-reduced-motion: reduce){
  #recmemories[data-anim] .rcm_track,
  #recmemories[data-anim] .rcm_arrow{transition:none;}
}

/* ===== Sin JS (RF-11) ========================================================
   Ningún control muerto: fuera contador y flechas, y los 4 tramos apilados con
   su alto natural. Con la media query y no con `:not([data-js])`: así, con JS,
   no se ven ni un instante los 4 apilados mientras se descarga el script. */
@media (scripting: none){
  #recmemories .rcm_pie{display:none !important;}
  #recmemories .rcm_track{flex-direction:column; align-items:stretch; gap:var(--rcm-gap); transform:none;}
  #recmemories .rcm_tramo{flex:0 0 auto;}
}

/* =============================================================================
   TRAMO ≥ 416. Caja del tramo con la foto al lado (centrada en vertical, también
   en el de la página, D05), [etiqueta + título] en fila y botón ajustado a su
   texto; puntos de 12 y las posiciones de 565. Es el ÚNICO punto de cambio.
   ============================================================================= */
@container rcm-card (min-width: 416px){
  #recmemories .rcm_tramo{display:grid !important; column-gap:16px; row-gap:16px;
    grid-template-rows:auto 1fr auto; grid-template-areas:"foto cab" "foto box" "foto btn";}
  #recmemories .rcm_foto{align-self:center;}
  #recmemories .rcm_cab{display:flex !important; flex-direction:row; flex-wrap:nowrap;
    align-items:center; justify-content:flex-start; gap:8px; align-self:start;}
  #recmemories .rcm_btn{justify-self:start;}
  #recmemories[data-own="2"] .rcm_tramo[data-t="2"],
  #recmemories[data-own="3"] .rcm_tramo[data-t="3"],
  #recmemories[data-own="4"] .rcm_tramo[data-t="4"]{grid-template-rows:auto 1fr;
    grid-template-areas:"foto cab" "foto box";}

  #recmemories .rcm_dot{width:12px; height:12px;}
  #recmemories[data-active] .rcm_dot[data-t="1"]{left:13.573%;}
  #recmemories[data-active] .rcm_dot[data-t="2"]{left:50.1%;}
  #recmemories[data-active] .rcm_dot[data-t="3"]{left:53.293%;}
  #recmemories[data-active] .rcm_dot[data-t="4"]{left:86.826%;}
  #recmemories[data-active="4"] .rcm_dot[data-t="4"]{left:86.427%;}
  #recmemories .rcm_year[data-y="2016"]{left:13.573%;}
  #recmemories .rcm_year[data-y="2017"]{left:50%;}
  #recmemories .rcm_year[data-y="2018"]{left:86.327%;}
  #recmemories[data-active="1"] .rcm_dot[data-t="1"],
  #recmemories[data-active="2"] .rcm_dot[data-t="2"],
  #recmemories[data-active="3"] .rcm_dot[data-t="3"],
  #recmemories[data-active="4"] .rcm_dot[data-t="4"]{width:20px; height:20px;}
}