/* =============================================================================
   ¿Qué beneficios / desafíos tienen las centrales eléctricas virtuales?
   Estático de iberdrola.com · scope #vppbendes · clases vb_
   Dos anchos de diseño: 980 (de borde a borde, sin caja) y 290 (con caja).
   UN solo punto de cambio de disposición: @container vb (min-width: 900px).
   Medidas: specs/beneficios-desafios-centrales-virtuales/design/ (Figma es la única fuente).
   Sin ninguna `transition` (D4): los desplegables 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/beneficios-desafios-centrales-virtuales/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/beneficios-desafios-centrales-virtuales/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/beneficios-desafios-centrales-virtuales/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/beneficios-desafios-centrales-virtuales/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/beneficios-desafios-centrales-virtuales/fonts/IberPangeaText-SmBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* ===== Tokens (tokens.json de cada bloque de design/) ======================================= */
#vppbendes{
  --vb-green1:#007F33;   /* Green 1: títulos, marcos de icono, hover y abierto */
  --vb-green:#00A443;    /* Iberdrola Green: flecha en reposo */
  --vb-forest:#00402A;   /* Iberdrola Forest: entradillas */
  --vb-sand:#FFF5EC;     /* Iberdrola Sand */
  --vb-sand1:#FFFEFF;    /* Sand 1 */
  --vb-sand3:#D8CFC7;    /* Sand 3: trazo de la caja de 290 */
  --vb-sand7:#3A3735;    /* Sand 7: texto del panel */
  --vb-blanco:#FFFFFF;
}

/* ===== Marco de la pieza ===================================================
   `margin:0 auto` SIN margen vertical: se incrusta y el sitio pone su espaciado.
   Contenedor CON NOMBRE para que ninguna @container mida contra otro. */
#vppbendes{
  container-name:vb; container-type:inline-size;
  width:100%; max-width:980px; margin:0 auto; padding:0; box-sizing:border-box;
  position:relative; background:transparent; border:0;
}

/* ===== Blindaje frente al theme de Liferay (docs/VALIDACION.md) ============ */
#vppbendes *{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;}
#vppbendes ul,#vppbendes ol,#vppbendes li{list-style:none;}
#vppbendes li::marker{content:none;}
#vppbendes li::before{content:'' !important; display:none !important; margin:0 !important;}
/* `#vppbendes *` no alcanza a los pseudo-elementos: se blindan aparte y SIN `content`. */
#vppbendes *::before,#vppbendes *::after{margin:0; padding:0; text-indent:0;
  letter-spacing:inherit; text-transform:inherit;}
#vppbendes button{cursor:pointer; appearance:none; -webkit-appearance:none; border-radius:0;
  width:100%; height:auto; min-height:0; line-height:inherit; outline:none;}
#vppbendes img{border:0; height:auto;}
#vppbendes svg{overflow:visible;}
#vppbendes 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. */
#vppbendes{
  font-family:'IberPangea Text',sans-serif; font-size:16px; line-height:20px;
  font-weight:400; font-style:normal; color:var(--vb-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. Lo que cambia en el tramo de 980 se reafirma allí. */
#vppbendes{display:block !important;}
#vppbendes .vb_in{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch;}
#vppbendes .vb_bloque{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch;}
#vppbendes .vb_cabecera{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:16px;}
#vppbendes .vb_titulo,#vppbendes .vb_entradilla,#vppbendes .vb_texto{display:block !important;}
#vppbendes .vb_lista{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch;}
#vppbendes .vb_item{display:block !important;}
#vppbendes .vb_cab{display:block !important;}
#vppbendes .vb_btn{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start;}
#vppbendes .vb_ico{display:block !important;}
#vppbendes .vb_ico img{display:block !important;}
#vppbendes .vb_conector{display:none !important;}          /* sólo en 980 */
#vppbendes .vb_pastilla{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start;}
#vppbendes .vb_nombre{display:block !important;}
#vppbendes .vb_flecha{display:block !important;}
#vppbendes .vb_panel{display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:stretch;}
#vppbendes .vb_ilus{display:block !important;}
#vppbendes .vb_ilus img{display:block !important;}
/* UN solo mecanismo para ocultar: `hidden`. Sin esto el `display:… !important` de arriba lo anula. */
#vppbendes .vb_panel[hidden]{display:none !important;}

/* ===== Colores de cada estado (RD-05) ======================================
   Cada estado cambia unas variables en el botón; los hijos las leen. Así el hover, el
   abierto y el de cada bloque son un juego de valores, no reglas repetidas. */
#vppbendes .vb_btn{
  --vb-fondo:var(--vb-sand);        /* pastilla en reposo (beneficios) */
  --vb-tinta:var(--vb-green1);      /* nombre en reposo */
  --vb-flecha-c:var(--vb-green);    /* flecha en reposo */
  --vb-icofondo:transparent;        /* caja del icono en reposo */
}
#vppbendes .vb_bloque--desafios .vb_btn{--vb-fondo:var(--vb-blanco);}   /* 290: #FFFFFF */
/* Abierto (y sin JS, que se ve todo abierto): cabecera verde, icono blanco. */
#vppbendes .vb_item.is-open .vb_btn,
#vppbendes:not([data-js]) .vb_item .vb_btn{
  --vb-fondo:var(--vb-green1); --vb-tinta:var(--vb-sand1);
  --vb-flecha-c:var(--vb-sand1); --vb-icofondo:var(--vb-green1);
}
#vppbendes .vb_ico .vb_ico_on{display:none !important;}
#vppbendes .vb_item.is-open .vb_ico .vb_ico_off,
#vppbendes:not([data-js]) .vb_ico .vb_ico_off{display:none !important;}
#vppbendes .vb_item.is-open .vb_ico .vb_ico_on,
#vppbendes:not([data-js]) .vb_ico .vb_ico_on{display:block !important;}

