/* =============================================================================
   Elementos de una instalación de puesta a tierra  ·  estático de iberdrola.com
   Dos anchos de diseño: 565 (desktop, con pastillas) y 290 (móvil, con línea guía).
   Un solo punto de cambio de layout: @container 565.
   Medidas: specs/020-elementos-instalacion-puesta-a-tierra/design/
   ============================================================================= */

/* ===== IberPangea + IberPangea Text (self-contained) =========================
   Seis caras. Sin la fuente real el ancho de línea cambia y las medidas dejan de
   cuadrar (y el nº de líneas de la tarjeta, que gobierna su alto). */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/elementos-instalacion-puesta-a-tierra/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/elementos-instalacion-puesta-a-tierra/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/elementos-instalacion-puesta-a-tierra/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/elementos-instalacion-puesta-a-tierra/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/elementos-instalacion-puesta-a-tierra/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/elementos-instalacion-puesta-a-tierra/fonts/IberPangeaText-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

#groundelements{
  --ge-green1:#007F33;  --ge-green:#00A443;   --ge-forest:#00402A;
  --ge-sand1:#FFFEFF;   --ge-sand3:#D8CFC7;   --ge-sand6:#615D5A;  --ge-sand7:#3A3735;
  --ge-foco:#0792E5;
}

/* ===== Marco de la pieza =====================================================
   El borde va como `box-shadow: inset`, NO como `border`: en Figma el trazo no
   consume layout (el frame mide 565 con padding 24 y el contenido 517 = 565-48,
   no 515). Con `border:1px` el contenido saldría 2px estrecho y se desplazaría
   todo. Lo mismo vale para la tarjeta, las pastillas y el contador. */
#groundelements{
  container-type:inline-size;      /* el tramo se decide por el HUECO, no por la ventana */
  width:100%; max-width:1256px; margin:0 auto; box-sizing:border-box;
  background:var(--ge-sand1); border-radius:15px;
  box-shadow:inset 0 0 0 1px var(--ge-sand3);
  position:relative; text-align:left;
}

/* ===== Blindaje frente al theme de Liferay (docs/VALIDACION.md) ==============
   La herencia PIERDE contra cualquier declaración del theme, por débil que sea.
   `inherit` sí es una declaración: gana al theme y conserva el valor del padre,
   así que no cambia nada visualmente y no rompe el responsive. */
#groundelements *{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;}
#groundelements ul,#groundelements ol,#groundelements li{list-style:none;}
#groundelements li::marker{content:none;}
#groundelements li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#groundelements *` NO alcanza a los pseudo-elementos: se blindan aparte y SIN
   `content`, para no crear pseudos donde no hay. El theme les mete margin negativo. */
#groundelements *::before,#groundelements *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#groundelements img{display:block; max-width:100%;}
#groundelements button{font:inherit; cursor:pointer; border:0; background:transparent;
  color:inherit; appearance:none; -webkit-appearance:none;}
#groundelements svg{display:block;}
/* La RAÍZ tiene que declarar todo lo heredable: si no, hereda del portal y el
   `inherit` de arriba propaga fielmente el valor del theme hacia dentro. */
#groundelements{
  font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--ge-sand7);
  letter-spacing:normal; text-transform:none; white-space:normal; text-decoration:none;
}
/* `display` NO se hereda, así que `inherit` no vale: se declara elemento a elemento
   y con `!important`. Sólo se reafirma en cada tramo lo que de verdad cambia. */
#groundelements{display:block !important;}
#groundelements .ge_escena{display:block !important;}
/* Los seis paneles APILADOS en la misma celda de rejilla: la celda mide lo que el más
   alto, así que la tarjeta no cambia de alto al pasar de elemento (D06) SIN clavar un
   `min-height` a mano. Y como se recalcula a cada ancho, no deja aire de más: a 430 el
   texto ocupa menos líneas que a 290 y la tarjeta se ajusta sola. Los que no toca se
   ocultan con `visibility`, que sí ocupa sitio y además los saca del árbol de
   accesibilidad; el `inert` del HTML es el cinturón para el foco y los clics. */
