/* ==========================================================================
   Modelo de gestión ambiental
   Scope: #mgambiental · clases mga_ · Figma 4T2025 16761:3314 (565) y 16761:4171 (290)
   Dos composiciones con UN corte (@container mga, 561): por debajo, la columna de 290 estirada;
   desde 561, la de filas de tres de 565, que crece sin tope (D04).
   ========================================================================== */

@font-face{font-family:'IberPangea';src:url(/wcorp/gc/prod/es_ES/estaticos/modelo-gestion-ambiental/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/modelo-gestion-ambiental/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/modelo-gestion-ambiental/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/modelo-gestion-ambiental/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/modelo-gestion-ambiental/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/modelo-gestion-ambiental/fonts/IberPangeaText-SmBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* ===== Tokens ===== */
#mgambiental{
  --mga-green1:#007F33;  /* Green 1 — título y cabeceras */
  --mga-forest:#00402A;  /* Forest — textos del esquema y conectores */
  --mga-sand1:#FFFEFF;   /* Sand 1 — fondo y texto de las cabeceras */
  --mga-sand3:#D8CFC7;   /* Sand 3 — bordes */
  --mga-sand7:#3A3735;   /* Sand 7 — textos del bloque Holding */
  /* Puntas de flecha: chevron 7 × 3,5, trazo 1, extremos redondeados. El vértice cae a 0,5 del
     borde de la imagen (el trazo). */
  --mga-cv-ab:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4.5' viewBox='0 0 8 4.5'%3E%3Cpath d='M0.5 0.5 4 4 7.5 0.5' fill='none' stroke='%2300402A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mga-cv-ar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4.5' viewBox='0 0 8 4.5'%3E%3Cpath d='M0.5 4 4 0.5 7.5 4' fill='none' stroke='%2300402A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mga-cv-de:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.5' height='8' viewBox='0 0 4.5 8'%3E%3Cpath d='M0.5 0.5 4 4 0.5 7.5' fill='none' stroke='%2300402A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mga-cv-iz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.5' height='8' viewBox='0 0 4.5 8'%3E%3Cpath d='M4 0.5 0.5 4 4 7.5' fill='none' stroke='%2300402A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mga-raya:linear-gradient(#00402A,#00402A);
}

/* ===== Tarjeta (raíz) ===== */
/* Sin max-width (D04) y sin margen vertical: la pieza se incrusta. El borde es un box-shadow
   inset para que no reste al inline-size del contenedor. La raíz declara todo lo heredable. */
#mgambiental{
  container-type:inline-size; container-name:mga;
  display:block !important; position:relative; box-sizing:border-box;
  width:100%; margin:0 auto; padding:0;
  background:var(--mga-sand1); box-shadow:inset 0 0 0 1px var(--mga-sand3); border-radius:15px;
  font-family:'IberPangea Text',Arial,sans-serif; font-size:16px; line-height:20px; font-weight:400;
  font-style:normal; color:var(--mga-forest);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none; text-indent:0;
}

/* ===== Blindaje frente al CSS del portal (Liferay) ===== */
#mgambiental *,#mgambiental *::before,#mgambiental *::after{box-sizing:border-box;}
#mgambiental *{
  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;
}
#mgambiental *::before,#mgambiental *::after{
  margin:0; padding:0; text-indent:0; letter-spacing:inherit; text-transform:inherit;
}
#mgambiental ul,#mgambiental ol,#mgambiental li{list-style:none;}
#mgambiental li::marker{content:none;}
#mgambiental li::before{content:'' !important; display:none !important; margin:0 !important;}
#mgambiental img{display:block !important; max-width:none; border:0;}
#mgambiental strong{font-weight:600;}
#mgambiental em{font-style:italic;}

/* ===== Wrapper (la @container no reestila la raíz) ===== */
#mgambiental .mga_inner{display:block !important; padding:32px 16px;}

/* ===== Cabecera ===== */
#mgambiental .mga_head{
  display:flex !important; flex-direction:row !important; gap:0 !important;
  align-items:flex-end; justify-content:flex-start; flex-wrap:nowrap;
}
/* -37: el texto se mete bajo el globo, como en Figma. */
#mgambiental .mga_txt{
  display:flex !important; flex-direction:column !important; gap:16px !important;
  align-items:flex-start; justify-content:flex-end; flex-wrap:nowrap;
  flex:1 1 0; min-width:0; margin-right:-37px;
}
/* El theme pinta los h2 de #427314 !important en móvil. */
#mgambiental .mga_title{
  display:block !important; width:calc(100% + 31.66px);
  font-family:'IberPangea',Arial,sans-serif; font-weight:400; font-size:30px; line-height:34px;
  color:var(--mga-green1) !important;
}
#mgambiental .mga_title strong{font-weight:600;}
/* 290: la entradilla para 5,34 antes del globo (184 de ancho). Nunca más baja que el globo: con
   menos líneas (más ancho, otro idioma) el globo subiría hasta el título y lo taparía. */
