/* =============================================================================
   Cómo funciona la tecnología edge computing
   Estático de iberdrola.com · scope #cfedge · clases cfe_
   Un solo tamaño de diseño (565) y ningún cambio de disposición: fluida de 290 en adelante.
   Medidas: specs/como-funciona-edge-computing/design/ (Figma es la única fuente).
   Sin ninguna `transition` (RF-05): los apartados se abren y se cierran de golpe.
   ============================================================================= */

/* ===== IberPangea + IberPangea Text (self-contained) ======================= */
@font-face{font-family:'IberPangea';src:url('/wcorp/gc/prod/es_ES/estaticos/como-funciona-edge-computing/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/como-funciona-edge-computing/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/como-funciona-edge-computing/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/como-funciona-edge-computing/fonts/IberPangeaText-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* ===== Tokens (design/tokens.json) ========================================= */
#cfedge{
  --cfe-green1:#007F33;   /* Green 1: título, cerrado, nombre abierto */
  --cfe-green:#00A443;    /* Iberdrola Green: flecha abierta */
  --cfe-forest:#00402A;   /* Iberdrola Forest: entradilla */
  --cfe-sand:#FFF5EC;     /* Iberdrola Sand: panel */
  --cfe-sand1:#FFFEFF;    /* Sand 1: tarjeta */
  --cfe-sand3:#D8CFC7;    /* Sand 3: trazos */
  --cfe-sand7:#3A3735;    /* Sand 7: texto del panel */
  --cfe-blanco:#FFFFFF;
}

/* ===== Marco de la pieza (RD-01) ===========================================
   `margin:0 auto` SIN margen vertical: se incrusta y el sitio pone su espaciado.
   Contenedor CON NOMBRE: `cqi` y las @container miden contra la tarjeta. */
#cfedge{
  container-name:cfe; container-type:inline-size;
  width:100%; margin:0 auto; padding:0; box-sizing:border-box;
  position:relative; background:var(--cfe-sand1); border:0; border-radius:16px; overflow:clip;
}
/* El trazo, ENCIMA de la ilustración (llega al borde derecho y lo taparía). */
#cfedge::after{content:'' !important; display:block !important; position:absolute; inset:0; margin:0; padding:0;
  border-radius:inherit; box-shadow:inset 0 0 0 1px var(--cfe-sand3); pointer-events:none; z-index:1;}

/* ===== Blindaje frente al theme de Liferay (F4, P4) ======================== */
#cfedge *{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; border:0; background:transparent;
  float:none; min-width:0; max-width:none; box-shadow:none; opacity:1;}
#cfedge ul,#cfedge ol,#cfedge li{list-style:none;}
#cfedge li::marker{content:none;}
#cfedge li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#cfedge *` no alcanza a los pseudo-elementos: se blindan aparte y SIN `content`. */
#cfedge *::before,#cfedge *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#cfedge button{cursor:pointer; appearance:none; -webkit-appearance:none; border-radius:0;
  width:100%; height:auto; min-height:0; line-height:inherit; outline:none; text-align:left;}
#cfedge img{border:0; height:auto;}
#cfedge svg{overflow:visible;}
#cfedge strong{font-weight:600;}
/* 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. */
#cfedge{
  font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--cfe-sand7);
  letter-spacing:normal; text-align:left; text-transform:none; white-space:normal;
  text-decoration:none; word-break:normal; overflow-wrap:break-word;
}

/* `display` NO se hereda: se declara elemento a elemento y con `!important`, con la
   dirección y el hueco de cada flex. */