#groundelements .ge_slides{display:grid !important; grid-template-areas:"s";}
#groundelements .ge_slide{display:block !important; grid-area:s; visibility:hidden;}
#groundelements[data-active="1"] .ge_slide[data-slide="1"],
#groundelements[data-active="2"] .ge_slide[data-slide="2"],
#groundelements[data-active="3"] .ge_slide[data-slide="3"],
#groundelements[data-active="4"] .ge_slide[data-slide="4"],
#groundelements[data-active="5"] .ge_slide[data-slide="5"],
#groundelements[data-active="6"] .ge_slide[data-slide="6"]{visibility:visible;}
#groundelements .ge_ico{display:block !important;}
#groundelements .ge_texto,#groundelements .ge_intro,#groundelements .ge_fuente,
#groundelements .ge_title,#groundelements .ge_nombre{display:block !important;}
#groundelements .ge_arrow{display:block !important;}
#groundelements .ge_et{display:block !important;}
#groundelements .ge_reg{display:inline !important;}
#groundelements b{font-weight:600;}
/* En una caja flex no basta con declarar `display` y `flex-direction`: el theme mete
   `div,ul{flex-direction:column-reverse; gap:0; align-items:flex-end;
   justify-content:flex-end; flex-wrap:nowrap}` y lo que no declaremos, lo pisa. Con
   `align-items:flex-end` la tarjeta se venía abajo (la cabecera pasaba de 485 a 50 de
   ancho). Así que se declara el juego COMPLETO en cada contenedor flex. */
#groundelements .ge_inner,#groundelements .ge_body,#groundelements .ge_panel,
#groundelements .ge_caja{display:flex !important; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;}
#groundelements .ge_cab,#groundelements .ge_nav{display:flex !important; flex-direction:row;
  flex-wrap:nowrap; align-items:center; justify-content:flex-start;}
#groundelements .ge_pie{display:flex !important; flex-direction:row; flex-wrap:nowrap;
  align-items:center; justify-content:space-between; gap:8px;}
#groundelements .ge_count,#groundelements .ge_num{display:flex !important; flex-direction:row;
  flex-wrap:nowrap; align-items:center; justify-content:center;}
#groundelements .ge_pastilla{flex-direction:row; flex-wrap:nowrap; align-items:center;
  justify-content:flex-start;}
#groundelements .ge_cab{gap:4px;}
#groundelements .ge_nav{gap:16px;}
#groundelements .ge_panel{gap:16px;}
/* La rejilla también hay que blindarla: el theme mete `gap:0` y `justify-items` a los
   div, y aquí el apilado depende de que la celda sea una sola. */
/* `minmax(0,1fr)` y no `1fr` a secas: `1fr` es `minmax(auto,1fr)` y su mínimo es el
   min-content de la celda. Con el título del estado 2 en `nowrap` (176,5px) ese
   min-content son 262,5 y la pista se pasaba 4,5px del hueco de móvil, ensanchando la
   tarjeta. Con mínimo 0 la pista mide el hueco y quien se sale es el título, que es lo
   que hace Figma. */
#groundelements .ge_slides{grid-template-columns:minmax(0,1fr); grid-auto-flow:row; gap:0;
  align-items:stretch; justify-items:stretch; justify-content:start; align-content:start;}

/* ===== Ritmo vertical ========================================================
   El padding va DENTRO: `@container` no reestila el propio contenedor, sólo sus
   descendientes. Móvil: 24 arriba/abajo y 16 a los lados (258 = 290-32). */
#groundelements .ge_inner{padding:24px 16px; gap:24px;}
#groundelements .ge_body{gap:24px;}          /* móvil: 24 entre dibujo y tarjeta */

/* ===== Cabecera ===== */
/* !important en el color: en móvil el theme pinta los h1/h2/h3 con #427314 !important */
#groundelements .ge_title{font-family:'IberPangea',sans-serif; font-weight:400;
  font-size:30px; line-height:34px; color:var(--ge-green1) !important;}
#groundelements .ge_intro{font-size:18px; line-height:24px; color:var(--ge-forest);}
/* `nowrap` porque en Figma va en UNA línea: el texto mide 258,31 y el hueco de móvil
   258, así que se sale 0,31px. Con el `overflow:hidden` ese tercio de píxel del punto
   final no llega a contar como desborde horizontal de la pieza. */
#groundelements .ge_fuente{font-style:italic; font-size:14px; line-height:18px;
  color:var(--ge-sand6); white-space:nowrap; overflow:hidden;}