/* ===== Cabeceras de bloque (RD-08) ========================================= */
#vppbendes .vb_titulo{font-family:'IberPangea',sans-serif; font-weight:400;
  font-size:30px; line-height:34px; color:var(--vb-green1) !important;}
#vppbendes .vb_entradilla{font-family:'IberPangea Text',sans-serif; font-weight:400;
  font-size:18px; line-height:22px; color:var(--vb-forest);}
#vppbendes .vb_lista{margin-top:24px; gap:16px;}

/* ===== Desplegable ========================================================= */
/* El theme pinta los h3 con `color … !important` en móvil: se responde igual. */
#vppbendes .vb_cab{font-family:'IberPangea',sans-serif; font-weight:500; font-size:18px; line-height:22px;
  color:var(--vb-green1) !important;}
#vppbendes .vb_nombre{flex:1 1 0; color:var(--vb-tinta) !important;}
#vppbendes .vb_flecha{flex:none; width:13.5px; height:7.5px; color:var(--vb-flecha-c);}
#vppbendes .vb_item.is-open .vb_flecha{transform:rotate(180deg);}
#vppbendes:not([data-js]) .vb_flecha{display:none !important;}     /* sin JS no hay nada que abrir (RF-08) */
#vppbendes:not([data-js]) .vb_btn{cursor:default;}
#vppbendes .vb_ico{flex:none; position:relative; border-radius:8px; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--vb-green1); background:var(--vb-icofondo);}
#vppbendes .vb_ico img{position:absolute; left:0; top:0; width:100%; height:100%;}
#vppbendes .vb_texto{font-family:'IberPangea Text',sans-serif; font-weight:400;
  font-size:16px; line-height:20px; color:var(--vb-sand7);}
/* Caja del dibujo: alto 120 y recorte por los lados. El dibujo, a su tamaño NATURAL y
   centrado; nunca se escala (D7), por eso sin `max-width:100%`. */
#vppbendes .vb_ilus{position:relative; height:120px; overflow:hidden;}
#vppbendes .vb_ilus img{position:absolute; left:50%; top:0; transform:translateX(-50%);
  max-width:none; max-height:none;}
#vppbendes .vb_bloque--beneficios .vb_panel{background:var(--vb-sand);}
#vppbendes .vb_bloque--beneficios .vb_ilus{background:var(--vb-blanco);}
#vppbendes .vb_bloque--desafios .vb_panel{background:var(--vb-blanco);}
#vppbendes .vb_bloque--desafios .vb_ilus{background:var(--vb-sand);}

/* Foco (D13, desviación aceptada: AA 2.4.7). Sólo con teclado. */
#vppbendes .vb_btn:focus-visible{outline:2px solid var(--vb-green1) !important; outline-offset:2px !important;}

/* =============================================================================
   TRAMO BASE (< 900) = el diseño de 290, estirado.
   La caja va en `.vb_in`: `@container` no reestila el propio contenedor. El trazo como
   sombra interior: un `border` restaría 2 px al ancho de dentro.
   ============================================================================= */
#vppbendes .vb_in{padding:32px 16px; background:var(--vb-blanco); border-radius:16px;
  box-shadow:inset 0 0 0 1px var(--vb-sand3);}
/* Lados 14/15 como Figma (29 sep: así la entradilla corta igual que el diseño); arriba y abajo 32/32 (D15). */
#vppbendes .vb_bloque--desafios{margin-top:24px; padding:32px 15px 32px 14px;
  background:var(--vb-sand); border-radius:16px;}