#cfedge{display:block !important;}
#cfedge .cfe_in{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch;}
#cfedge .cfe_titulo,#cfedge .cfe_entradilla,#cfedge .cfe_texto{display:block !important;}
#cfedge .cfe_titulo strong,#cfedge .cfe_entradilla strong{display:inline !important;}
#cfedge .cfe_lista{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch;}
#cfedge .cfe_item{display:block !important;}
#cfedge .cfe_cab{display:block !important;}
#cfedge .cfe_btn{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start; gap:0;}
#cfedge .cfe_ico{display:block !important;}
#cfedge .cfe_ico img{display:block !important;}
#cfedge .cfe_conector{display:block !important;}
#cfedge .cfe_barra{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start; gap:0;}
#cfedge .cfe_hueco{display:block !important;}
#cfedge .cfe_nombre{display:block !important;}
#cfedge .cfe_flecha{display:block !important;}
#cfedge .cfe_panel{display:block !important;}
#cfedge .cfe_ilus{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:flex-start; justify-content:center;}
#cfedge .cfe_ilus img{display:block !important;}
/* UN solo mecanismo para ocultar: `hidden`. Sin esto el `display:… !important` de arriba lo anula. */
#cfedge .cfe_panel[hidden]{display:none !important;}

/* ===== Tarjeta por dentro (RD-02 … RD-05) ==================================
   El lado: 32 a 565 y por encima; fluido hasta 16 a 290. Se declara aquí y no en la raíz:
   `cqi` se resuelve contra el contenedor de quien lo usa, que es #cfedge. */
#cfedge .cfe_in{
  --cfe-lado:clamp(16px, calc(16px + (100cqi - 290px) * 16 / 275), 32px);
  padding:52px var(--cfe-lado) 24px;
}
#cfedge .cfe_titulo{font-family:'IberPangea',sans-serif; font-weight:400;
  font-size:32px; line-height:36px; color:var(--cfe-green1) !important;}
#cfedge .cfe_entradilla{margin-top:32px; font-family:'IberPangea Text',sans-serif; font-weight:400;
  font-size:18px; line-height:24px; color:var(--cfe-forest);}
#cfedge .cfe_lista{margin-top:38px; gap:32px;}

/* ===== Apartado (RD-06 … RD-10) ============================================
   Cada estado es un juego de variables en el botón; los hijos las leen. Cerrado: todo verde. */
#cfedge .cfe_btn{
  --cfe-fondo:var(--cfe-green1);       /* caja del icono y barra */
  --cfe-trazo:transparent;             /* su trazo */
  --cfe-con:var(--cfe-green1);         /* conector */
  --cfe-tinta:var(--cfe-blanco);       /* nombre */
  --cfe-flecha-c:var(--cfe-blanco);    /* flecha */
  --cfe-filtro:brightness(0) invert(1);/* glifo blanco a partir del de color (D-01) */
  --cfe-radio:8px;                     /* radio de la barra */
}
/* Abierto. Y sin JS o con `main.js` caído, que se ve todo abierto: el botón aún no tiene
   `aria-expanded` (lo pone el JS), así que no depende de `data-js`, que marca el script en línea. */
#cfedge .cfe_item.is-open .cfe_btn,
#cfedge .cfe_btn:not([aria-expanded]){
  --cfe-fondo:var(--cfe-blanco); --cfe-trazo:var(--cfe-sand3); --cfe-con:var(--cfe-sand3);
  --cfe-tinta:var(--cfe-green1); --cfe-flecha-c:var(--cfe-green); --cfe-filtro:none;
  --cfe-radio:8px 8px 0 0;
}

/* El theme pinta los h3 con `color … !important` en móvil: se responde igual. */
#cfedge .cfe_cab{font-family:'IberPangea Text',sans-serif; font-weight:600; font-size:16px; line-height:20px;
  color:var(--cfe-green1) !important;}
#cfedge .cfe_btn{border-radius:8px; cursor:pointer;}
#cfedge .cfe_ico{flex:none; width:40px; height:40px; position:relative; border-radius:8px; overflow:hidden;
  background:var(--cfe-fondo); box-shadow:inset 0 0 0 1px var(--cfe-trazo);}