/* ===== Escenario =============================================================
   El arte va EN FLUJO y es él quien da el alto al escenario: los dos SVG ya vienen
   recortados a su ventana (517x593 y 258x415), así que no hace falta ni caja de
   recorte ni `aspect-ratio`, y en móvil el dibujo escala solo con el hueco.
   Todo lo que va encima se ancla en % del escenario → acompaña al dibujo; los
   tamaños de letra son fijos → las etiquetas NO escalan. */
#groundelements .ge_escena{position:relative; width:100%;}
/* Radio 15 en las CUATRO esquinas, como el componente `img` de Figma
   (`overflow-clip rounded-[15px]`, igual en img-desk y en img-mob). Solo se aprecia abajo,
   porque arriba no hay tinta que llegue a las esquinas: el tejado no toca el borde.
   Se aplica al <img>, que recorta su propio contenido. */
#groundelements .ge_art{width:100%; height:auto; border-radius:15px;}
#groundelements .ge_art--desk{display:none !important;}
#groundelements .ge_art--mob{display:block !important;}

/* ===== Líneas guía de móvil ==================================================
   1px vertical desde el punto del dibujo hasta 1,01px dentro del borde superior de
   la tarjeta. El hueco dibujo-tarjeta es de 24px fijos, así que el extremo inferior
   va en px (-25,01) y sigue tocando la tarjeta a cualquier ancho. */
#groundelements .ge_linea{position:absolute; width:1px; bottom:-25.01px;
  background:var(--ge-forest); pointer-events:none; display:none !important;}
#groundelements .ge_linea::before{content:''; display:block; position:absolute;
  left:-2.1667px; top:-2.6667px; width:5.3333px; height:5.3333px; border-radius:50%;
  background:var(--ge-forest);}
#groundelements .ge_linea--1{left:calc(31.39535% - 0.5px); top:69.87952%;}
#groundelements .ge_linea--2{left:calc(66.66667% - 0.5px); top:71.56627%;}
#groundelements .ge_linea--3{left:calc(91.08527% - 0.5px); top:71.56627%;}
#groundelements .ge_linea--4{left:calc(85.65891% - 0.5px); top:78.55422%;}
#groundelements .ge_linea--5{left:calc(51.55039% - 0.5px); top:94.45783%;}
#groundelements .ge_linea--6{left:calc(22.48062% - 0.5px); top:94.45783%;}

/* ===== Codos de desktop ======================================================
   Un SVG por estado con el viewBox del escenario (517x606): las coordenadas son
   las de Figma tal cual y el trazo de 1px cae en la rejilla de píxeles.
   Van ANTES de las pastillas en el DOM y SIN z-index: así la pastilla queda por
   encima, que es lo que tapa los 4px que el codo del estado 3 entra en ella. */
#groundelements .ge_codo{position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; display:none !important;}

/* ===== Pastillas (sólo desktop) ============================================== */
#groundelements .ge_pastilla{
  position:absolute; height:57px; padding:8px 16px; border-radius:15px;
  background:#fff; box-shadow:inset 0 0 0 1px var(--ge-sand3);
  font-family:'IberPangea',sans-serif; font-weight:500; font-size:18px; line-height:22px;
  color:var(--ge-green1); white-space:nowrap; text-align:left;
  align-items:center; gap:16px; display:none !important;
}
#groundelements .ge_num{flex:0 0 auto; width:32px; height:32px; border-radius:100px;
  background:var(--ge-forest); color:var(--ge-sand1);
  font-weight:600; font-size:16px; line-height:1.071;}
#groundelements .ge_et{flex:0 0 auto;}
#groundelements .ge_reg{font-weight:400;}
/* Activa = la variante `hover` de Figma (verde relleno). El hover pinta lo mismo:
   es literalmente lo que trae el diseño (D07). */
#groundelements .ge_pastilla[aria-pressed="true"]{background:var(--ge-green1);
  box-shadow:inset 0 0 0 1px var(--ge-sand1); color:var(--ge-sand1);}
#groundelements .ge_pastilla[aria-pressed="true"] .ge_num{background:var(--ge-sand1);
  color:var(--ge-green1);}
@media (hover:hover){
  #groundelements .ge_pastilla:hover{background:var(--ge-green1);
    box-shadow:inset 0 0 0 1px var(--ge-sand1); color:var(--ge-sand1);}
  #groundelements .ge_pastilla:hover .ge_num{background:var(--ge-sand1); color:var(--ge-green1);}
}
#groundelements .ge_pastilla:focus-visible{outline:3px solid var(--ge-foco); outline-offset:3px;}

