/* ==========================================================================
   Gestión de privacidad · Pirámide de gobierno
   Scope: #gppiram · BEM gp_ · Figma 2T2024 5429:250 (565) y 5429:710 (290)
   ========================================================================== */

@font-face{font-family:'IberPangea Text';src:url(/wcorp/gc/prod/es_ES/estaticos/gestion-privacidad-piramide-gobierno/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/gestion-privacidad-piramide-gobierno/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/gestion-privacidad-piramide-gobierno/fonts/IberPangeaText-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ===== Tokens (get_variable_defs 5429:250) ===== */
#gppiram{
  --gp-green:#007F33;    /* Green 1 — grupo 1 */
  --gp-sunset:#FF9C1A;   /* Iberdrola Sunset — grupo 2 */
  --gp-sky:#0DA9FF;      /* Iberdrola Sky — grupo 3 */
  --gp-forest:#00402A;   /* Iberdrola Forest — grupo 4, textos y ejes */
  --gp-forest1:#DCEBE1;  /* Forest 1 — triángulo de fondo */
  --gp-sand1:#FFFEFF;    /* Sand 1 — relleno de las cajas con borde */
  --gp-sand3:#D8CFC7;   /* Sand 3 — borde de la tarjeta */
  --gp-c-ab:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0.5 0.5 3.5 3.5 6.5 0.5' fill='none' stroke='%2300402A'/%3E%3C/svg%3E");
  --gp-c-ar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0.5 3.5 3.5 0.5 6.5 3.5' fill='none' stroke='%2300402A'/%3E%3C/svg%3E");
}

/* ===== Tarjeta =====
   `overflow:hidden` sale del "clip content" del frame de Figma: recorta en el BORDE de la tarjeta.
   Importa porque el triángulo es más ancho que la caja de contenido (529 frente a 515) y se sale
   por los lados; lo que no debe pasar es recortarlo antes de tiempo (ver nota del wrapper interno). */
#gppiram{
  container-type:inline-size; container-name:gp;
  width:100%; max-width:980px; margin:0 auto;   /* sin margen vertical: la pieza se incrusta */
  box-sizing:border-box; overflow:hidden; position:relative; text-align:left;
  background:#FFFFFF; border:1px solid var(--gp-sand3); border-radius:15px;
  font-family:'IberPangea Text',Arial,sans-serif; font-size:16px; line-height:20px;
  color:var(--gp-forest);
}

/* ===== Blindaje frente al CSS del sitio anfitrión (Liferay) =====
   La HERENCIA pierde contra cualquier declaración del theme, por débil que sea. Ver
   docs/VALIDACION.md → Puerta de aislamiento. Va desde el primer commit, no al final. */
#gppiram *,#gppiram *::before,#gppiram *::after{box-sizing:border-box;}
#gppiram *{
  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;
}
/* `#gppiram *` NO alcanza a los pseudo-elementos: se blindan aparte (sin `content`, para no crear
   pseudos donde no hay). El theme les mete margin negativo. */
#gppiram *::before,#gppiram *::after{
  margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit;
}
#gppiram ul,#gppiram ol,#gppiram li{list-style:none;}
#gppiram li::marker{content:none;}
/* `display:none` además de `content:''`: con solo `content:''` el pseudo SE CREA y, en un `li` que
   sea flex container, cuenta como un flex item más y mete un gap fantasma (pasó en la 013). */
#gppiram li::before{content:'' !important; display:none !important; margin:0 !important;}
#gppiram img,#gppiram svg{display:block; max-width:100%;}
/* Los dos pesos de negrita del diseño: SmBold en cabeceras, Bold en el énfasis del párrafo. */
#gppiram b{font-weight:700;}
#gppiram .gp_sb{font-weight:600;}