#mgambiental .mga_lead{
  display:block !important; width:calc(100% - 42.34px); min-height:84px;
  font-family:'IberPangea Text',Arial,sans-serif; font-weight:400; font-size:18px; line-height:24px;
  color:var(--mga-forest);
}
#mgambiental .mga_lead strong{font-weight:600;}
#mgambiental .mga_globo{flex:none; width:68.66px; height:84px;}

/* ===== Esquema ===== */
/* 290: hueco de 7,39 a la izquierda y 8,13 a la derecha para las llaves. */
#mgambiental .mga_esq{display:block !important; position:relative; margin-top:16px; padding:0 8.13px 0 7.39px;}
#mgambiental .mga_tramo{display:block !important; position:relative;}

/* --- Cabeceras verdes --- */
#mgambiental .mga_cab{
  display:block !important; position:relative; z-index:1;
  background:var(--mga-green1); padding:8px 0; border-radius:15px 15px 0 0;
  font-family:'IberPangea',Arial,sans-serif; font-weight:500; font-size:18px; line-height:22px;
  text-align:center; color:var(--mga-sand1) !important;
}
#mgambiental .mga_cab em{font-weight:500; font-style:italic;}
#mgambiental .mga_cab--sub{margin-top:4px;}

/* --- Tarjetas con icono --- */
#mgambiental .mga_tres{display:flex !important; flex-direction:column !important; gap:0 !important; align-items:stretch; flex-wrap:nowrap;}
#mgambiental .mga_card{display:block !important; position:relative; min-width:0; color:var(--mga-forest);}
#mgambiental .mga_card_in{
  display:flex !important; flex-direction:column !important; gap:0 !important;
  align-items:center; justify-content:flex-start; flex-wrap:nowrap;
}
#mgambiental .mga_ico{flex:none; width:44px; height:44px;}
#mgambiental .mga_card_t{display:block !important; text-align:center; font-weight:400; font-size:16px; line-height:20px;}

/* 290 · Holding: tres ítems apilados en una caja con borde, como «subholdings» y como los frames
   EN y PT (D12: la pastilla y la raya del Figma ES de 290 son un error de diseño). */
#mgambiental .mga_tres--hold{position:relative; padding:16px; border-radius:0 0 15px 15px;}
#mgambiental .mga_tres--hold .mga_card{padding:0 10px; color:var(--mga-sand7);}
#mgambiental .mga_tres--hold .mga_ico{width:55px; height:55px;}
#mgambiental .mga_tres--hold .mga_card_t{align-self:stretch; padding:8px;}

/* 290 · finales: apiladas, borde en los cuatro lados; el icono y el texto sin hueco. */
#mgambiental .mga_tres--fin{gap:16px !important;}
#mgambiental .mga_tres--fin .mga_card{padding:8px 4px; border-radius:16px;}
#mgambiental .mga_tres--fin .mga_card_t{align-self:stretch;}
/* El borde es un trazo interior, como en Figma: no resta espacio al contenido. */
#mgambiental .mga_tres--fin .mga_card::after,
#mgambiental .mga_tres--hold::after,
#mgambiental .mga_caja::after,
#mgambiental .mga_logos::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  border:1px solid var(--mga-sand3); border-radius:inherit;
}

/* --- Cajas de texto del flujo --- */
#mgambiental .mga_flujo{display:block !important;}
#mgambiental .mga_paso{display:block !important; position:relative;}
#mgambiental .mga_caja{
  display:block !important; position:relative; margin-top:8px;
  padding:24px 16px; border-radius:16px;
  font-weight:600; font-size:16px; line-height:20px; text-align:center; color:var(--mga-sand7);
}
#mgambiental .mga_caja--sub{color:var(--mga-forest);}
#mgambiental .mga_caja--iro{font-weight:400;}
#mgambiental .mga_caja--iro strong{font-weight:600;}
#mgambiental .mga_paso--sga{margin-top:16px;}
#mgambiental .mga_paso--sga .mga_caja{margin-top:0;}