/* Fila: el icono va DENTRO de la pastilla; el botón es la pastilla. */
#vppbendes .vb_btn{padding:8px 12px; gap:8px; border-radius:16px; background:var(--vb-fondo);}
#vppbendes .vb_ico{width:48px; height:48px;}
#vppbendes .vb_pastilla{flex:1 1 0; gap:8px;}
#vppbendes .vb_nombre{text-align:left;}
#vppbendes .vb_item.is-open .vb_btn,
#vppbendes:not([data-js]) .vb_btn{border-radius:16px 16px 0 0;}
/* Panel: dibujo arriba y texto debajo. */
#vppbendes .vb_panel{padding:16px; gap:16px; border-radius:0 0 16px 16px;}
/* D14: la caja crece con el ancho hasta el del dibujo, y ahí se para y se centra. */
#vppbendes .vb_ilus{width:100%; max-width:var(--vb-dibujo, 100%); align-self:center; border-radius:8px;}
/* Dos dibujos por ítem (D22): el de escritorio (418) mientras quepa entero en el panel; si no, el de
   móvil (225 / 197, como Figma de 290). El de escritorio recortado perdía lo de los bordes.
   Lo mide el panel, con nombre para que no se quede con las consultas de `vb`. */
#vppbendes .vb_panel{container:vbpanel / inline-size;}
#vppbendes .vb_ilus .vb_ilus_escritorio{display:none !important;}
@container vbpanel (min-width: 418px){   /* mide el ancho de dentro del panel, sin su padding */
  #vppbendes .vb_ilus{max-width:418px;}
  #vppbendes .vb_ilus .vb_ilus_movil{display:none !important;}
  #vppbendes .vb_ilus .vb_ilus_escritorio{display:block !important;}
}

/* =============================================================================
   TRAMO 980 (≥ 900): de borde a borde, sin caja (RD-02).
   ============================================================================= */
#vppbendes .vb_in{--vb-modo:movil;}
@container vb (min-width: 900px){
  #vppbendes .vb_in{--vb-modo:escritorio; padding:0; background:transparent; border-radius:0; box-shadow:none;}
  #vppbendes .vb_titulo{font-size:32px; line-height:36px;}
  #vppbendes .vb_entradilla{font-size:18px; line-height:24px;}
  #vppbendes .vb_lista{gap:24px;}
  #vppbendes .vb_bloque--desafios{padding:40px 32px;}
  #vppbendes .vb_bloque--desafios .vb_lista{margin-top:36px;}
  #vppbendes .vb_bloque--desafios .vb_btn{--vb-fondo:var(--vb-sand1);}      /* 980: #FFFEFF */

  /* Fila: caja de icono 56 + conector 16 + pastilla. El fondo lo lleva la pastilla. */
  #vppbendes .vb_btn{padding:0; gap:0; border-radius:0; background:transparent; align-items:center;}
  #vppbendes .vb_item.is-open .vb_btn,
  #vppbendes:not([data-js]) .vb_btn{border-radius:0;}
  #vppbendes .vb_ico{width:56px; height:56px;}
  #vppbendes .vb_bloque--desafios .vb_btn{--vb-icofondo:var(--vb-blanco);}
  #vppbendes .vb_bloque--desafios .vb_item.is-open .vb_btn,
  #vppbendes:not([data-js]) .vb_bloque--desafios .vb_btn{--vb-icofondo:var(--vb-green1);}
  #vppbendes .vb_conector{display:block !important; flex:none; width:16px; height:1px; background:var(--vb-green1);}
  #vppbendes .vb_pastilla{min-height:56px; padding:8px 16px; gap:10px; border-radius:16px; background:var(--vb-fondo);}
  #vppbendes .vb_nombre{text-align:center;}
  #vppbendes .vb_item.is-open .vb_pastilla,
  #vppbendes:not([data-js]) .vb_pastilla{border-radius:16px 16px 0 0;}

  /* Panel: cuelga bajo la pastilla (sangría 56 + 16), dibujo a la izquierda. */
  #vppbendes .vb_panel{display:flex !important; flex-direction:row; flex-wrap:nowrap; align-items:center;
    margin-left:72px; padding:24px 16px; gap:24px; border-radius:0 0 16px 16px;}
  #vppbendes .vb_panel[hidden]{display:none !important;}
  #vppbendes .vb_ilus{flex:0 1 418px; width:auto; max-width:none; align-self:auto; border-radius:10.573px;}
  #vppbendes .vb_bloque--desafios .vb_ilus{flex-basis:394px;}
  #vppbendes .vb_texto{flex:1 1 0;}
}

/* Hover: sólo con ratón (en móvil no hay hover) y sólo en el tramo de 980 (RF-04). */
@media (hover:hover){
  @container vb (min-width: 900px){
    #vppbendes[data-js] .vb_item:not(.is-open) .vb_btn:hover{
      --vb-fondo:var(--vb-green1); --vb-tinta:var(--vb-sand1);
      --vb-flecha-c:var(--vb-sand1); --vb-icofondo:var(--vb-green1);
    }
    #vppbendes[data-js] .vb_item:not(.is-open) .vb_btn:hover .vb_ico .vb_ico_off{display:none !important;}
    #vppbendes[data-js] .vb_item:not(.is-open) .vb_btn:hover .vb_ico .vb_ico_on{display:block !important;}
  }
}