/* El padding va en un wrapper INTERNO, no en #gppiram, por dos razones:
   1. `@container` NO reestila el propio contenedor, solo a sus descendientes → el padding del 290
      nunca se aplicaría (lección de la 011, y aquí volvió a morder).
   2. `overflow:hidden` recorta en la CAJA DE PADDING. Con el padding en #gppiram, el triángulo
      —que se sale 7 px por lado— quedaba cortado ahí, y Figma recorta en el borde del frame, no
      del contenido: ese triángulo NO se corta. Con el padding dentro, el recorte cae donde debe. */
#gppiram .gp_inner{padding:32px 24px;}

/* ===== Escenario ===== */
#gppiram .gp_stage{position:relative; display:flex; flex-direction:column; align-items:center;}

/* Triángulo de fondo: `clip-path` en % en vez de SVG, así escala a cualquier ancho sin deformarse
   ni depender de preserveAspectRatio. El apex va al 50,66 % (267,988 / 529 de Figma).
   `top/bottom` en vez de alto fijo: así el alto lo marca el contenido y sigue cuadrando al crecer. */
#gppiram .gp_tri{
  position:absolute; z-index:0; top:3px; bottom:26px; left:-7px; right:-7px;
  background:var(--gp-forest1);
  -webkit-clip-path:polygon(50.66% 0, 100% 100%, 0 100%);
          clip-path:polygon(50.66% 0, 100% 100%, 0 100%);
}

/* Columna de cajas — ancho CONTINUO en todo el rango, con una sola expresión.
   Por qué no un ancho por layout: los dos frames de Figma no se encuentran. Entre 290 y 565 el
   layout de 290 da SIEMPRE una columna más ancha que el de 565 (se cruzan en ~640), así que con un
   ancho por layout la pieza se volvía más ALTA al ensancharse (800 a 440 → 956 a 460): el texto
   envolvía más justo después del breakpoint. Con `max()` de las dos rectas el ancho crece de forma
   monótona y clava los dos frames:
     · tramo de abajo:  188,89 a 290  →  357 a 565   (recta que une los dos diseños)
     · tramo de arriba: gutters fijos de 79 por lado (D03: el ancho extra se lo queda la columna)
   Las dos rectas valen 357 en 565, así que no hay salto, solo un cambio de pendiente. */
#gppiram .gp_cols{
  position:relative; z-index:1;
  width:max(calc(61.131cqi + 12.83px), calc(100cqi - 206px));
  display:flex; flex-direction:column; gap:28px;
}
#gppiram .gp_grp{display:flex; flex-direction:column; gap:10px;}

/* ===== Cajas =====
   El borde va por `box-shadow:inset` y no por `border`: en Figma se dibuja POR DENTRO, así que un
   borde real restaría 2 px al contenido, cambiaría el punto de corte del texto y con él la altura. */
#gppiram .gp_box{
  border-radius:15px; padding:12px; text-align:center;
  font-size:16px; line-height:20px;
}
#gppiram .gp_box--out{background:var(--gp-sand1);}
#gppiram .gp_g1 .gp_box--fill{background:var(--gp-green);  color:var(--gp-sand1);}
#gppiram .gp_g2 .gp_box--fill{background:var(--gp-sunset); color:var(--gp-forest);}
#gppiram .gp_g3 .gp_box--fill{background:var(--gp-sky);    color:var(--gp-forest);}
#gppiram .gp_g4 .gp_box--fill{background:var(--gp-forest);  color:var(--gp-sand1);}
#gppiram .gp_g1 .gp_box--out{box-shadow:inset 0 0 0 1px var(--gp-green);}
#gppiram .gp_g2 .gp_box--out{box-shadow:inset 0 0 0 1px var(--gp-sunset);}
#gppiram .gp_g3 .gp_box--out{box-shadow:inset 0 0 0 1px var(--gp-sky);}
#gppiram .gp_g4 .gp_box--out{box-shadow:inset 0 0 0 1px var(--gp-forest);}
/* La caja rellena del grupo 1 sí lleva borde en Figma (del mismo color que el fondo). */
#gppiram .gp_g1 .gp_box--fill{box-shadow:inset 0 0 0 1px var(--gp-green);}
#gppiram .gp_box--fill{font-weight:600;}   /* SmBold */