#cfedge .cfe_ico img{position:absolute; filter:var(--cfe-filtro);}
/* Cada glifo, en el sitio y al tamaño de SU nodo de Figma (RD-08). */
#cfedge [data-item="t1"] .cfe_ico img{top:6.25px; left:6.25px; width:27.5px; height:27.5px;}
#cfedge [data-item="t2"] .cfe_ico img{top:6.25px; left:6.26px; width:27.5px; height:27.5px;}
#cfedge [data-item="t3"] .cfe_ico img{top:6.24px; left:6.41px; width:27.5px; height:27.43px;}
#cfedge [data-item="t4"] .cfe_ico img{top:10.39px; left:6.23px; width:27.5px; height:19.18px;}
#cfedge [data-item="t5"] .cfe_ico img{top:6.33px; left:6.2px; width:27.5px; height:27.55px;}
#cfedge .cfe_conector{flex:0 0 16px; width:16px; height:1px; background:var(--cfe-con);}
#cfedge .cfe_barra{flex:1 1 0; min-width:0; min-height:40px; padding:8px 16px; border-radius:var(--cfe-radio);
  background:var(--cfe-fondo); box-shadow:inset 0 0 0 1px var(--cfe-trazo);}
/* Hueco de la izquierda (en Figma, un icono que no se ve) para que el nombre quede centrado.
   Casi no encoge mientras el nombre pueda saltar de línea; si una palabra sola no cabe, es lo
   primero que cede (RD-07). Sin guion automático: con él, el navegador parte la palabra antes de
   que ceda el hueco. El tope del mínimo (el ancho de la barra menos la flecha) es para que, con el
   espaciado de texto aumentado (WCAG 1.4.12), una palabra larga se parta antes que salirse. */
#cfedge .cfe_hueco{flex:0 0.0001 24px; min-width:0; height:24px;}
#cfedge .cfe_nombre{flex:1 1 auto; min-width:min(min-content, calc(100% - 24px)); text-align:center; color:var(--cfe-tinta) !important;
  overflow-wrap:break-word; -webkit-hyphens:manual; hyphens:manual;}
/* Último recurso, sólo en lo más estrecho: ni con el hueco a 0 cabe «infraestructuras» (ES) por debajo
   de ~293. Ahí el hueco se va y la palabra se parte con guion, con el `lang` del HTML. */
@container cfe (max-width: 299.98px){
  #cfedge .cfe_hueco{flex-basis:0;}
  /* Sólo las palabras largas: el guion se usa siempre que llena la línea, y partía «per-sonas». */
  #cfedge .cfe_nombre{min-width:0; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:12 6 6;}
}
#cfedge .cfe_flecha{flex:0 0 24px; width:24px; height:24px; color:var(--cfe-flecha-c) !important;}
/* Abierta: gira y baja 1 px, como en el diseño; en horizontal no se mueve (D-02, D-05). */
#cfedge .cfe_item.is-open .cfe_flecha{transform:translateY(1px) rotate(180deg);}
#cfedge .cfe_btn:not([aria-expanded]) .cfe_flecha{display:none !important;}   /* sin JS no hay nada que abrir (RF-07) */
#cfedge .cfe_btn:not([aria-expanded]){cursor:default;}

/* Panel: pegado bajo la barra y con su mismo ancho (sangría 40 + 16). */
#cfedge .cfe_panel{margin-left:56px; padding:16px; background:var(--cfe-sand); border-radius:0 0 8px 8px;}
#cfedge .cfe_texto{font-family:'IberPangea Text',sans-serif; font-weight:400;
  font-size:16px; line-height:20px; color:var(--cfe-sand7); text-align:left;}

/* Foco: sólo con teclado. */
#cfedge .cfe_btn:focus-visible{outline:2px solid var(--cfe-green1) !important; outline-offset:2px !important;}

/* ===== Ilustración (RD-11, D-03, D-04) =====================================
   De borde a borde de la tarjeta, a 2 del izquierdo como en Figma. No pasa de 563: por encima,
   centrada; por debajo, entera y proporcional. */
#cfedge .cfe_ilus{margin:48px calc(-1 * var(--cfe-lado)) 0; padding-left:2px;}
#cfedge .cfe_ilus img{flex:none; width:min(100%, 563px); height:auto;}