/* ===== Tarjeta ===============================================================
   El alto lo fija la rejilla apilada de arriba (el estado más alto a ese ancho), así
   que la pieza no cambia de alto y las flechas no se mueven bajo el cursor (D06).
   El contenido se alinea ARRIBA: el icono y la primera línea se quedan quietos. */
/* `height:100%`: el `article` se estira a la celda de la rejilla (es un grid item), pero
   la caja de dentro no lo hace sola y se quedaba corta. */
#groundelements .ge_caja{padding:16px; gap:16px; border-radius:15px; background:#fff;
  box-shadow:inset 0 0 0 1px var(--ge-sand3); justify-content:flex-start; height:100%;}
#groundelements .ge_ico{position:relative; flex:0 0 auto; width:50px; height:50px;}
#groundelements .ge_ico svg{position:absolute;}
/* Cada icono en su sitio exacto dentro de la caja de 50x50, con el width/height del
   propio fichero: vienen al tamaño de su contenido y NO están centrados. */
#groundelements .ge_ico--1 svg{left:11.7969px; top:7.3906px;}
#groundelements .ge_ico--2 svg{left:7.9792px;  top:7.8949px;}
#groundelements .ge_ico--3 svg{left:7.81px;    top:7.83px;}
#groundelements .ge_ico--4 svg{left:9.645px;   top:7.815px;}
#groundelements .ge_ico--5 svg{left:10.165px;  top:7.815px;}
#groundelements .ge_ico--6 svg{left:7.8229px;  top:12.2559px;}
/* `nowrap` como en Figma (el nodo de texto es de ancho automático). El nombre del
   estado 2 mide 176,5 y sólo hay 172 libres, así que se sale 4,5px sobre el padding
   de la tarjeta — exactamente lo que hace el diseño, que se sale 5. No se recorta
   nada: quedan 11px hasta el borde. */
#groundelements .ge_nombre{font-family:'IberPangea',sans-serif; font-weight:500;
  font-size:16px; line-height:18px; color:var(--ge-green1) !important; white-space:nowrap;}
#groundelements .ge_texto{font-size:16px; line-height:20px; color:var(--ge-sand7);}

/* ===== Pie del slider ===== */
#groundelements .ge_pie{height:32px;}
#groundelements .ge_count{height:32px; padding:5px 16px; border-radius:24px;
  box-shadow:inset 0 0 0 1px var(--ge-forest);
  font-style:italic; font-size:14px; line-height:18px; color:var(--ge-forest);
  white-space:nowrap;}
#groundelements .ge_cur{color:var(--ge-green1);}
/* El valor va envuelto en un solo elemento: si el «1» y el « de 6» son dos items flex
   hermanos, el espacio inicial del segundo se colapsa (es principio de bloque) y se
   lee «1de 6». Dentro de un mismo item el espacio está a mitad de línea y sobrevive. */
#groundelements .ge_val,#groundelements .ge_cur{display:inline !important;}
/* Un único dibujo de flecha para todo el sitio (mismo asset en 84 piezas y el que
   da Figma). El `hover` verde relleno es el canon del sitio, en 111 piezas. */
#groundelements .ge_arrow{width:32px; height:32px; flex:0 0 auto;
  background-repeat:no-repeat; background-size:100% 100%;}
#groundelements .ge_prev{background-image:url('/wcorp/gc/prod/es_ES/estaticos/elementos-instalacion-puesta-a-tierra/images/ico-prev.svg');}
#groundelements .ge_next{background-image:url('/wcorp/gc/prod/es_ES/estaticos/elementos-instalacion-puesta-a-tierra/images/ico-next.svg');}
@media (hover:hover){
  #groundelements .ge_prev:not(:disabled):hover{background-image:url('/wcorp/gc/prod/es_ES/estaticos/elementos-instalacion-puesta-a-tierra/images/ico-prev-hover.svg');}
  #groundelements .ge_next:not(:disabled):hover{background-image:url('/wcorp/gc/prod/es_ES/estaticos/elementos-instalacion-puesta-a-tierra/images/ico-next-hover.svg');}
}
#groundelements .ge_arrow:disabled{opacity:.5; cursor:default;}
#groundelements .ge_arrow:focus-visible{outline:3px solid var(--ge-foco); outline-offset:3px;}

