/* =========================================================
   Piezas compartidas — Panamcham.com (Yunke, 20 sep 2026)

   Las reglas que usan A LA VEZ los elementos de Bricks del tema y los
   bloques de Gutenberg del plugin «amcham-bloques». Salieron de la
   sección 7b del style.css para que no hubiera dos copias del diseño.

   Se carga ANTES del style.css (es dependencia del handle «panamcham»),
   así que los ajustes por página que viven allá —.rse__cifras,
   .benefits__intro .benefits__lead + .cifras— le siguen ganando, igual
   que cuando estas reglas estaban unas líneas más arriba en ese archivo.

   El lienzo del editor de bloques la recibe por add_editor_style() en el
   functions.php; los tokens (--amcham-color-navy, --amcham-radius…) se
   los da assets/editor.css.
   ========================================================= */

/* Cifras — helper amcham_cifras() · elemento Bricks «amcham-cifras-tarjeta»
   · bloque de Gutenberg «amcham/cifras».
   --franja: una fila con divisorias (Beneficios) · --2x2: tarjeta de 4 (Quiénes somos). */
.cifras-wrap { width: 100%; min-width: 0; }
.cifras { list-style: none; margin: 0; padding: 24px 28px; display: flex;   /* 24/28 y valor 34: con el page-main de 707 (19 sep) las 4 cifras de 40 ya no cabían en una fila */ justify-content: space-between; align-items: center; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.cifras__item { display: flex; align-items: center; column-gap: 10px; min-width: 0; }
.cifras__valor { font-family: var(--amcham-font-heading); font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -1px; color: var(--amcham-color-navy); white-space: nowrap; }
.cifras__texto { max-width: 84px; font-size: 13px; line-height: 1.3; color: var(--amcham-ink); }
.cifras--franja .cifras__item + .cifras__item { position: relative; padding-left: 18px; }
.cifras--franja .cifras__item + .cifras__item::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 44px; transform: translateY(-50%); background: rgb(158 158 158 / .35); }
.cifras--2x2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 36px 40px; box-shadow: 0 6px 10px 5px rgb(0 0 0 / .05); }
.cifras--2x2 .cifras__item { column-gap: 12px; }
.cifras--2x2 .cifras__valor { font-size: 48px; letter-spacing: 0; }   /* Figma 56 con la columna de 853; a 707 el texto se partía en 3 líneas */
.cifras--2x2 .cifras__texto { max-width: none; font-size: 16px; line-height: 1.25; }
.cifras--2x2 .cifras__item:nth-child(2n) { padding-left: 32px; border-left: 1px solid rgb(0 0 0 / .1); }
.cifras--2x2 .cifras__item:nth-child(2n+1) { padding-right: 32px; }
.cifras--2x2 .cifras__item:not(:nth-last-child(-n+2)) { padding-bottom: 30px; }   /* todas las filas menos la última: tarjetas de 4 o de 6 cifras (Programas, 7 oct 2026) */
.cifras--2x2 .cifras__item:nth-child(n+3) { padding-top: 30px; border-top: 1px solid rgb(0 0 0 / .1); }

@media (max-width: 1023px) {
  .cifras--2x2 .cifras__valor { font-size: 44px; }
  .cifras--franja { flex-wrap: wrap; row-gap: 20px; }
  .cifras--franja .cifras__item { flex: 1 1 40%; }
  .cifras--franja .cifras__item + .cifras__item::before { display: none; }
}

@media (max-width: 767px) {
  .cifras--franja { flex-direction: column; align-items: stretch; padding: 22px; row-gap: 16px; }
  .cifras--franja .cifras__item { flex-basis: auto; }
  .cifras--franja .cifras__item + .cifras__item { padding-left: 0; padding-top: 16px; border-top: 1px solid rgb(158 158 158 / .35); }
  .cifras__texto { max-width: none; }
  .cifras--2x2 { grid-template-columns: 1fr; padding: 24px; }
  .cifras--2x2 .cifras__item { padding: 0 !important; border: 0 !important; }
  .cifras--2x2 .cifras__item + .cifras__item { padding-top: 22px !important; margin-top: 22px; border-top: 1px solid rgb(0 0 0 / .1) !important; }
  .cifras--2x2 .cifras__valor { font-size: 40px; }
}

/* Tarjetas sueltas (12 oct 2026, Figma «Doing Business in Panama» 2432:8386 → «Panamá en cifras»): una tarjeta blanca por
   cifra en 2 columnas con 21 entre ellas; valor 34/1.15 navy, texto Avenir 16/1.4 y nota gris 14/1.6 (la fuente de la cifra).
   Sección con cabecera y/o nota al pie (elemento amcham-cifras-tarjeta): 28 entre cabecera, tarjetas y nota. */
.cifras--tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 21px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.cifras--tarjetas .cifras__item { flex-direction: column; align-items: flex-start; row-gap: 6px; min-width: 0; padding: 26px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.cifras--tarjetas .cifras__valor { font-size: 34px; line-height: 1.15; letter-spacing: 0; }
.cifras--tarjetas .cifras__texto { max-width: none; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; line-height: 1.4; }
.cifras__nota { font-size: 14px; line-height: 1.6; color: var(--amcham-muted, #767676); }
/* Fondo navy (Patrocinios, 18 oct 2026): franja oscura con texto blanco y divisorias translúcidas */
.cifras--navy { background: var(--amcham-color-navy); box-shadow: none; padding: 28px 8px; }
.cifras--navy .cifras__item { flex: 1 1 0; padding: 0 24px; column-gap: 0; flex-direction: column; align-items: flex-start; row-gap: 6px; }
.cifras--navy .cifras__valor { color: #fff; letter-spacing: 0; }
.cifras--navy .cifras__texto { max-width: none; font-size: 14px; line-height: 1.4; color: rgb(255 255 255 / .8); }
.cifras--navy.cifras--franja .cifras__item + .cifras__item { padding-left: 24px; }
.cifras--navy.cifras--franja .cifras__item + .cifras__item::before { height: 56px; background: rgb(255 255 255 / .2); }
@media (max-width: 767px) { .cifras--navy.cifras--franja { padding: 22px; } .cifras--navy.cifras--franja .cifras__item { padding: 0; } .cifras--navy.cifras--franja .cifras__item + .cifras__item { padding-top: 16px; border-top-color: rgb(255 255 255 / .2); } }
.cifras-wrap--seccion { display: flex; flex-direction: column; row-gap: 28px; }
.cifras-wrap__fuente { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--amcham-muted, #767676); }
@media (max-width: 767px) {
  .cifras--tarjetas { grid-template-columns: 1fr; gap: 14px; padding: 0; }
  .cifras--tarjetas .cifras__item { padding: 22px; }
  .cifras-wrap--seccion { row-gap: 28px; }   /* 29 oct 2026 (Johann): 28 del titulo al contenido */   /* en movil tambien 28; era 22 */
}