/* --- Logos --- */
/* 290: tres filas de dos (España, Internacional / Reino Unido, Estados Unidos / Brasil, México). */
#mgambiental .mga_logos{
  display:grid !important; position:relative; gap:16px 10px !important;
  grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch;
  padding:16px 8px; border-radius:0 0 15px 15px;
}
#mgambiental .mga_logos::after,#mgambiental .mga_tres--hold::after{border-top:0;}
#mgambiental .mga_soc{
  display:flex !important; flex-direction:column !important; gap:8px !important;
  align-items:center; justify-content:flex-start; flex-wrap:nowrap; min-width:0;
}
#mgambiental .mga_logo{display:flex !important; flex-direction:row !important; gap:0 !important; justify-content:center; align-items:center; align-self:stretch;}
#mgambiental .mga_logo img{flex:none; height:auto;}
#mgambiental .mga_pais{display:block !important; text-align:center; font-weight:400; font-size:15px; line-height:20px; color:var(--mga-forest);}
#mgambiental .mga_soc--es img{width:104.8px; max-width:100%;}
#mgambiental .mga_soc--int img{width:100%; max-width:108.24px;}
#mgambiental .mga_soc--uk img{width:100%; max-width:108.24px;}
#mgambiental .mga_soc--us img{width:101.5px; max-width:100%;}
#mgambiental .mga_soc--br img{width:120.48px;}
#mgambiental .mga_soc--mx img{width:103.15px;}
/* Fila 3: celdas de 99,24 (9 de margen fuera) con el país abajo; los logos desbordan su celda,
   centrados, como en Figma. */
#mgambiental .mga_soc--br{margin-left:9px; justify-content:space-between;}
#mgambiental .mga_soc--mx{margin-right:9px; justify-content:space-between;}

/* --- Conectores --- */
/* Flecha recta de 16: raya de 1 por el centro y chevron con el vértice en la punta. */
#mgambiental .mga_fl{
  display:block !important; width:8px; height:16px; margin:8px auto 0;
  background:var(--mga-cv-ab) center bottom/8px 4.5px no-repeat, var(--mga-raya) center top/1px 15.5px no-repeat;
}
#mgambiental .mga_paso--metas .mga_fl{margin-top:0;}
/* Flecha doble: abajo a −8 del centro y arriba a +8. */
#mgambiental .mga_fl2{
  display:block !important; width:24px; height:16px; margin:8px auto 0;
  background:var(--mga-cv-ab) left bottom/8px 4.5px no-repeat, var(--mga-cv-ar) right top/8px 4.5px no-repeat,
             var(--mga-raya) 3.5px 0/1px 15.5px no-repeat, var(--mga-raya) 19.5px 0.5px/1px 15.5px no-repeat;
}
/* 290: la línea central sólo asoma en los huecos: pegada a «Políticas» hasta la primera tarjeta
   (43,94; en Figma empezaba 8 por debajo, D13), 16 entre tarjetas y, antes de la tercera, con
   punta y 2 antes. */
#mgambiental .mga_rep{
  display:block !important; position:relative; height:43.94px; margin-top:0;
  background:var(--mga-raya) 49.905% 0/1px 100% no-repeat;
}
#mgambiental .mga_rep_b{display:none !important;}
#mgambiental .mga_lin{
  display:block !important; position:absolute; left:calc(49.905% - 4px); top:-16px; width:8px; height:16px;
  background:var(--mga-raya) center top/1px 100% no-repeat;
}
#mgambiental .mga_lin--fl{height:14px; background:var(--mga-cv-ab) center bottom/8px 4.5px no-repeat, var(--mga-raya) center top/1px 13.5px no-repeat;}
#mgambiental .mga_codo{display:none !important;}

/* --- Llaves laterales, en dos tramos ---
   1) De la cabecera Holding al final de los logos y el hueco hasta «Sistemas» (bottom −16).
   2) Dentro de «Sistemas»: bajante hasta su centro y raya con punta hasta su borde. */
#mgambiental .mga_llave{
  display:block !important; position:absolute; top:28.5px; bottom:-16px; width:8.63px;
  border-top:1px solid var(--mga-forest);
}
#mgambiental .mga_llave--i{left:-7.89px; border-left:1px solid var(--mga-forest);}
#mgambiental .mga_llave--d{right:-8.63px; border-right:1px solid var(--mga-forest);}
#mgambiental .mga_punta{
  display:block !important; position:absolute; top:0; height:calc(50% + 0.5px); width:7.89px;
  border-bottom:1px solid var(--mga-forest);
}
#mgambiental .mga_punta--i{left:-7.89px; border-left:1px solid var(--mga-forest);}
#mgambiental .mga_punta--d{right:-8.63px; width:8.63px; border-right:1px solid var(--mga-forest);}
#mgambiental .mga_punta::after{
  content:''; position:absolute; bottom:-3.5px; width:4.5px; height:8px;
}
#mgambiental .mga_punta--i::after{right:0; background:var(--mga-cv-de) center/4.5px 8px no-repeat;}
#mgambiental .mga_punta--d::after{left:0; background:var(--mga-cv-iz) center/4.5px 8px no-repeat;}