/* ===== Ejes verticales =====
   Línea de 1 px con un chevron de 4 px (en Figma es una V de trazo, no un triángulo relleno).
   Anclados a offsets FIJOS del contenido: el eje no tiene por qué alejarse del borde al crecer. */
#gppiram .gp_axis{
  position:absolute; z-index:1; top:0; bottom:0; width:1px;
  background:var(--gp-forest);
}
/* Puntas de flecha: el chevron REAL de Figma como SVG en línea, no un cuadrado con dos bordes
   rotado 45°. El truco del cuadrado descuadra: el trazo se dibuja por dentro de la caja y, al rotar,
   el redondeo a subpíxel desplaza la punta —y con distinta pareja de bordes la desplaza de distinta
   forma, por eso unas salían torcidas de un modo y otras de otro. El SVG es simétrico respecto a su
   propio centro, así que basta con centrarlo sobre la línea. */
#gppiram .gp_axis::before{
  content:''; position:absolute; left:50%; width:7px; height:4px;
  transform:translateX(-50%);
}
#gppiram .gp_axis--rep{left:31px;}                                     /* flecha arriba */
#gppiram .gp_axis--rep::before{top:-1.5px; background:var(--gp-c-ar) center/7px 4px no-repeat;}
#gppiram .gp_axis--gob{right:32px;}                                    /* flecha abajo */
#gppiram .gp_axis--gob::before{bottom:-1.5px; background:var(--gp-c-ab) center/7px 4px no-repeat;}

/* Etiqueta rotada: DENTRO de su gutter (left/right propio + translate), nunca colgando fuera. */
#gppiram .gp_lbl{
  position:absolute; z-index:1; top:50%;
  font-size:18px; line-height:normal; white-space:nowrap; color:var(--gp-forest);
}
#gppiram .gp_lbl--rep{left:10.5px;  transform:translate(-50%,-50%) rotate(-90deg);}
#gppiram .gp_lbl--gob{right:11.5px; transform:translate(50%,-50%) rotate(90deg);}

/* ==========================================================================
   Móvil (Figma 290) — un solo punto de cambio
   No es el 565 estrechado: cambia el padding de la tarjeta, el triángulo pasa a ir POR DENTRO
   (a 565 sobresale y se recorta) y la etiqueta "Gobierno" se mete por DENTRO de su línea.
   ========================================================================== */
/* 478 y no 480: `container-type:inline-size` mide el CONTENT-BOX, y el borde de 1 px de la tarjeta
   hace que el contenedor mida 2 px menos que el viewport → 478 conmuta justo en 480.
   El 480 no es arbitrario: midiendo la curva de alto entre 400 y 565, con 440 la pieza se hacía
   56 px MÁS ALTA al ensanchar (los saltos del 565 reaparecen y fuerzan líneas extra) y con 480 esa
   subida baja a 16 px, que es solo el cambio de padding. Probados 440/480/500/520. */
@container gp (max-width:478px){
  #gppiram .gp_inner{padding:24px 8px;}      /* 565: 32px 24px */

  /* Los saltos manuales son del 565; aquí el texto refluye solo, como en Figma. */
  #gppiram .gp_br565{display:none;}

  /* Aquí NO sobresale: 264,1 sobre 272, centrado, y 24 de aire por debajo. */
  #gppiram .gp_tri{top:0; bottom:24px; left:1.46%; right:1.46%;}

  /* Los dos ejes, simétricos: la LÍNEA por dentro y la ETIQUETA por fuera, igual que en 565.
     (Antes el lado de Gobierno estaba invertido: la flecha quedaba a la derecha del texto.) */
  #gppiram .gp_axis--rep{left:10.22%;}
  #gppiram .gp_axis--gob{right:10.22%;}
  #gppiram .gp_lbl--rep{left:3.16%;}
  #gppiram .gp_lbl--gob{right:3.16%;}
}