/* ===== Estado activo: sólo la línea del elemento en curso ====================
   Las dos familias (líneas de móvil y codos de desktop) arrancan ocultas, y cada
   tramo enciende SÓLO la suya. Así no hay que pelear especificidades entre el
   «oculto por layout» y el «visible por estado», ni depender del orden. */
@container (max-width: 564.9px){
  #groundelements[data-active="1"] .ge_linea--1,
  #groundelements[data-active="2"] .ge_linea--2,
  #groundelements[data-active="3"] .ge_linea--3,
  #groundelements[data-active="4"] .ge_linea--4,
  #groundelements[data-active="5"] .ge_linea--5,
  #groundelements[data-active="6"] .ge_linea--6{display:block !important;}
}

/* ===== Ajustes por idioma ====================================================
   Aislados con `:lang()` sobre el scope y NO con `[lang="xx"]`: la pieza se inyecta en el
   DOM del portal y el `lang` que manda es el suyo, que es `en-US` y `pt-BR`. Con la
   coincidencia exacta no casarían y en el CMS no se aplicaría nada (lección de la 019). */

/* EN · el nombre del elemento 1 mide 200px junto a un icono de 50 en una tarjeta de 290,
   y sólo hay 172 libres: se salía 11,8px del borde de la tarjeta. Se deja envolver, así
   que su cabecera pasa de 50 a 72 y los otros cinco estados se quedan igual que en ES. */
@container (max-width: 564.9px){
  #groundelements:lang(en) .ge_nombre{white-space:normal;}
}

/* ===== Tramo desktop ========================================================= */
@container (min-width: 565px){
  #groundelements .ge_inner{padding:24px;}
  #groundelements .ge_body{gap:16px;}        /* 16 entre dibujo y tarjeta */
  #groundelements .ge_title{font-size:32px; line-height:36px;}

  /* El dibujo se topa en su ancho de diseño y se centra; el texto y la tarjeta
     crecen con el hueco (D08). Los 13px de padding-bottom son los que en Figma
     separan el borde del dibujo (593) del alto del escenario (606) y dejan sitio a
     la pastilla 5, que llega a y=600. */
  #groundelements .ge_escena{width:517px; margin-inline:auto; padding-bottom:13px;}
  #groundelements .ge_art--desk{display:block !important;}
  #groundelements .ge_art--mob{display:none !important;}

  #groundelements .ge_pastilla{display:flex !important;}
  #groundelements[data-active="1"] .ge_codo--1,
  #groundelements[data-active="2"] .ge_codo--2,
  #groundelements[data-active="3"] .ge_codo--3,
  #groundelements[data-active="4"] .ge_codo--4,
  #groundelements[data-active="5"] .ge_codo--5,
  #groundelements[data-active="6"] .ge_codo--6{display:block !important;}

  /* Posiciones de Figma en px: el escenario mide exactamente 517 en todo el tramo
     (se topa ahí), así que el px es exacto y el % no aportaría nada. */
  #groundelements .ge_pastilla--1{left:90px;  top:1px;}
  #groundelements .ge_pastilla--2{left:238px; top:155px;}
  #groundelements .ge_pastilla--3{left:315px; top:309px;}
  #groundelements .ge_pastilla--4{left:316px; top:478px;}
  #groundelements .ge_pastilla--5{left:276px; top:543px;}
  #groundelements .ge_pastilla--6{left:10px;  top:495px;}

  /* PT · la pastilla 5 mide 273,2 (su línea más larga, «Eletrodo de aterramento», son
     193,2) y desde su ancla de Figma en 276 sólo hay 241: se salía 32,2 del escenario, y
     partirla no lo arregla (en tres líneas sigue sobrando 6,6 y no caben en 57px de alto).
     Se ancla por la derecha con el mismo margen de 8 que tiene en ES, así que arranca en
     235,8; su codo pasa a ser el tramo vertical corto que emite el generador. */
  #groundelements:lang(pt) .ge_pastilla--5{left:auto; right:8px;}

  /* En desktop el nombre lo lleva la pastilla, pero se queda en el DOM para que el
     lector de pantalla anuncie de qué elemento habla la tarjeta. */
  #groundelements .ge_nombre{position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;}
}