/* AmCham · Bloques de noticias — estilos de front y de editor */

.ab{
  --ab-navy: var(--amcham-color-navy, #133E7F);
  --ab-azul: var(--amcham-color-blue, #0073C0);
  --ab-rojo: var(--amcham-color-red, #FF001A);
  --ab-texto: #222222;
  --ab-suave: #767676;
  --ab-linea: #E2E2E2;
  --ab-fondo: #F5F7FA;
  --ab-radio: 10px;
  --ab-cols: 3;
  font-family: var(--amcham-font-body, inherit);
  color: var(--ab-texto);
  margin: 36px 0;
}

.ab *{ box-sizing: border-box; }

.ab__titulo{
  font-family: var(--amcham-font-heading, inherit);
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 22px;
  color: var(--ab-navy);
}

/* vista previa del editor: mismas medidas que el .btn del tema */
.ab .ab-btn,
a.ab-btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 8px 19px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  background: var(--ab-navy);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
/* gana a los estilos de enlace del cuerpo de la noticia (.page-text a) */
a.ab-btn.ab-btn,
.ab a.ab-btn.ab-btn{ color: #fff; }
.ab .ab-btn:hover,
.ab .ab-btn:focus-visible{ background: var(--ab-azul); color: #fff; }

/* 1 · galería del evento ---------------------------------------------- */

.ab-galeria{ margin-inline: 0; }
/* tres columnas fijas: así la vista previa siempre son filas completas
   (con auto-fill, a partir de ~800 px de columna entraban 4 y las 6 primeras
   fotos dejaban dos huecos en la segunda fila) */
.ab-galeria__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ab-galeria__item{
  position: relative;
  padding: 0;
  border: 0;
  margin: 0;
  cursor: zoom-in;
  background: var(--ab-fondo);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: block;
  width: 100%;
}
.ab-galeria__item.is-oculta{ display: none; }
.ab-galeria__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.ab-galeria__item:hover img{ transform: scale(1.04); }
.ab-galeria__lupa{
  position: absolute;
  inset: 0;
  background: rgba(19,62,127,0);
  transition: background .25s ease;
}
.ab-galeria__item:hover .ab-galeria__lupa{ background: rgba(19,62,127,.18); }
.ab-galeria__item:focus-visible{ outline: 3px solid var(--ab-azul); outline-offset: 2px; }
/* usa el .btn del tema; aquí solo el reinicio propio del elemento <button> */
.ab-galeria__mas{
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
/* respaldo cuando el .btn del tema no está cargado (editor, vista previa) */
.ab-galeria__mas:not(.btn){
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 8px 19px;
  border-radius: 4px;
  background: var(--ab-navy);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.ab-galeria__mas:not(.btn):hover{ background: var(--ab-azul); color: #fff; }
.ab-galeria__pie{
  margin-top: 14px;
  font-size: 14px;
  color: var(--ab-suave);
}

/* visor */
.ab-visor{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 20, 40, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ab-visor__caja{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(1200px, 84vw);
}
.ab-visor img{ max-width: min(1200px, 84vw); max-height: 76vh; object-fit: contain; border-radius: 4px; }
.ab-visor__pieCaja{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ab-visor__cerrar,
.ab-visor__ant,
.ab-visor__sig{
  position: absolute;
  display: grid;
  place-items: center;
  background: var(--amcham-color-navy, #133E7F);
  color: #fff;
  border: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.ab-visor__cerrar:hover,
.ab-visor__ant:hover,
.ab-visor__sig:hover{
  background: #fff;
  color: var(--amcham-color-navy, #133E7F);
}
.ab-visor__cerrar:focus-visible,
.ab-visor__ant:focus-visible,
.ab-visor__sig:focus-visible{ outline: 2px solid var(--amcham-color-blue, #0073C0); outline-offset: 2px; }
.ab-visor__cerrar{ top: 20px; right: 20px; }
.ab-visor__ant{ left: 20px; top: 50%; transform: translateY(-50%); }
.ab-visor__sig{ right: 20px; top: 50%; transform: translateY(-50%); }
.ab-visor__cuenta{
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  letter-spacing: .06em;
}

/* 2 · descarga --------------------------------------------------------- */

.ab-descarga{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--ab-linea);
  border-left: 4px solid var(--ab-azul);
  border-radius: var(--ab-radio);
  background: #fff;
}
.ab-descarga__icono{
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--ab-fondo);
  color: var(--ab-navy);
  font-size: 20px;
}
.ab-descarga__ext{ font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.ab-descarga__cuerpo{ flex: 1 1 auto; min-width: 0; }
.ab-descarga__titulo{
  margin: 0;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 17px;
  line-height: 1.3;
  color: var(--ab-navy);
}
.ab-descarga__desc{ margin: 6px 0 0; font-size: 15px; color: var(--ab-suave); }
.ab-descarga__meta{ margin: 8px 0 0; font-size: 13px; color: var(--ab-suave); letter-spacing: .02em; }

/* 3 · perfiles --------------------------------------------------------- */

.ab-perfiles__grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--ab-cols), minmax(0, 1fr));
  gap: 24px;
}
.ab-perfil{
  border: 1px solid var(--ab-linea);
  border-radius: var(--ab-radio);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.ab-perfil__media{ aspect-ratio: 4 / 5; background: var(--ab-fondo); }
.ab-perfil__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-perfil__sinfoto{ display: block; width: 100%; height: 100%; background: var(--ab-fondo); }
.ab-perfil__cuerpo{ padding: 18px 20px 22px; }
.ab-perfil__rol{
  margin: 0 0 6px;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ab-azul);
}
.ab-perfil__nombre{
  margin: 0;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 18px;
  line-height: 1.25;
  color: var(--ab-navy);
}
.ab-perfil__cargo{ margin: 6px 0 0; font-size: 14px; color: var(--ab-suave); }
.ab-perfil__bio{ margin: 12px 0 0; font-size: 15px; line-height: 1.6; }

/* 4 · listado de empresas --------------------------------------------- */

.ab-empresas__grid{
  display: grid;
  grid-template-columns: repeat(var(--ab-cols), minmax(0, 1fr));
  gap: 22px;
}
.ab-empresas__grupo{
  border-top: 2px solid var(--ab-navy);
  padding-top: 14px;
}
.ab-empresas__rotulo{
  margin: 0 0 10px;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ab-navy);
}
/* Doble clase a proposito: el tema le pone padding-left: 22px a los ul del
   cuerpo (.page-text ul, y el editor hace lo mismo) y le ganaba a la clase sola. */
.ab-empresas .ab-empresas__lista{ margin: 0; padding: 0; list-style: none; }
.ab-empresas__lista li{
  font-size: 15px;
  line-height: 1.5;
  padding: 6px 0;
}
.ab-empresas__nota{ margin: 18px 0 0; font-size: 14px; color: var(--ab-suave); }

/* 5 · patrocinadores --------------------------------------------------- */

.ab-patros{
  padding: 26px 28px;
  border-radius: var(--ab-radio);
  background: var(--ab-fondo);
}
.ab-patros__rotulo{
  margin: 0 0 18px;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ab-navy);
  text-align: center;
}
/* Cada logo vive en una celda del mismo tamaño y se contiene dentro: así los
   logos anchos y los cuadrados quedan ópticamente alineados y proporcionados. */
.ab-patros__fila{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ab-celda, 140px), 1fr));
  gap: 22px 20px;
  align-items: center;
  justify-items: center;
}
.ab-patros__item{
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--ab-logo, 56px);
}
.ab-patros__item a{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.ab-patros__item img{
  max-width: 92%;
  /* en px, no en %: el tema le pone height:auto a las imágenes del cuerpo y
     el max-height porcentual no llegaba a aplicarse */
  max-height: var(--ab-logo, 56px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: .78;
  transition: filter .25s ease, opacity .25s ease;
}
.ab-patros__item a:hover img,
.ab-patros__item img:hover{ filter: grayscale(0); opacity: 1; }

/* 6 · resultado -------------------------------------------------------- */

.ab-resultado{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 26px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--ab-linea);
  border-radius: var(--ab-radio);
  background: #fff;
}
.ab-resultado__media img{
  width: 100%;
  border-radius: 8px;
  display: block;
}
.ab-resultado__categoria{
  margin: 0 0 8px;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ab-rojo);
}
.ab-resultado__ganador{
  margin: 0;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ab-navy);
}
.ab-resultado__detalle{ margin: 8px 0 0; font-size: 15px; color: var(--ab-suave); }
.ab-resultado__integrantes{ margin: 14px 0 0; font-size: 15px; line-height: 1.6; }
.ab-resultado__integrantes span,
.ab-resultado__marca span{
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ab-suave);
  margin-bottom: 2px;
}
.ab-resultado__marca{ margin: 14px 0 0; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--ab-navy); }

/* 7 · datos del evento ------------------------------------------------- */

.ab-dato{
  padding: 22px 24px;
  border-radius: var(--ab-radio);
  background: var(--ab-navy);
  color: #fff;
}
.ab-dato__lista{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px 28px;
}
.ab-dato__item{ display: grid; grid-template-columns: 26px 1fr; row-gap: 2px; column-gap: 10px; align-items: start; }
.ab-dato__ico{ grid-row: span 2; grid-column: 1; font-size: 18px; opacity: .85; padding-top: 2px; }
/* la etiqueta y el valor van siempre en la segunda columna, haya ícono o no */
.ab-dato__etiqueta,
.ab-dato__valor{ grid-column: 2; }
.ab-dato__etiqueta{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}
.ab-dato__valor{
  font-family: var(--amcham-font-heading, inherit);
  font-size: 16px;
  line-height: 1.35;
}
.ab-dato__enlace{
  display: inline-block;
  margin-top: 18px;
  color: #fff;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.55);
  text-decoration: none;
}

/* 8 · publicación ------------------------------------------------------ */

.ab-publicacion{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: center;
  padding: 26px;
  border-radius: var(--ab-radio);
  background: linear-gradient(135deg, var(--ab-navy), var(--ab-azul));
  color: #fff;
}
.ab-publicacion__portada img{
  width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
.ab-publicacion__etiqueta{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}
.ab-publicacion__titulo{
  margin: 0;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
}
.ab-publicacion__desc{ margin: 12px 0 22px; font-size: 16px; line-height: 1.6; opacity: .92; }
.ab-publicacion a.ab-btn.ab-btn{ background: #fff; color: var(--ab-navy); }
.ab-publicacion .ab-btn:hover{ background: rgba(255,255,255,.86); color: var(--ab-navy); }

/* responsive ------------------------------------------------------------ */

@media (max-width: 991px){
  .ab-perfiles__grid,
  .ab-empresas__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .ab{ margin: 28px 0; }
  .ab-descarga{ flex-wrap: wrap; }
  .ab-descarga__btn{ width: 100%; justify-content: center; text-align: center; }
  .ab-resultado,
  .ab-publicacion{ grid-template-columns: 1fr; }
  .ab-perfiles__grid,
  .ab-empresas__grid{ grid-template-columns: 1fr; }
  .ab-galeria__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* editor: ayudas de edición sobre el lienzo ------------------------------ */

.editor-styles-wrapper .ab{ margin-block: 28px; }

/* el botón de quitar aparece al pasar el mouse sobre la pieza */
.ab-ed-quitar{
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(19,62,127,.86);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease;
}
.ab-perfil,
.ab-patros__item,
.ab-empresas__grupo,
.ab-galeria__item{ position: relative; }
.ab-perfil:hover .ab-ed-quitar,
.ab-patros__item:hover .ab-ed-quitar,
.ab-empresas__grupo:hover .ab-ed-quitar,
.ab-galeria__item:hover .ab-ed-quitar,
.ab-ed-quitar:focus{ opacity: 1; }
.ab-ed-quitar--linea{
  position: static;
  width: 18px;
  height: 18px;
  font-size: 13px;
  margin-left: 6px;
  background: #d9e2ec;
  color: #33475b;
  vertical-align: middle;
}
.ab-empresas__lista li:hover .ab-ed-quitar--linea{ opacity: 1; }

/* elegir imagen sin salir de la pieza */
.ab-ed-media{
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ab-fondo, #F5F7FA);
  cursor: pointer;
}
.ab-ed-media img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-ed-media--alto{ height: 100%; aspect-ratio: 4 / 5; }
.ab-ed-media--ancho{ min-height: 140px; border-radius: 8px; overflow: hidden; }
.ab-ed-media__vacio{
  display: grid;
  place-items: center;
  min-height: 140px;
  height: 100%;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7785;
  border: 1px dashed #b9c4d0;
  border-radius: 8px;
}
.ab-ed-agregar{ margin-top: 16px; }
.ab-ed-agregar--chico{ margin-top: 8px; font-size: 12px; }

/* piezas que en el editor solo se muestran, no se editan */
.ab-ed-estatico{ opacity: .75; pointer-events: none; }
.ab-resultado__marca .ab-ed-rotulo{
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ab-suave, #767676);
}

/* el marcador de texto vacío se ve en gris, sin romper la pieza */
.editor-styles-wrapper .ab [data-rich-text-placeholder]::after{ opacity: .55; }

/* 9 · referencias del artículo ----------------------------------------- */

/* Doble clase a proposito: el tema le pone padding-left: 22px a los ul/ol del
   cuerpo (.page-text ul/ol, y el editor hace lo mismo) y le ganaba a la clase sola. */
.ab-refs .ab-refs__lista{ list-style: none; margin: 0; padding: 0; padding-inline-start: 0; counter-reset: ab-ref; }
.ab-refs--lista .ab-ref{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--ab-linea);
}
.ab-refs--lista .ab-ref:first-child{ border-top: 0; padding-top: 0; }
ol.ab-refs__lista .ab-ref::before{
  counter-increment: ab-ref;
  content: counter(ab-ref);
  flex: 0 0 28px;
  height: 28px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #E8EEF7;
  color: var(--ab-navy);
  font-family: var(--amcham-font-heading, inherit);
  font-size: 13px;
  font-weight: 700;
}
.ab-refs.is-style-oscuro ol.ab-refs__lista .ab-ref::before{ background: rgba(255,255,255,.14); color: #fff; }
.ab-ref__cuerpo{ flex: 1 1 auto; min-width: 0; }
.ab-ref__titulo{
  display: block;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ab-navy);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.ab-ref__titulo:hover{ text-decoration: underline; }
.ab-ref__meta{
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ab-suave);
  overflow-wrap: anywhere;
}
.ab-ref__abrir{
  flex: 0 0 auto;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 15px;
  font-weight: 500;
  color: var(--ab-azul);
  text-decoration: none;
  white-space: nowrap;
}
.ab-ref__abrir:hover{ text-decoration: underline; }
.ab-ref__fa{ line-height: 1; }
.ab-ref__fa svg,
.ab-ref__fa i{ display: block; width: 13px; height: 13px; font-size: 13px; }
@media (max-width: 478px){
  .ab-refs--lista .ab-ref{
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
  }
  ul.ab-refs__lista .ab-ref{ grid-template-columns: minmax(0, 1fr); }
  ol.ab-refs__lista .ab-ref::before{ grid-column: 1; grid-row: 1; margin-top: 2px; }
  .ab-refs--lista .ab-ref__cuerpo{ grid-column: -2; grid-row: 1; }
  .ab-refs--lista .ab-ref__abrir{ grid-column: -2; grid-row: 2; margin: 0; }
}

/* 10 · cita ------------------------------------------------------------ */
/* La declaración de una persona dentro de la nota (Figma WIP, página «Blockquotes», 19 sep 2026).
   Dos trajes del MISMO bloque, por el control «Diseño»: «clara» (la de todos los días) y
   «degradado» (una por nota, la del protagonista). Estructura común: la comilla en una
   columna de 48 + el cuerpo (texto y firma). El isotipo del degradado es un sello en la
   esquina inferior derecha: el padding-right le reserva esa franja a cualquier ancho. */

.ab-cita{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  column-gap: 24px;
  padding: 32px 36px;
  border: 0;
  border-radius: var(--ab-radio);
  background: var(--ab-fondo);
  color: var(--ab-texto);
  font-style: normal;
  quotes: none;
}
.ab-cita > *{ position: relative; z-index: 1; }
.ab-cita__comilla{
  flex: 0 0 48px;
  width: 48px;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 72px;
  font-weight: 600;
  line-height: .8;
  color: var(--ab-azul);
}
.ab-cita__cuerpo{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; row-gap: 20px; }
.ab-cita__texto{ display: flex; flex-direction: column; row-gap: 16px; }
.ab-cita .ab-cita__texto p{
  margin: 0;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ab-navy);
}
.ab-cita__firma{ display: flex; align-items: center; column-gap: 14px; margin: 0; padding: 0; border: 0; font-style: normal; }
/* Doble clase: el cuerpo de la noticia le pone border-radius 8 y height auto a TODA img (.noticia__body img)
   y le ganaba a una sola clase - el retrato salia cuadrado y estiraba la caja. */
.ab-cita .ab-cita__retrato{ flex: 0 0 44px; width: 44px; height: 44px; max-width: 44px; border-radius: 50%; display: block; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 18%); }
.ab-cita__datos{ display: flex; flex-direction: column; row-gap: 2px; min-width: 0; }
.ab-cita__nombre{ font-family: var(--amcham-font-heading, inherit); font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ab-texto); }
.ab-cita__rol{ font-size: 13px; line-height: 1.5; color: var(--ab-suave); }

/* Variante en degradado: una por nota. */
.ab-cita--degradado{
  color: #fff;
  padding-right: 168px;   /* 36 + 96 del sello + 36 */
  background: var(--amcham-color-light-blue, #006EB7) linear-gradient(243deg, var(--amcham-color-light-blue, #006EB7) 0%, var(--amcham-color-dark-blue, #1C407D) 100%);
}
.ab-cita--degradado .ab-cita__comilla{ color: rgb(255 255 255 / .55); }
.ab-cita--degradado .ab-cita__cuerpo{ row-gap: 24px; }
.ab-cita--degradado .ab-cita__texto p{ font-size: 24px; line-height: 1.3; color: #fff; }
.ab-cita--degradado .ab-cita__retrato{ flex-basis: 48px; width: 48px; height: 48px; max-width: 48px; box-shadow: 0 0 0 1.5px #fff; }
.ab-cita--degradado .ab-cita__nombre{ font-size: 16px; font-weight: 700; color: #fff; }
.ab-cita--degradado .ab-cita__rol{ font-size: 14px; color: rgb(255 255 255 / .8); }
/* El isotipo va por right/bottom (nunca top) para que no se mueva cuando la cita crece. */
.ab-cita--degradado::after{
  content: '';
  position: absolute;
  right: 36px;
  bottom: 24px;
  width: 96px;
  height: 96px;
  z-index: 0;
  background: #fff;
  opacity: .18;
  pointer-events: none;
  -webkit-mask: url('icon-amcham-mark.svg') no-repeat center / contain;
          mask: url('icon-amcham-mark.svg') no-repeat center / contain;
}
.ab-cita--degradado.ab-cita--sin-firma{ padding-right: 148px; }
.ab-cita--degradado.ab-cita--sin-firma::after{ width: 76px; height: 76px; bottom: 20px; }

/* Bajo 1280 la columna del artículo se estrecha: la comilla pasa arriba y el sello a la
   esquina superior derecha, para que la franja del isotipo deje de comerle ancho al texto. */
@media (max-width: 1279px){
  .ab-cita{ flex-direction: column; column-gap: 0; row-gap: 16px; }
  .ab-cita__comilla{ flex: 0 0 auto; width: auto; font-size: 60px; }
  .ab-cita--degradado,
  .ab-cita--degradado.ab-cita--sin-firma{ padding-right: 36px; }
  .ab-cita--degradado::after,
  .ab-cita--degradado.ab-cita--sin-firma::after{ right: 32px; top: 30px; bottom: auto; width: 76px; height: 76px; }
}
@media (max-width: 767px){
  .ab-cita{ row-gap: 14px; padding: 24px 20px; margin: 28px 0; }
  .ab-cita__comilla{ font-size: 52px; }
  .ab-cita .ab-cita__texto p{ font-size: 19px; }
  .ab-cita--degradado,
  .ab-cita--degradado.ab-cita--sin-firma{ padding: 28px 24px; }
  .ab-cita--degradado .ab-cita__texto p{ font-size: 20px; }
  .ab-cita--degradado::after,
  .ab-cita--degradado.ab-cita--sin-firma::after{ right: 24px; top: 26px; bottom: auto; width: 48px; height: 48px; opacity: .16; }
}

/* ======================================================================
   v1.1 · variantes nuevas de cada bloque
   ====================================================================== */

/* botón de línea (segundo botón de la publicación) */
.ab .ab-btn--linea,
a.ab-btn--linea{
  background: transparent;
  border: 1px solid currentColor;
}
.ab a.ab-btn--linea.ab-btn{ color: var(--ab-navy); }
.ab .ab-btn--linea:hover{ background: var(--ab-navy); color: #fff; }

/* 1 · galería: forma de las fotos ------------------------------------- */

/* «mosaico» (la forma por defecto, 13 de las 14 noticias con galería): 1:1 en vez de 4:3
   y el encuadre subido al 30%. Casi todas las fotos son de personas — grupos en 3:2 y
   retratos en 2:3 — y el cuadrado es la única proporción alta que aguanta las dos sin
   partir a la gente de los extremos (Johann, 19 sep 2026). */
.ab-galeria--mosaico .ab-galeria__item{ aspect-ratio: 1 / 1; }
.ab-galeria--mosaico .ab-galeria__item img,
.ab .ab-galeria--mosaico .ab-galeria__item img{ object-position: center 30%; }
.ab-galeria--cuadrada .ab-galeria__item{ aspect-ratio: 1 / 1; }
.ab-galeria--natural .ab-galeria__grid{
  display: block;
  columns: 3 190px;
  column-gap: 10px;
}
.ab-galeria--natural .ab-galeria__item{
  aspect-ratio: auto;
  break-inside: avoid;
  margin-bottom: 10px;
}
.ab-galeria--natural .ab-galeria__item img{ height: auto; }

/* 2 · descargas: varias en un bloque ---------------------------------- */

.ab-descargas .ab-descarga + .ab-descarga{ margin-top: 12px; }
.ab-descarga__fa{ font-size: 20px; }

/* 3 · perfiles: compacto, recorte y LinkedIn --------------------------- */

.ab-perfiles--cuadrada .ab-perfil__media{ aspect-ratio: 1 / 1; }
.ab-perfil__sinfoto{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--ab-fondo);
  color: var(--ab-suave);
  font-size: 26px;
}
.ab-perfil__linkedin{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--ab-azul);
  text-decoration: none;
}
.ab-perfil__linkedin:hover{ text-decoration: underline; }

.ab-perfiles--compacto .ab-perfiles__grid{ grid-template-columns: 1fr; gap: 14px; }
.ab-perfiles--compacto .ab-perfil{
  flex-direction: row;
  align-items: stretch;
  gap: 18px;
  padding: 16px 18px;
}
.ab-perfiles--compacto .ab-perfil__media{
  flex: 0 0 96px;
  width: 96px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
}
.ab-perfiles--compacto .ab-perfil__cuerpo{ padding: 0; flex: 1 1 auto; }
.ab-perfiles--compacto .ab-perfil__bio{ margin-top: 8px; font-size: 14px; }

/* 4 · listado sin rótulo ----------------------------------------------- */

.ab-empresas--sin-rotulo .ab-empresas__grupo{ border-top: 0; padding-top: 0; }

/* 5 · patrocinadores por nivel ----------------------------------------- */

.ab-patros__nivel + .ab-patros__nivel{ margin-top: 22px; }
.ab-patros__nivelRotulo{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ab-suave);
  text-align: center;
}
.ab-patros__nivel--principal{ --ab-logo: 68px; --ab-celda: 145px; }
.ab-patros__nivel--aliado{ --ab-logo: 54px; --ab-celda: 130px; }
.ab-patros__nivel--colaborador{ --ab-logo: 44px; --ab-celda: 115px; }
.ab-patros--color .ab-patros__item img{ filter: none; opacity: 1; }

/* 6 · resultados: varios en un bloque ---------------------------------- */

.ab-resultados .ab-resultado + .ab-resultado{ margin-top: 18px; }
.ab-resultados--derecha .ab-resultado{ grid-template-columns: 1fr 300px; }
.ab-resultados--derecha .ab-resultado__media{ order: 2; }
.ab-resultado--sinfoto{ grid-template-columns: 1fr; }

/* 8 · publicación: sin portada y dos botones --------------------------- */

.ab-publicacion--sinportada{ grid-template-columns: 1fr; }
.ab-publicacion__botones{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}
.ab-publicacion.is-style-oscuro a.ab-btn--linea.ab-btn,
.ab-publicacion a.ab-btn--linea.ab-btn{ background: transparent; color: #fff; }
.ab-publicacion .ab-btn--linea:hover{ background: rgba(255,255,255,.16); color: #fff; }

/* ======================================================================
   estilos de bloque: claro y oscuro
   ====================================================================== */

.ab.is-style-oscuro{
  --ab-texto: #ffffff;
  --ab-suave: rgba(255,255,255,.72);
  --ab-linea: rgba(255,255,255,.22);
  --ab-fondo: rgba(255,255,255,.08);
  --ab-navy: #ffffff;
  --ab-azul: #9CC7F0;
  background: var(--amcham-color-navy, #133E7F);
  color: #fff;
  padding: 26px 28px;
  border-radius: var(--ab-radio);
}
.ab.is-style-oscuro .ab-descarga,
.ab.is-style-oscuro .ab-perfil,
.ab.is-style-oscuro .ab-resultado{ background: rgba(255,255,255,.06); }
.ab.is-style-oscuro .ab-patros{ background: transparent; padding: 0; }
.ab.is-style-oscuro .ab-resultado__categoria{ color: #FFB3B9; }
.ab.is-style-oscuro .ab-btn,
.ab.is-style-oscuro a.ab-btn.ab-btn{ background: #fff; color: var(--amcham-color-navy, #133E7F); }
.ab.is-style-oscuro .ab-btn:hover{ background: rgba(255,255,255,.86); color: var(--amcham-color-navy, #133E7F); }
.ab.is-style-oscuro .btn--primary,
.ab.is-style-oscuro .ab-galeria__mas{ background: #fff; color: var(--amcham-color-navy, #133E7F); }
.ab.is-style-oscuro .btn--primary:hover,
.ab.is-style-oscuro .ab-galeria__mas:hover{ background: rgba(255,255,255,.86); color: var(--amcham-color-navy, #133E7F); }

.ab-dato.is-style-claro{
  background: #fff;
  color: var(--ab-texto);
  border: 1px solid var(--ab-linea);
}
.ab-dato.is-style-claro .ab-dato__etiqueta{ color: var(--ab-suave); opacity: 1; }
.ab-dato.is-style-claro .ab-dato__valor{ color: var(--ab-navy); }
.ab-dato.is-style-claro .ab-dato__enlace{ color: var(--ab-navy); border-bottom-color: var(--ab-azul); }

.ab-publicacion.is-style-claro{
  background: var(--ab-fondo);
  color: var(--ab-texto);
}
.ab-publicacion.is-style-claro .ab-publicacion__titulo{ color: var(--ab-navy); }
.ab-publicacion.is-style-claro .ab-publicacion__etiqueta{ color: var(--ab-suave); opacity: 1; }
.ab-publicacion.is-style-claro a.ab-btn.ab-btn{ background: var(--ab-navy); color: #fff; }
.ab-publicacion.is-style-claro a.ab-btn--linea.ab-btn{ background: transparent; color: var(--ab-navy); }

/* ======================================================================
   editor: mandos de cada pieza
   ====================================================================== */

.ab-ed-pieza{ position: relative; }
.ab-ed-mandos{
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 6px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  opacity: 0;
  transition: opacity .15s ease;
}
.ab-ed-pieza:hover .ab-ed-mandos,
.ab-ed-mandos:focus-within{ opacity: 1; }
.ab-ed-mando,
.ab-ed-asa{
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: #EEF2F7;
  color: #33475b;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.ab-ed-asa{ cursor: grab; font-size: 12px; }
.ab-ed-mando:hover{ background: #d9e2ec; }
.ab-ed-mando[disabled]{ opacity: .35; cursor: default; }
.ab-ed-mando--quitar:hover{ background: #FFD9DC; color: #A1001A; }
.ab-ed-mando.is-puesto{ background: #cfe3f7; }

.ab-ed-aviso{
  margin: 10px 0 0;
  padding: 7px 11px;
  border-radius: 6px;
  background: #FFF4CE;
  color: #6b5300;
  font-size: 13px;
  line-height: 1.4;
}

.ab-ed-chips{ display: flex; gap: 6px; margin-top: 8px; }
.ab-ed-chip{
  border: 1px dashed #b9c4d0;
  background: transparent;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 12px;
  color: #6b7785;
  cursor: pointer;
}
.ab-ed-chip:hover{ border-style: solid; color: var(--ab-navy, #133E7F); }

.ab-ed-botones{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 10px; }
.ab-ed-pegar{
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  background: #fff;
  width: 100%;
}
.ab-ed-pegar__pie{ display: flex; gap: 8px; }
.ab-ed-enlace{
  position: absolute;
  z-index: 6;
  top: 34px;
  right: 6px;
  width: 260px;
  padding: 12px;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  text-align: left;
}
.ab-ed-nivel{
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 4;
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid #dbe2ea;
  border-radius: 4px;
  background: rgba(255,255,255,.94);
  opacity: 0;
  transition: opacity .15s ease;
}
.ab-ed-pieza:hover .ab-ed-nivel,
.ab-ed-nivel:focus{ opacity: 1; }
.ab-ed-panelFila + .ab-ed-panelFila{ margin-top: 14px; border-top: 1px solid #e4e7eb; padding-top: 14px; }

/* la galería en el editor muestra el pie de cada foto */
.editor-styles-wrapper .ab-galeria__item{ cursor: default; }
.editor-styles-wrapper .ab-galeria__item img{ height: 100%; }
.editor-styles-wrapper .ab-galeria--cuadrada .ab-galeria__item img{ aspect-ratio: 1 / 1; }
.editor-styles-wrapper .ab-galeria--natural .ab-galeria__item img{ aspect-ratio: auto; }
.editor-styles-wrapper .ab-perfiles--compacto .ab-ed-media--alto{ aspect-ratio: 1 / 1; height: auto; }
.ab-visor__pie{
  max-width: min(900px, 84vw);
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}
.ab-visor__pie[hidden]{ display: none; }

/* el tema pinta los h2 del cuerpo de la noticia (.noticia__body h2): hay que ganarle */
.ab .ab__titulo,
.ab__titulo.ab__titulo{ color: var(--ab-navy); }
.ab.is-style-oscuro .ab__titulo,
.ab.is-style-oscuro .ab__titulo.ab__titulo{ color: #fff; }

/* la foto del formato compacto no debe estirarse a lo alto de la tarjeta */
.ab-perfiles--compacto .ab-perfil{ align-items: flex-start; }

/* el tema pone height:auto a las imágenes del cuerpo de la noticia: aquí se recorta */
.ab .ab-perfil__media img,
.ab .ab-galeria__item img{ height: 100%; object-fit: cover; }
.ab.ab-galeria--natural .ab-galeria__item img{ height: auto; }

/* el h3 de la publicación también lo pinta el tema (.noticia__body h3) */
.ab .ab-publicacion__titulo{ color: #fff; }
.ab-publicacion.is-style-claro .ab-publicacion__titulo{ color: var(--ab-navy); }

/* el cuerpo de la noticia pinta los enlaces (.page-text a) y le ganaba al color
   de los botones del tema: aquí se les devuelve el suyo */
.ab a.btn.btn{ color: #fff; }
.ab a.btn--white.btn--white,
.ab a.btn--outline.btn--outline{ color: var(--amcham-color-navy, #133E7F); }
.ab a.btn--white.btn--white:hover,
.ab a.btn--outline.btn--outline:hover{ color: #fff; }
.ab a.btn--outline-white.btn--outline-white:hover{ color: var(--amcham-color-navy, #133E7F); }

/* compartir ------------------------------------------------------------- */

.ab-galeria__acciones{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 18px;
}
.ab-compartir{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ab-compartir__rotulo{
  font-size: 14px;
  color: var(--ab-suave);
  margin-right: 2px;
}
.ab-compartir__btn{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ab-fondo);
  color: var(--ab-navy);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.ab a.ab-compartir__btn.ab-compartir__btn{ color: var(--ab-navy); }
.ab-compartir__btn{ box-shadow: inset 0 0 0 1px var(--ab-linea); }
.ab-compartir__btn:hover,
.ab a.ab-compartir__btn.ab-compartir__btn:hover{ background: var(--ab-navy); color: #fff; box-shadow: none; }
.ab-compartir__btn:focus-visible{ outline: 2px solid var(--ab-azul); outline-offset: 2px; }
.ab-compartir__btn[hidden]{ display: none; }

/* dentro del visor, sobre el fondo oscuro */
.ab-visor .ab-compartir{ margin-top: 4px; justify-content: center; }
.ab-visor .ab-compartir__btn{
  background: var(--amcham-color-navy, #133E7F);
  color: #fff;
  box-shadow: none;
}
.ab-visor .ab-compartir__btn:hover{ background: #fff; color: var(--amcham-color-navy, #133E7F); }

/* en el bloque en estilo oscuro */
.ab.is-style-oscuro .ab-compartir__rotulo{ color: rgba(255,255,255,.75); }
.ab.is-style-oscuro .ab-compartir__btn,
.ab.is-style-oscuro a.ab-compartir__btn.ab-compartir__btn{ background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.ab.is-style-oscuro .ab-compartir__btn:hover,
.ab.is-style-oscuro a.ab-compartir__btn.ab-compartir__btn:hover{ background: #fff; color: var(--amcham-color-navy, #133E7F); }

@media (max-width: 575px){
  .ab-galeria__acciones{ justify-content: flex-start; }
  .ab-compartir__rotulo{ width: 100%; }
}
.ab-ed-ayuda{ margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: #757575; }

/* ======================================================================
   Opción B de cada bloque (página «Bloques custom» del Figma).
   Misma estructura, otro traje: el editor solo cambia la clase.
   ====================================================================== */

/* 1 · galería — foto destacada + tira ---------------------------------- */

.ab-galeria--destacada .ab-galeria__grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ab-galeria--destacada .ab-galeria__item:first-child{ grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.ab-galeria--destacada .ab-galeria__item[data-mas]::after{
  content: attr(data-mas);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(19, 62, 127, .78);
  color: #fff;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 22px;
  font-weight: 600;
}

/* 1c · galería — slideshow automático (29 oct 2026, Johann, Beneficios de la membresía) --------
   Una foto a la vez, sin tira de miniaturas. El riel son los mismos .ab-galeria__item (así el
   visor, el ?foto= y el swipe del visor siguen intactos); el JS mueve el riel y enciende el punto.
   Flechas y puntos copian el lenguaje de los carruseles del tema (círculo navy 33/44, puntos de 8). */
.ab-galeria--slideshow .ab-galeria__carrusel{ position: relative; border-radius: 8px; overflow: hidden; }
.ab-galeria--slideshow .ab-galeria__grid{
  display: flex;
  gap: 0;
  grid-template-columns: none;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.ab-galeria--slideshow .ab-galeria__item{
  flex: 0 0 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}
.ab-galeria--slideshow .ab-galeria__item.is-oculta{ display: block; }
.ab-galeria--slideshow .ab-galeria__item:hover img{ transform: none; }
.ab-galeria__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(19, 62, 127, .82);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
  z-index: 2;
}
.ab-galeria__nav:hover{ background: var(--ab-azul); }
.ab-galeria__nav:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }
.ab-galeria__nav svg{ width: 14px; height: 14px; display: block; }
.ab-galeria__nav--ant{ left: 14px; }
.ab-galeria__nav--sig{ right: 14px; }
.ab-galeria__puntos{ display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.ab-galeria__punto{
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(19, 62, 127, .25);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ab-galeria__punto:hover:not(.is-activo){ background: rgba(19, 62, 127, .5); }
.ab-galeria__punto.is-activo{ background: var(--ab-navy); transform: scale(1.25); }
@media (max-width: 767px){
  .ab-galeria__nav{ width: 36px; height: 36px; }
  .ab-galeria__nav svg{ width: 12px; height: 12px; }
  .ab-galeria__nav--ant{ left: 8px; }
  .ab-galeria__nav--sig{ right: 8px; }
}
@media (prefers-reduced-motion: reduce){
  .ab-galeria--slideshow .ab-galeria__grid{ transition: none; }
}
/* en el editor de bloques no corre el JS del riel: ahí se ve como rejilla */
.editor-styles-wrapper .ab-galeria--slideshow .ab-galeria__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  transform: none;
}
.editor-styles-wrapper .ab-galeria--slideshow .ab-galeria__item{ flex: none; aspect-ratio: 16 / 9; }

/* 2 · descargas — lista tipo tabla ------------------------------------- */

.ab-descargas--lista .ab-descarga{
  gap: 16px;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--ab-linea);
  border-radius: 0;
  background: transparent;
}
.ab-descargas--lista .ab-descarga:last-child{ border-bottom: 0; }
.ab-descargas--lista .ab-descarga + .ab-descarga{ margin-top: 0; }
.ab-descargas--lista .ab-descarga__icono{ width: 34px; height: 34px; font-size: 14px; }
.ab-descargas--lista .ab-descarga__desc{ display: none; }
.ab-descargas--lista .ab-descarga__titulo{ font-size: 16px; }
.ab-descargas--lista .ab-descarga__meta{ margin-top: 3px; }
.ab-descargas--lista a.ab-descarga__btn.ab-descarga__btn{
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ab-azul);
}
.ab-descargas--lista a.ab-descarga__btn.ab-descarga__btn:hover{ background: transparent; color: var(--ab-navy); }

/* 3 · perfiles — retratos circulares ----------------------------------- */

.ab-perfiles--circular .ab-perfil{
  border: 0;
  background: transparent;
  align-items: center;
  text-align: center;
  padding-top: 6px;
}
.ab-perfiles--circular .ab-perfil__media{
  width: 140px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
.ab-perfiles--circular .ab-perfil__cuerpo{ padding: 14px 4px 0; }
.ab-perfiles--circular .ab-perfil__rol{
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--ab-fondo);
}
.ab-perfiles--circular .ab-perfil__linkedin{ justify-content: center; }

/* 4 · empresas — rótulo en pastilla ------------------------------------ */

.ab-empresas--pastillas .ab-empresas__grid{ grid-template-columns: 1fr; gap: 0; }
.ab-empresas--pastillas .ab-empresas__grupo{
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 0;
  border-top: 0;
  border-bottom: 1px solid var(--ab-linea);
}
.ab-empresas--pastillas .ab-empresas__grupo:last-child{ border-bottom: 0; }
.ab-empresas--pastillas .ab-empresas__rotulo{
  flex: 0 0 104px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 20px;
  background: var(--ab-navy);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
}
.ab-empresas--pastillas .ab-empresas__lista{ display: flex; flex-wrap: wrap; }
.ab-empresas--pastillas .ab-empresas__lista li{ border: 0; padding: 0; }
.ab-empresas--pastillas .ab-empresas__lista li + li::before{
  content: "·";
  margin: 0 10px;
  color: var(--ab-suave);
}

/* 5 · patrocinadores — banda ------------------------------------------- */

.ab-patros--banda{
  padding: 22px 0;
  border-top: 1px solid var(--ab-linea);
  border-bottom: 1px solid var(--ab-linea);
  border-radius: 0;
  background: transparent;
}
.ab-patros--banda .ab-patros__rotulo{
  margin-bottom: 14px;
  text-align: left;
  color: var(--ab-suave);
  font-size: 12px;
}
.ab-patros--banda .ab-patros__nivel{
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 0;
}
.ab-patros--banda .ab-patros__nivel + .ab-patros__nivel{
  margin-top: 0;
  border-top: 1px solid var(--ab-linea);
}
.ab-patros--banda .ab-patros__nivelRotulo{
  flex: 0 0 150px;
  margin: 0;
  text-align: left;
  color: var(--ab-navy);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
.ab-patros--banda .ab-patros__fila{ flex: 1 1 auto; justify-items: start; }
.ab-patros--banda .ab-patros__nivelRotulo{ line-height: 1.35; }

/* 6 · resultados — tabla de posiciones --------------------------------- */

.ab-resultados--tabla .ab-resultado{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--ab-linea);
  border-radius: 0;
  background: transparent;
}
.ab-resultados--tabla .ab-resultado:last-child{ border-bottom: 0; }
.ab-resultados--tabla .ab-resultado + .ab-resultado{ margin-top: 0; }
.ab-resultados--tabla .ab-resultado__media{ display: none; }
.ab-resultados--tabla .ab-resultado__cuerpo{
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  align-items: center;
}
.ab-resultados--tabla .ab-resultado__categoria{ grid-column: 1; grid-row: 1; margin: 0 0 4px; }
.ab-resultados--tabla .ab-resultado__ganador{ grid-column: 1; grid-row: 2; font-size: 18px; }
.ab-resultados--tabla .ab-resultado__detalle{ display: none; }
.ab-resultados--tabla .ab-resultado__integrantes{
  grid-column: 1;
  grid-row: 3;
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ab-suave);
}
.ab-resultados--tabla .ab-resultado__integrantes span{ display: none; }
.ab-resultados--tabla .ab-resultado__marca{
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
  text-align: right;
  font-size: 22px;
}
.ab-resultados--tabla .ab-resultado__marca span{ text-align: right; }

/* 7 · datos del evento — ficha clara ------------------------------------ */

.ab-dato--ficha{
  background: var(--ab-fondo);
  color: var(--ab-texto);
  border-left: 5px solid var(--ab-azul);
}
.ab-dato--ficha .ab-dato__lista{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ab-dato--ficha .ab-dato__item{ grid-template-columns: 34px 1fr; column-gap: 12px; }
.ab-dato--ficha .ab-dato__ico{
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: #E0EDF9;
  color: var(--ab-azul);
  opacity: 1;
  font-size: 14px;
}
.ab-dato--ficha .ab-dato__etiqueta{ color: var(--ab-suave); opacity: 1; }
.ab-dato--ficha .ab-dato__valor{ color: var(--ab-navy); }
.ab-dato--ficha .ab-dato__enlace{
  padding: 11px 20px;
  border: 1px solid var(--ab-navy);
  border-bottom: 1px solid var(--ab-navy);
  border-radius: 6px;
  color: var(--ab-navy);
}
.ab-dato--ficha .ab-dato__enlace:hover{ background: var(--ab-navy); color: #fff; }

/* 8 · publicación — fondo claro, portada a la derecha ------------------- */

.ab-publicacion--claro{
  grid-template-columns: 1fr 280px;
  background: var(--ab-fondo);
  color: var(--ab-texto);
  border: 1px solid var(--ab-linea);
}
.ab-publicacion--claro .ab-publicacion__portada{ order: 2; }
.ab.ab-publicacion--claro .ab-publicacion__titulo{ color: var(--ab-navy); }
.ab-publicacion--claro .ab-publicacion__etiqueta{ color: var(--ab-suave); opacity: 1; }
.ab-publicacion--claro .ab-publicacion__desc{ opacity: 1; }

@media (max-width: 767px){
  .ab-galeria--destacada .ab-galeria__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-empresas--pastillas .ab-empresas__grupo{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .ab-patros--banda .ab-patros__nivel{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .ab-resultados--tabla .ab-resultado__cuerpo{ grid-template-columns: 1fr; }
  .ab-resultados--tabla .ab-resultado__marca{ grid-column: 1; grid-row: auto; margin-top: 10px; text-align: left; }
  .ab-resultados--tabla .ab-resultado__marca span{ text-align: left; }
  .ab-publicacion--claro{ grid-template-columns: 1fr; }
  .ab-publicacion--claro .ab-publicacion__portada{ order: 0; }
}

/* patrocinadores: cinta continua (misma que los Circle del home) ---------- */

.ab-patros--cinta .home-circle{ width: 100%; }
.ab-patros--cinta .home-circle__marquee{ margin-top: 0; }
/* el degradado de los bordes se pinta con el fondo del bloque, no con el del sitio */
.ab-patros--cinta .home-circle__marquee::before{ background: linear-gradient(90deg, var(--ab-superficie, #fff), rgba(255,255,255,0)); }
.ab-patros--cinta .home-circle__marquee::after{ background: linear-gradient(270deg, var(--ab-superficie, #fff), rgba(255,255,255,0)); }
.ab-patros--caja{ --ab-superficie: #F5F7FA; }
.ab-patros--banda{ --ab-superficie: #ffffff; }
.ab-patros--cinta .home-circle__logo{ max-height: 56px; }
.ab-patros--cinta.ab-patros--banda .home-circle__marquee{ margin-top: 4px; }
.ab-patros--cinta .ab-patros__nivel{ display: block; }
.ab-patros--cinta.ab-patros--banda .ab-patros__nivelRotulo{ margin-bottom: 8px; }
.ab-patros--cinta:not(.ab-patros--color) .home-circle__logo{ filter: grayscale(1); opacity: .78; }
.ab-patros--cinta .home-circle__item:hover .home-circle__logo{ filter: grayscale(0); opacity: 1; }

/* buscador de miembros del panel lateral --------------------------------- */

.ab-ed-buscador .ab-ed-botones{ margin: 4px 0 12px; }
.ab-ed-resultados{ margin: 0; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; }
.ab-ed-resultado{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.ab-ed-resultado:hover{ background: #f0f0f0; }
.ab-ed-resultado img{ width: 46px; height: 32px; object-fit: contain; flex: 0 0 46px; }
.ab-ed-resultado__sinlogo{ width: 46px; text-align: center; color: #9aa7b4; }
.ab-ed-resultado__nombre{ flex: 1 1 auto; font-size: 13px; line-height: 1.35; }
.ab-ed-resultado__nivel{
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b7785;
  border: 1px solid #dbe2ea;
  border-radius: 10px;
  padding: 1px 7px;
}
/* logos anchos: que no se coman la fila */

/* 9 · referencias — caja de fuentes al cierre --------------------------- */

.ab-refs--caja{
  background: var(--ab-fondo);
  border-radius: var(--ab-radio);
  padding: 28px 32px;
}
.ab-refs__rotulo{
  margin: 0 0 16px;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ab-navy);
}
.ab-refs--caja .ab-refs__lista{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ab-refs--caja .ab-ref{ display: flex; align-items: stretch; }
.ab-ref__card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--ab-linea);
  border-radius: 8px;
  text-decoration: none;
}
a.ab-ref__card:hover{ border-color: var(--ab-azul); }
.ab-ref__dominio{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--amcham-font-heading, inherit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ab-azul);
  overflow-wrap: anywhere;
}
.ab-refs--caja .ab-ref__titulo{ font-size: 15px; line-height: 1.4; }
.ab-refs--caja.is-style-oscuro{ background: transparent; padding: 0; }
.ab-refs--caja.is-style-oscuro .ab-ref__card{ background: rgba(255,255,255,.06); }
@media (max-width: 767px){
  .ab-refs--caja .ab-refs__lista{ grid-template-columns: 1fr; }
}
@media (max-width: 478px){
  .ab-refs--caja{ padding: 22px 20px; }
}

/* =========================================================
   El lienzo del editor con la pinta del front (19 sep 2026)
   Nada de esto llega al sitio: `.editor-styles-wrapper` solo
   existe dentro del iframe del editor de bloques.
   ========================================================= */

/* La herramienta de edición aparece cuando se trabaja el bloque, no antes */
.editor-styles-wrapper .wp-block:not(.is-selected):not(.has-child-selected) .ab-ed-agregar,
.editor-styles-wrapper .wp-block:not(.is-selected):not(.has-child-selected) .ab-ed-pegar,
.editor-styles-wrapper .wp-block:not(.is-selected):not(.has-child-selected) .ab-ed-chips,
.editor-styles-wrapper .wp-block:not(.is-selected):not(.has-child-selected) .ab-ed-botones,
.editor-styles-wrapper .wp-block:not(.is-selected):not(.has-child-selected) .ab-ed-mandos,
.editor-styles-wrapper .wp-block:not(.is-selected):not(.has-child-selected) .ab-ed-nivel{ display: none !important; }

/* Los marcadores de los campos vacíos, apagados mientras no se edita el bloque */
.editor-styles-wrapper .wp-block:not(.is-selected):not(.has-child-selected) .ab [data-rich-text-placeholder]::after{ opacity: .3; }

/* La galería enseña lo mismo que el front; al seleccionarla salen todas las fotos */
.editor-styles-wrapper .wp-block.is-selected .ab-galeria__item.is-oculta,
.editor-styles-wrapper .wp-block.has-child-selected .ab-galeria__item.is-oculta{ display: block; }

/* Las vistas previas van a color pleno: el editor debe verse como el sitio */
.editor-styles-wrapper .ab-ed-estatico{ opacity: 1; }
.editor-styles-wrapper .ab-ed-ico{ display: inline-flex; align-items: center; justify-content: center; }
.editor-styles-wrapper .ab-ed-ico svg,
.editor-styles-wrapper .ab-ed-ico i{ display: block; }
.editor-styles-wrapper .btn.ab-ed-estatico{ cursor: default; }

/* 10 · cita — el retrato se elige desde el propio bloque */
.editor-styles-wrapper .ab-cita .ab-ed-media--retrato{ flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: rgb(0 0 0 / .06); }
.editor-styles-wrapper .ab-cita--degradado .ab-ed-media--retrato{ flex-basis: 48px; width: 48px; height: 48px; background: rgb(255 255 255 / .18); box-shadow: 0 0 0 1.5px #fff; }
.editor-styles-wrapper .ab-cita .ab-ed-media--retrato .ab-ed-media__vacio{ min-height: 0; height: 100%; border: 0; border-radius: 50%; font-size: 9px; letter-spacing: .02em; color: inherit; opacity: .7; }
.editor-styles-wrapper .ab-cita--degradado .ab-ed-media--retrato .ab-ed-media__vacio{ color: #fff; }


/* ======================================================================
   visor en móvil (galería) — 21 sep 2026
   Flechas chicas y translúcidas, barra de compartir sin círculo relleno
   (y reducida a la hoja del sistema cuando existe) y transición del swipe.
   Va al final a propósito: gana por orden a las reglas de arriba.
   ====================================================================== */

.ab-visor__caja{ transition: transform .22s ease, opacity .22s ease; }
.ab-visor__caja.is-arrastrando{ transition: none; }

/* el foco lo mueve el JS al abrir: el anillo solo para quien navega con teclado */
.ab-visor__cerrar:focus-visible,
.ab-visor__ant:focus-visible,
.ab-visor__sig:focus-visible{ outline: 0; }
html.js-teclado .ab-visor__cerrar:focus-visible,
html.js-teclado .ab-visor__ant:focus-visible,
html.js-teclado .ab-visor__sig:focus-visible{
  outline: 2px solid var(--amcham-color-blue, #0073C0);
  outline-offset: 2px;
}

@media (max-width: 767px){
  .ab-visor{ padding: 16px; }

  .ab-visor__ant,
  .ab-visor__sig{
    width: 34px;
    height: 34px;
    font-size: 13px;
    background: rgba(19, 62, 127, .62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  .ab-visor__ant{ left: 8px; }
  .ab-visor__sig{ right: 8px; }
  .ab-visor__ant:hover,
  .ab-visor__sig:hover{ background: rgba(19, 62, 127, .62); color: #fff; }
  .ab-visor__ant:active,
  .ab-visor__sig:active{ background: rgba(255, 255, 255, .92); color: var(--amcham-color-navy, #133E7F); }

  /* compartir: ícono suelto sobre el fondo oscuro, sin círculo navy */
  .ab-visor .ab-compartir{ gap: 10px; }
  .ab-visor .ab-compartir__btn{
    width: 34px;
    height: 34px;
    font-size: 14px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .82);
    box-shadow: none;
  }
  .ab-visor .ab-compartir__btn:hover{ background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .82); }
  .ab-visor .ab-compartir__btn:active{ background: #fff; color: var(--amcham-color-navy, #133E7F); }

  /* con hoja del sistema disponible quedan solo «Compartir» y la descarga */
  .ab-visor .ab-compartir--nativa [data-red="whatsapp"],
  .ab-visor .ab-compartir--nativa [data-red="facebook"],
  .ab-visor .ab-compartir--nativa [data-red="x"],
  .ab-visor .ab-compartir--nativa [data-red="linkedin"]{ display: none; }
}


/* ======================================================================
   pista de swipe (galería) — 21 sep 2026
   En móvil el visor se maneja con el dedo: las flechas se van de la vista
   (siguen en el árbol de accesibilidad y vuelven con el teclado) y al abrir
   la primera foto de la visita la caja da un empujón y sale un rótulo.
   ====================================================================== */

@keyframes ab-pista-empujon{
  0%, 100% { transform: translateX(0); }
  16%      { transform: translateX(-26px); }
  32%      { transform: translateX(0); }
  48%      { transform: translateX(-26px); }
  64%      { transform: translateX(0); }
}
@keyframes ab-pista-ic{
  0%, 100% { transform: translateX(3px); opacity: .5; }
  50%      { transform: translateX(-3px); opacity: 1; }
}

.ab-visor__pista{
  display: none;
  margin: 0;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  line-height: 1.3;
  opacity: 0;
  transition: opacity .45s ease;
}
.ab-visor__pista.is-viva{ opacity: 1; }
.ab-visor__pista-ic{ display: inline-flex; font-size: 11px; }

@media (max-width: 767px){
  /* las flechas salen de la vista pero no del árbol de accesibilidad */
  .ab-visor__ant,
  .ab-visor__sig{
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .ab-visor__ant:focus,
  .ab-visor__sig:focus{ opacity: 1; pointer-events: auto; }

  .ab-visor__pista{ display: flex; }
  .ab-visor__caja.is-pista{
    animation: ab-pista-empujon 2.1s cubic-bezier(.4, 0, .2, 1) .35s 1;
  }
  .ab-visor__pista-ic{ animation: ab-pista-ic 1.1s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce){
  .ab-visor__caja.is-pista{ animation: none; }
  .ab-visor__pista-ic{ animation: none; }
}