/* ==========================================================================
   Composición ancha (565): desde el ancho en que la fila de tres cabe sin partir palabras
   en ES y PT («ambientales», 90,8 → tarjeta 154,8 → pieza 561).
   ========================================================================== */
@container mga (min-width: 561px){
  #mgambiental .mga_inner{display:block !important; padding:32px;}

  #mgambiental .mga_head{display:flex !important; flex-direction:row !important; gap:0 !important;}
  /* Columna de texto = ancho − 88: deja 7 libres a la derecha del globo, como Figma. */
  #mgambiental .mga_txt{display:flex !important; flex-direction:column !important; gap:24px !important; flex:0 0 calc(100% - 88px);}
  #mgambiental .mga_title{display:block !important; width:calc(100% - 21px); font-size:32px; line-height:36px;}
  #mgambiental .mga_lead{display:block !important; width:calc(100% - 21px); min-height:0;}
  /* EN: «Environmental management» llega al globo con el ancho de Figma (392); el título para
     antes del globo (columna − 37) y «management» pasa a la segunda línea. */
  #mgambiental:lang(en) .mga_title{width:calc(100% - 37px);}
  #mgambiental .mga_globo{width:118px; height:144.37px;}

  #mgambiental .mga_esq{display:block !important; margin-top:23px; padding:0;}

    #mgambiental .mga_cab--sub{margin-top:16px;}

  /* Fila de tres que cuelga de la cabecera: borde abajo y a los lados. El alto lo dan el
     padding y el icono (92 / 93 / 91); el texto sobra por arriba y por abajo como en Figma
     (margen −16: la fila mide max(icono, texto − 32)). */
  #mgambiental .mga_tres{display:flex !important; flex-direction:row !important; gap:16px !important; align-items:flex-start;}
  #mgambiental .mga_tres--hold{padding:0; border-radius:0;}
  #mgambiental .mga_tres--hold::after{content:none;}
  #mgambiental .mga_tres .mga_card{
    flex:1 1 0; padding:24px 0; border-radius:0 0 16px 16px;
    container-type:inline-size; container-name:mgacard;
  }
  #mgambiental .mga_tres--hold .mga_card{padding:24px 0;}
  #mgambiental .mga_tres--hold .mga_card::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    border:1px solid var(--mga-sand3); border-top:0; border-radius:inherit;
  }
  #mgambiental .mga_tres .mga_card_in{display:flex !important; flex-direction:row !important; gap:0 !important; align-items:center; padding:0 10px;}
  #mgambiental .mga_tres .mga_ico{width:44px; height:44px;}
  #mgambiental .mga_tres .mga_ico--45{height:45px;}
  #mgambiental .mga_tres .mga_ico--43{height:43px;}
  #mgambiental .mga_tres .mga_card_t{display:block !important; flex:1 1 0; min-width:0; align-self:center; margin:-16px 0; padding:0; text-align:left;}

  /* Tarjetas finales: 129 : 187 : 153 (los anchos de Figma a 501; al crecer, la misma proporción). */
  #mgambiental .mga_tres--fin{margin-top:16px;}
  #mgambiental .mga_tres--fin .mga_card{border-radius:16px;}
  #mgambiental .mga_tres--fin .mga_card--1{flex:129 1 0;}
  #mgambiental .mga_tres--fin .mga_card--2{flex:187 1 0;}
  #mgambiental .mga_tres--fin .mga_card--3{flex:153 1 0;}
  #mgambiental .mga_lin{display:none !important;}

  /* Cajas: «Metas» al ancho de su texto y centrada; el resto, a todo el ancho. */
  #mgambiental .mga_caja{display:block !important; margin-top:16px; padding:24px 0;}
  #mgambiental .mga_caja--metas{width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; padding:24px;}
  #mgambiental .mga_caja--sub{padding:24px 16px;}
  #mgambiental .mga_paso--sga .mga_caja{margin-top:0;}

  /* Logos: dos filas de tres; Brasil pasa al final. Caja del logo de 33 y el logo a su tamaño,
     centrado, desbordándola sin recortar. */
  #mgambiental .mga_logos{
    display:grid !important; gap:0 !important; grid-template-columns:repeat(3,minmax(0,1fr));
    padding:0; border-radius:0 0 16px 16px;
  }
  #mgambiental .mga_soc{display:flex !important; flex-direction:column !important; gap:10px !important; justify-content:flex-start; padding:16px 8px; margin:0;}
  #mgambiental .mga_soc--br{order:1;}
  #mgambiental .mga_logo{display:flex !important; flex-direction:row !important; gap:0 !important; height:33px;}
  #mgambiental .mga_pais{font-size:16px;}
  #mgambiental .mga_soc--es img{width:94.52px; max-width:none;}
  #mgambiental .mga_soc--int img{width:120.57px; max-width:none;}
  #mgambiental .mga_soc--uk img{width:129.5px; max-width:none;}
  #mgambiental .mga_soc--us img{width:91.54px; max-width:none;}
  #mgambiental .mga_soc--br img{width:108.66px;}
  #mgambiental .mga_soc--mx img{width:93.03px;}

  /* Conectores */
  #mgambiental .mga_fl,#mgambiental .mga_fl2{margin-top:16px;}
  #mgambiental .mga_paso--metas .mga_fl{margin-top:16px;}
  /* Codos de las tarjetas a «Metas»: bajante en el 9,58 % del esquema (48 a 501), 32 por encima
     de «Metas», y raya a la altura de su centro hasta 13,5 antes de su borde. El esquema mide
     100cqi − 64 (cqi de la raíz). */
  #mgambiental .mga_codo{
    display:block !important; position:absolute; top:-32px; bottom:calc(50% - 1.5px);
    border-bottom:1px solid var(--mga-forest);
  }
  #mgambiental .mga_codo--i{left:calc(50% - 0.4042 * (100cqi - 64px) - 0.5px); right:calc(100% + 13.5px); border-left:1px solid var(--mga-forest);}
  #mgambiental .mga_codo--d{right:calc(50% - 0.4042 * (100cqi - 64px) - 0.5px); left:calc(100% + 13.5px); border-right:1px solid var(--mga-forest);}
  #mgambiental .mga_codo::after{content:''; position:absolute; bottom:-3.5px; width:4.5px; height:8px;}
  #mgambiental .mga_codo--i::after{right:0; background:var(--mga-cv-de) center/4.5px 8px no-repeat;}
  #mgambiental .mga_codo--d::after{left:0; background:var(--mga-cv-iz) center/4.5px 8px no-repeat;}
  /* Reparto: baja 21 del centro, raya del 9,5 % al 90,5 % y tres bajantes de 21 con punta. */
  #mgambiental .mga_rep{
    display:block !important; height:42px; margin-top:16px;
    background:var(--mga-raya) center 0/1px 21px no-repeat, var(--mga-raya) center 20.5px/81% 1px no-repeat;
  }
  #mgambiental .mga_rep_b{
    display:block !important; position:absolute; top:21px; width:8px; height:21px;
    background:var(--mga-cv-ab) center bottom/8px 4.5px no-repeat, var(--mga-raya) center top/1px 20.5px no-repeat;
  }
  #mgambiental .mga_rep_b--1{left:calc(9.5% - 4px);}
  #mgambiental .mga_rep_b--2{left:calc(50% - 4px);}
  #mgambiental .mga_rep_b--3{left:calc(90.5% - 4px);}

  /* Llaves: izquierda en el padding (14), derecha 17, asimétricas como en Figma (T7). */
  #mgambiental .mga_llave{display:block !important; top:29.5px; width:14.5px;}
  #mgambiental .mga_llave--i{left:-14.5px;}
  #mgambiental .mga_llave--d{right:-15.5px; width:16.5px;}
  #mgambiental .mga_punta{display:block !important; width:14.5px;}
  #mgambiental .mga_punta--i{left:-14.5px;}
  #mgambiental .mga_punta--d{right:-15.5px; width:15.5px;}
}

/* D10: con la palabra más larga de la tarjeta sin sitio al lado del icono, el icono va encima,
   centrado. Sólo le pasa al inglés («Environmental», 106,7 + 10 + icono 44 + 10 = 170,7) cerca del corte. */
@container mgacard (max-width: 170.7px){
  #mgambiental:lang(en) .mga_tres--hold .mga_card_in{display:flex !important; flex-direction:column !important; gap:0 !important; align-items:center;}
  #mgambiental:lang(en) .mga_tres--hold .mga_card_t{align-self:stretch; margin:0; text-align:center;}
}